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

generic.mddocs/

Generic Interpolation

The main interpolation function that automatically detects data types and selects the appropriate interpolation method based on the end value.

Capabilities

Main Interpolate Function

Returns an interpolator between two arbitrary values using automatic type detection.

/**
 * Returns an interpolator between the two arbitrary values a and b.
 * The interpolator implementation is based on the type of the end value b.
 * @param a - Starting value (will be coerced to match b's type)
 * @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;

Type Detection Algorithm:

The interpolation method is selected based on the type of value b:

  1. If b is null, undefined or a boolean, use the constant b
  2. If b is a number, use interpolateNumber
  3. If b is a color or a string coercible to a color, use interpolateRgb
  4. If b is a Date, use interpolateDate
  5. If b is a string, use interpolateString
  6. If b is a typed array of numbers, use interpolateNumberArray
  7. If b is a generic array, use interpolateArray
  8. If b is coercible to a number, use interpolateNumber
  9. Otherwise, use interpolateObject

Usage Examples:

import { interpolate } from "d3-interpolate";

// Number interpolation (automatic detection)
const numInterp = interpolate(0, 100);
console.log(numInterp(0.5)); // 50

// Color interpolation (automatic detection)
const colorInterp = interpolate("red", "blue");
console.log(colorInterp(0.5)); // "rgb(128, 0, 128)"

// String interpolation with embedded numbers
const stringInterp = interpolate("2px", "12px");
console.log(stringInterp(0.5)); // "7px"

// Array interpolation
const arrayInterp = interpolate([0, 1], [1, 10, 100]);
console.log(arrayInterp(0.5)); // [0.5, 5.5, 100]

// Object interpolation with nested values
const objInterp = interpolate(
  { x: 0, color: "red" },
  { x: 100, color: "blue", z: 50 }
);
console.log(objInterp(0.5)); // { x: 50, color: "rgb(128, 0, 128)", z: 50 }

// Date interpolation
const dateInterp = interpolate(
  new Date(2020, 0, 1),
  new Date(2021, 0, 1)
);
console.log(dateInterp(0.5)); // Date object representing mid-2020

// Constant values (null, undefined, boolean)
const constInterp = interpolate("anything", null);
console.log(constInterp(0.5)); // null

Type Coercion:

The starting value a is automatically coerced to match the type of the ending value b:

// String to number coercion
const coercedInterp = interpolate("10", 20);
console.log(coercedInterp(0.5)); // 15 (numeric result)

// Object property coercion
const mixedInterp = interpolate(
  { value: "5" },      // string value
  { value: 10 }        // number value
);
console.log(mixedInterp(0.5)); // { value: 7.5 }

Discrete Interpolation

Creates a discrete interpolator for stepping through array values.

/**
 * Returns a discrete interpolator for the given array of values.
 * Maps t in [0, 1/n) to values[0], t in [1/n, 2/n) to values[1], etc.
 * @param values - Array of discrete values to step through
 * @returns Interpolator function that returns discrete values
 */
function interpolateDiscrete(values: any[]): (t: number) => any;

Usage Examples:

import { interpolateDiscrete } from "d3-interpolate";

// Discrete color steps
const colorSteps = interpolateDiscrete(["red", "green", "blue"]);
console.log(colorSteps(0.1));  // "red"
console.log(colorSteps(0.4));  // "green"
console.log(colorSteps(0.7));  // "blue"
console.log(colorSteps(0.99)); // "blue"

// Discrete size steps
const sizeSteps = interpolateDiscrete([10, 20, 30, 40]);
console.log(sizeSteps(0.0));   // 10
console.log(sizeSteps(0.3));   // 20
console.log(sizeSteps(0.6));   // 30
console.log(sizeSteps(0.9));   // 40