Hiding elements beyond an axis

If you pan or zoom extensively, you'll notice that the circles are visible beyond the bounds of the axes:

To hide elements once they get beyond an axis, we can just add an outer SVG with id="container" around our current <svg> element in index.html:

<svg id="container">
    <svg>
        <g id="points"></g>
    </svg>
</svg>

Now replace all d3.select('svg') code with d3.select('#container'). You can perform a find-and-replace. There should be five instances to change:

d3.select('#container')
    .style('width', WIDTH)
    .style('height', HEIGHT);

//
// lots of code omitted here, including render() declaration...
//

var bottomAxis = d3.axisBottom(xScale);
d3.select('#container')
    .append('g')
    .attr('id...