Skip to content
On this page

# Sequential scales ​

Sequential scales are similar to linear scales in that they map a continuous, numeric input domain to a continuous output range. Unlike linear scales, the input domain and output range of a sequential scale always has exactly two elements, and the output range is typically specified as an interpolator rather than an array of values. Sequential scales are typically used for a color encoding; see also d3-scale-chromatic. These scales do not expose invert and interpolate methods. There are also log, pow, symlog, and quantile variants of sequential scales.

## scaleSequential(domain, interpolator) ​

Examples · Source · Constructs a new sequential scale with the specified domain and interpolator function or array.

js
``const color = d3.scaleSequential([0, 100], d3.interpolateBlues);``

If domain is not specified, it defaults to [0, 1].

js
``const color = d3.scaleSequential(d3.interpolateBlues);``

If interpolator is not specified, it defaults to the identity function.

js
``const identity = d3.scaleSequential();``

When the scale is applied, the interpolator will be invoked with a value typically in the range [0, 1], where 0 represents the minimum value and 1 represents the maximum value. For example, to implement the ill-advised angry rainbow scale (please use interpolateRainbow instead):

js
``const rainbow = d3.scaleSequential((t) => d3.hsl(t * 360, 1, 0.5) + "");``

If interpolator is an array, it represents the scale’s two-element output range and is converted to an interpolator function using interpolate.

js
``const color = d3.scaleSequential(["red", "blue"]);``

A sequential scale’s domain must be numeric and must contain exactly two values.

## sequential.interpolator(interpolator) ​

If interpolator is specified, sets the scale’s interpolator to the specified function.

js
``const color = d3.scaleSequential().interpolator(d3.interpolateBlues);``

If interpolator is not specified, returns the scale’s current interpolator.

js
``color.interpolator() // d3.interpolateBlues``

## sequential.range(range) ​

See linear.range. If range is specified, the given two-element array is converted to an interpolator function using interpolate.

js
``const color = d3.scaleSequential().range(["red", "blue"]);``

The above is equivalent to:

js
``const color = d3.scaleSequential(d3.interpolate("red", "blue"));``

## sequential.rangeRound(range) ​

See linear.rangeRound. If range is specified, implicitly uses interpolateRound as the interpolator.

## scaleSequentialLog(domain, range) ​

Returns a new sequential scale with a logarithmic transform, analogous to a log scale.

## scaleSequentialPow(domain, range) ​

Returns a new sequential scale with an exponential transform, analogous to a power scale.

## scaleSequentialSqrt(domain, range) ​

Returns a new sequential scale with a square-root transform, analogous to a sqrt scale.

## scaleSequentialSymlog(domain, range) ​

Returns a new sequential scale with a symmetric logarithmic transform, analogous to a symlog scale.

## scaleSequentialQuantile(domain, range) ​

Source · Returns a new sequential scale with a p-quantile transform, analogous to a quantile scale.

## sequentialQuantile.quantiles(n) ​

Source · Returns an array of n + 1 quantiles.

js
``````const color = d3.scaleSequentialQuantile()
.domain(penguins.map((d) => d.body_mass_g))
.interpolator(d3.interpolateBlues);

color.quantiles(4); // [2700, 3550, 4050, 4750, 6300]``````

For example, if n = 4, returns an array of five numbers: the minimum value, the first quartile, the median, the third quartile, and the maximum.

Resources
Observable
© 2023 Mike Bostock and Observable, Inc. ISC License