Let's set up a click handler on all <circle> elements so that when the user clicks on <circle>, D3 will remove that circle and its associated data element from the array. Add the following code at the bottom of the render function declaration we wrote in the last section. We do this so that the click handlers are attached after the circles are created:
//put this at the bottom of the render function,
//so that click handlers are attached when the circle is created
d3.selectAll('circle').on('click', function(datum, index){
//stop click event from propagating to
//the SVG element and creating a run
d3.event.stopPropagation();
//create a new array that has removed the run
//with the correct id. Set it to the runs var
runs = runs.filter(function(run, index){
return run.id != datum.id;
});
render...