d3-scale-chromatic
This module provides sequential, diverging and categorical color schemes 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. These schemes and interpolators are designed to work with d3-scale’s d3.scaleOrdinal and d3.scaleSequential. For example, to create a categorical color scale using the Accent color scheme:
var color = d3.scaleOrdinal(d3.schemeAccent);
To create a diverging color scale using the PiYG color scheme:
var color = 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, in combination with the D3 default bundle:
<script src="https://d3js.org/d3.v4.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>
Try d3-scale-chromatic in your browser.
API Reference
Categorical
# d3.schemeAccent
An array of eight categorical colors represented as RGB hexadecimal strings.
# d3.schemeDark2
An array of eight categorical colors represented as RGB hexadecimal strings.
# d3.schemePaired
An array of twelve categorical colors represented as RGB hexadecimal strings.
# d3.schemePastel1
An array of nine categorical colors represented as RGB hexadecimal strings.
# d3.schemePastel2
An array of eight categorical colors represented as RGB hexadecimal strings.
# d3.schemeSet1
An array of nine categorical colors represented as RGB hexadecimal strings.
# d3.schemeSet2
An array of eight categorical colors represented as RGB hexadecimal strings.
# d3.schemeSet3
An array of twelve categorical colors represented as RGB hexadecimal strings.
Diverging
# d3.interpolateBrBG(t)
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)
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)
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)
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)
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)
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)
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)
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)
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)
# d3.interpolateBlues(t)
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)
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)
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)
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)
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)
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)
# d3.interpolateBuGn(t)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
Given a number t in the range [0,1], returns the corresponding color from the “YlOrRd” sequential color scheme represented as an RGB string.