Updating axes when zooming and panning

Now when we zoom, the points move in/out. When we pan, they move vertically/horizontally. Unfortunately, the axes don't update accordingly. Let's first add IDs to the <g> elements that contain them. Find the following code:

var bottomAxis = d3.axisBottom(xScale);
d3.select('svg')
    .append('g')
    .call(bottomAxis)
    .attr('transform', 'translate(0,'+HEIGHT+')');
var leftAxis = d3.axisLeft(yScale);
d3.select('svg')
    .append('g')
    .call(leftAxis);

Add .attr('id', 'x-axis') after the first .append('g'), and .attr('id', 'y-axis') after the second .append('g'):

d3.select('svg')
    .append('g')
    .attr('id', 'x-axis') //add an id
    .call(bottomAxis)
    .attr...