Sequential, diverging and categorical color scales derived from ColorBrewer.
JavaScript
Latest commit a238a4e Nov 3, 2016 @mbostock mbostock 1.1.0

README.md

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 <>

Accent

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

# d3.schemeDark2 <>

Dark2

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

# d3.schemePaired <>

Paired

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

# d3.schemePastel1 <>

Pastel1

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

# d3.schemePastel2 <>

Pastel2

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

# d3.schemeSet1 <>

Set1

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

# d3.schemeSet2 <>

Set2

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

# d3.schemeSet3 <>

Set3

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

Diverging

# d3.interpolateBrBG(t) <>
# d3.schemeBrBG

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) <>
# d3.schemePRGn

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) <>
# d3.schemePiYG

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) <>
# d3.schemePuOr

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) <>
# d3.schemeRdBu

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) <>
# d3.schemeRdGy

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) <>
# d3.schemeRdYlBu

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) <>
# d3.schemeRdYlGn

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) <>
# d3.schemeSpectral

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)

# d3.interpolateBlues(t) <>
# d3.schemeBlues

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) <>
# d3.schemeGreens

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) <>
# d3.schemeGreys

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) <>
# d3.schemeOranges

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) <>
# d3.schemePurples

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) <>
# d3.schemeReds

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)

# d3.interpolateBuGn(t) <>
# d3.schemeBuGn

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) <>
# d3.schemeBuPu

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) <>
# d3.schemeGnBu

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) <>
# d3.schemeOrRd

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) <>
# d3.schemePuBuGn

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) <>
# d3.schemePuBu

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) <>
# d3.schemePuRd

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) <>
# d3.schemeRdPu

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) <>
# d3.schemeYlGnBu

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) <>
# d3.schemeYlGn

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) <>
# d3.schemeYlOrBr

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) <>
# d3.schemeYlOrRd

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.