Interactive Data Visualization for the Web, 2nd Edition

Chapter 7. Scales

“Scales are functions that map from an input domain to an output range.”

That’s Mike Bostock’s definition of D3 scales from an earlier version of the D3 docs, and there is no clearer way to say it.

The values in any dataset are unlikely to correspond exactly to pixel measurements for use in your visualization. Scales provide a convenient way to map those data values to new values useful for visualization purposes.

D3 scales are functions with parameters that you define. Once they are created, you call the scale function and pass it a data value, and it nicely returns a scaled output value. You can define and use as many scales as you like.

It might be tempting to think of a scale as something that appears visually in the final image—like a set of tick marks, indicating a progression of values. Do not be fooled! Those tick marks are part of an axis, which is a visual representation of a scale. A scale is a mathematical relationship, with no direct visual output. I encourage you to think of scales and axes as two different, yet related, elements.

This chapter addresses primarily linear scales, because they are most common and easiest understood. Once you understand linear scales, the others—ordinal, logarithmic, square root, and so on—will be a piece of cake.

Apples and Pixels

Imagine that the following dataset represents the number of apples sold at a roadside fruit stand each month:

var dataset = [ 100, 200, 300, 400, 500 ];

First of all, this is great news, ...