Sequential & diverging scales
Color scales
Color scales are very common in data visualization. Different hues (red, yellow, blue) that represent different categories or color gradients that represent continuously increasing values.
d3scalechromatic provides a number of color scales. This chapter explains how they can be used. These scales are friendly for colorblind users and remain distinguishable in graystyle.
Sequential color scales represent continuous numeric values. A sequential color scale is a color gradient, i.e., an ordered color progression, like colors from light blue to dark blue, that represent numeric values from, say, 0 to 100. D3 provides a few cyclical schemes ("rainbow" schemes), but the sequential schemes are more suitable. Sequential gradients can be in one hue, but gradients with multiple hues (e.g. from purple to red) generally provides higher color contrast, making it easier for the user to read the visualization.
Diverging color scales represent continuous numeric values around a neutral midpoint. For instance, a color gradient form dark blue to white (neutral midpoint) for temperatures below zero degrees Celsius and a color gradient from white to dark red for temperatures above zero degrees Celsius, like in a heat map.
Gradients (sequential or diverging) can also be classed, like in a choropleth map. These classed or quantized gradients are discrete, as opposed to unclassed (continuous) gradients. The numeric values that they represent are still continuous though. Quantile, quantize and threshold scales (explained in a later chapter) can be used to establish classed quantitative color scales.
Categorical color scales (or qualitative color scales) represent discrete values, to distinguish categories. The categories, and consequently the colors, have no mutual order. One color does not have a higher or lower value than the other color. Categorical scales will be explained in a later chapter.
To summarize:

Quantitative color scales

Sequential
 unclassed (continuous)
 classed (discrete)

Diverging
 unclassed (continuous)
 classed (discrete)

Sequential
 Qualitative aka categorical color scales (discrete)
Also see types of input and output.
Sequential scales
d3.scaleSequential
is similar to d3.scaleLinear
in that it maps a continuous, numeric input domain to a continuous output range
by a linear function. Unlike d3.scaleLinear
, the output range is interpreted as an interpolator, rather than an array of values.
let colorScale
colorScale = d3.scaleSequential([0, 20], d3.interpolateBlues);
// is equivalent to:
colorScale = d3.scaleSequential(d3.interpolateBlues)
.domain([0, 20]); // default doamin is [0,1]
// is equivalent to:
colorScale = d3.scaleSequential()
.domain([0, 20])
.interpolator(d3.interpolateBlues);
However, the range can be specified as an array, but this is equivalent
to using d3.scaleLinear
with the same range (it uses the default interpolator d3.interpolate()
).
let colorScale;
colorScale = d3.scaleSequential()
.domain([0, 20])
.range(["purple", "yellow"]);
// is equivalent to:
colorScale = d3.scaleSequential()
.domain([0, 20])
.interpolator(d3.interpolateRgb("purple", "yellow")); // 'mixing' two colors
// is equivalent to:
colorScale = d3.scaleLinear()
.domain([0, 20])
.range(["purple", "yellow"]);
// next does not work:
colorScale = d3.scaleSequential()
.domain([0, 20])
.range(d3.interpolateBlues);
// next does not work:
colorScale = d3.scaleLinear()
.domain([0, 20])
.range(d3.interpolateBlues);
A sequential scale’s domain must be numeric.
d3.scaleSequential
does not have an invert
method.
The scale's domain is linearly mapped to the interpolator's domain ([0,1]
).
For each input value d
, the interpolator function is executed for the associated value t
(0 ≤ t ≤ 1).
const myScale = d3.scaleSequential()
.domain([0, 20])
.interpolator(t => `corresponding value: ${t}`); // interpolator function
console.log(myScale(0)) ; // logs: "corresponding value: 0"
console.log(myScale(10)) ; // logs: "corresponding value: 0.5"
console.log(myScale(20)) ; // logs: "corresponding value: 1"
const data = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
const colorScale = d3.scaleSequential()
.domain([0, 20])
.interpolator(t => `hsl(${t * 360}, 100%, 50%)`); // hsl color code: https://developer.mozilla.org/enUS/docs/Web/CSS/color_value/hsl
const container = d3.select("#container");
container
.selectAll("span")
.data(data)
.join("span")
.style("background", d => colorScale(d))
.style("width", (container.node().offsetWidth  2)/data.length+"px");
Sequential scales are typically used for color encoding. D3 provides a number of interpolators with preset color schemes. A few examples:
const colorScale = d3.scaleSequential()
.domain([0, 20])
.interpolator(d3.interpolateInferno);
const colorScale = d3.scaleSequential()
.domain([0, 20])
.interpolator(d3.interpolateTurbo);
const colorScale = d3.scaleSequential()
.domain([0, 20])
.interpolator(d3.interpolateYlOrRd);
Nonlinear sequential scales
d3.scaleSequential
maps the scale's domain to the interpolator's domain by a linear function.
D3 also provide a number of sequential scales that maps the scale's domain to the interpolator's domain by a nonlinear function.
d3.scaleSequentialPow
, maps the domain by a exponential (power) function, before calling the interpolator.d3.scaleSequentialSqrt
, maps the domain by a squareroot function, before calling the interpolator.d3.scaleSequentialLog
, maps the domain by a logarithmic function, before calling the interpolator.d3.scaleSequentialSymlog
, maps the domain by a symlog function, before calling the interpolator.
In the next chapter these transformations (for nonsequential scales) are described in more detail.
Diverging scales
d3.scaleDiverging
is similar to d3.scaleSequential
, except
d3.scaleDiverging
's domain includes exactly three values: two extremes, and a central point (default [0, 0.5, 1]
).
Diverging scales are useful to visualize phenomena that go in two opposite directions, around a neutral midpoint,
like positive values for a population that increases and negative values for a population that decrease, or temperatures above and below zero degrees Celsius.
Like sequential scales, diverging scales are typically used for color encoding and work well with diverging color interpolators (they typically join two sequential scales around a midpoint).
const data = [12,11,10,9,8,7,6,5,4,3,2,1,0,1,2,3,4,5,6,7,8,9,10,11,12];
const extent = d3.extent(data, d => d);
const colorScale = d3.scaleDiverging(d3.interpolateRdBu)
.domain([extent[0], 0, extent[1]])
const container = d3.select("#container");
container
.selectAll("span")
.data(data)
.join("span")
.style("background", d => colorScale(d))
.style("width", (container.node().offsetWidth  2)/data.length+"px");
const colorScale = d3.scaleDiverging(t => d3.interpolateRdBu(1  t))
.domain([extent[0], 0, extent[1]])
In the example above in the second scale, the interpolator is a reversed d3.interpolateRdBu
by applying d3.interpolateRdBu
to 1  t
instead of t
.
Just like sequential scales, D3 also provides nonlinear variants of diverging scales:
d3.scaleDivergingPow
, d3.scaleDivergingSqrt
, d3.scaleDivergingLog
and d3.scaleDivergingSymlog
.