tessl/npm-d3-scale

Encodings that map abstract data to visual representation.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Continuous Scales

Name: tessl/npm-d3-scale
Author: tessl

Continuous scales map continuous input domains to continuous output ranges, with optional mathematical transformations. They are the foundation for mapping quantitative data to visual dimensions like position, size, and opacity.

Capabilities

Linear Scale

The most common scale type, providing direct proportional mapping between domain and range.

/**
 * Creates a linear scale with proportional mapping between domain and range
 * @returns LinearScale instance
 */
function scaleLinear(): LinearScale;

interface LinearScale {
  /** Apply linear transformation to domain value */
  (value: number): number;
  
  /** Get or set the input domain [min, max] */
  domain(): [number, number];
  domain(domain: [number, number]): this;
  
  /** Get or set the output range [min, max] */
  range(): [number, number];
  range(range: [number, number]): this;
  
  /** Get or set range with rounding to integers */
  rangeRound(range: [number, number]): this;
  
  /** Reverse transformation: range value to domain value */
  invert(value: number): number;
  
  /** Enable or disable domain clamping */
  clamp(): boolean;
  clamp(clamp: boolean): this;
  
  /** Get or set interpolation function */
  interpolate(): InterpolatorFunction;
  interpolate(interpolate: InterpolatorFunction): this;
  
  /** Generate approximately count representative values from domain */
  ticks(count?: number): number[];
  
  /** Format tick values for display */
  tickFormat(count?: number, specifier?: string): (n: number) => string;
  
  /** Extend domain to nice round values */
  nice(count?: number): this;
  
  /** Create independent copy */
  copy(): LinearScale;
  
  /** Get or set unknown value handling */
  unknown(): any;
  unknown(value: any): this;
}

Usage Examples:

import { scaleLinear } from "d3-scale";

// Basic linear scale
const scale = scaleLinear()
  .domain([0, 100])
  .range([0, 500]);

console.log(scale(50));     // 250
console.log(scale.invert(250)); // 50

// Scale with nice domain
const dataScale = scaleLinear()
  .domain([0.2, 0.97])
  .range([0, 400])
  .nice();

console.log(dataScale.domain()); // [0, 1] - extended to nice values

// Clamped scale
const clampedScale = scaleLinear()
  .domain([0, 10])
  .range([0, 100])
  .clamp(true);

console.log(clampedScale(15)); // 100 (clamped to range maximum)

Identity Scale

Special case where the input domain equals the output range, effectively a pass-through transformation.

/**
 * Creates an identity scale where domain equals range
 * @returns IdentityScale instance
 */
function scaleIdentity(): IdentityScale;

interface IdentityScale {
  /** Identity transformation (returns input value) */
  (value: number): number;
  
  /** Get or set the domain/range values */
  domain(): [number, number];
  domain(domain: [number, number]): this;
  
  /** Get domain (identical to domain for identity scales) */
  range(): [number, number];
  
  /** Reverse transformation (returns input value) */
  invert(value: number): number;
  
  /** Generate ticks */
  ticks(count?: number): number[];
  
  /** Format tick values */
  tickFormat(count?: number, specifier?: string): (n: number) => string;
  
  /** Extend domain to nice values */
  nice(count?: number): this;
  
  /** Create independent copy */
  copy(): IdentityScale;
}

Power Scales

Apply power transformations to the input domain, useful for non-linear relationships.

/**
 * Creates a power scale with configurable exponent
 * @returns PowerScale instance
 */
function scalePow(): PowerScale;

/**
 * Creates a square root scale (power scale with exponent 0.5)
 * @returns PowerScale instance with exponent 0.5
 */
function scaleSqrt(): PowerScale;

interface PowerScale {
  /** Apply power transformation */
  (value: number): number;
  
  /** Get or set input domain */
  domain(): number[];
  domain(domain: number[]): this;
  
  /** Get or set output range */
  range(): any[];
  range(range: any[]): this;
  
  /** Get or set range with rounding */
  rangeRound(range: number[]): this;
  
  /** Reverse transformation */
  invert(value: number): number;
  
  /** Get or set power exponent */
  exponent(): number;
  exponent(exponent: number): this;
  
  /** Enable or disable clamping */
  clamp(): boolean;
  clamp(clamp: boolean): this;
  
  /** Get or set interpolation function */
  interpolate(): InterpolatorFunction;
  interpolate(interpolate: InterpolatorFunction): this;
  
  /** Generate ticks */
  ticks(count?: number): number[];
  
  /** Format ticks */
  tickFormat(count?: number, specifier?: string): (n: number) => string;
  
  /** Nice domain */
  nice(count?: number): this;
  
  /** Copy scale */
  copy(): PowerScale;
  
  /** Unknown value handling */
  unknown(): any;
  unknown(value: any): this;
}

Usage Examples:

import { scalePow, scaleSqrt } from "d3-scale";

// Square scale for area mapping
const areaScale = scalePow()
  .exponent(2)
  .domain([0, 10])
  .range([0, 100]);

console.log(areaScale(5)); // 25 - quadratic growth

// Square root scale (common for symbol sizes)
const sizeScale = scaleSqrt()
  .domain([0, 100])
  .range([0, 20]);

console.log(sizeScale(25)); // 10 - sqrt(25/100) * 20

Logarithmic Scales

Apply logarithmic transformations, ideal for data spanning multiple orders of magnitude.

/**
 * Creates a logarithmic scale with configurable base
 * @returns LogScale instance
 */
function scaleLog(): LogScale;

interface LogScale {
  /** Apply logarithmic transformation */
  (value: number): number;
  
  /** Get or set input domain (must be same sign, non-zero) */
  domain(): number[];
  domain(domain: number[]): this;
  
  /** Get or set output range */
  range(): any[];
  range(range: any[]): this;
  
  /** Get or set range with rounding */
  rangeRound(range: number[]): this;
  
  /** Reverse transformation */
  invert(value: number): number;
  
  /** Get or set logarithm base */
  base(): number;
  base(base: number): this;
  
  /** Enable or disable clamping */
  clamp(): boolean;
  clamp(clamp: boolean): this;
  
  /** Get or set interpolation function */
  interpolate(): InterpolatorFunction;
  interpolate(interpolate: InterpolatorFunction): this;
  
  /** Generate ticks */
  ticks(count?: number): number[];
  
  /** Format ticks */
  tickFormat(count?: number, specifier?: string): (n: number) => string;
  
  /** Nice domain */
  nice(): this;
  
  /** Copy scale */
  copy(): LogScale;
  
  /** Unknown value handling */
  unknown(): any;
  unknown(value: any): this;
}

Symmetric Logarithmic Scales

Handle both positive and negative values with a linear region around zero.

/**
 * Creates a symmetric logarithmic scale
 * @returns SymlogScale instance
 */
function scaleSymlog(): SymlogScale;

interface SymlogScale {
  /** Apply symlog transformation */
  (value: number): number;
  
  /** Get or set input domain */
  domain(): number[];
  domain(domain: number[]): this;
  
  /** Get or set output range */
  range(): any[];
  range(range: any[]): this;
  
  /** Reverse transformation */
  invert(value: number): number;
  
  /** Get or set symlog constant (controls linear region size) */
  constant(): number;
  constant(constant: number): this;
  
  /** Enable or disable clamping */
  clamp(): boolean;
  clamp(clamp: boolean): this;
  
  /** Generate ticks */
  ticks(count?: number): number[];
  
  /** Format ticks */
  tickFormat(count?: number, specifier?: string): (n: number) => string;
  
  /** Nice domain */
  nice(): this;
  
  /** Copy scale */
  copy(): SymlogScale;
}

Time Scales

Map temporal data to visual positions using time intervals.

/**
 * Creates a time scale using local time
 * @returns TimeScale instance
 */
function scaleTime(): TimeScale;

/**
 * Creates a time scale using UTC time
 * @returns TimeScale instance
 */
function scaleUtc(): TimeScale;

interface TimeScale {
  /** Apply time transformation */
  (value: Date): number;
  
  /** Get or set temporal domain */
  domain(): [Date, Date];
  domain(domain: [Date, Date]): this;
  
  /** Get or set output range */
  range(): [number, number];
  range(range: [number, number]): this;
  
  /** Get or set range with rounding */
  rangeRound(range: [number, number]): this;
  
  /** Reverse transformation */
  invert(value: number): Date;
  
  /** Enable or disable clamping */
  clamp(): boolean;
  clamp(clamp: boolean): this;
  
  /** Get or set interpolation function */
  interpolate(): InterpolatorFunction;
  interpolate(interpolate: InterpolatorFunction): this;
  
  /** Generate time-based ticks */
  ticks(interval?: any): Date[];
  ticks(count?: number): Date[];
  
  /** Format time values */
  tickFormat(count?: number, specifier?: string): (d: Date) => string;
  
  /** Nice domain to time boundaries */
  nice(interval?: any): this;
  nice(count?: number): this;
  
  /** Copy scale */
  copy(): TimeScale;
  
  /** Unknown value handling */
  unknown(): any;
  unknown(value: any): this;
}

Usage Examples:

import { scaleTime } from "d3-scale";

// Time scale for temporal data
const timeScale = scaleTime()
  .domain([new Date(2020, 0, 1), new Date(2023, 0, 1)])
  .range([0, 400]);

console.log(timeScale(new Date(2021, 6, 1))); // ~133 - July 2021 position

// Nice time domain
timeScale.nice();
console.log(timeScale.domain()); // Extended to nice time boundaries

Radial Scales

Specialized scales for polar/radial coordinate systems.

/**
 * Creates a radial scale (sqrt scale with range starting at 0)
 * @returns RadialScale instance
 */
function scaleRadial(): RadialScale;

interface RadialScale {
  /** Apply radial transformation */
  (value: number): number;
  
  /** Get or set input domain */
  domain(): number[];
  domain(domain: number[]): this;
  
  /** Get or set output range (must start with 0) */
  range(): [number, number];
  range(range: [number, number]): this;
  
  /** Reverse transformation */
  invert(value: number): number;
  
  /** Generate ticks */
  ticks(count?: number): number[];
  
  /** Format ticks */
  tickFormat(count?: number, specifier?: string): (n: number) => string;
  
  /** Nice domain */
  nice(count?: number): this;
  
  /** Copy scale */
  copy(): RadialScale;
}

Type Definitions

type InterpolatorFunction = (t: number) => any;

Install with Tessl CLI

npx tessl i tessl/npm-d3-scale

docs

tessl/npm-d3-scale