Scales

Using scales in nivo components

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.

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.

Example

The way to define a linear scale for a nivo chart is to use a configuration object with the following properties:

Nivo doesn't expose all of D3's scaleLinear API, but it does provide a few useful properties to customize the scale:

01020304050607080start01020304050607080middle01020304050607080end05101520253035start05101520253035middle05101520253035end

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.

Example

The way to define a linear scale for a nivo chart is to use a configuration object with the following properties:

Nivo doesn't expose all of D3's scaleLinear API, but it does provide a few useful properties to customize the scale:

01020304050607080start01020304050607080middle01020304050607080end05101520253035start05101520253035middle05101520253035end