Setting dynamic domains

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 the visual range (for example 600 to 0)
var yMin = d3.min(runs, function(datum, index){
    //compare distance properties of each item in...