or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

categorical.md diverging.md index.md sequential-multi.md sequential-single.md

tile.json

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

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

Scheme 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