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', 'x-axis')
    .call(bottomAxis)
    .attr('transform', 'translate(0,'+HEIGHT+')');

var leftAxis = d3.axisLeft(yScale);
d3.select('#container')
    .append('g')
    .attr('id', 'y-axis')
    .call(leftAxis);

//
// code for create table omitted here...
//

d3.select('#container').on('click', function(){
    //
    // click handler functionality omitted
    //
});

//
// zoomCallback code omitted here
//

var zoom = d3.zoom()
    .on('zoom', zoomCallback);
d3.select('#container').call(zoom); 

And, lastly, adjust CSS to replace svg { with #container {:

#container {
    overflow: visible;
    margin-bottom: 50px;
}

Now circles should be hidden once they move beyond the bounds of the inner <svg> element: