or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation.mdcolor-interpolation.mdcolor-schemes.mddata-processing.mdformat.mdgeo.mdindex.mdinteractions.mdlayouts.mdscales-axes.mdselection.mdshapes.mdtime.md
tile.json

format.mddocs/

Number Formatting

Number formatting utilities for displaying numeric values with customizable precision, notation, and localization. Essential for axis labels, data labels, tooltips, and any numeric display in visualizations.

Capabilities

Format Specifier

Creates a formatting function from a specifier string that describes how numbers should be displayed.

/**
 * Create a number formatter from a specifier string
 * @param specifier - Format specifier string (e.g., ".2f", "$,.2f", "+.1%")
 * @returns Function that formats numbers according to the specifier
 */
function format(specifier: string): (n: number) => string;

/**
 * Format a single number using a specifier string
 * @param specifier - Format specifier string
 * @param number - Number to format
 * @returns Formatted string representation
 */
function format(specifier: string, number: number): string;

Usage Examples:

import { format } from "d3";

// Basic decimal formatting
const f = format(".2f");
f(42.123); // "42.12"

// Currency formatting
const currency = format("$,.2f");
currency(1234.567); // "$1,234.57"

// Percentage formatting
const percent = format(".1%");
percent(0.123); // "12.3%"

// Scientific notation
const scientific = format(".2e");
scientific(12345); // "1.23e+4"

// Direct formatting
format(".0f", 42.8); // "43"

Format Specifier Syntax

Format specifiers follow the pattern: [[fill]align][sign][symbol][0][width][,][.precision][~][type]

interface FormatSpecifier {
  fill: string;        // Fill character (default: space)
  align: string;       // Alignment: "<" (left), ">" (right), "^" (center), "=" (pad after sign)
  sign: string;        // Sign: "-" (negative only), "+" (always), " " (space for positive)
  symbol: string;      // Symbol: "$" (currency), "#" (binary/octal/hex prefix)
  zero: boolean;       // Zero padding
  width: number;       // Minimum field width
  comma: boolean;      // Thousands separator
  precision: number;   // Decimal precision
  trim: boolean;       // Trim trailing zeros ("~" modifier)
  type: string;        // Format type: "e", "f", "g", "r", "s", "%", "p", "b", "o", "d", "x", "X", "c"
}

/**
 * Parse a format specifier string into its components
 * @param specifier - Format specifier string
 * @returns FormatSpecifier object with parsed components
 */
function formatSpecifier(specifier: string): FormatSpecifier;

Format Types

Different numeric representations available through the type parameter.

// Fixed-point notation
format(".2f")(3.14159); // "3.14"

// Exponential notation
format(".2e")(1234); // "1.23e+3"

// General format (fixed or exponential as appropriate)
format(".3g")(1234); // "1.23e+3"
format(".3g")(0.001234); // "0.00123"

// Rounded to significant digits
format(".3r")(1234.5); // "1230"

// SI prefix notation
format(".3s")(1234567); // "1.23M"

// Percentage
format(".1%")(0.123); // "12.3%"

// Binary, octal, decimal, hexadecimal
format("b")(42); // "101010"
format("o")(42); // "52"
format("d")(42); // "42"
format("x")(42); // "2a"
format("X")(42); // "2A"

Precision Formatting

Create a formatter that automatically determines appropriate precision.

/**
 * Create a precision formatter for a numeric range
 * @param step - Step size or representative value for precision calculation
 * @returns Format function with appropriate precision
 */
function formatPrefix(specifier: string, value: number): (n: number) => string;

/**
 * Format with SI prefix notation and appropriate precision
 * @param specifier - Base format specifier
 * @param value - Reference value for determining prefix
 * @returns Format function with SI prefix
 */
function formatPrefix(specifier: string, value: number): (n: number) => string;

Usage Examples:

import { formatPrefix } from "d3";

// SI prefix formatting
const f = formatPrefix(",.0", 1e6);
f(1234567); // "1M"
f(1234); // "1k"

// Appropriate precision for scale
const precision = formatPrefix(".1", 0.01);
precision(0.0123); // "12.3m"

Locale-Aware Formatting

Support for internationalized number formatting with custom locales.

/**
 * Create a new locale with custom formatting rules
 * @param definition - Locale definition object
 * @returns Locale object with format methods
 */
function formatLocale(definition: LocaleDefinition): Locale;

/**
 * Get the default locale
 * @returns Current default locale object
 */
function formatDefaultLocale(): Locale;

interface LocaleDefinition {
  decimal: string;           // Decimal separator (e.g., ".")
  thousands: string;         // Thousands separator (e.g., ",")
  grouping: number[];        // Grouping pattern (e.g., [3])
  currency: [string, string]; // Currency prefix and suffix (e.g., ["$", ""])
  numerals?: string[];       // Numeral substitution strings
  percent: string;           // Percent symbol (e.g., "%")
  minus: string;             // Minus sign (e.g., "−")
  nan: string;               // Not-a-number representation (e.g., "NaN")
}

interface Locale {
  format(specifier: string): (n: number) => string;
  formatPrefix(specifier: string, value: number): (n: number) => string;
}

Usage Examples:

import { formatLocale, formatDefaultLocale } from "d3";

// Create French locale
const frenchLocale = formatLocale({
  decimal: ",",
  thousands: " ",
  grouping: [3],
  currency: ["", " €"],
  percent: " %",
  minus: "−",
  nan: "N/D"
});

const frenchFormat = frenchLocale.format("$,.2f");
frenchFormat(1234.56); // "1 234,56 €"

// Set as default
formatDefaultLocale(frenchLocale);

Prebuilt Locales

Common locale definitions for international formatting.

// Common locale identifiers
const localeEnUs: LocaleDefinition;  // English (US) - default
const localeEnGb: LocaleDefinition;  // English (UK)
const localeFrFr: LocaleDefinition;  // French (France)
const localeDeDe: LocaleDefinition;  // German (Germany)
const localeEsEs: LocaleDefinition;  // Spanish (Spain)
const localeItIt: LocaleDefinition;  // Italian (Italy)
const localeJaJp: LocaleDefinition;  // Japanese (Japan)
const localeKoKr: LocaleDefinition;  // Korean (Korea)
const localeZhCn: LocaleDefinition;  // Chinese (China)
const localeRuRu: LocaleDefinition;  // Russian (Russia)