Source: https://d3js.org/d3-scale/diverging

Skip to content

Return to top

Diverging scales ​

===========================================================================

Diverging 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 diverging scale always have exactly three elements, and the output range is typically specified as an interpolator rather than an array of values. Diverging 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 , and symlog variants of diverging scales.

scaleDiverging(domain, interpolator) ​

---

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

js

const color = d3.scaleDiverging([-1, 0, 1], d3.interpolateRdBu);

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

js

const color = d3.scaleDiverging(d3.interpolateRdBu);

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

js

const identity = d3.scaleDiverging();

When the scale is applied, the interpolator will be invoked with a value typically in the range [0, 1], where 0 represents the extreme negative value, 0.5 represents the neutral value, and 1 represents the extreme positive value.

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

js

const color = d3.scaleDiverging(["blue", "white", "red"]);

A diverging scale’s domain must be numeric and must contain exactly three values.

diverging.interpolator(interpolator) ​

---

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

js

const color = d3.scaleDiverging().interpolator(d3.interpolateRdBu);

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

js

color.interpolator() // d3.interpolateRdBu

diverging.range(range) ​

---

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

js

const color = d3.scaleDiverging().range(["blue", "white", "red"]);

The above is equivalent to:

js

const color = d3.scaleDiverging(d3.piecewise(["blue", "white", "red"]));

diverging.rangeRound(range) ​

---

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

scaleDivergingLog(domain, range) ​

---

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

scaleDivergingPow(domain, range) ​

---

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

scaleDivergingSqrt(domain, range) ​

---

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

scaleDivergingSymlog(domain, range) ​

---

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