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

Sequential Multi-Hue Color Schemes

Sequential multi-hue color schemes progress through multiple hues, providing rich color gradients for ordered data visualization. These schemes are ideal for representing data with natural ordering, such as population density, elevation, or intensity measurements.

Capabilities

ColorBrewer Multi-Hue Schemes

Professional color schemes derived from Cynthia Brewer's ColorBrewer system, each progressing through multiple hues.

/**
 * Blue-Green continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light blue, 1=dark green
 * @returns Hex color string
 */
function interpolateBuGn(t: number): string;

/**
 * Blue-Green discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeBuGn: string[][];

/**
 * Blue-Purple continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light blue, 1=dark purple
 * @returns Hex color string
 */
function interpolateBuPu(t: number): string;

/**
 * Blue-Purple discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeBuPu: string[][];

/**
 * Green-Blue continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light green, 1=dark blue
 * @returns Hex color string
 */
function interpolateGnBu(t: number): string;

/**
 * Green-Blue discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeGnBu: string[][];

/**
 * Orange-Red continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light orange, 1=dark red
 * @returns Hex color string
 */
function interpolateOrRd(t: number): string;

/**
 * Orange-Red discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeOrRd: string[][];

/**
 * Purple-Blue-Green continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light purple, 1=dark green
 * @returns Hex color string
 */
function interpolatePuBuGn(t: number): string;

/**
 * Purple-Blue-Green discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemePuBuGn: string[][];

/**
 * Purple-Blue continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light purple, 1=dark blue
 * @returns Hex color string
 */
function interpolatePuBu(t: number): string;

/**
 * Purple-Blue discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemePuBu: string[][];

/**
 * Purple-Red continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light purple, 1=dark red
 * @returns Hex color string
 */
function interpolatePuRd(t: number): string;

/**
 * Purple-Red discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemePuRd: string[][];

/**
 * Red-Purple continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light red, 1=dark purple
 * @returns Hex color string
 */
function interpolateRdPu(t: number): string;

/**
 * Red-Purple discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeRdPu: string[][];

/**
 * Yellow-Green-Blue continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light yellow, 1=dark blue
 * @returns Hex color string
 */
function interpolateYlGnBu(t: number): string;

/**
 * Yellow-Green-Blue discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeYlGnBu: string[][];

/**
 * Yellow-Green continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light yellow, 1=dark green
 * @returns Hex color string
 */
function interpolateYlGn(t: number): string;

/**
 * Yellow-Green discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeYlGn: string[][];

/**
 * Yellow-Orange-Brown continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light yellow, 1=dark brown
 * @returns Hex color string
 */
function interpolateYlOrBr(t: number): string;

/**
 * Yellow-Orange-Brown discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeYlOrBr: string[][];

/**
 * Yellow-Orange-Red continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=light yellow, 1=dark red
 * @returns Hex color string
 */
function interpolateYlOrRd(t: number): string;

/**
 * Yellow-Orange-Red discrete color arrays
 * Index [n-3] provides array of n colors (n = 3 to 9)
 */
const schemeYlOrRd: string[][];

Perceptually Uniform Schemes

Scientifically designed color schemes with uniform perceptual differences, optimized for data visualization.

/**
 * Viridis continuous interpolation function
 * Perceptually uniform blue-green-yellow scheme, colorblind-friendly
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateViridis(t: number): string;

/**
 * Magma continuous interpolation function
 * Perceptually uniform black-purple-pink-yellow scheme
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateMagma(t: number): string;

/**
 * Inferno continuous interpolation function
 * Perceptually uniform black-purple-red-yellow scheme
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateInferno(t: number): string;

/**
 * Plasma continuous interpolation function
 * Perceptually uniform purple-pink-yellow scheme
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolatePlasma(t: number): string;

/**
 * Cividis continuous interpolation function
 * Perceptually uniform blue-yellow scheme, optimized for colorblind users
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateCividis(t: number): string;

/**
 * Turbo continuous interpolation function
 * High-contrast rainbow-like scheme with good perceptual properties
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateTurbo(t: number): string;

Special Multi-Hue Schemes

Specialized color schemes for specific visualization needs.

/**
 * Rainbow continuous interpolation function
 * Full hue spectrum from red through rainbow to violet
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateRainbow(t: number): string;

/**
 * Warm continuous interpolation function
 * Warm subset of rainbow (red, orange, yellow)
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateWarm(t: number): string;

/**
 * Cool continuous interpolation function
 * Cool subset of rainbow (cyan, blue, magenta)
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateCool(t: number): string;

/**
 * Cubehelix Default continuous interpolation function
 * Spiral through RGB color cube, good for grayscale printing
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateCubehelixDefault(t: number): string;

/**
 * Sinebow continuous interpolation function
 * Smooth rainbow variation using sine waves
 * @param t - Interpolation parameter [0, 1]
 * @returns Hex color string
 */
function interpolateSinebow(t: number): string;

Usage Patterns

Continuous Sequential Scales

import { 
  interpolateViridis, 
  interpolateOrRd, 
  interpolateTurbo 
} from "d3-scale-chromatic";
import { scaleSequential } from "d3-scale";

// Population density map
const densityScale = scaleSequential(interpolateOrRd)
  .domain([0, 1000]); // people per sq km

// Scientific heatmap (perceptually uniform)
const dataScale = scaleSequential(interpolateViridis)
  .domain([0, 100]);

// High-contrast visualization
const contrastScale = scaleSequential(interpolateTurbo)
  .domain([0, 1]);

// Usage
const lowDensityColor = densityScale(50);
const highDensityColor = densityScale(750);

Discrete Sequential Classes

import { 
  schemeYlOrRd, 
  schemeBuGn, 
  schemePuBuGn 
} from "d3-scale-chromatic";
import { scaleQuantile, scaleThreshold } from "d3-scale";

// 7-class quantile scale
const incomeScale = scaleQuantile()
  .domain(incomeData)
  .range(schemeYlOrRd[7]);

// Custom threshold scale
const elevationScale = scaleThreshold()
  .domain([0, 100, 500, 1000, 2000])
  .range(schemeBuGn[6]);

Scientific Visualization

import { 
  interpolateViridis,
  interpolatePlasma,
  interpolateCividis 
} from "d3-scale-chromatic";

// Colorblind-friendly scientific plots
const colorblindScale = scaleSequential(interpolateCividis)
  .domain([minValue, maxValue]);

// Heat map with high dynamic range
const heatmapScale = scaleSequential(interpolatePlasma)
  .domain([0, maxIntensity]);

// Multi-dimensional data (e.g., velocity magnitude)
const velocityScale = scaleSequential(interpolateViridis)
  .domain([0, maxVelocity]);

Choropleth Maps

import { 
  interpolateYlGnBu, 
  schemeOrRd,
  interpolatePuBuGn 
} from "d3-scale-chromatic";

// Population choropleth
const populationScale = scaleSequential(interpolateYlGnBu)
  .domain([minPop, maxPop]);

// 5-class discrete choropleth
const unemploymentScale = scaleQuantize()
  .domain([0, 15]) // unemployment rate %
  .range(schemeOrRd[5]);

// Multi-variable choropleth
const wealthScale = scaleSequential(interpolatePuBuGn)
  .domain([minWealth, maxWealth]);

Performance Considerations

// Pre-computed scales for better performance
const precomputedColors = d3.range(0, 1.01, 0.01)
  .map(interpolateViridis);

function fastColorLookup(value, min, max) {
  const normalized = (value - min) / (max - min);
  const index = Math.floor(normalized * 100);
  return precomputedColors[index];
}

Scheme Selection Guide

By Use Case

Use Case	Recommended Schemes	Notes
Scientific data	`Viridis`, `Plasma`, `Cividis`	Perceptually uniform, colorblind-safe
Heat maps	`OrRd`, `YlOrRd`, `Inferno`	Intuitive temperature association
Elevation/Bathymetry	`YlGnBu`, `BuGn`, `GnBu`	Natural earth/water colors
Population/Density	`YlOrRd`, `OrRd`, `PuRd`	Clear low-to-high progression
General purpose	`Turbo`, `Viridis`, `Plasma`	Good contrast and perceptual properties

By Perceptual Properties

Property	Best Schemes	Avoid
Colorblind-friendly	`Viridis`, `Cividis`, `Inferno`	`Rainbow`, `Spectral`
Print-safe	`CubehelixDefault`, `YlOrBr`	High-saturation schemes
High contrast	`Turbo`, `Plasma`, `OrRd`	Pastel-based schemes
Subtle gradations	`BuGn`, `PuBu`, `YlGn`	High-contrast schemes