diff --git a/README.md b/README.md index 96b574b..74cbd8e 100644 --- a/README.md +++ b/README.md @@ -1,387 +1,12 @@ # d3-scale-chromatic -This module provides sequential, diverging and categorical color schemes designed to work with [d3-scale](https://github.com/d3/d3-scale)’s [d3.scaleOrdinal](https://github.com/d3/d3-scale#ordinal-scales) and [d3.scaleSequential](https://github.com/d3/d3-scale#sequential-scales). Most of these schemes are derived from Cynthia A. Brewer’s [ColorBrewer](http://colorbrewer2.org). Since ColorBrewer publishes only discrete color schemes, the sequential and diverging scales are interpolated using [uniform B-splines](https://bl.ocks.org/mbostock/048d21cf747371b11884f75ad896e5a5). + -For example, to create a categorical color scale using the [Accent](#schemeAccent) color scheme: +This module provides sequential, diverging and categorical color schemes designed to work with [d3-scale](https://github.com/d3/d3-scale)’s scaleOrdinal and scaleSequential. Most of these schemes are derived from Cynthia A. Brewer’s [ColorBrewer](http://colorbrewer2.org). Since ColorBrewer publishes only discrete color schemes, the sequential and diverging scales are interpolated using [uniform B-splines](https://observablehq.com/@d3/colorbrewer-splines). -```js -var accent = d3.scaleOrdinal(d3.schemeAccent); -``` +## Resources -To create a sequential discrete nine-color scale using the [Blues](#schemeBlues) color scheme: - -```js -var blues = d3.scaleOrdinal(d3.schemeBlues[9]); -``` - -To create a diverging, continuous color scale using the [PiYG](#interpolatePiYG) color scheme: - -```js -var piyg = d3.scaleSequential(d3.interpolatePiYG); -``` - -## Installing - -If you use npm, `npm install d3-scale-chromatic`. You can also download the [latest release on GitHub](https://github.com/d3/d3-scale-chromatic/releases/latest). For vanilla HTML in modern browsers, import d3-scale-chromatic from Skypack: - -```html - -``` - -For legacy environments, you can load d3-scale-chromatic’s UMD bundle from an npm-based CDN such as jsDelivr; a `d3` global is exported: - -```html - - - - -``` - -[Try d3-scale-chromatic in your browser.](https://observablehq.com/collection/@d3/d3-scale-chromatic) - -## API Reference - -### Categorical - -# d3.schemeCategory10 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/category10.js "Source") - -category10 - -An array of ten categorical colors represented as RGB hexadecimal strings. - -# d3.schemeAccent [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Accent.js "Source") - -Accent - -An array of eight categorical colors represented as RGB hexadecimal strings. - -# d3.schemeDark2 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Dark2.js "Source") - -Dark2 - -An array of eight categorical colors represented as RGB hexadecimal strings. - -# d3.schemePaired [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Paired.js "Source") - -Paired - -An array of twelve categorical colors represented as RGB hexadecimal strings. - -# d3.schemePastel1 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Pastel1.js "Source") - -Pastel1 - -An array of nine categorical colors represented as RGB hexadecimal strings. - -# d3.schemePastel2 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Pastel2.js "Source") - -Pastel2 - -An array of eight categorical colors represented as RGB hexadecimal strings. - -# d3.schemeSet1 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Set1.js "Source") - -Set1 - -An array of nine categorical colors represented as RGB hexadecimal strings. - -# d3.schemeSet2 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Set2.js "Source") - -Set2 - -An array of eight categorical colors represented as RGB hexadecimal strings. - -# d3.schemeSet3 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Set3.js "Source") - -Set3 - -An array of twelve categorical colors represented as RGB hexadecimal strings. - -# d3.schemeTableau10 [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/categorical/Tableau10.js "Source") - -Tableau10 - -An array of ten categorical colors authored by Tableau as part of [Tableau 10](https://www.tableau.com/about/blog/2016/7/colors-upgrade-tableau-10-56782) represented as RGB hexadecimal strings. - -### Diverging - -Diverging color schemes are available as continuous interpolators (often used with [d3.scaleSequential](https://github.com/d3/d3-scale/blob/master/README.md#sequential-scales)) and as discrete schemes (often used with [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales)). Each discrete scheme, such as [d3.schemeBrBG](#schemeBrBG), is represented as an array of arrays of hexadecimal color strings. The *k*th 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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/BrBG.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/PRGn.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/PiYG.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/PuOr.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/RdBu.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/RdGy.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/RdYlBu.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/RdYlGn.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/diverging/Spectral.js "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](https://github.com/d3/d3-scale/blob/master/README.md#sequential-scales)) and as discrete schemes (often used with [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales)). Each discrete scheme, such as [d3.schemeBlues](#schemeBlues), is represented as an array of arrays of hexadecimal color strings. The *k*th 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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-single/Blues.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-single/Greens.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-single/Greys.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-single/Oranges.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-single/Purples.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-single/Reds.js "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](https://github.com/d3/d3-scale/blob/master/README.md#sequential-scales)) and as discrete schemes (often used with [d3.scaleOrdinal](https://github.com/d3/d3-scale/blob/master/README.md#ordinal-scales)). Each discrete scheme, such as [d3.schemeBuGn](#schemeBuGn), is represented as an array of arrays of hexadecimal color strings. The *k*th 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.interpolateTurbo(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/turbo.js "Source") - -turbo - -Given a number *t* in the range [0,1], returns the corresponding color from the “turbo” color scheme by [Anton Mikhailov](https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html). - -# d3.interpolateViridis(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/viridis.js "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](https://bids.github.io/colormap/) for matplotlib, represented as an RGB string. - -# d3.interpolateInferno(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/viridis.js "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](https://bids.github.io/colormap/) for matplotlib, represented as an RGB string. - -# d3.interpolateMagma(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/viridis.js "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](https://bids.github.io/colormap/) for matplotlib, represented as an RGB string. - -# d3.interpolatePlasma(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/viridis.js "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](https://bids.github.io/colormap/) for matplotlib, represented as an RGB string. - -# d3.interpolateCividis(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/cividis.js "Source") - -cividis - -Given a number *t* in the range [0,1], returns the corresponding color from the “cividis” color vision deficiency-optimized color scheme designed by [Nuñez, Anderton, and Renslow](https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0199239), represented as an RGB string. - -# d3.interpolateWarm(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/rainbow.js "Source") - -warm - -Given a number *t* in the range [0,1], returns the corresponding color from a 180° rotation of [Niccoli’s perceptual rainbow](https://mycarta.wordpress.com/2013/02/21/perceptual-rainbow-palette-the-method/), represented as an RGB string. - -# d3.interpolateCool(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/rainbow.js "Source") - -cool - -Given a number *t* in the range [0,1], returns the corresponding color from [Niccoli’s perceptual rainbow](https://mycarta.wordpress.com/2013/02/21/perceptual-rainbow-palette-the-method/), represented as an RGB string. - -# d3.interpolateCubehelixDefault(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/cubehelix.js "Source") - -cubehelix - -Given a number *t* in the range [0,1], returns the corresponding color from [Green’s default Cubehelix](http://www.mrao.cam.ac.uk/~dag/CUBEHELIX/) represented as an RGB string. - -# d3.interpolateBuGn(*t*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/BuGn.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/BuPu.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/GnBu.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/OrRd.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/PuBuGn.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/PuBu.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/PuRd.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/RdPu.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/YlGnBu.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/YlGn.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/YlOrBr.js "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*) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/YlOrRd.js "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) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/rainbow.js "Source") - -rainbow - -Given a number *t* in the range [0,1], returns the corresponding color from [d3.interpolateWarm](#interpolateWarm) scale from [0.0, 0.5] followed by the [d3.interpolateCool](#interpolateCool) scale from [0.5, 1.0], thus implementing the cyclical [less-angry rainbow](http://bl.ocks.org/mbostock/310c99e53880faec2434) color scheme. - -# d3.interpolateSinebow(t) [<>](https://github.com/d3/d3-scale-chromatic/blob/master/src/sequential-multi/sinebow.js "Source") - -sinebow - -Given a number *t* in the range [0,1], returns the corresponding color from the “sinebow” color scheme by [Jim Bumgardner](https://krazydad.com/tutorials/makecolors.php) and [Charlie Loyd](http://basecase.org/env/on-rainbows). +- [Documentation](https://d3js.org/d3-scale-chromatic) +- [Examples](https://observablehq.com/collection/@d3/d3-scale-chromatic) +- [Releases](https://github.com/d3/d3-scale-chromatic/releases) +- [Getting help](https://d3js.org/community)