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.

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

Get Interactive Data Visualization for the Web, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.