use extent to find domains for x/y scale

public/js/app.js

@@ -57,8 +57,7 @@ var logRun = function(runObject, callback){
 
 //Render circles
 //var dateParser = d3.time.format("%Y-%m-%d %H:%M:%S.%L +00:00"); -- can use this if date format is not proper
-var render = function(){
-	d3.json('/runs', function(error, data){ //get all run data
+var generateCircles = function(error, data){
 	//bind circles with data
 	var circles = d3.select('#points').selectAll('circle')//ghost selction of circles
 		.data(data, function(d){
@@ -82,11 +81,11 @@ var render = function(){
 	//attach event handlers after circle creation
 	attachDragHandlers(); //attach drag handlers
 	attachDeleteHandlers(); //attach delete handlers
-	});
+}
+var render = function(){
+	d3.json('/runs', generateCircles);
 };
 
-render(); //render on page load
-
 //Attach click handler to circles
 var attachDeleteHandlers = function(){
 	d3.selectAll('circle').on('click', function(d){
@@ -133,19 +132,38 @@ var attachDragHandlers = function(){
 	d3.selectAll('circle').call(drag);
 };
 
-//create axes
-var xAxis = d3.axisBottom(xScale); //create axis, not yet applied
-var yAxis = d3.axisLeft(yScale); //create axis, not yet applied
-d3.select('svg').append('g').attr('id', 'x-axis').attr('transform', 'translate(0,' + HEIGHT + ')').call(xAxis); //apply xAxis, also, x axis must be moved to bottom of svg
-d3.select('svg').append('g').attr('id', 'y-axis').call(yAxis); //y axis is good as it is, apply it
+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);
+	});
+
+	if(distanceDomain[0] !== undefined && distanceDomain[1] !== undefined){
+		yScale.domain(distanceDomain);
+	}
+
+	if(dateDomain[0] !== undefined && dateDomain[1] !== undefined){
+		xScale.domain(dateDomain);
+	}
+
+	//create axes
+	var xAxis = d3.axisBottom(xScale); //create axis, not yet applied
+	var yAxis = d3.axisLeft(yScale); //create axis, not yet applied
+	d3.select('svg').append('g').attr('id', 'x-axis').attr('transform', 'translate(0,' + HEIGHT + ')').call(xAxis); //apply xAxis, also, x axis must be moved to bottom of svg
+	d3.select('svg').append('g').attr('id', 'y-axis').call(yAxis); //y axis is good as it is, apply it
 
-//callback for zooming
-var zoomCallback = function(){
+	//callback for zooming
+	var zoomCallback = function(){
 		lastTransform = d3.event.transform; //save the transform for later inversion with clicks
 		d3.select('#points').attr("transform", d3.event.transform); //apply transform to g element containing circles
 		//recalculate the axes
 		d3.select('#x-axis').call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
 		d3.select('#y-axis').call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
-}
-var zoom = d3.zoom().on('zoom', zoomCallback); //create zoom behavior
-d3.select('svg').call(zoom); //apply zoom behavior to svg
+	}
+	var zoom = d3.zoom().on('zoom', zoomCallback); //create zoom behavior
+	d3.select('svg').call(zoom); //apply zoom behavior to svg
+
+	generateCircles(null, data);
+});

views/index.ejs

@@ -22,7 +22,7 @@
 				<!-- log out button -->
 				<input type="submit" value="Log Out"/>
 			</form>
-			<script src="https://d3js.org/d3.v4.min.js"></script>
+			<script src="/js/d3.v4.min.js"></script>
 			<script src="/js/app.js"></script>
 		<% } else { %>
 			<!-- if not logged in, show sign up/log in links -->