Creating axes

D3 can automatically generate axes for you. Add the following to the bottom ofapp.js:

//pass the appropriate scale in as a parameter
var bottomAxis = d3.axisBottom(xScale);

This creates a bottom axis generator that can be used to insert an axis into any element you choose. Add the following code to the bottom of app.js to append a <g> element inside our SVG element and then insert a bottom axis inside it:

d3.select('svg')
    .append('g') //put everything inside a group
    .call(bottomAxis); //generate the axis within the group

Here's what Chrome should look like:

Display of Chrome

We want the axis to be at the bottom of the SVG, though. Modify the code we just wrote so it looks like this (note: we removed a; after.call(bottomAxis) and added.attr('transform', 'translate(0,'+HEIGHT+')');):

//pass the appropriate...