charts.scale
Map data values onto screen positions and back: linear, log, time, band and point scales, and nice domains.
1.0.0 (not the latest) · published 2026-10-03 by charlie · Anterra
Pinned by 34 tests, run in TypeScript, Python and Rust.linearScale 14 · invertLinear 8 · niceDomain 12
What it does
A linear scale maps a data value onto a position: `linearScale([0, 100], [0, 500], 25, false)` is `125`, a quarter of the way along a 500 pixel axis. `invertLinear` goes the other way, from a pointer position back to the value under it, and `niceDomain` widens a data extent such as `[0.13, 9.7]` to `[0, 10]` so the axis starts and ends on a tick.
This is a group: three functions that only make sense together, in one package, each in its own file. Install only what you call with `require charts.scale ^1.0.0 only=linearScale`; `invertLinear` brings `linearScale` with it, because it reuses its arithmetic.
The functions
A group: 3 functions that work together, each in its own file, each pinned by its own tests in TypeScript, Python and Rust. A project can install only the ones it calls.
- linearScale (domain: float[], range: float[], value: float, clamp: bool) -> float
- invertLinear (domain: float[], range: float[], value: float) -> float
- niceDomain (domain: float[], count: int) -> NiceDomain
The type it declares, generated into your project
/** A domain widened to round numbers, and the tick step that made them round. */
export interface NiceDomain {
/** [from, to], in the order given */
readonly domain: readonly number[];
/** 1, 2 or 5 times a power of ten */
readonly step: number;
}
Once installed, your code imports each one from the group's module.
linearScale throws on bad input 14 tests
export function linearScale(domain: readonly number[], range: readonly number[], value: number, clamp: boolean): number
| domain | float[] | the data extent [from, to]; from and to may be in either order but not equal |
| range | float[] | the output extent [from, to], usually pixels; may be reversed for a y axis |
| value | float | |
| clamp | bool | keep the result inside the range when value is outside the domain |
| returns | float | rounded to 6 decimal places |
For example
linearScale(0, 100, 0, 500, 25, false)→ 125 a quarter of the way along a 500 pixel axislinearScale(0, 100, 0, 500, 0, false)→ 0 the start of the domain is the start of the rangelinearScale(0, 100, 0, 500, 100, false)→ 500 the end of the domain is the end of the range
import { linearScale } from "#fune/charts.scale@^1";
/**
* Where `value` lands on the range, as a straight-line map from the domain.
* Outside the domain the line carries on, unless `clamp` stops it at the
* range's ends.
*/
export function linearScale(domain: readonly number[], range: readonly number[], value: number, clamp: boolean): number {
const [d0, d1] = pair(domain, "domain");
const [r0, r1] = pair(range, "range");
let t = normalise(d0, d1, value, "domain");
if (clamp) t = Math.max(0, Math.min(1, t));
return round6(interpolate(r0, r1, t));
}
// The helpers below are exported for invertLinear, which is the same line
// read the other way; they are not part of the group's contract.
/** The two ends of a domain or range, or an error naming which one is wrong. */
export function pair(values: readonly number[], what: string): [number, number] {
if (values.length !== 2) throw new Error(`${what} must have exactly 2 values, [from, to]; got ${values.length}`);
return [values[0], values[1]];
}
/** How far along [from, to] the value is: 0 at from, 1 at to. */
export function normalise(from: number, to: number, value: number, what: string): number {
// Equal ends would divide by zero and answer NaN or Infinity, which then
// draws nothing without saying why.
if (from === to) throw new Error(`${what} has no width: both ends are ${from}`);
return (value - from) / (to - from);
}
export function interpolate(from: number, to: number, t: number): number {
return from + t * (to - from);
}
/** Half up to 6 decimal places, the same way in every language. */
export function round6(x: number): number {
return Math.floor(x * 1e6 + 0.5) / 1e6;
}invertLinear throws on bad input 8 tests
export function invertLinear(domain: readonly number[], range: readonly number[], value: number): number
| domain | float[] | |
| range | float[] | |
| value | float | a position in the range, such as a mouse coordinate |
| returns | float | the data value at that position, rounded to 6 decimal places |
For example
invertLinear(0, 100, 0, 500, 125)→ 25 a pixel back to its valueinvertLinear(0, 100, 0, 500, 0)→ 0 the start of the range is the start of the domaininvertLinear(0, 50, 300, 0, 240)→ 10 a reversed range
import { invertLinear } from "#fune/charts.scale@^1";
Imports name this capability’s declared dependencies, which fune builds next to it in your project; each one links to its page.
import { interpolate, normalise, pair, round6 } from "./charts_scale_linear_scale.ts"; ← linearScale, another function of this group · built into the same file, even by a slim install
/**
* The domain value at a position in the range: linearScale read backwards,
* for turning a pointer coordinate into the value under it. Never clamped; a
* position past the end of the axis is a value past the end of the data.
*/
export function invertLinear(domain: readonly number[], range: readonly number[], value: number): number {
const [d0, d1] = pair(domain, "domain");
const [r0, r1] = pair(range, "range");
return round6(interpolate(d0, d1, normalise(r0, r1, value, "range")));
}niceDomain throws on bad input 12 tests
export function niceDomain(domain: readonly number[], count: number): NiceDomain
| domain | float[] | |
| count | int | roughly how many ticks the axis will have, at least 1 |
| returns | NiceDomain |
For example
niceDomain(3, 97, 10)→ domain 0, 100, step 10 widens to whole tensniceDomain(0.13, 0.87, 10)→ domain 0.1, 0.9, step 0.1 small numbers widen to tenthsniceDomain(0.13, 9.7, 5)→ domain 0, 10, step 2 a messy extent becomes 0 to 10
import { niceDomain } from "#fune/charts.scale@^1";
import type { NiceDomain } from "./charts_scale_types.ts";
/**
* Widen a domain to multiples of a round tick step (1, 2 or 5 times a power
* of ten) chosen for about `count` ticks. Widening can change the best step,
* so it repeats until the step settles, as d3's nice() does.
*/
export function niceDomain(domain: readonly number[], count: number): NiceDomain {
if (domain.length !== 2) throw new Error(`domain must have exactly 2 values, [from, to]; got ${domain.length}`);
if (!Number.isInteger(count) || count < 1) throw new Error(`count must be a whole number of at least 1, got ${count}`);
const reversed = domain[1] < domain[0];
let lo = reversed ? domain[1] : domain[0];
let hi = reversed ? domain[0] : domain[1];
if (lo === hi) return { domain: [domain[0], domain[1]], step: 0 };
let step = 0;
for (let i = 0; i < 10; i++) {
const next = tickStep(lo, hi, count);
if (next === step) break;
step = next;
if (step >= 1) {
lo = Math.floor(lo / step) * step;
hi = Math.ceil(hi / step) * step;
} else {
// A fractional step divides badly (0.3 / 0.1 is 2.9999999999999996), so
// multiply by its whole-number inverse instead.
const inverse = Math.floor(1 / step + 0.5);
lo = Math.floor(lo * inverse) / inverse;
hi = Math.ceil(hi * inverse) / inverse;
}
}
const ends = reversed ? [round6(hi), round6(lo)] : [round6(lo), round6(hi)];
return { domain: ends, step: round6(step) };
}
function tickStep(lo: number, hi: number, count: number): number {
const raw = (hi - lo) / count;
// Powers of ten by repeated multiplication rather than log10, whose last
// digit is not guaranteed to agree between languages.
let power = 1;
while (power * 10 <= raw) power *= 10;
while (power > raw) power /= 10;
const error = raw / power;
const factor = error >= Math.sqrt(50) ? 10 : error >= Math.sqrt(10) ? 5 : error >= Math.sqrt(2) ? 2 : 1;
return factor * power;
}
function round6(x: number): number {
return Math.floor(x * 1e6 + 0.5) / 1e6;
}Install
fune build
With that line in your source, in a TypeScript project (language typescript in fune.project), fune build resolves it and nothing else, pins them in fune.lock, downloads only the TypeScript package of each, and builds the code above into your project’s .fune/build, one readable file per capability with a header linking back here. Or pin a range in fune.project and build in one step:
fune add charts.scale
That builds the whole group. To build only what you call, and whatever it uses inside the group:
fune add charts.scale --only linearScale
The manifest, vectors and README with only the TypeScript implementation. Install it without the registry with fune add ./charts.scale-1.0.0-typescript.fune, or fetch it from a terminal with fune pull charts.scale@1.0.0:typescript.
The whole function, every language, is one file too: charts.scale-1.0.0.fune, 25,804 bytes, sha256 3b2f87385b03e0c3f4e8139e79ee5270cc7b4a60f23f951474f461fe8d250251. It installs into a project of any language.
Customise it in your app
The seams this capability offers. Put a marker directly above a function of your own and fune build wires it into the built code; the package on the registry is not changed, the built file’s header lists it under CUSTOMISED, and fune hooks lists every hook in the project. How hooks work.
before — your function gets the arguments and returns them, changed or not, or throws to refuse the call.
// fune: before charts.scale.linearScale
// fune: before charts.scale.invertLinear
// fune: before charts.scale.niceDomain
after — your function gets the result and the arguments, and returns the final result.
// fune: after charts.scale.linearScale
// fune: after charts.scale.invertLinear
// fune: after charts.scale.niceDomain
replace — it requires no other capability, so there is no dependency to replace.
step — your function runs at a numbered point inside a function’s body, receives the in-scope values it names as parameters, and may return replacements. List the points with fune show charts.scale --steps.
// fune: step charts.scale.<fn> after <n|label>
Tests
A version published now needs at least 8 tests for every function, and one that expects the error for each function that throws; the registry refuses it otherwise. fune verify --all runs each case in TypeScript, Python and Rust, and a project runs them again with fune verify. This page lists the cases; it does not run them. The exact JSON is vectors.json.
linearScale 14 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| a quarter of the way along a 500 pixel axis | 0, 100, 0, 500, 25, false | → | 125 |
| the start of the domain is the start of the range | 0, 100, 0, 500, 0, false | → | 0 |
| the end of the domain is the end of the range | 0, 100, 0, 500, 100, false | → | 500 |
| a reversed range, as a y axis drawn downwards | 0, 50, 300, 0, 10, false | → | 240 |
| a reversed domain | 100, 0, 0, 1, 75, false | → | 0.25 |
| negative values | -20, 40, 0, 600, -5, false | → | 150 |
| past the end runs on without clamp | 0, 10, 0, 100, 15, false | → | 150 |
| past the end stops at the range with clamp | 0, 10, 0, 100, 15, true | → | 100 |
| before the start stops at the range with clamp | 0, 10, 100, 200, -3, true | → | 100 |
| clamp changes nothing inside the domain | 0, 10, 0, 100, 2.5, true | → | 25 |
Show the other 4 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| a third is rounded to 6 decimal places | 0, 3, 0, 1, 1, false | → | 0.333 |
| fractional domain | 0.1, 0.3, 0, 10, 0.2, false | → | 5 |
| a domain with no width is an error | 5, 5, 0, 100, 5, false | → | error: domain has no width |
| a domain needs two ends | 0, 1, 2, 0, 100, 1, false | → | error: domain must have exactly 2 values, [from, to] |
invertLinear 8 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| a pixel back to its value | 0, 100, 0, 500, 125 | → | 25 |
| the start of the range is the start of the domain | 0, 100, 0, 500, 0 | → | 0 |
| a reversed range | 0, 50, 300, 0, 240 | → | 10 |
| past the end of the axis is past the end of the data | 0, 10, 0, 100, 150 | → | 15 |
| a third is rounded to 6 decimal places | 0, 1, 0, 3, 1 | → | 0.333 |
| negative domain | -20, 40, 0, 600, 150 | → | -5 |
| a range with no width is an error | 0, 10, 7, 7, 7 | → | error: range has no width |
| a range needs two ends | 0, 10, 7, 7 | → | error: range must have exactly 2 values, [from, to] |
niceDomain 12 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| widens to whole tens | 3, 97, 10 | → | domain 0, 100, step 10 |
| small numbers widen to tenths | 0.13, 0.87, 10 | → | domain 0.1, 0.9, step 0.1 |
| a messy extent becomes 0 to 10 | 0.13, 9.7, 5 | → | domain 0, 10, step 2 |
| an already nice domain is unchanged | 0, 100, 10 | → | domain 0, 100, step 10 |
| negative to positive | -12.5, 37.2, 5 | → | domain -20, 40, step 10 |
| a reversed domain stays reversed | 97, 3, 10 | → | domain 100, 0, step 10 |
| large values step in fives of a power of ten | 1,234, 98,765, 20 | → | domain 0, 100,000, step 5,000 |
| one tick | 2, 9, 1 | → | domain 0, 10, step 10 |
| a fractional step that divides badly | 0.3, 0.9, 6 | → | domain 0.3, 0.9, step 0.1 |
| equal ends are returned as they are | 4, 4, 10 | → | domain 4, 4, step 0 |
Show the other 2 tests
| Case | Arguments | Expected | |
|---|---|---|---|
| count must be at least 1 | 0, 10, 0 | → | error: count must be a whole number of at least 1 |
| a domain needs two ends | 1, 5 | → | error: domain must have exactly 2 values, [from, to] |
More from the author
Scales are geometry, not money, so they work in floating point. Every result is rounded to 6 decimal places inside the function (half up, as `floor(x * 1e6 + 0.5) / 1e6`), which is far below a pixel and makes TypeScript, Python and Rust agree to the digit.
A domain or range is a two-element list, `[from, to]`. Either may run backwards: a y axis usually maps `[0, max]` onto `[height, 0]`. A domain whose two ends are equal has no width to map, and `linearScale` raises rather than divide by zero; `invertLinear` raises for a range with equal ends for the same reason.
Without `clamp`, a value outside the domain maps outside the range, which is what an axis drawing a point past its end wants. With it, the result stops at the range's ends.
`niceDomain` picks a tick step of 1, 2 or 5 times a power of ten, aiming for about `count` ticks across the domain, then moves each end out to a multiple of that step, repeating until the step stops changing. It returns the step with the domain, so the axis can draw ticks on exactly those multiples. A domain whose ends are equal is returned unchanged with a step of 0.