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,6 +101,19 @@ d3.select('svg').on('click', function(){
 		);
 });
 
+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')
@@ -114,6 +126,7 @@ d3.select('svg')
 		.attr('transform', 'translate(0,'+HEIGHT+')')
 		.call(bottomAxis); //apply the axis to it
 
+
 	var zoomCallback = function(){
 		lastTransform = d3.event.transform; //save the transform for later inversion with clicks
 		d3.select('#points').attr("transform", d3.event.transform);
@@ -123,6 +136,10 @@ var zoomCallback = function(){
 	var zoom = d3.zoom().on('zoom', zoomCallback);
 	d3.select('svg').call(zoom);
 
+	generateCircles(data);
+});
+
+
 
 //Date Parsing/Formatting
 // var dateSting = '20160101';