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

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

Start Free Trial

No credit card required