axes

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();
 }

public/index.html

@@ -11,7 +11,9 @@
 		<h1>Outcomes Tracker</h1>
 		<p>See how instances did in comparisson to others</p>
 		<svg id="container">
-			<g id="points"></g>
+			<svg>
+				<g id="points"></g>
+			</svg>
 		</svg>
 	</body>
 </html>