Having mastered the use of D3 scales, we now have the scatterplot shown in Figure 8-1, using the code from Chapter 7’s example *08_scaled_plot_sqrt_scale.html*.

Let’s add horizontal and vertical axes, so we can do away with the horrible red numbers cluttering up our chart.

Much like its scales, D3’s
*axes* are actually *functions* whose parameters you define. Unlike
scales, when an axis function is called, it doesn’t return a value, but
generates the visual elements of the axis, including lines, labels, and
ticks.

Note that the axis functions are SVG-specific, as they generate SVG elements. Also, axes are intended for use with quantitative scales (that is, scales that use numeric values, as opposed to ordinal, categorical ones).

There are four different axis function constructors, each one corresponding to a different orientation and placement of labels: `d3.axisTop`

, `d3.axisBottom`

, `d3.axisLeft`

, and `d3.axisRight`

. For vertical axes, use `d3.axisLeft`

or `d3.axisRight`

, with ticks and labels appearing to the left and right, respectively. For horizontal axes, use `d3.axisTop`

or `d3.axisBottom`

, with ticks and labels appearing above and below, respectively.

We’ll start by using `d3.axisBottom()`

to create a generic axis function:

`var`

`xAxis`

`=`

`d3`

`.`

`axisBottom`

`();`

At a minimum, each axis also needs to be told on ...

Start Free Trial

No credit card required