CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Overview
Eval results
Files

sequential-single.mddocs/

Sequential Single-Hue Color Schemes

Sequential single-hue color schemes progress through variations of a single hue family, providing intuitive color gradients for ordered data. These schemes are ideal for representing data intensity, density, or magnitude within a consistent color theme.

Capabilities

Blues Scheme

Blue color progression from light to dark blue, ideal for water-related data or cool-toned visualizations.

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

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

Usage Examples:

import { interpolateBlues, schemeBlues } from "d3-scale-chromatic";
import { scaleSequential, scaleQuantize } from "d3-scale";

// Continuous blue scale for water depth
const depthScale = scaleSequential(interpolateBlues)
  .domain([0, 100]); // meters

// 5-class discrete blue scale
const categoryScale = scaleQuantize()
  .domain([0, 1000])
  .range(schemeBlues[5]);

// Usage
const shallowColor = depthScale(10); // Light blue
const deepColor = depthScale(90);    // Dark blue

Greens Scheme

Green color progression from light to dark green, perfect for vegetation, growth, or nature-themed data.

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

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

Greys Scheme

Grayscale progression from light to dark grey, ideal for neutral visualizations and accessibility.

/**
 * Greys continuous interpolation function
 * @param t - Interpolation parameter [0, 1] where 0=very light grey, 1=dark grey
 * @returns Hex color string
 */
function interpolateGreys(t: number): string;

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

Purples Scheme

Purple color progression from light to dark purple, suitable for luxury, premium, or abstract data themes.

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

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

Reds Scheme

Red color progression from light to dark red, ideal for heat, intensity, or alert-themed visualizations.

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

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

Oranges Scheme

Orange color progression from light to dark orange, perfect for warm, energetic, or autumn-themed data.

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

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

Usage Patterns

Continuous Single-Hue Scales

import { 
  interpolateReds, 
  interpolateBlues, 
  interpolateGreens 
} from "d3-scale-chromatic";
import { scaleSequential } from "d3-scale";

// Temperature visualization (using reds for heat)
const temperatureScale = scaleSequential(interpolateReds)
  .domain([0, 40]); // Celsius

// Water depth (using blues)
const bathymetryScale = scaleSequential(interpolateBlues)
  .domain([0, 200]); // meters

// Forest coverage (using greens)
const forestScale = scaleSequential(interpolateGreens)
  .domain([0, 100]); // percentage

// Usage
const coldTemp = temperatureScale(5);   // Light red
const hotTemp = temperatureScale(35);   // Dark red
const shallowWater = bathymetryScale(10); // Light blue  
const deepWater = bathymetryScale(180);   // Dark blue

Discrete Single-Hue Classes

import { 
  schemeReds, 
  schemeGreys, 
  schemePurples 
} from "d3-scale-chromatic";
import { scaleQuantile, scaleThreshold } from "d3-scale";

// Income levels using 7 shades of green
const incomeScale = scaleQuantile()
  .domain(incomeData)
  .range(schemeGreens[7]);

// Risk levels using 5 shades of red
const riskScale = scaleThreshold()
  .domain([0.2, 0.4, 0.6, 0.8])
  .range(schemeReds[5]);

// Grayscale for neutral data
const neutralScale = scaleQuantize()
  .domain([0, 100])
  .range(schemeGreys[6]);

Thematic Applications

import { 
  interpolateReds,
  interpolateBlues, 
  interpolateOranges,
  interpolateGreens 
} from "d3-scale-chromatic";

// Fire risk map
const fireRiskScale = scaleSequential(interpolateReds)
  .domain([0, 10]);

// Precipitation map  
const rainScale = scaleSequential(interpolateBlues)
  .domain([0, 500]); // mm annually

// Economic activity (warm colors suggest activity)
const economicScale = scaleSequential(interpolateOranges)
  .domain([minActivity, maxActivity]);

// Environmental health
const environmentScale = scaleSequential(interpolateGreens)
  .domain([0, 100]); // environmental score

Accessibility and Print-Friendly Options

import { interpolateGreys, schemeGreys } from "d3-scale-chromatic";

// High-contrast grayscale for accessibility
const accessibleScale = scaleSequential(interpolateGreys)
  .domain([minValue, maxValue]);

// Print-safe discrete scale
const printScale = scaleQuantize()
  .domain([0, 100])
  .range(schemeGreys[5]);

// Combine with patterns for maximum accessibility
function createAccessibleVisualization(data) {
  const colorScale = scaleSequential(interpolateGreys)
    .domain(d3.extent(data));
    
  // Use both color and pattern/texture for redundant encoding
  return data.map(d => ({
    value: d,
    color: colorScale(d),
    pattern: d > 50 ? 'diagonal-lines' : 'dots'
  }));
}

Color Scheme Combinations

import { 
  interpolateReds,
  interpolateBlues,
  interpolateGreens 
} from "d3-scale-chromatic";

// Multi-series data with different hue families
const seriesColors = {
  temperature: scaleSequential(interpolateReds).domain([0, 40]),
  humidity: scaleSequential(interpolateBlues).domain([0, 100]),
  vegetation: scaleSequential(interpolateGreens).domain([0, 100])
};

// Usage in multi-variable visualization
function colorByVariable(value, variable) {
  return seriesColors[variable](value);
}

Discrete Scheme Structure

All single-hue schemes provide discrete color arrays with consistent structure:

// Example: schemeBlues structure
schemeBlues[0] // 3 colors: [light_blue, medium_blue, dark_blue]
schemeBlues[1] // 4 colors: [very_light, light, medium, dark]
schemeBlues[2] // 5 colors: [very_light, light, medium, medium_dark, dark]
schemeBlues[3] // 6 colors: [very_light, light, light_medium, medium, medium_dark, dark]
// ... up to schemeBlues[6] for 9 colors

// Access n colors using index [n-3]
const fiveBlues = schemeBlues[2]; // 5 blue colors
const nineBlues = schemeBlues[6]; // 9 blue colors

Color Psychology and Use Cases

Reds

  • Associations: Heat, intensity, urgency, danger, passion
  • Best for: Temperature, risk levels, alerts, energy consumption
  • Avoid: Large areas (can be overwhelming), colorblind users without alternatives

Blues

  • Associations: Water, coolness, trust, stability, technology
  • Best for: Water depth, precipitation, technology metrics, trustworthiness ratings
  • Benefits: Generally well-perceived, professional appearance

Greens

  • Associations: Nature, growth, health, money, environmental
  • Best for: Vegetation, environmental data, financial growth, health metrics
  • Benefits: Positive associations, easy on the eyes

Greys

  • Associations: Neutral, professional, modern, subtle
  • Best for: When color meaning isn't important, accessibility, print media
  • Benefits: Universal accessibility, works in all contexts

Purples

  • Associations: Luxury, creativity, mystery, premium
  • Best for: Premium products, creative industries, abstract data
  • Considerations: Less intuitive for physical phenomena

Oranges

  • Associations: Energy, warmth, creativity, caution
  • Best for: Energy data, autumn themes, creative fields, moderate warnings
  • Benefits: Attention-grabbing without being as intense as red

Performance Optimization

// Pre-compute color arrays for repeated use
const temperatureColors = d3.range(0, 41).map(temp => 
  interpolateReds(temp / 40)
);

// Fast lookup function
function getTemperatureColor(temp) {
  return temperatureColors[Math.floor(temp)];
}

// Cached discrete schemes
const colorCache = new Map();
function getCachedColors(scheme, classCount) {
  const key = `${scheme.name}-${classCount}`;
  if (!colorCache.has(key)) {
    colorCache.set(key, scheme[classCount - 3]);
  }
  return colorCache.get(key);
}

Install with Tessl CLI

npx tessl i tessl/npm-d3-scale-chromatic

docs

categorical.md

diverging.md

index.md

sequential-multi.md

sequential-single.md

tile.json