At the moment, we're setting arbitrary min/max values for the domains of both distance and date. D3 can find the min/max of a dataset, so that our graph displays just the data ranges we need. All we need to do is pass the min/max methods a callback that gets called for each item of data in the runs array. D3 uses the callback to determine which properties of the datum object to compare for min/max.
Go to this part of the code:
var yScale = d3.scaleLinear(); //create the scale yScale.range([HEIGHT, 0]); //set the visual range (for example 600 to 0) yScale.domain([0, 10]); //set the data domain (for example 0 to 10)
Change it to this:
var yScale = d3.scaleLinear(); //create the scale yScale.range([HEIGHT, 0]); //set ...
