Updating data after a drag

Now we're going to add functionality so that when the user releases the mouse button, the data for the run object associated with the circle being dragged gets updated.

First, let's create the callback function that will get called when the user releases the mouse button. Toward the bottom of the render() function declaration, add the following code just above var drag = function(datum){:

var dragEnd = function(datum){
    var x = d3.event.x;
    var y = d3.event.y;

    var date = xScale.invert(x);
    var distance = yScale.invert(y);
   
    datum.date = formatTime(date);
    datum.distance = distance;
    createTable();
}

Now attach that function to dragBehavior so that it is called when the user stops dragging a circle. Look at the following code:

var dragBehavior = d3.drag()
    .on('drag', drag);

Change it to this:

var dragBehavior = d3...