O'Reilly logo

Interactive Data Visualization for the Web, 2nd Edition by Scott Murray

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 to be told on ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required