diff --git a/public/app.js b/public/app.js index aa1029e..4276f18 100644 --- a/public/app.js +++ b/public/app.js @@ -7,7 +7,7 @@ const parseTime = d3.timeParse("%B %e, %Y"); const formatTime = d3.timeFormat("%B %e, %Y"); -const render = () => { +const renderPoints = () => { const circles = d3.select('#points') .selectAll('circle') .data(instances, (datum) => { @@ -27,14 +27,12 @@ const render = () => { } -window.onload = async ()=>{ +const setupGraph = ()=>{ d3.select('svg'); d3.select('svg') .style('width', WIDTH) .style('height', HEIGHT); - instances = await d3.json('/instances'); - xScale = d3.scaleTime(); xScale.range([0,WIDTH]); const xDomain = d3.extent(instances, (datum, index) => { @@ -48,6 +46,26 @@ window.onload = async ()=>{ return datum.ninety_day_outcomes; }) yScale.domain(yDomain); +} + +const createAxes = () => { + const bottomAxis = d3.axisBottom(xScale); + d3.select('#container') + .append('g') + .attr('id', 'x-axis') + .call(bottomAxis) + .attr('transform', 'translate(0,'+HEIGHT+')'); - render(); + const leftAxis = d3.axisLeft(yScale); + d3.select('#container') + .append('g') + .attr('id', 'y-axis') + .call(leftAxis); +} + +window.onload = async ()=>{ + instances = await d3.json('/instances'); + setupGraph(); + createAxes(); + renderPoints(); } diff --git a/public/index.html b/public/index.html index a74971e..06c979d 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,9 @@
See how instances did in comparisson to others