make initial render show all data points

public/js/app.js

@@ -8,20 +8,13 @@ d3.select('svg')
 var convertYDataPointToVisualPoint = d3.scaleLinear();
 var convertXDataPointToVisualPoint = d3.scaleTime();
 
-convertYDataPointToVisualPoint.range([HEIGHT,0]);
-convertYDataPointToVisualPoint.domain([0, 5]);
-
-convertXDataPointToVisualPoint.range([0,WIDTH]);
-convertXDataPointToVisualPoint.domain([new Date('2016-1-1'), new Date('2017-1-1')]);
-
 // console.log(convertXDataPointToVisualPoint(new Date('2016-12-1')));
 // console.log(convertXDataPointToVisualPoint.invert(490));
 
 // console.log(convertYDataPointToVisualPoint(0.1));
 // console.log(convertYDataPointToVisualPoint.invert(490));
 
-var render = function(){
-	d3.json('/runs', function(error, data){
+var generateCircles = function(data){
 	var circles = d3.select('#points').selectAll('circle').data(data, function(datum){
 		return datum.id;
 	});
@@ -72,10 +65,16 @@ var render = function(){
 	//...
 	//apply it to a selection
 	d3.selectAll('circle').call(dragBehavior);
+}
+var render = function(){
+	d3.json('/runs', function(error, data){
+		generateCircles(data);
 	});
 };
 
-render();
+// window.setTimeout(function(){
+// 	render();
+// },2000)
 
 var lastTransform = null;
 d3.select('svg').on('click', function(){
@@ -102,26 +101,44 @@ d3.select('svg').on('click', function(){
 		);
 });
 
-var leftAxis = d3.axisLeft(convertYDataPointToVisualPoint); //create a left axis based on the yScale
-var bottomAxis = d3.axisBottom(convertXDataPointToVisualPoint); //create a left axis based on the yScale
-d3.select('svg')
+d3.json('/runs', function(error, data){
+	var distanceDomain = d3.extent(data, function(element){
+		return element.distance;
+	});
+	var dateDomain = d3.extent(data, function(element){
+		return new Date(element.date);
+	});
+	convertYDataPointToVisualPoint.range([HEIGHT,0]);
+	convertYDataPointToVisualPoint.domain(distanceDomain);
+
+	convertXDataPointToVisualPoint.range([0,WIDTH]);
+	convertXDataPointToVisualPoint.domain(dateDomain);
+
+	var leftAxis = d3.axisLeft(convertYDataPointToVisualPoint); //create a left axis based on the yScale
+	var bottomAxis = d3.axisBottom(convertXDataPointToVisualPoint); //create a left axis based on the yScale
+	d3.select('svg')
 		.append('g') //append a group element
 		.attr('id', 'y-axis')
 		.call(leftAxis); //apply the axis to it
-d3.select('svg')
+	d3.select('svg')
 		.append('g') //append a group element
 		.attr('id', 'x-axis')
 		.attr('transform', 'translate(0,'+HEIGHT+')')
 		.call(bottomAxis); //apply the axis to it
 
-var zoomCallback = function(){
+
+	var zoomCallback = function(){
 		lastTransform = d3.event.transform; //save the transform for later inversion with clicks
 		d3.select('#points').attr("transform", d3.event.transform);
 		d3.select('#x-axis').call(bottomAxis.scale(d3.event.transform.rescaleX(convertXDataPointToVisualPoint)));
 		d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(convertYDataPointToVisualPoint)));
-}
-var zoom = d3.zoom().on('zoom', zoomCallback);
-d3.select('svg').call(zoom);
+	}
+	var zoom = d3.zoom().on('zoom', zoomCallback);
+	d3.select('svg').call(zoom);
+
+	generateCircles(data);
+});
+
 
 
 //Date Parsing/Formatting