Creating a click handler

Let's say that we want it so that when the user clicks on the <svg> element, it creates a new run. Add the following to the bottom of app.js:

d3.select('svg').on('click', function(){
    //gets the x position of the mouse relative to the svg element
    var x = d3.event.offsetX;
    //gets the y position of the mouse relative to the svg element
    var y = d3.event.offsetY; 
    //get a date value from the visual point that we clicked on
    var date = xScale.invert(x);
    //get a numeric distance value from
    //the visual point that we clicked on
    var distance = yScale.invert(y); 

    //create a new "run" object
    var newRun = { 
        //generate a new id by adding 1 to the last run's id
        id: runs[runs.length-1].id+1, 
        //format the date object created above to a string
        date: formatTime...