Avoiding redrawing the entire screen during rendering

At the moment, every time we call render(), we wipe all <circle> elements from <svg>. This is inefficient. Let's just remove the ones we don't want

At the top of the render() function, assign d3.select('#points').selectAll('circle').data(runs) to a variable, so we can use it later. This helps preserve how DOM elements are assigned to data elements in the next sections. Find this at the top of the render() function declaration:

d3.select('#points').html('');
d3.select('#points').selectAll('circle')
 .data(runs)
 .enter()
 .append('circle');

Change it to this:

d3.select('#points').html('');
var circles = d3.select('#points')
 .selectAll('circle')
 .data(runs);
circles.enter().append('circle');