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

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

d3.interpolateBrBG(t) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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) Source
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.

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

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部