Interactive Data Visualization for the Web, 2nd Edition

Chapter 8. Axes

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.

Figure 8-1. Large, scaled scatterplot

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

Introducing Axes

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

Setting Up an Axis

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