@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/mathematical/MathNumerics.js

@@ -0,0 +1,168 @@
+import { bisector, contours, extent, quantile } from "d3";
+// src/charts/mathematical/MathNumerics.ts
+var finite = Number.isFinite;
+/** Pure numerical routines shared by the mathematical charts: sampling, root finding, integration and level sets. */
+var MathNumerics = class {
+	static linspace(a, b, n) {
+		return Array.from({ length: n }, (_, i) => a + (b - a) * i / Math.max(1, n - 1));
+	}
+	/** Samples `fn`, returning continuous runs. Non-finite values and jumps (poles, steps) break the run. */
+	static trace(fn, [a, b], samples = 900) {
+		const points = this.linspace(a, b, samples).map((x) => [x, fn(x)]);
+		const ys = points.map((p) => p[1]).filter(finite).sort((p, q) => p - q);
+		const jump = ((quantile(ys, .9) ?? 0) - (quantile(ys, .1) ?? 0)) * 1.5 || Infinity;
+		const runs = [];
+		let run = [];
+		for (const point of points) {
+			const last = run[run.length - 1];
+			if (!finite(point[1]) || last && Math.abs(point[1] - last[1]) > jump) {
+				if (run.length > 1) runs.push(run);
+				run = [];
+			}
+			if (finite(point[1])) run.push(point);
+		}
+		if (run.length > 1) runs.push(run);
+		return runs;
+	}
+	/** Cuts runs at `lo..hi`, ending each piece exactly on the boundary. */
+	static clip(runs, [lo, hi]) {
+		const out = [];
+		for (const run of runs) {
+			let piece = [];
+			run.forEach((point, i) => {
+				const inside = point[1] >= lo && point[1] <= hi;
+				const prev = run[i - 1];
+				if (prev) {
+					const was = prev[1] >= lo && prev[1] <= hi;
+					if (was !== inside) {
+						const edge = (inside ? prev[1] : point[1]) < lo ? lo : hi;
+						const t = (edge - prev[1]) / (point[1] - prev[1]);
+						const cross = [prev[0] + (point[0] - prev[0]) * t, edge];
+						if (was) {
+							piece.push(cross);
+							out.push(piece);
+							piece = [];
+						} else piece.push(cross);
+					}
+				}
+				if (inside) piece.push(point);
+			});
+			if (piece.length > 1) out.push(piece);
+		}
+		return out;
+	}
+	static derivative(fn, x, h = .001) {
+		return (fn(x + h) - fn(x - h)) / (2 * h);
+	}
+	/** Antiderivative from `a`, by cumulative trapezoids on a table, skipping non-finite samples. */
+	static antiderivative(fn, [a, b], samples = 1200) {
+		const xs = this.linspace(a, b, samples);
+		const area = [[a, 0]];
+		xs.slice(1).forEach((x, i) => {
+			const y0 = fn(xs[i]), y1 = fn(x);
+			area.push([x, area[i][1] + (finite(y0) && finite(y1) ? (y0 + y1) / 2 * (x - xs[i]) : 0)]);
+		});
+		return this.interpolate(area);
+	}
+	/** Simpson's rule. */
+	static integrate(fn, a, b, n = 2e3) {
+		const h = (b - a) / n;
+		let total = 0;
+		for (let i = 0; i <= n; i++) {
+			const y = fn(a + i * h);
+			if (finite(y)) total += y * (i === 0 || i === n ? 1 : i % 2 ? 4 : 2);
+		}
+		return total * h / 3;
+	}
+	/** Bisected sign changes of `fn`; jumps across a pole are rejected. */
+	static roots(fn, [a, b], samples = 500) {
+		const xs = this.linspace(a, b, samples), found = [];
+		xs.slice(1).forEach((x, i) => {
+			let lo = xs[i], hi = x, flo = fn(lo);
+			const fhi = fn(hi);
+			if (!finite(flo) || !finite(fhi) || flo * fhi > 0) return;
+			for (let k = 0; k < 40; k++) {
+				const mid = (lo + hi) / 2, f = fn(mid);
+				if (f * flo > 0) {
+					lo = mid;
+					flo = f;
+				} else hi = mid;
+			}
+			if (Math.abs(fn((lo + hi) / 2)) < .001 * (1 + Math.abs(flo) + Math.abs(fhi))) found.push((lo + hi) / 2);
+		});
+		return found;
+	}
+	/** Piecewise-linear function through `points`; they are sorted, and duplicate x values keep the last. */
+	static interpolate(points) {
+		const sorted = [...new Map(points.filter((p) => finite(p[0]) && finite(p[1]))).entries()].sort((p, q) => p[0] - q[0]);
+		const find = bisector((p) => p[0]).left;
+		return (x) => {
+			if (!sorted.length) return NaN;
+			if (x < sorted[0][0] || x > sorted[sorted.length - 1][0]) return NaN;
+			const i = Math.max(1, find(sorted, x));
+			const a = sorted[i - 1], b = sorted[i];
+			if (!a) return NaN;
+			if (!b) return a[1];
+			return a[1] + (b[1] - a[1]) * (x - a[0]) / (b[0] - a[0]);
+		};
+	}
+	/** Classical Runge-Kutta. Stops at the box edge, at a blow-up, or after `steps`. */
+	static rk4(field, [x0, y0], dt, steps, bounds) {
+		const path = [[x0, y0]];
+		let x = x0, y = y0;
+		for (let i = 0; i < steps; i++) {
+			const [a, b] = field(x, y);
+			const [c, d] = field(x + dt * a / 2, y + dt * b / 2);
+			const [e, f] = field(x + dt * c / 2, y + dt * d / 2);
+			const [g, h] = field(x + dt * e, y + dt * f);
+			x += dt * (a + 2 * c + 2 * e + g) / 6;
+			y += dt * (b + 2 * d + 2 * f + h) / 6;
+			if (!finite(x) || !finite(y)) break;
+			if (bounds && (x < bounds[0][0] || x > bounds[0][1] || y < bounds[1][0] || y > bounds[1][1])) break;
+			path.push([x, y]);
+		}
+		return path;
+	}
+	/** Open polylines where `fn(x, y) = level`, by marching squares; the grid edge never closes a curve. */
+	static levelLines(fn, [[x0, x1], [y0, y1]], level = 0, nx = 180, ny = 130) {
+		const values = this.grid(fn, [[x0, x1], [y0, y1]], nx, ny);
+		return this.linesOf(values, [[x0, x1], [y0, y1]], level, nx, ny);
+	}
+	/** Samples `fn` on an `nx × ny` lattice, row by row, with non-finite values clamped. */
+	static grid(fn, [[x0, x1], [y0, y1]], nx, ny) {
+		const values = new Array(nx * ny);
+		for (let j = 0; j < ny; j++) for (let i = 0; i < nx; i++) {
+			const v = fn(x0 + (x1 - x0) * i / (nx - 1), y0 + (y1 - y0) * j / (ny - 1));
+			values[i + j * nx] = finite(v) ? Math.max(-1e6, Math.min(1e6, v)) : 1e6;
+		}
+		return values;
+	}
+	/** Level lines of an already sampled grid. */
+	static linesOf(values, [[x0, x1], [y0, y1]], level, nx, ny) {
+		const shape = contours().size([nx, ny]).thresholds([level])(values)[0];
+		const lines = [];
+		const edge = (p) => p[0] <= .5 || p[0] >= nx - .5 || p[1] <= .5 || p[1] >= ny - .5;
+		const place = (p) => [x0 + (x1 - x0) * (p[0] - .5) / (nx - 1), y0 + (y1 - y0) * (p[1] - .5) / (ny - 1)];
+		for (const polygon of shape?.coordinates ?? []) for (const ring of polygon) {
+			let run = [];
+			for (const point of ring) if (edge(point)) {
+				if (run.length > 1) lines.push(run);
+				run = [];
+			} else run.push(place(point));
+			if (run.length > 1) lines.push(run);
+		}
+		return lines;
+	}
+	/** Rescales two columns into `box`, for fitting demo rows or arbitrary user units onto a math domain. */
+	static fit(rows, x, y, [[x0, x1], [y0, y1]]) {
+		const [ax = 0, bx = 1] = extent(rows, (row) => +row[x]);
+		const [ay = 0, by = 1] = extent(rows, (row) => +row[y]);
+		return rows.map((row) => [x0 + (x1 - x0) * (+row[x] - ax) / (bx - ax || 1), y0 + (y1 - y0) * (+row[y] - ay) / (by - ay || 1)]);
+	}
+	/** Short, tidy number for tooltips and readouts. */
+	static format(value, digits = 3) {
+		if (!finite(value)) return "–";
+		return String(+value.toPrecision(digits)).replace("-", "−");
+	}
+};
+export { MathNumerics };

package/dist/charts/mathematical/MathPlane.js

@@ -0,0 +1,207 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { MathMarks } from "./MathMarks.js";
+import { range, scaleLinear } from "d3";
+// src/charts/mathematical/MathPlane.ts
+/** Box frames sit outside the plot; cross frames run through the origin like a textbook figure. */
+var PlaneFrame = /* @__PURE__ */ function(PlaneFrame) {
+	PlaneFrame["Box"] = "box";
+	PlaneFrame["Cross"] = "cross";
+	return PlaneFrame;
+}({});
+var PlaneTicks = /* @__PURE__ */ function(PlaneTicks) {
+	PlaneTicks["Decimal"] = "decimal";
+	PlaneTicks["Pi"] = "pi";
+	return PlaneTicks;
+}({});
+var ARROW = 9;
+/** Coordinate plane in data units, shared by the charts in this module: picks domains, grid, axes and π ticks. */
+var MathPlane = class MathPlane extends Chart2D {
+	/** Pixels held back inside `ctx.plot` for a side panel. */
+	reserve() {
+		return {
+			right: 0,
+			bottom: 0
+		};
+	}
+	keepsProportion() {
+		return this.options.equal ?? false;
+	}
+	/** False when vertical position is layout, not a value. */
+	labelsY() {
+		return true;
+	}
+	/** Fixed spacing for x ticks when they count whole things. */
+	xStep() {
+		return null;
+	}
+	defaults() {
+		return {
+			frame: "box",
+			ticks: "decimal",
+			yScale: ScaleKind.Linear
+		};
+	}
+	plotMargin() {
+		if (this.options.frame === "cross") return {
+			top: 10,
+			right: 12,
+			bottom: 10,
+			left: 12
+		};
+		return {
+			top: 10,
+			right: 14,
+			bottom: this.options.xLabel ? 40 : 24,
+			left: this.options.yLabel ? 58 : 42
+		};
+	}
+	draw(ctx) {
+		const plane = this.plane(ctx);
+		this.drawFrame(ctx, plane);
+		this.plotPlane(ctx, plane);
+		ctx.group("plane-spine").raise();
+		ctx.group("plane-tick").raise().style("pointer-events", "none");
+	}
+	plane(ctx) {
+		const { xDomain, yDomain, yScale } = this.options;
+		const natural = this.extent();
+		const room = this.reserve();
+		const width = Math.max(10, ctx.plot.width - room.right), height = Math.max(10, ctx.plot.height - room.bottom);
+		let [x0, x1] = this.widen(xDomain ?? natural[0]);
+		let [y0, y1] = this.widen(yDomain ?? natural[1]);
+		if (this.keepsProportion()) {
+			const unit = Math.max((x1 - x0) / width, (y1 - y0) / height);
+			const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2;
+			[x0, x1] = [cx - unit * width / 2, cx + unit * width / 2];
+			[y0, y1] = [cy - unit * height / 2, cy + unit * height / 2];
+		}
+		return {
+			x: scaleLinear([x0, x1], [0, width]),
+			y: Scales.continuous(yScale).domain([y0, y1]).range([height, 0]),
+			width,
+			height,
+			box: [[x0, x1], [y0, y1]]
+		};
+	}
+	widen([a, b]) {
+		if (!Number.isFinite(a) || !Number.isFinite(b)) return [-1, 1];
+		return a === b ? [a - 1, b + 1] : [a, b];
+	}
+	xTicks({ x, box, width }) {
+		const count = Math.min(7, Math.floor(width / 70));
+		const step0 = this.xStep();
+		if (step0) return range(Math.ceil(box[0][0] / step0) * step0, box[0][1] + 1e-9, step0);
+		if (this.options.ticks !== "pi") return x.ticks(count);
+		const [a, b] = box[0];
+		let step = Math.PI / 4;
+		while ((b - a) / step > count + 1) step *= 2;
+		const ticks = [];
+		for (let k = Math.ceil(a / step); k * step <= b; k++) ticks.push(k * step);
+		return ticks;
+	}
+	yTicks({ y, box, height }) {
+		if (!this.labelsY()) return [];
+		const count = Math.min(6, Math.floor(height / 42));
+		if (this.options.yScale !== ScaleKind.Symlog) return y.ticks(count);
+		const [a, b] = box[1], top = Math.max(Math.abs(a), Math.abs(b));
+		const powers = [0];
+		for (let p = 1; p <= top; p *= 10) powers.push(p, -p);
+		return powers.filter((v) => v >= a && v <= b).sort((p, q) => p - q);
+	}
+	xText(value, plane) {
+		if (this.options.ticks === "pi") return MathPlane.piLabel(value);
+		return this.xStep() ? String(value) : plane.x.tickFormat(7)(value);
+	}
+	drawFrame(ctx, plane) {
+		const { x, y, width, height, box } = plane;
+		const cross = this.options.frame === "cross";
+		const xs = this.xTicks(plane), ys = this.yTicks(plane);
+		const grid = [...xs.map((v) => ({
+			key: `x${v}`,
+			x1: x(v),
+			x2: x(v),
+			y1: 0,
+			y2: height
+		})), ...ys.map((v) => ({
+			key: `y${v}`,
+			x1: 0,
+			x2: width,
+			y1: y(v),
+			y2: y(v)
+		}))];
+		ctx.set(ctx.marks("plane-grid", "line", grid, (d) => d.key).attr("stroke", ctx.theme.grid).attr("stroke-width", 1), {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		}, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		const clamp = (value, [a, b]) => Math.max(a, Math.min(b, value));
+		const axisY = cross ? y(clamp(0, box[1])) : height;
+		const axisX = cross ? x(clamp(0, box[0])) : 0;
+		const spines = cross ? [{
+			key: "x",
+			d: MathMarks.arrow(0, axisY, width - 1, axisY, ARROW)
+		}, {
+			key: "y",
+			d: MathMarks.arrow(axisX, height, axisX, 1, ARROW)
+		}] : [{
+			key: "x",
+			d: MathMarks.line([[0, height], [width, height]])
+		}];
+		ctx.set(ctx.marks("plane-spine", "path", spines, (d) => d.key).attr("stroke", ctx.theme.axis).attr("fill", ctx.theme.axis).attr("stroke-width", 1), { d: (d) => d.d });
+		const below = axisY + 15 < height;
+		const before = axisX > 34;
+		const ticks = [...xs.filter((v) => !(cross && v === 0)).map((v) => ({
+			key: `x${v}`,
+			text: this.xText(v, plane),
+			x: x(v),
+			y: cross ? axisY + (below ? 14 : -6) : height + 16,
+			anchor: "middle"
+		})), ...ys.filter((v) => !(cross && v === 0)).map((v) => ({
+			key: `y${v}`,
+			text: y.tickFormat(6)(v),
+			x: cross ? axisX + (before ? -6 : 6) : -8,
+			y: y(v) + 4,
+			anchor: cross && !before ? "start" : "end"
+		}))].filter((tick) => tick.anchor !== "middle" || tick.x - tick.text.length * 3.1 >= -14 && tick.x + tick.text.length * 3.1 <= width + 10);
+		ctx.text(ctx.marks("plane-tick", "text", ticks, (d) => d.key).attr("text-anchor", (d) => d.anchor).attr("x", (d) => d.x).attr("y", (d) => d.y).text((d) => d.text), 10.5, cross ? "muted" : "secondary");
+		const { xLabel, yLabel } = this.options;
+		const titles = [xLabel && {
+			key: "x",
+			text: xLabel,
+			transform: cross ? `translate(${width - 4},${axisY - 8})` : `translate(${width / 2},${height + 34})`,
+			anchor: cross ? "end" : "middle"
+		}, yLabel && {
+			key: "y",
+			text: yLabel,
+			transform: cross ? `translate(${axisX + 8},12)` : `translate(-44,${height / 2}) rotate(-90)`,
+			anchor: cross ? "start" : "middle"
+		}].filter(Boolean);
+		ctx.text(ctx.marks("plane-title", "text", titles, (d) => d.key).attr("text-anchor", (d) => d.anchor).attr("transform", (d) => d.transform).text((d) => d.text));
+	}
+	/** Invisible columns that read a value anywhere along x: a thin curve is too small a hover target. */
+	probe(ctx, { x, width, height }, content, bins = 72) {
+		const step = width / bins;
+		const strips = ctx.marks("plane-probe", "rect", Array.from({ length: bins }, (_, i) => i)).attr("x", (d) => d * step).attr("y", 0).attr("width", step).attr("height", height).attr("fill", "transparent");
+		ctx.hover(strips, (d) => content(x.invert((d + .5) * step))).style("cursor", "crosshair");
+	}
+	/** `3π/2`-style label for a multiple of π/4. */
+	static piLabel(value) {
+		const quarters = Math.round(value / Math.PI * 4);
+		if (!quarters) return "0";
+		let top = Math.abs(quarters), bottom = 4;
+		while (top % 2 === 0 && bottom > 1) {
+			top /= 2;
+			bottom /= 2;
+		}
+		return `${quarters < 0 ? "−" : ""}${top === 1 ? "" : top}π${bottom === 1 ? "" : `/${bottom}`}`;
+	}
+};
+export { MathPlane, PlaneFrame, PlaneTicks };

package/dist/charts/mathematical/NumberLineChart.js

@@ -0,0 +1,261 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { group, max } from "d3";
+// src/charts/mathematical/NumberLineChart.ts
+var NumberLineMark = /* @__PURE__ */ function(NumberLineMark) {
+	NumberLineMark["Interval"] = "interval";
+	NumberLineMark["Point"] = "point";
+	NumberLineMark["Hop"] = "hop";
+	return NumberLineMark;
+}({});
+var NumberLineArrangement = /* @__PURE__ */ function(NumberLineArrangement) {
+	NumberLineArrangement["Shared"] = "shared";
+	NumberLineArrangement["Stacked"] = "stacked";
+	return NumberLineArrangement;
+}({});
+var LANE = 20;
+/** Values, intervals and steps on a single axis: for inequalities, ranges and solution sets. */
+var NumberLineChart = class extends Chart2D {
+	static meta = {
+		id: "number-line",
+		name: "Number line",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Places values and intervals on one axis, with open or closed endpoints, for inequalities, ranges and steps.",
+		tags: [
+			"interval",
+			"inequality",
+			"solution set",
+			"range"
+		],
+		sample: (seed) => SampleData.categories(seed, 4, 2).map((row, i) => {
+			const v = +row.value;
+			return {
+				label: String(row.category),
+				series: String(row.series),
+				start: v - 18 - i % 3 * 3,
+				end: v + 12,
+				bounds: [
+					"[]",
+					"[)",
+					"(]",
+					"()"
+				][i % 4]
+			};
+		}),
+		variants: {
+			mark: Object.values(NumberLineMark),
+			arrangement: Object.values(NumberLineArrangement),
+			scale: [
+				ScaleKind.Linear,
+				ScaleKind.Log,
+				ScaleKind.Sqrt
+			],
+			minor: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			mark: "interval",
+			arrangement: "shared",
+			scale: ScaleKind.Linear,
+			minor: false,
+			start: "start",
+			end: "end",
+			series: "series",
+			label: "label",
+			bounds: "bounds"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 22,
+			bottom: 8,
+			left: this.options.arrangement === "stacked" ? 66 : 22
+		};
+	}
+	items() {
+		const { data, start, end, series, label, bounds, mark, scale } = this.options;
+		const legal = (v) => Number.isFinite(v) && (scale === ScaleKind.Linear || v > 0);
+		const cell = (v) => v === null || v === void 0 || v === "" ? NaN : +v;
+		return data.flatMap((row, i) => {
+			const a = cell(row[start]), b = cell(row[end]);
+			if (!legal(a)) return [];
+			const span = mark === "interval" && legal(b);
+			const hi = span ? Math.max(a, b) : a, lo = span ? Math.min(a, b) : a;
+			const notation = String(row[bounds] ?? "[]");
+			return [{
+				key: `${i}`,
+				series: String(row[series] ?? "Values"),
+				label: String(row[label] ?? ""),
+				start: lo,
+				end: hi,
+				closedStart: notation[0] !== "(",
+				closedEnd: notation[1] !== ")",
+				lane: 0
+			}];
+		});
+	}
+	place(items) {
+		const ends = [];
+		for (const item of [...items].sort((a, b) => a.start - b.start)) {
+			const lane = ends.findIndex((end) => end < item.start);
+			item.lane = lane < 0 ? ends.length : lane;
+			ends[item.lane] = item.end;
+		}
+		return items;
+	}
+	draw(ctx) {
+		const { arrangement, mark, scale, minor } = this.options;
+		const { width, height } = ctx.plot;
+		const all = this.items();
+		const values = all.flatMap((item) => [item.start, item.end]);
+		const low = values.length ? Math.min(...values) : scale === ScaleKind.Linear ? 0 : 1, high = values.length ? Math.max(...values) : 10;
+		const pad = scale === ScaleKind.Log ? 1.15 : 1;
+		const domain = scale === ScaleKind.Log ? [low / pad, high * pad] : [scale === ScaleKind.Sqrt ? Math.max(0, low - (high - low) * .06) : low - (high - low || 1) * .06, high + (high - low || 1) * .06];
+		const x = Scales.continuous(scale).domain(domain).range([6, width - 6]).nice();
+		const stacked = arrangement === "stacked";
+		const groups = stacked ? [...group(all, (item) => item.series)] : [["", all]];
+		const hop = mark === "hop";
+		const point = mark === "point";
+		const h = height / Math.max(1, groups.length);
+		const major = x.ticks(Math.floor(width / 72)).filter((tick, i, list) => scale !== ScaleKind.Log || list.length < 9 || Number.isInteger(Math.log10(tick)));
+		const fine = minor ? x.ticks(Math.floor(width / 14)).filter((tick) => !major.includes(tick)) : [];
+		const format = x.tickFormat(Math.floor(width / 72), "~s");
+		const axes = groups.map(([name, items], g) => {
+			const place = this.place(items);
+			const y = h * (g + 1) - 26;
+			return {
+				key: name || "all",
+				name,
+				items: place,
+				y,
+				lanes: Math.max(1, (max(place, (d) => d.lane) ?? 0) + 1)
+			};
+		});
+		const line = ctx.marks("num-axis", "path", axes, (d) => d.key).attr("stroke", ctx.theme.axis).attr("fill", ctx.theme.axis).attr("stroke-width", 1.25);
+		ctx.set(line, { d: (d) => `${MathMarks.arrow(-16, d.y, width + 16, d.y, 8)}${MathMarks.head(-16, d.y, Math.PI, 8)}` });
+		const ticks = axes.flatMap((axis) => [...major.map((tick) => ({
+			key: `${axis.key}/${tick}`,
+			x: x(tick),
+			y1: axis.y - 5,
+			y2: axis.y + 5
+		})), ...fine.map((tick) => ({
+			key: `${axis.key}/m${tick}`,
+			x: x(tick),
+			y1: axis.y - 2.5,
+			y2: axis.y + 2.5
+		}))]);
+		ctx.set(ctx.marks("num-tick", "line", ticks, (d) => d.key).attr("stroke", ctx.theme.axis), {
+			x1: (d) => d.x,
+			x2: (d) => d.x,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		const texts = axes.flatMap((axis) => major.map((tick) => ({
+			key: `${axis.key}/${tick}`,
+			text: format(tick),
+			x: x(tick),
+			y: axis.y + 18
+		})));
+		ctx.text(ctx.marks("num-value", "text", texts, (d) => d.key).attr("text-anchor", "middle").attr("x", (d) => d.x).attr("y", (d) => d.y).text((d) => d.text), 10.5);
+		ctx.text(ctx.marks("num-series", "text", stacked ? axes : [], (d) => d.key).attr("text-anchor", "end").attr("x", -24).attr("y", (d) => d.y + 4).text((d) => d.name.slice(0, 7)), 11, "ink");
+		const rows = axes.flatMap((axis) => {
+			const step = Math.min(LANE, (h - 44) / axis.lanes);
+			return axis.items.map((item) => ({
+				...item,
+				y: axis.y - 14 - item.lane * step,
+				axis: axis.y,
+				step
+			}));
+		});
+		const color = (d) => ctx.palette.color(d.series);
+		const intervals = mark === "interval" ? rows : [];
+		const bars = ctx.marks("num-bar", "path", intervals, (d) => d.key).attr("fill", "none").attr("stroke", color).attr("stroke-width", 3).attr("stroke-linecap", "butt");
+		const seg = (d) => MathMarks.line([[x(d.start), d.y], [x(d.end), d.y]]);
+		ctx.set(bars, { d: seg }, { d: (d) => MathMarks.line([[x(d.start), d.y], [x(d.start), d.y]]) }, 30);
+		const describe = (d) => ({
+			title: d.label || d.series,
+			color: color(d),
+			rows: [["Set", `${d.closedStart ? "[" : "("}${MathNumerics.format(d.start)}, ${MathNumerics.format(d.end)}${d.closedEnd ? "]" : ")"}`]]
+		});
+		ctx.hover(bars, describe);
+		const caps = intervals.flatMap((d) => [{
+			...d,
+			id: `${d.key}a`,
+			at: d.start,
+			closed: d.closedStart
+		}, {
+			...d,
+			id: `${d.key}b`,
+			at: d.end,
+			closed: d.closedEnd
+		}]);
+		const ends = ctx.marks("num-end", "circle", caps, (d) => d.id).attr("fill", (d) => d.closed ? color(d) : ctx.theme.surface).attr("stroke", color).attr("stroke-width", 2);
+		ctx.set(ends, {
+			cx: (d) => x(d.at),
+			cy: (d) => d.y,
+			r: 4
+		}, {
+			cx: (d) => x(d.at),
+			cy: (d) => d.y,
+			r: 0
+		});
+		ctx.hover(ends, describe);
+		const dots = point || hop ? rows : [];
+		const pins = MathMarks.dot(ctx, ctx.marks("num-dot", "circle", dots, (d) => d.key), (d) => x(d.start), (d) => hop ? d.axis : d.y, color, 5);
+		ctx.hover(pins, (d) => ({
+			title: d.label || d.series,
+			color: color(d),
+			rows: [["Value", MathNumerics.format(d.start)]]
+		}));
+		const jumps = hop ? axes.flatMap((axis) => {
+			const sorted = [...axis.items].sort((a, b) => a.start - b.start);
+			return sorted.slice(1).map((item, i) => {
+				const a = x(sorted[i].start), b = x(item.start), rise = Math.min(h - 40, Math.max(14, (b - a) * .5));
+				const mid = (a + b) / 2;
+				return {
+					key: item.key,
+					series: item.series,
+					from: sorted[i],
+					to: item,
+					d: `M${a} ${axis.y - 6}Q${mid} ${axis.y - 6 - rise * 1.6} ${b} ${axis.y - 6}`,
+					head: MathMarks.head(b, axis.y - 6, Math.atan2(rise * 1.6, b - mid), 7),
+					top: axis.y - 6 - rise * .8,
+					mid,
+					span: b - a
+				};
+			}).filter((jump) => jump.span > 3);
+		}) : [];
+		const arcs = MathMarks.stroke(ctx.marks("num-hop", "path", jumps, (d) => d.key), (d) => ctx.palette.color(d.series), 1.5);
+		MathMarks.reveal(ctx, arcs, (d) => d.d);
+		ctx.hover(arcs, (d) => ({
+			title: `${MathNumerics.format(d.from.start)} → ${MathNumerics.format(d.to.start)}`,
+			color: ctx.palette.color(d.series),
+			rows: [["Step", MathNumerics.format(d.to.start - d.from.start)]]
+		}));
+		ctx.set(ctx.marks("num-hop-head", "path", jumps, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series)), { d: (d) => d.head });
+		const seen = [];
+		const labelled = (point ? rows : mark === "interval" ? rows : []).filter((d) => {
+			const room = mark === "interval" ? x(d.end) - x(d.start) : 60;
+			if (d.step < 18 || !d.label || d.label.length * 6 > room - 12) return false;
+			const left = (mark === "interval" ? (x(d.start) + x(d.end)) / 2 : x(d.start)) - d.label.length * 3;
+			const right = left + d.label.length * 6;
+			if (seen.some(([a, b, y]) => Math.abs(y - d.y) < 10 && left < b && right > a)) return false;
+			seen.push([
+				left,
+				right,
+				d.y
+			]);
+			return true;
+		});
+		ctx.text(ctx.marks("num-label", "text", labelled, (d) => d.key).attr("text-anchor", "middle").attr("x", (d) => mark === "interval" ? (x(d.start) + x(d.end)) / 2 : x(d.start)).attr("y", (d) => d.y - 6).text((d) => d.label), 10);
+	}
+};
+export { NumberLineArrangement, NumberLineChart, NumberLineMark };