Scales

What's a scale?

D3 scales are functions that map from an input “domain” of data values to an output “range” of visual values (typically pixel positions, lengths, colors, etc.). They form a core part of D3’s data-driven approach, enabling you to translate raw data into on-screen representations in a declarative way. They're used extensively in nivo components.

You'll often encounter scale controls in the interactive documentation. But because scales heavily depend on the shape of the data, which is pre-defined in these docs, you might not be able to try-out all available scale types directly there.

Linear scale

A linear scale is the most basic quantitative (continuous) scale in D3. It defines a piecewise‐linear mapping from a numeric input domain to a numeric output range.

Linear scale configuration

The most minimal linear scale configuration is: scale={{ type: 'linear' }}

Band scale

A band scale is an ordinal scale that maps a set of discrete input values (your categories) to a continuous numeric output range by dividing that range into uniform “bands”.

It’s perfect for bar charts or any time you need evenly-spaced slots for each category.

Band scale configuration

The most minimal band scale configuration is: scale={{ type: 'band' }}

Log scale

A log scale is a continuous quantitative scale that transforms strictly positive input values by applying a logarithmic function, so that equal ratios in the domain map to equal additive steps in the output range.

It’s ideal when your data spans multiple orders of magnitude and you want each constant factor (e.g. 1→10→100) to occupy the same visual interval, but it only handles values > 0 and cannot represent zeros or negatives.

Log scale configuration

The most minimal log scale configuration is: scale={{ type: 'log' }}

Symlog scale

A symlog scale is a continuous quantitative scale that combines linear behavior around zero with logarithmic behavior farther out, on both the positive and negative sides.

It’s ideal when your data spans several orders of magnitude but also includes values near zero (including negatives) that you don’t want “crushed” by a pure log scale.

Symlog scale configuration

The most minimal symlog scale configuration is: scale={{ type: 'symlog' }}