tessl/npm-d3

Data-Driven Documents - A comprehensive JavaScript library for creating dynamic, interactive data visualizations in web browsers

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Color Schemes

Name: tessl/npm-d3
Author: tessl

Predefined color palettes and schemes for data visualization, providing perceptually uniform, colorblind-friendly, and aesthetically pleasing color mappings for categorical, sequential, and diverging data.

Capabilities

Categorical Color Schemes

Distinct colors for categorical data visualization, optimized for differentiation and accessibility.

/**
 * Categorical color schemes for discrete data
 */
const schemeCategory10: readonly string[];     // 10 colors
const schemeAccent: readonly string[];         // 8 colors  
const schemeDark2: readonly string[];          // 8 colors
const schemePaired: readonly string[];         // 12 colors
const schemePastel1: readonly string[];        // 9 colors
const schemePastel2: readonly string[];        // 8 colors
const schemeSet1: readonly string[];           // 9 colors
const schemeSet2: readonly string[];           // 8 colors
const schemeSet3: readonly string[];           // 12 colors
const schemeTableau10: readonly string[];     // 10 colors - Tableau palette

/**
 * Get color from categorical scheme by index
 * @param scheme - Color scheme array
 * @param index - Color index (wraps around if beyond array length)
 * @returns Hex color string
 */
function schemeColor(scheme: readonly string[], index: number): string;

Usage Examples:

import { schemeCategory10, schemeSet3, schemeTableau10 } from "d3";

// Use for categorical data
const categories = ["A", "B", "C", "D", "E"];
const colorScale = d3.scaleOrdinal(schemeCategory10).domain(categories);

colorScale("A"); // "#1f77b4"
colorScale("B"); // "#ff7f0e"

// Access colors directly
schemeCategory10[0]; // "#1f77b4"
schemeSet3[5]; // "#bebada"

// Create custom categorical scale
const customColors = d3.scaleOrdinal()
  .domain(["urgent", "normal", "low"])
  .range(schemeTableau10.slice(0, 3));

Sequential Color Schemes

Color schemes that progress from light to dark for representing continuous data.

/**
 * Single-hue sequential schemes (3-9 colors each)
 */
const schemeBlues: { [k: number]: readonly string[] };
const schemeGreens: { [k: number]: readonly string[] };
const schemeGreys: { [k: number]: readonly string[] };
const schemeOranges: { [k: number]: readonly string[] };
const schemePurples: { [k: number]: readonly string[] };
const schemeReds: { [k: number]: readonly string[] };

/**
 * Multi-hue sequential schemes (3-9 colors each)
 */
const schemeBuGn: { [k: number]: readonly string[] };     // Blue-Green
const schemeBuPu: { [k: number]: readonly string[] };     // Blue-Purple
const schemeGnBu: { [k: number]: readonly string[] };     // Green-Blue
const schemeOrRd: { [k: number]: readonly string[] };     // Orange-Red
const schemePuBu: { [k: number]: readonly string[] };     // Purple-Blue
const schemePuBuGn: { [k: number]: readonly string[] };   // Purple-Blue-Green
const schemePuRd: { [k: number]: readonly string[] };     // Purple-Red
const schemeRdPu: { [k: number]: readonly string[] };     // Red-Purple
const schemeYlGn: { [k: number]: readonly string[] };     // Yellow-Green
const schemeYlGnBu: { [k: number]: readonly string[] };   // Yellow-Green-Blue
const schemeYlOrBr: { [k: number]: readonly string[] };   // Yellow-Orange-Brown
const schemeYlOrRd: { [k: number]: readonly string[] };   // Yellow-Orange-Red

/**
 * Interpolators for continuous sequential schemes
 */
const interpolateBlues: (t: number) => string;
const interpolateGreens: (t: number) => string;
const interpolateGreys: (t: number) => string;
const interpolateOranges: (t: number) => string;
const interpolatePurples: (t: number) => string;
const interpolateReds: (t: number) => string;

const interpolateBuGn: (t: number) => string;
const interpolateBuPu: (t: number) => string;
const interpolateGnBu: (t: number) => string;
const interpolateOrRd: (t: number) => string;
const interpolatePuBu: (t: number) => string;
const interpolatePuBuGn: (t: number) => string;
const interpolatePuRd: (t: number) => string;
const interpolateRdPu: (t: number) => string;
const interpolateYlGn: (t: number) => string;
const interpolateYlGnBu: (t: number) => string;
const interpolateYlOrBr: (t: number) => string;
const interpolateYlOrRd: (t: number) => string;

Usage Examples:

import { schemeBlues, interpolateBlues, scaleSequential } from "d3";

// Discrete sequential colors
const blueScale = d3.scaleOrdinal(schemeBlues[5]);
schemeBlues[3]; // ["#deebf7", "#9ecae1", "#3182bd"]
schemeBlues[7]; // More granular blue progression

// Continuous sequential colors
const continuousBlue = d3.scaleSequential(interpolateBlues)
  .domain([0, 100]);

continuousBlue(0);   // Light blue
continuousBlue(50);  // Medium blue  
continuousBlue(100); // Dark blue

// Multi-hue progression
const colorScale = d3.scaleSequential(interpolateYlOrRd)
  .domain([0, 1]);

Diverging Color Schemes

Color schemes with a neutral midpoint for data that has a meaningful center value.

/**
 * Diverging color schemes (3-11 colors each)
 */
const schemeBrBG: { [k: number]: readonly string[] };      // Brown-Blue-Green
const schemePiYG: { [k: number]: readonly string[] };      // Pink-Yellow-Green
const schemePRGn: { [k: number]: readonly string[] };      // Purple-Red-Green
const schemePuOr: { [k: number]: readonly string[] };      // Purple-Orange
const schemeRdBu: { [k: number]: readonly string[] };      // Red-Blue
const schemeRdGy: { [k: number]: readonly string[] };      // Red-Gray
const schemeRdYlBu: { [k: number]: readonly string[] };    // Red-Yellow-Blue
const schemeRdYlGn: { [k: number]: readonly string[] };    // Red-Yellow-Green
const schemeSpectral: { [k: number]: readonly string[] };  // Spectral rainbow

/**
 * Interpolators for continuous diverging schemes
 */
const interpolateBrBG: (t: number) => string;
const interpolatePiYG: (t: number) => string;
const interpolatePRGn: (t: number) => string;
const interpolatePuOr: (t: number) => string;
const interpolateRdBu: (t: number) => string;
const interpolateRdGy: (t: number) => string;
const interpolateRdYlBu: (t: number) => string;
const interpolateRdYlGn: (t: number) => string;
const interpolateSpectral: (t: number) => string;

Usage Examples:

import { schemeRdYlBu, interpolateRdYlBu, scaleDiverging } from "d3";

// Discrete diverging colors
const divergingScale = d3.scaleOrdinal(schemeRdYlBu[9]);

// Continuous diverging scale
const temperatureScale = d3.scaleDiverging(interpolateRdYlBu)
  .domain([-10, 0, 10]); // Cold-neutral-hot

temperatureScale(-10); // Red (cold)
temperatureScale(0);   // Yellow (neutral)
temperatureScale(10);  // Blue (hot)

Cyclical Color Schemes

Color schemes for cyclical data like time of day, compass directions, or periodic phenomena.

/**
 * Cyclical/rainbow interpolators for periodic data
 */
const interpolateRainbow: (t: number) => string;     // Full spectrum
const interpolateSinebow: (t: number) => string;     // Sine-based rainbow
const interpolateTurbo: (t: number) => string;       // Perceptually uniform rainbow
const interpolateViridis: (t: number) => string;     // Purple-blue-green-yellow
const interpolateMagma: (t: number) => string;       // Black-purple-pink-yellow  
const interpolateInferno: (t: number) => string;     // Black-red-orange-yellow
const interpolatePlasma: (t: number) => string;      // Purple-pink-yellow
const interpolateWarm: (t: number) => string;        // Black-red-yellow-white
const interpolateCool: (t: number) => string;        // Cyan-magenta
const interpolateCubehelixDefault: (t: number) => string; // Cubehelix spiral

Usage Examples:

import { interpolateRainbow, interpolateViridis, scaleSequential } from "d3";

// Hour of day (cyclical)
const timeScale = d3.scaleSequential(interpolateRainbow)
  .domain([0, 24]);

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

// Heat map
const heatScale = d3.scaleSequential(interpolatePlasma)
  .domain([0, 1]);

Custom Color Interpolation

Create custom color schemes using D3's interpolation system.

/**
 * Create custom color interpolator from color list
 * @param colors - Array of color strings to interpolate between
 * @returns Interpolation function (t: number) => string
 */
function interpolateRgbBasis(colors: string[]): (t: number) => string;

/**
 * Create custom color interpolator with specified positions
 * @param colors - Array of [position, color] tuples
 * @returns Interpolation function (t: number) => string
 */
function interpolateRgbBasisClosed(colors: string[]): (t: number) => string;

/**
 * Piecewise color interpolation
 * @param interpolate - Base interpolation function
 * @param values - Array of values to interpolate between
 * @returns Piecewise interpolation function
 */
function piecewise<T>(interpolate: (a: T, b: T) => (t: number) => T, values: T[]): (t: number) => T;

Usage Examples:

import { interpolateRgbBasis, piecewise, interpolateRgb } from "d3";

// Custom brand colors
const brandInterpolator = interpolateRgbBasis([
  "#003f5c", // Dark blue
  "#58508d", // Purple
  "#bc5090", // Pink
  "#ff6361", // Coral
  "#ffa600"  // Orange
]);

const brandScale = d3.scaleSequential(brandInterpolator)
  .domain([0, 100]);

// Piecewise interpolation
const customInterpolator = piecewise(interpolateRgb, [
  "#ff0000", // Red at 0
  "#00ff00", // Green at 0.5
  "#0000ff"  // Blue at 1
]);

Color Scheme Utilities

Helper functions for working with color schemes programmatically.

/**
 * Get all available color scheme names
 * @returns Array of scheme name strings
 */
function schemeNames(): string[];

/**
 * Get color scheme by name and size
 * @param name - Scheme name (e.g., "Blues", "Set1")
 * @param size - Number of colors (3-11 for most schemes)
 * @returns Color array or interpolator function
 */
function scheme(name: string, size?: number): string[] | ((t: number) => string);

/**
 * Check if a scheme supports a given size
 * @param name - Scheme name
 * @param size - Desired number of colors
 * @returns Whether the scheme supports this size
 */
function schemeSupportsSize(name: string, size: number): boolean;

Install with Tessl CLI