Creating axes

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

//pass the appropriate scale in as a parametervar 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. ...

Get D3.js Quick Start Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.