D3.js Quick Start Guide

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. ...