or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

categorical.mddiverging.mdindex.mdsequential-multi.mdsequential-single.md
tile.json

tessl/npm-d3-scale-chromatic

Sequential, diverging and categorical color schemes designed for data visualization with D3.js

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/d3-scale-chromatic@3.1.x

To install, run

npx @tessl/cli install tessl/npm-d3-scale-chromatic@3.1.0

index.mddocs/

d3 Scale Chromatic

d3-scale-chromatic provides sequential, diverging and categorical color schemes designed to work with D3.js scales. The library offers 76 pre-defined color schemes and interpolation functions derived from Cynthia A. Brewer's ColorBrewer system, enhanced with uniform B-spline interpolation for smooth continuous scales.

Package Information

  • Package Name: d3-scale-chromatic
  • Package Type: npm
  • Language: JavaScript (ES6)
  • Installation: npm install d3-scale-chromatic

Core Imports

import * as d3 from "d3-scale-chromatic";

For specific imports:

import { 
  schemeCategory10, 
  interpolateViridis, 
  schemeBlues,
  interpolateBrBG 
} from "d3-scale-chromatic";

For CommonJS:

const d3 = require("d3-scale-chromatic");
const { schemeCategory10, interpolateViridis } = require("d3-scale-chromatic");

Basic Usage

import { 
  schemeCategory10, 
  interpolateViridis, 
  schemeBlues,
  interpolateBrBG 
} from "d3-scale-chromatic";
import { scaleOrdinal, scaleSequential } from "d3-scale";

// Categorical color scheme for distinct categories
const colorScale = scaleOrdinal(schemeCategory10);
const categoryColors = ["apple", "banana", "cherry"].map(colorScale);

// Sequential color scheme for continuous data
const sequentialScale = scaleSequential(interpolateViridis).domain([0, 100]);
const dataColor = sequentialScale(75); // Returns color for value 75

// Discrete color scheme for specific number of colors
const fiveBlues = schemeBlues[5]; // Array of 5 blue colors

Architecture

d3-scale-chromatic organizes color schemes into four main categories:

  • Categorical Schemes: Discrete colors for qualitative data (distinct categories)
  • Diverging Schemes: Colors with meaningful center point for data with positive/negative values
  • Sequential Multi-Hue: Continuous colors progressing through multiple hues for ordered data
  • Sequential Single-Hue: Continuous colors within single hue family for ordered data

Each scheme type provides both discrete color arrays and continuous interpolation functions where appropriate.

Capabilities

Categorical Color Schemes

Discrete color arrays optimized for representing distinct categories. Perfect for pie charts, bar charts, and other visualizations with qualitative data.

// 11 categorical color schemes available
const schemeCategory10: string[];
const schemeAccent: string[];
const schemeDark2: string[];
const schemeObservable10: string[];
const schemePaired: string[];
const schemePastel1: string[];
const schemePastel2: string[];
const schemeSet1: string[];
const schemeSet2: string[];
const schemeSet3: string[];
const schemeTableau10: string[];

Categorical Color Schemes

Diverging Color Schemes

Color schemes with meaningful center points, ideal for data with positive/negative values or deviations from a baseline. Includes both continuous interpolation functions and discrete color arrays.

// Continuous interpolation functions (9 available)
function interpolateBrBG(t: number): string;
function interpolatePRGn(t: number): string;
function interpolatePiYG(t: number): string;
function interpolatePuOr(t: number): string;
function interpolateRdBu(t: number): string;
function interpolateRdGy(t: number): string;
function interpolateRdYlBu(t: number): string;
function interpolateRdYlGn(t: number): string;
function interpolateSpectral(t: number): string;

// Discrete color arrays (3-11 colors each)
const schemeBrBG: string[][];
const schemePRGn: string[][];
const schemePiYG: string[][];
const schemePuOr: string[][];
const schemeRdBu: string[][];
const schemeRdGy: string[][];
const schemeRdYlBu: string[][];
const schemeRdYlGn: string[][];
const schemeSpectral: string[][];

Diverging Color Schemes

Sequential Multi-Hue Color Schemes

Color schemes progressing through multiple hues for ordered data visualization. Includes ColorBrewer schemes and perceptually uniform schemes like Viridis.

// ColorBrewer multi-hue interpolations (12 available)
function interpolateBuGn(t: number): string;
function interpolateBuPu(t: number): string;
function interpolateGnBu(t: number): string;
function interpolateOrRd(t: number): string;
function interpolatePuBuGn(t: number): string;
function interpolatePuBu(t: number): string;
function interpolatePuRd(t: number): string;
function interpolateRdPu(t: number): string;
function interpolateYlGnBu(t: number): string;
function interpolateYlGn(t: number): string;
function interpolateYlOrBr(t: number): string;
function interpolateYlOrRd(t: number): string;

// Perceptually uniform and special interpolations (12 available)
function interpolateViridis(t: number): string;
function interpolateMagma(t: number): string;
function interpolateInferno(t: number): string;
function interpolatePlasma(t: number): string;
function interpolateCividis(t: number): string;
function interpolateTurbo(t: number): string;
function interpolateRainbow(t: number): string;
function interpolateWarm(t: number): string;
function interpolateCool(t: number): string;
function interpolateCubehelixDefault(t: number): string;
function interpolateSinebow(t: number): string;

// Discrete ColorBrewer arrays (3-9 colors each)
const schemeBuGn: string[][];
const schemeBuPu: string[][];
const schemeGnBu: string[][];
const schemeOrRd: string[][];
const schemePuBuGn: string[][];
const schemePuBu: string[][];
const schemePuRd: string[][];
const schemeRdPu: string[][];
const schemeYlGnBu: string[][];
const schemeYlGn: string[][];
const schemeYlOrBr: string[][];
const schemeYlOrRd: string[][];

Sequential Multi-Hue Color Schemes

Sequential Single-Hue Color Schemes

Color schemes progressing through variations of a single hue, ideal for showing data intensity or density within a single color family.

// Single-hue interpolation functions (6 available)
function interpolateBlues(t: number): string;
function interpolateGreens(t: number): string;
function interpolateGreys(t: number): string;
function interpolatePurples(t: number): string;
function interpolateReds(t: number): string;
function interpolateOranges(t: number): string;

// Discrete single-hue arrays (3-9 colors each)
const schemeBlues: string[][];
const schemeGreens: string[][];
const schemeGreys: string[][];
const schemePurples: string[][];
const schemeReds: string[][];
const schemeOranges: string[][];

Sequential Single-Hue Color Schemes

Types

// Parameter type for all interpolation functions
type InterpolationParameter = number; // Range: [0, 1]

// Return type for all color functions
type ColorString = string; // Hex color string (e.g., "#ff0000")

// Discrete scheme structure - array of arrays with different color counts
type DiscreteScheme = string[][]; // Index [n-3] gives array of n colors (n=3 to 9 or 11)