scale-chromatic
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" rel="external nofollow" ></script> <script src="https://d3js.org/d3-interpolate.v1.min.js" rel="external nofollow" ></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js" rel="external nofollow" rel="external nofollow" ></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" rel="external nofollow" ></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js" rel="external nofollow" rel="external nofollow" ></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 Source
An array of eight categorical colors represented as RGB hexadecimal strings.
d3.schemeDark2 Source
An array of eight categorical colors represented as RGB hexadecimal strings.
d3.schemePaired Source
An array of twelve categorical colors represented as RGB hexadecimal strings.
d3.schemePastel1 Source
An array of nine categorical colors represented as RGB hexadecimal strings.
d3.schemePastel2 Source
An array of eight categorical colors represented as RGB hexadecimal strings.
d3.schemeSet1 Source
An array of nine categorical colors represented as RGB hexadecimal strings.
d3.schemeSet2 Source
An array of eight categorical colors represented as RGB hexadecimal strings.
d3.schemeSet3 Source
An array of twelve categorical colors represented as RGB hexadecimal strings.
Diverging
d3.interpolateBrBG(t) Source
d3.schemeBrBG
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
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
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
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
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
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
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
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
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) Source
d3.schemeBlues
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
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
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
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
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
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) Source
d3.schemeBuGn
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
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
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
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
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
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
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
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
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
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
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
Given a number t in the range [0,1], returns the corresponding color from the “YlOrRd” sequential color scheme represented as an RGB string.
© 2010–2017 Michael Bostock
Licensed under the BSD License.
https://github.com/d3/d3-scale-chromatic