or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

basic-types.mdcollections.mdcolor-spaces.mdgeneric.mdindex.mdmathematical.mdtransforms-utilities.md
tile.json

index.mddocs/

d3-interpolate

d3-interpolate provides a variety of interpolation methods for blending between two values. Values may be numbers, colors, strings, arrays, or even deeply-nested objects. The library offers type-aware interpolation with automatic method selection and specialized interpolators for color spaces, mathematical functions, and transforms.

Package Information

  • Package Name: d3-interpolate
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install d3-interpolate

Core Imports

ESM:

import { interpolate, interpolateNumber, interpolateRgb } from "d3-interpolate";

CommonJS:

const { interpolate, interpolateNumber, interpolateRgb } = require("d3-interpolate");

UMD (browser):

<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script>
const { interpolate, interpolateNumber, interpolateRgb } = d3;
</script>

Basic Usage

import { interpolate } from "d3-interpolate";

// Interpolate numbers
const numInterp = interpolate(10, 20);
console.log(numInterp(0.5)); // 15

// Interpolate colors with automatic detection
const colorInterp = interpolate("steelblue", "brown");
console.log(colorInterp(0.5)); // "rgb(142, 92, 109)"

// Interpolate complex objects
const objInterp = interpolate(
  { colors: ["red", "blue"] },
  { colors: ["white", "black"] }
);
console.log(objInterp(0.5)); // {colors: ["rgb(255, 128, 128)", "rgb(0, 0, 128)"]}

Architecture

d3-interpolate is organized around several key concepts:

  • Generic Interpolation: The main interpolate function automatically detects data types and selects appropriate interpolation methods
  • Type-Specific Interpolators: Specialized functions for numbers, strings, dates, arrays, and objects
  • Color Space Support: Multiple color space interpolators (RGB, HSL, Lab, HCL, Cubehelix) with gamma correction
  • Mathematical Functions: Spline interpolators and smooth zoom transitions
  • Transform Support: CSS and SVG transform string interpolation with proper decomposition
  • Functional Design: All interpolators return functions that accept parameter t ∈ [0, 1]

Capabilities

Generic Interpolation

Automatic type detection and interpolation method selection based on the end value type.

/**
 * Returns an interpolator between two arbitrary values using automatic type detection
 * @param a - Starting value
 * @param b - Ending value (determines interpolation method)
 * @returns Interpolator function that takes parameter t in [0,1]
 */
function interpolate(a: any, b: any): (t: number) => any;

Generic Interpolation

Basic Data Types

Core interpolators for numbers, strings, dates, and basic data structures.

function interpolateNumber(a: number, b: number): (t: number) => number;
function interpolateRound(a: number, b: number): (t: number) => number;
function interpolateString(a: string, b: string): (t: number) => string;
function interpolateDate(a: Date, b: Date): (t: number) => Date;

Basic Data Types

Collections

Interpolation methods for arrays and objects with recursive value interpolation.

function interpolateArray(a: any[], b: any[]): (t: number) => any[];
function interpolateNumberArray(a: number[], b: number[]): (t: number) => number[];
function interpolateObject(a: object, b: object): (t: number) => object;

Collections

Color Spaces

Specialized color interpolators for different color spaces with perceptual blending.

function interpolateRgb(a: string | Color, b: string | Color): (t: number) => string;
function interpolateHsl(a: string | Color, b: string | Color): (t: number) => string;
function interpolateLab(a: string | Color, b: string | Color): (t: number) => string;
function interpolateHcl(a: string | Color, b: string | Color): (t: number) => string;
function interpolateCubehelix(a: string | Color, b: string | Color): (t: number) => string;

Color Spaces

Mathematical Functions

Advanced mathematical interpolation including splines and smooth transitions.

function interpolateBasis(values: number[]): (t: number) => number;
function interpolateBasisClosed(values: number[]): (t: number) => number;
function interpolateZoom(a: [number, number, number], b: [number, number, number]): ((t: number) => [number, number, number]) & { duration: number };

Mathematical Functions

Transforms and Utilities

Transform interpolation and utility functions for advanced use cases.

function interpolateTransformCss(a: string, b: string): (t: number) => string;
function interpolateTransformSvg(a: string, b: string): (t: number) => string;
function piecewise(interpolate?: Function, values?: any[]): (t: number) => any;
function quantize(interpolator: (t: number) => any, n: number): any[];

Transforms and Utilities

Types

// Generic interpolator function type
type Interpolator<T> = (t: number) => T;

// Color input types (from d3-color dependency)
interface Color {
  r: number;
  g: number;
  b: number;
  opacity: number;
}

// Zoom interpolator with duration property
interface ZoomInterpolator extends Interpolator<[number, number, number]> {
  duration: number;
  rho(rho: number): ZoomInterpolator;
}

// Gamma-correctable color interpolators
interface GammaInterpolator {
  (a: string | Color, b: string | Color): Interpolator<string>;
  gamma(gamma: number): GammaInterpolator;
}