tessl/npm-d3-scale-chromatic
Sequential, diverging and categorical color schemes designed for data visualization with D3.js
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
diverging.mddocs/
Diverging Color Schemes
Diverging color schemes use colors that diverge from a central neutral point, making them ideal for data with meaningful center values such as temperature variations, election results, or any data representing positive/negative deviations from a baseline.
Capabilities
Brown-Blue-Green (BrBG) Scheme
Earth-tones diverging from brown through neutral to blue-green.
/**
* Brown-Blue-Green continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=brown, 0.5=neutral, 1=blue-green
* @returns Hex color string
*/
function interpolateBrBG(t: number): string;
/**
* Brown-Blue-Green discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemeBrBG: string[][];Purple-Red-Green (PRGn) Scheme
Vibrant diverging scheme from purple through neutral to green.
/**
* Purple-Red-Green continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=purple, 0.5=neutral, 1=green
* @returns Hex color string
*/
function interpolatePRGn(t: number): string;
/**
* Purple-Red-Green discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemePRGn: string[][];Pink-Yellow-Green (PiYG) Scheme
Soft diverging scheme from pink through neutral to yellow-green.
/**
* Pink-Yellow-Green continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=pink, 0.5=neutral, 1=yellow-green
* @returns Hex color string
*/
function interpolatePiYG(t: number): string;
/**
* Pink-Yellow-Green discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemePiYG: string[][];Purple-Orange (PuOr) Scheme
High-contrast diverging scheme from purple through neutral to orange.
/**
* Purple-Orange continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=purple, 0.5=neutral, 1=orange
* @returns Hex color string
*/
function interpolatePuOr(t: number): string;
/**
* Purple-Orange discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemePuOr: string[][];Red-Blue (RdBu) Scheme
Classic temperature-style diverging scheme from red through neutral to blue.
/**
* Red-Blue continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=red, 0.5=neutral, 1=blue
* @returns Hex color string
*/
function interpolateRdBu(t: number): string;
/**
* Red-Blue discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemeRdBu: string[][];Red-Grey (RdGy) Scheme
Monochromatic diverging scheme from red through grey to dark grey.
/**
* Red-Grey continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=red, 0.5=grey, 1=dark grey
* @returns Hex color string
*/
function interpolateRdGy(t: number): string;
/**
* Red-Grey discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemeRdGy: string[][];Red-Yellow-Blue (RdYlBu) Scheme
Three-hue diverging scheme from red through yellow to blue.
/**
* Red-Yellow-Blue continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=red, 0.5=yellow, 1=blue
* @returns Hex color string
*/
function interpolateRdYlBu(t: number): string;
/**
* Red-Yellow-Blue discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemeRdYlBu: string[][];Red-Yellow-Green (RdYlGn) Scheme
Traffic-light style diverging scheme from red through yellow to green.
/**
* Red-Yellow-Green continuous interpolation function
* @param t - Interpolation parameter [0, 1] where 0=red, 0.5=yellow, 1=green
* @returns Hex color string
*/
function interpolateRdYlGn(t: number): string;
/**
* Red-Yellow-Green discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemeRdYlGn: string[][];Spectral Scheme
Rainbow-like diverging scheme covering the full visible spectrum.
/**
* Spectral continuous interpolation function
* @param t - Interpolation parameter [0, 1] spanning the visible spectrum
* @returns Hex color string
*/
function interpolateSpectral(t: number): string;
/**
* Spectral discrete color arrays
* Index [n-3] provides array of n colors (n = 3 to 11)
*/
const schemeSpectral: string[][];Usage Patterns
Continuous Scales with Diverging Data
import { interpolateRdBu, interpolateRdYlGn } from "d3-scale-chromatic";
import { scaleSequential } from "d3-scale";
// Temperature data (-20°C to +40°C)
const tempScale = scaleSequential(interpolateRdBu)
.domain([-20, 40]);
// Election results (-100% to +100% margin)
const electionScale = scaleSequential(interpolateRdYlGn)
.domain([-100, 100]);
// Usage
const coldColor = tempScale(-10); // Blue-ish
const neutralColor = tempScale(10); // Neutral
const hotColor = tempScale(35); // Red-ishDiscrete Diverging Scales
import { schemeRdBu, schemePuOr } from "d3-scale-chromatic";
import { scaleQuantize } from "d3-scale";
// 5-class diverging scale
const fiveClassScale = scaleQuantize()
.domain([-100, 100])
.range(schemeRdBu[5]);
// 7-class diverging scale for more granular data
const sevenClassScale = scaleQuantize()
.domain([-1, 1])
.range(schemePuOr[7]);Choropleth Maps
import { interpolateBrBG, schemeSpectral } from "d3-scale-chromatic";
import { scaleSequential, scaleQuantile } from "d3-scale";
// Continuous choropleth
const populationChangeScale = scaleSequential(interpolateBrBG)
.domain([-50, 50]); // % population change
// Quantile-based choropleth
const incomeScale = scaleQuantile()
.domain(incomeData) // Array of income values
.range(schemeSpectral[9]);Center Point Emphasis
import { interpolateRdYlBu } from "d3-scale-chromatic";
// Custom scale with emphasized center
function createCenteredScale(minVal, maxVal, centerVal = 0) {
return function(value) {
// Normalize to [0, 1] with center at 0.5
const t = value <= centerVal
? 0.5 * (value - minVal) / (centerVal - minVal)
: 0.5 + 0.5 * (value - centerVal) / (maxVal - centerVal);
return interpolateRdYlBu(t);
};
}Discrete Scheme Structure
All diverging schemes provide discrete color arrays with the following structure:
// Example: schemeBrBG structure
schemeBrBG[0] // 3 colors: [dark_brown, neutral, dark_blue_green]
schemeBrBG[1] // 4 colors: [brown, light_neutral, light_neutral, blue_green]
schemeBrBG[2] // 5 colors: [dark_brown, brown, neutral, blue_green, dark_blue_green]
// ... up to schemeBrBG[8] for 11 colors
// Access n colors using index [n-3]
const fiveColors = schemeBrBG[2]; // 5 colors
const elevenColors = schemeBrBG[8]; // 11 colorsScheme Selection Guide
| Use Case | Recommended Scheme | Characteristics |
|---|---|---|
| Temperature data | RdBu, RdYlBu | Intuitive hot/cold mapping |
| Financial data | RdGy, PuOr | Clear positive/negative distinction |
| Election results | RdYlGn, PuOr | Traditional political colors |
| Scientific data | BrBG, PiYG | Color-blind friendly options |
| General purpose | Spectral | Full spectrum coverage |
| Subtle differences | PiYG, BrBG | Lower contrast, easier on eyes |
Install with Tessl CLI
npx tessl i tessl/npm-d3-scale-chromatic