W3cubDocs

/D3.js 5

d3-scale-chromatic

This module provides sequential, diverging and categorical color schemes designed to work with d3-scale’s d3.scaleOrdinal and d3.scaleSequential. Most of these schemes are derived from Cynthia A. Brewer’s ColorBrewer. Since ColorBrewer publishes only discrete color schemes, the sequential and diverging scales are interpolated using uniform B-splines.

For example, to create a categorical color scale using the Accent color scheme:

var accent = d3.scaleOrdinal(d3.schemeAccent);

To create a sequential discrete nine-color scale using the Blues color scheme:

var blues = d3.scaleOrdinal(d3.schemeBlues[9]);

To create a diverging, continuous color scale using the PiYG color scheme:

var piyg = d3.scaleSequential(d3.interpolatePiYG);

Installing

If you use NPM, npm install d3-scale-chromatic. Otherwise, download the latest release or load directly from d3js.org as a standalone library. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

var yellow = d3.interpolateYlGn(0), // "rgb(255, 255, 229)"
    yellowGreen = d3.interpolateYlGn(0.5), // "rgb(120, 197, 120)"
    green = d3.interpolateYlGn(1); // "rgb(0, 69, 41)"

</script>

Or, as part of the D3 default bundle:

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

var yellow = d3.interpolateYlGn(0), // "rgb(255, 255, 229)"
    yellowGreen = d3.interpolateYlGn(0.5), // "rgb(120, 197, 120)"
    green = d3.interpolateYlGn(1); // "rgb(0, 69, 41)"

</script>

Try d3-scale-chromatic in your browser.

API Reference

Categorical

d3.schemeCategory10 Source

category10

An array of ten categorical colors represented as RGB hexadecimal strings.

d3.schemeAccent Source

Accent

An array of eight categorical colors represented as RGB hexadecimal strings.

d3.schemeDark2 Source

Dark2

An array of eight categorical colors represented as RGB hexadecimal strings.

d3.schemePaired Source

Paired

An array of twelve categorical colors represented as RGB hexadecimal strings.

d3.schemePastel1 Source

Pastel1

An array of nine categorical colors represented as RGB hexadecimal strings.

d3.schemePastel2 Source

Pastel2

An array of eight categorical colors represented as RGB hexadecimal strings.

d3.schemeSet1 Source

Set1

An array of nine categorical colors represented as RGB hexadecimal strings.

d3.schemeSet2 Source

Set2

An array of eight categorical colors represented as RGB hexadecimal strings.

d3.schemeSet3 Source

Set3

An array of twelve categorical colors represented as RGB hexadecimal strings.

Diverging

Diverging color schemes are available as continuous interpolators (often used with d3.scaleSequential) and as discrete schemes (often used with d3.scaleOrdinal). Each discrete scheme, such as d3.schemeBrBG, is represented as an array of arrays of hexadecimal color strings. The kth element of this array contains the color scheme of size k; for example, d3.schemeBrBG[9] contains an array of nine strings representing the nine colors of the brown-blue-green diverging color scheme. Diverging color schemes support a size k ranging from 3 to 11.

d3.interpolateBrBG(t) Source
d3.schemeBrBG[k]

BrBG

Given a number t in the range [0,1], returns the corresponding color from the “BrBG” diverging color scheme represented as an RGB string.

d3.interpolatePRGn(t) Source
d3.schemePRGn[k]

PRGn

Given a number t in the range [0,1], returns the corresponding color from the “PRGn” diverging color scheme represented as an RGB string.

d3.interpolatePiYG(t) Source
d3.schemePiYG[k]

PiYG

Given a number t in the range [0,1], returns the corresponding color from the “PiYG” diverging color scheme represented as an RGB string.

d3.interpolatePuOr(t) Source
d3.schemePuOr[k]

PuOr

Given a number t in the range [0,1], returns the corresponding color from the “PuOr” diverging color scheme represented as an RGB string.

d3.interpolateRdBu(t) Source
d3.schemeRdBu[k]

RdBu

Given a number t in the range [0,1], returns the corresponding color from the “RdBu” diverging color scheme represented as an RGB string.

d3.interpolateRdGy(t) Source
d3.schemeRdGy[k]

RdGy

Given a number t in the range [0,1], returns the corresponding color from the “RdGy” diverging color scheme represented as an RGB string.

d3.interpolateRdYlBu(t) Source
d3.schemeRdYlBu[k]

RdYlBu

Given a number t in the range [0,1], returns the corresponding color from the “RdYlBu” diverging color scheme represented as an RGB string.

d3.interpolateRdYlGn(t) Source
d3.schemeRdYlGn[k]

RdYlGn

Given a number t in the range [0,1], returns the corresponding color from the “RdYlGn” diverging color scheme represented as an RGB string.

d3.interpolateSpectral(t) Source
d3.schemeSpectral[k]

Spectral

Given a number t in the range [0,1], returns the corresponding color from the “Spectral” diverging color scheme represented as an RGB string.

Sequential (Single Hue)

Sequential, single-hue color schemes are available as continuous interpolators (often used with d3.scaleSequential) and as discrete schemes (often used with d3.scaleOrdinal). Each discrete scheme, such as d3.schemeBlues, is represented as an array of arrays of hexadecimal color strings. The kth element of this array contains the color scheme of size k; for example, d3.schemeBlues[9] contains an array of nine strings representing the nine colors of the blue sequential color scheme. Sequential, single-hue color schemes support a size k ranging from 3 to 9.

d3.interpolateBlues(t) Source
d3.schemeBlues[k]

Blues

Given a number t in the range [0,1], returns the corresponding color from the “Blues” sequential color scheme represented as an RGB string.

d3.interpolateGreens(t) Source
d3.schemeGreens[k]

Greens

Given a number t in the range [0,1], returns the corresponding color from the “Greens” sequential color scheme represented as an RGB string.

d3.interpolateGreys(t) Source
d3.schemeGreys[k]

Greys

Given a number t in the range [0,1], returns the corresponding color from the “Greys” sequential color scheme represented as an RGB string.

d3.interpolateOranges(t) Source
d3.schemeOranges[k]

Oranges

Given a number t in the range [0,1], returns the corresponding color from the “Oranges” sequential color scheme represented as an RGB string.

d3.interpolatePurples(t) Source
d3.schemePurples[k]

Purples

Given a number t in the range [0,1], returns the corresponding color from the “Purples” sequential color scheme represented as an RGB string.

d3.interpolateReds(t) Source
d3.schemeReds[k]

Reds

Given a number t in the range [0,1], returns the corresponding color from the “Reds” sequential color scheme represented as an RGB string.

Sequential (Multi-Hue)

Sequential, multi-hue color schemes are available as continuous interpolators (often used with d3.scaleSequential) and as discrete schemes (often used with d3.scaleOrdinal). Each discrete scheme, such as d3.schemeBuGn, is represented as an array of arrays of hexadecimal color strings. The kth element of this array contains the color scheme of size k; for example, d3.schemeBuGn[9] contains an array of nine strings representing the nine colors of the blue-green sequential color scheme. Sequential, multi-hue color schemes support a size k ranging from 3 to 9.

d3.interpolateViridis(t) Source

viridis

Given a number t in the range [0,1], returns the corresponding color from the “viridis” perceptually-uniform color scheme designed by van der Walt, Smith and Firing for matplotlib, represented as an RGB string.

d3.interpolateInferno(t) Source

inferno

Given a number t in the range [0,1], returns the corresponding color from the “inferno” perceptually-uniform color scheme designed by van der Walt and Smith for matplotlib, represented as an RGB string.

d3.interpolateMagma(t) Source

magma

Given a number t in the range [0,1], returns the corresponding color from the “magma” perceptually-uniform color scheme designed by van der Walt and Smith for matplotlib, represented as an RGB string.

d3.interpolatePlasma(t) Source

plasma

Given a number t in the range [0,1], returns the corresponding color from the “plasma” perceptually-uniform color scheme designed by van der Walt and Smith for matplotlib, represented as an RGB string.

d3.interpolateWarm(t) Source

warm

Given a number t in the range [0,1], returns the corresponding color from a 180° rotation of Niccoli’s perceptual rainbow, represented as an RGB string.

d3.interpolateCool(t) Source

cool

Given a number t in the range [0,1], returns the corresponding color from Niccoli’s perceptual rainbow, represented as an RGB string.

d3.interpolateCubehelixDefault(t) Source

cubehelix

Given a number t in the range [0,1], returns the corresponding color from Green’s default Cubehelix represented as an RGB string.

d3.interpolateBuGn(t) Source
d3.schemeBuGn[k]

BuGn

Given a number t in the range [0,1], returns the corresponding color from the “BuGn” sequential color scheme represented as an RGB string.

d3.interpolateBuPu(t) Source
d3.schemeBuPu[k]

BuPu

Given a number t in the range [0,1], returns the corresponding color from the “BuPu” sequential color scheme represented as an RGB string.

d3.interpolateGnBu(t) Source
d3.schemeGnBu[k]

GnBu

Given a number t in the range [0,1], returns the corresponding color from the “GnBu” sequential color scheme represented as an RGB string.

d3.interpolateOrRd(t) Source
d3.schemeOrRd[k]

OrRd

Given a number t in the range [0,1], returns the corresponding color from the “OrRd” sequential color scheme represented as an RGB string.

d3.interpolatePuBuGn(t) Source
d3.schemePuBuGn[k]

PuBuGn

Given a number t in the range [0,1], returns the corresponding color from the “PuBuGn” sequential color scheme represented as an RGB string.

d3.interpolatePuBu(t) Source
d3.schemePuBu[k]

PuBu

Given a number t in the range [0,1], returns the corresponding color from the “PuBu” sequential color scheme represented as an RGB string.

d3.interpolatePuRd(t) Source
d3.schemePuRd[k]

PuRd

Given a number t in the range [0,1], returns the corresponding color from the “PuRd” sequential color scheme represented as an RGB string.

d3.interpolateRdPu(t) Source
d3.schemeRdPu[k]

RdPu

Given a number t in the range [0,1], returns the corresponding color from the “RdPu” sequential color scheme represented as an RGB string.

d3.interpolateYlGnBu(t) Source
d3.schemeYlGnBu[k]

YlGnBu

Given a number t in the range [0,1], returns the corresponding color from the “YlGnBu” sequential color scheme represented as an RGB string.

d3.interpolateYlGn(t) Source
d3.schemeYlGn[k]

YlGn

Given a number t in the range [0,1], returns the corresponding color from the “YlGn” sequential color scheme represented as an RGB string.

d3.interpolateYlOrBr(t) Source
d3.schemeYlOrBr[k]

YlOrBr

Given a number t in the range [0,1], returns the corresponding color from the “YlOrBr” sequential color scheme represented as an RGB string.

d3.interpolateYlOrRd(t) Source
d3.schemeYlOrRd[k]

YlOrRd

Given a number t in the range [0,1], returns the corresponding color from the “YlOrRd” sequential color scheme represented as an RGB string.

Cyclical

d3.interpolateRainbow(t) Source

rainbow

Given a number t in the range [0,1], returns the corresponding color from d3.interpolateWarm scale from [0.0, 0.5] followed by the d3.interpolateCool scale from [0.5, 1.0], thus implementing the cyclical less-angry rainbow color scheme.

d3.interpolateSinebow(t) Source

sinebow

Given a number t in the range [0,1], returns the corresponding color from the “sinebow” color scheme by Jim Bumgardner and Charlie Loyd.

© 2010–2018 Michael Bostock
Licensed under the BSD License.
https://github.com/d3/d3-scale-chromatic