@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/mathematical/IterationMap.js

@@ -0,0 +1,62 @@
+// src/charts/mathematical/IterationMap.ts
+var IterationMapKind = /* @__PURE__ */ function(IterationMapKind) {
+	IterationMapKind["Logistic"] = "logistic";
+	IterationMapKind["Sine"] = "sine";
+	IterationMapKind["Ricker"] = "ricker";
+	IterationMapKind["Tent"] = "tent";
+	IterationMapKind["Gauss"] = "gauss";
+	IterationMapKind["Cubic"] = "cubic";
+	return IterationMapKind;
+}({});
+/** One-parameter maps of the interval: the shared raw material of bifurcation and cobweb charts. */
+var ITERATION_MAPS = {
+	["logistic"]: {
+		f: (x, r) => r * x * (1 - x),
+		r: [2.8, 4],
+		x: [0, 1],
+		start: .3,
+		symbol: "r·x(1−x)",
+		zoom: [.72, .86]
+	},
+	["sine"]: {
+		f: (x, r) => r * Math.sin(Math.PI * x),
+		r: [.6, 1],
+		x: [0, 1],
+		start: .3,
+		symbol: "r·sin(πx)",
+		zoom: [.72, .86]
+	},
+	["ricker"]: {
+		f: (x, r) => x * Math.exp(r * (1 - x)),
+		r: [1.6, 4],
+		x: [0, 4],
+		start: .4,
+		symbol: "x·e^{r(1−x)}",
+		zoom: [.72, .86]
+	},
+	["tent"]: {
+		f: (x, r) => r * Math.min(x, 1 - x),
+		r: [1, 2],
+		x: [0, 1],
+		start: .31,
+		symbol: "r·min(x, 1−x)",
+		zoom: [.3, .5]
+	},
+	["gauss"]: {
+		f: (x, r) => Math.exp(-6.2 * x * x) + r,
+		r: [-1, 1],
+		x: [-1, 1.4],
+		start: .1,
+		symbol: "e^{−6.2x²} + r",
+		zoom: [.2, .42]
+	},
+	["cubic"]: {
+		f: (x, r) => r * x * (1 - x * x),
+		r: [1.6, 2.598],
+		x: [-1.2, 1.2],
+		start: .3,
+		symbol: "r·x(1−x²)",
+		zoom: [.72, .86]
+	}
+};
+export { ITERATION_MAPS, IterationMapKind };

package/dist/charts/mathematical/LissajousChart.js

@@ -0,0 +1,242 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+// src/charts/mathematical/LissajousChart.ts
+var LissajousLayout = /* @__PURE__ */ function(LissajousLayout) {
+	LissajousLayout["Overlay"] = "overlay";
+	LissajousLayout["Table"] = "table";
+	LissajousLayout["Scope"] = "scope";
+	return LissajousLayout;
+}({});
+/** Plain curve, a family swept through phase, a damped harmonograph, or evenly timed beads. */
+var LissajousView = /* @__PURE__ */ function(LissajousView) {
+	LissajousView["Curve"] = "curve";
+	LissajousView["Phases"] = "phases";
+	LissajousView["Harmonograph"] = "harmonograph";
+	LissajousView["Beads"] = "beads";
+	return LissajousView;
+}({});
+/** A fixed frequency ratio, or `Data` to take `a` and `b` from the rows. */
+var LissajousRatio = /* @__PURE__ */ function(LissajousRatio) {
+	LissajousRatio["Data"] = "data";
+	LissajousRatio["OneTwo"] = "1:2";
+	LissajousRatio["TwoThree"] = "2:3";
+	LissajousRatio["ThreeFour"] = "3:4";
+	LissajousRatio["ThreeFive"] = "3:5";
+	LissajousRatio["FiveSix"] = "5:6";
+	return LissajousRatio;
+}({});
+var SAMPLES = 900;
+var TAU = Math.PI * 2;
+/** Curves from two perpendicular oscillations: the signature of frequency ratio and phase, as on an oscilloscope. */
+var LissajousChart = class extends Chart2D {
+	static meta = {
+		id: "lissajous",
+		name: "Lissajous chart",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Traces two perpendicular oscillations against each other, singly, as a ratio table, or as a scope with its source waves.",
+		tags: [
+			"harmonograph",
+			"oscilloscope",
+			"frequency ratio",
+			"bowditch"
+		],
+		sample: (seed) => SampleData.categories(seed, 2, 1).map((row, i) => ({
+			name: String(row.category),
+			a: 3 + i,
+			b: 2 + 2 * i,
+			delta: +row.value / 100 * Math.PI
+		})),
+		variants: {
+			layout: Object.values(LissajousLayout),
+			view: Object.values(LissajousView),
+			ratio: Object.values(LissajousRatio)
+		},
+		valid: (v) => !(v.layout === "table" && (v.ratio !== "data" || v.view === "beads"))
+	};
+	defaults() {
+		return {
+			layout: "overlay",
+			view: "curve",
+			ratio: "data",
+			name: "name",
+			a: "a",
+			b: "b",
+			delta: "delta"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 14,
+			bottom: 10,
+			left: 14
+		};
+	}
+	figures() {
+		const { data, ratio, name, a, b, delta } = this.options;
+		const usable = data.filter((row) => Number.isFinite(+row[a]) && Number.isFinite(+row[b]) && +row[a] > 0 && +row[b] > 0);
+		const phase = Number.isFinite(+usable[0]?.[delta]) ? +usable[0][delta] : Math.PI / 2;
+		if (ratio !== "data") {
+			const [p, q] = ratio.split(":").map(Number);
+			return [{
+				key: ratio,
+				name: ratio,
+				a: p,
+				b: q,
+				delta: phase
+			}];
+		}
+		return usable.map((row, i) => ({
+			key: `${i}`,
+			name: String(row[name] ?? `${row[a]}:${row[b]}`),
+			a: +row[a],
+			b: +row[b],
+			delta: +row[delta] || 0
+		}));
+	}
+	point(f, t, decay) {
+		const fall = Math.exp(-decay * t);
+		return [Math.sin(f.a * t + f.delta) * fall, Math.sin(f.b * t) * fall];
+	}
+	/** Pixel polyline of one figure in the square at `(cx, cy)` with half-size `r`. */
+	curve(f, cx, cy, r, decay, turns) {
+		return MathNumerics.linspace(0, TAU * turns, SAMPLES * Math.max(1, Math.ceil(turns / 3))).map((t) => {
+			const [u, v] = this.point(f, t, decay);
+			return [cx + u * r, cy - v * r];
+		});
+	}
+	paths(f, cx, cy, r) {
+		const { view } = this.options;
+		if (view === "phases") return MathNumerics.linspace(0, Math.PI, 7).slice(0, 6).map((delta, i) => ({
+			key: `${f.key}/${i}`,
+			name: f.name,
+			width: i ? 1 : 2,
+			opacity: i ? .45 : 1,
+			d: MathMarks.line(this.curve({
+				...f,
+				delta: f.delta + delta
+			}, cx, cy, r, 0, 1))
+		}));
+		if (view === "harmonograph") return [{
+			key: f.key,
+			name: f.name,
+			width: 1,
+			opacity: .9,
+			d: MathMarks.line(this.curve(f, cx, cy, r, .022, 9))
+		}];
+		return [{
+			key: f.key,
+			name: f.name,
+			width: view === "beads" ? 1 : 2,
+			opacity: view === "beads" ? .45 : 1,
+			d: MathMarks.line(this.curve(f, cx, cy, r, 0, 1))
+		}];
+	}
+	beads(f, cx, cy, r) {
+		if (this.options.view !== "beads") return [];
+		return Array.from({ length: 36 }, (_, i) => {
+			const [u, v] = this.point(f, TAU * i / 36, 0);
+			return {
+				key: `${f.key}/${i}`,
+				name: f.name,
+				x: cx + u * r,
+				y: cy - v * r
+			};
+		});
+	}
+	draw(ctx) {
+		const { layout } = this.options;
+		if (layout === "table") this.drawTable(ctx);
+		else if (layout === "scope") this.drawScope(ctx);
+		else this.drawOverlay(ctx);
+	}
+	paint2(ctx, items, beads, color) {
+		const lines = MathMarks.stroke(ctx.marks("lis-curve", "path", items, (d) => d.key), (d) => color(d.name)).attr("stroke-width", (d) => d.width).attr("stroke-opacity", (d) => d.opacity);
+		MathMarks.reveal(ctx, lines, (d) => d.d);
+		ctx.hover(lines, (d) => ({
+			title: d.name,
+			color: color(d.name)
+		}));
+		const dots = MathMarks.dot(ctx, ctx.marks("lis-bead", "circle", beads, (d) => d.key), (d) => d.x, (d) => d.y, (d) => color(d.name), 4);
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			color: color(d.name)
+		}));
+	}
+	drawOverlay(ctx) {
+		const { width, height } = ctx.plot;
+		const r = Math.min(width, height) / 2 - 8, cx = width / 2, cy = height / 2;
+		const figures = this.figures();
+		ctx.set(ctx.marks("lis-box", "rect", [0]).attr("fill", "none").attr("stroke", ctx.theme.grid), {
+			x: cx - r,
+			y: cy - r,
+			width: 2 * r,
+			height: 2 * r
+		});
+		ctx.set(ctx.marks("lis-axis", "path", [0]).attr("stroke", ctx.theme.grid).attr("fill", "none"), { d: `M${cx - r} ${cy}H${cx + r}M${cx} ${cy - r}V${cy + r}` });
+		this.paint2(ctx, figures.flatMap((f) => this.paths(f, cx, cy, r)), figures.flatMap((f) => this.beads(f, cx, cy, r)), ctx.palette.color);
+	}
+	/** The figure with its two source waves laid along the top and left, projecting onto it. */
+	drawScope(ctx) {
+		const { width, height } = ctx.plot;
+		const band = 44, r = (Math.min(width - band, height - band) - 16) / 2;
+		const cx = (width + band) / 2, cy = 52 + r;
+		const f = this.figures()[0];
+		if (!f) return;
+		const ts = MathNumerics.linspace(0, TAU, 240);
+		const waves = [{
+			key: "x",
+			d: MathMarks.line(ts.map((t, i) => [cx - r + 2 * r * i / 239, band / 2 - Math.sin(f.a * t + f.delta) * (band / 2 - 4)]))
+		}, {
+			key: "y",
+			d: MathMarks.line(ts.map((t, i) => [cx - r - 10 - band / 2 + Math.sin(f.b * t) * (band / 2 - 4), cy + r - 2 * r * i / 239]))
+		}];
+		ctx.set(ctx.marks("lis-box", "rect", [0]).attr("fill", "none").attr("stroke", ctx.theme.grid), {
+			x: cx - r,
+			y: cy - r,
+			width: 2 * r,
+			height: 2 * r
+		});
+		ctx.set(ctx.marks("lis-axis", "path", [0]).attr("stroke", ctx.theme.grid).attr("fill", "none"), { d: `M${cx - r} ${cy}H${cx + r}M${cx} ${cy - r}V${cy + r}` });
+		ctx.set(MathMarks.stroke(ctx.marks("lis-wave", "path", waves, (d) => d.key), ctx.theme.inkMuted, 1.5), { d: (d) => d.d });
+		this.paint2(ctx, this.paths(f, cx, cy, r), this.beads(f, cx, cy, r), ctx.palette.color);
+		ctx.text(ctx.marks("lis-note", "text", [`${f.a}:${f.b}`]).attr("x", Math.max(0, cx - r - band - 10)).attr("y", 14).text((d) => d), 12, "ink");
+	}
+	/** Bowditch table: every frequency pair, read like a times table. */
+	drawTable(ctx) {
+		const { width, height } = ctx.plot;
+		const delta = this.figures()[0]?.delta ?? Math.PI / 2;
+		const cols = width > 460 ? 6 : 5, rows = height > 300 ? 5 : 4;
+		const head = 18, w = (width - head) / cols, h = (height - head) / rows, r = Math.min(w, h) / 2 - 5;
+		const figures = [];
+		for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) figures.push({
+			key: `${i}/${j}`,
+			name: `${i + 1}:${j + 1}`,
+			a: i + 1,
+			b: j + 1,
+			delta,
+			cx: head + w * (i + .5),
+			cy: head + h * (j + .5)
+		});
+		const tone = ctx.palette.color("Figure");
+		this.paint2(ctx, figures.flatMap((f) => this.paths(f, f.cx, f.cy, r)), [], () => tone);
+		const labels = [...Array.from({ length: cols }, (_, i) => ({
+			key: `c${i}`,
+			text: `${i + 1}`,
+			x: head + w * (i + .5),
+			y: 11
+		})), ...Array.from({ length: rows }, (_, j) => ({
+			key: `r${j}`,
+			text: `${j + 1}`,
+			x: 6,
+			y: head + h * (j + .5) + 4
+		}))];
+		ctx.text(ctx.marks("lis-head", "text", labels, (d) => d.key).attr("text-anchor", "middle").attr("x", (d) => d.x).attr("y", (d) => d.y).text((d) => d.text), 10.5);
+	}
+};
+export { LissajousChart, LissajousLayout, LissajousRatio, LissajousView };

package/dist/charts/mathematical/MandelbrotChart.js

@@ -0,0 +1,191 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandRaster } from "./BandRaster.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { MathPlane } from "./MathPlane.js";
+// src/charts/mathematical/MandelbrotChart.ts
+var FractalSet = /* @__PURE__ */ function(FractalSet) {
+	FractalSet["Mandelbrot"] = "mandelbrot";
+	FractalSet["Julia"] = "julia";
+	FractalSet["Multibrot"] = "multibrot";
+	FractalSet["Tricorn"] = "tricorn";
+	FractalSet["BurningShip"] = "burning-ship";
+	return FractalSet;
+}({});
+var FractalShading = /* @__PURE__ */ function(FractalShading) {
+	FractalShading["Escape"] = "escape";
+	FractalShading["Stripes"] = "stripes";
+	FractalShading["Binary"] = "binary";
+	FractalShading["Distance"] = "distance";
+	return FractalShading;
+}({});
+var FractalRegion = /* @__PURE__ */ function(FractalRegion) {
+	FractalRegion["Full"] = "full";
+	FractalRegion["Seahorse"] = "seahorse";
+	FractalRegion["Elephant"] = "elephant";
+	FractalRegion["Minibrot"] = "minibrot";
+	return FractalRegion;
+}({});
+var BANDS = 40;
+var REGIONS = {
+	["full"]: [[-2.3, .75], [-1.2, 1.2]],
+	["seahorse"]: [[-.752, -.738], [.106, .118]],
+	["elephant"]: [[.265, .295], [-.004, .02]],
+	["minibrot"]: [[-.172, -.142], [1.02, 1.044]]
+};
+var WHOLE = {
+	["mandelbrot"]: REGIONS["full"],
+	["julia"]: [[-1.7, 1.7], [-1.15, 1.15]],
+	["multibrot"]: [[-1.5, 1.5], [-1.4, 1.4]],
+	["tricorn"]: [[-2, 2], [-1.6, 1.6]],
+	["burning-ship"]: [[-2.3, 1.4], [-2, .9]]
+};
+/** Escape-time fractals as vector bands: a zoomable reference image of complex dynamics, with orbits of pinned points. */
+var MandelbrotChart = class extends MathPlane {
+	static meta = {
+		id: "mandelbrot",
+		name: "Mandelbrot chart",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Renders escape-time fractal sets with smooth banding, zoom regions and the orbits of chosen points.",
+		tags: [
+			"fractal",
+			"julia set",
+			"burning ship",
+			"complex dynamics"
+		],
+		sample: (seed) => MathNumerics.fit(SampleData.points(seed, 3, 3), "x", "y", [[-1.1, .25], [-.55, .55]]).map(([x, y]) => ({
+			x,
+			y
+		})),
+		variants: {
+			set: Object.values(FractalSet),
+			shading: Object.values(FractalShading),
+			region: Object.values(FractalRegion),
+			orbits: [false, true]
+		},
+		valid: (v) => (v.set === "mandelbrot" || v.region === "full") && !(v.shading === "distance" && v.set !== "mandelbrot" && v.set !== "julia") && !(v.orbits && (v.region !== "full" || v.set !== "mandelbrot" && v.set !== "julia"))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			set: "mandelbrot",
+			shading: "escape",
+			region: "full",
+			orbits: false,
+			equal: true,
+			c: [-.8, .156],
+			x: "x",
+			y: "y",
+			cell: 1.5
+		};
+	}
+	extent() {
+		const { set, region } = this.options;
+		return set === "mandelbrot" ? REGIONS[region] : WHOLE[set];
+	}
+	/** One step of the set's rule. */
+	step(a, b, cr, ci) {
+		switch (this.options.set) {
+			case "multibrot": return [a * a * a - 3 * a * b * b + cr, 3 * a * a * b - b * b * b + ci];
+			case "tricorn": return [a * a - b * b + cr, -2 * a * b + ci];
+			case "burning-ship": {
+				const p = Math.abs(a), q = Math.abs(b);
+				return [p * p - q * q + cr, 2 * p * q + ci];
+			}
+			default: return [a * a - b * b + cr, 2 * a * b + ci];
+		}
+	}
+	seedOf(re, im) {
+		const { set, c } = this.options;
+		return set === "julia" ? {
+			a: re,
+			b: im,
+			cr: c[0],
+			ci: c[1]
+		} : {
+			a: 0,
+			b: 0,
+			cr: re,
+			ci: im
+		};
+	}
+	/** Smooth escape count, or -1 inside. Burning Ship flips y so the ship sails upright. */
+	escape(re, im, limit) {
+		let { a, b, cr, ci } = this.seedOf(re, this.options.set === "burning-ship" ? -im : im);
+		const power = this.options.set === "multibrot" ? 3 : 2;
+		for (let n = 0; n < limit; n++) {
+			const m = a * a + b * b;
+			if (m > 4096) return n + 1 - Math.log(Math.log(m) / 2 / Math.LN2) / Math.log(power);
+			[a, b] = this.step(a, b, cr, ci);
+		}
+		return -1;
+	}
+	/** Distance estimate to the set's boundary via the running derivative, for z² + c. */
+	distance(re, im, limit) {
+		let { a, b, cr, ci } = this.seedOf(re, im);
+		const julia = this.options.set === "julia";
+		let da = julia ? 1 : 0, db = 0;
+		for (let n = 0; n < limit; n++) {
+			const m = a * a + b * b;
+			if (m > 1e8) return .5 * Math.sqrt(m) * Math.log(m) * .5 / Math.hypot(da, db);
+			[da, db] = [2 * (a * da - b * db) + (julia ? 0 : 1), 2 * (a * db + b * da)];
+			[a, b] = [a * a - b * b + cr, 2 * a * b + ci];
+		}
+		return -1;
+	}
+	level(re, im, limit, unit) {
+		const { shading } = this.options;
+		if (shading === "distance") {
+			const d = this.distance(re, im, limit);
+			return d < 0 ? BANDS : Math.round(39 * (1 - Math.min(1, Math.log1p(d / unit) / 5)));
+		}
+		const n = this.escape(re, im, limit);
+		if (n < 0) return BANDS;
+		if (shading === "binary") return -1;
+		if (shading === "stripes") return Math.floor(n) % 2 ? Math.round(BANDS * .2) : Math.round(BANDS * .42);
+		return Math.min(39, Math.round(BANDS * Math.log1p(n) / Math.log1p(limit * .6)));
+	}
+	plotPlane(ctx, { x, y, box, width, height }) {
+		const { cell, region, orbits, data, x: xKey, y: yKey } = this.options;
+		const limit = region !== "full" ? 320 : 140;
+		const cols = Math.max(4, Math.floor(width / cell)), rows = Math.max(4, Math.floor(height / cell));
+		const unit = (box[0][1] - box[0][0]) / cols;
+		const raster = BandRaster.paths(cols, rows, width, height, (i, j) => this.level(x.invert((i + .5) / cols * width), y.invert((j + .5) / rows * height), limit, unit));
+		const tone = (band) => ctx.palette.sequential(band >= BANDS ? 1 : .02 + .92 * (band / BANDS));
+		const cells = ctx.marks("fractal-band", "path", raster, (d) => d.band).attr("fill", (d) => tone(d.band)).attr("shape-rendering", "crispEdges");
+		ctx.set(cells, { d: (d) => d.d });
+		ctx.hover(cells, (d) => ({
+			title: d.band >= BANDS ? "Inside the set" : "Escapes",
+			rows: d.band >= BANDS ? [] : [["Band", d.band]]
+		}));
+		const pins = (orbits ? data : []).flatMap((row) => {
+			const re = +row[xKey], im = +row[yKey];
+			if (!Number.isFinite(re) || !Number.isFinite(im) || row[xKey] === null || row[yKey] === null) return [];
+			const { a, b, cr, ci } = this.seedOf(re, im);
+			const orbit = [[a, b]];
+			for (let n = 0; n < 24; n++) {
+				const [p, q] = orbit[orbit.length - 1], next = this.step(p, q, cr, ci);
+				if (Math.hypot(...next) > 3) break;
+				orbit.push(next);
+			}
+			return [{
+				re,
+				im,
+				orbit
+			}];
+		}).filter((pin) => pin.re >= box[0][0] && pin.re <= box[0][1] && pin.im >= box[1][0] && pin.im <= box[1][1]);
+		const inside = (p) => p[0] >= box[0][0] && p[0] <= box[0][1] && p[1] >= box[1][0] && p[1] <= box[1][1];
+		const accent = ctx.palette.color("Orbit");
+		const walks = MathMarks.stroke(ctx.marks("fractal-orbit", "path", pins, (_, i) => i), accent, 1.5);
+		ctx.set(walks, { d: (d) => MathMarks.line(d.orbit.filter(inside).map((p) => [x(p[0]), y(p[1])])) });
+		const dots = MathMarks.dot(ctx, ctx.marks("fractal-pin", "circle", pins, (_, i) => i), (d) => x(d.re), (d) => y(d.im), accent);
+		ctx.hover(dots, (d) => ({
+			title: `c = ${MathNumerics.format(d.re)} ${d.im < 0 ? "−" : "+"} ${MathNumerics.format(Math.abs(d.im))}i`,
+			rows: [["Orbit steps", d.orbit.length]]
+		}));
+	}
+};
+export { FractalRegion, FractalSet, FractalShading, MandelbrotChart };

package/dist/charts/mathematical/MathMarks.js

@@ -0,0 +1,63 @@
+// src/charts/mathematical/MathMarks.ts
+var fixed = (value) => +value.toFixed(2);
+/** Path builders and shared styling for the strokes, arrows and rings of mathematical charts. */
+var MathMarks = class {
+	static line(points, closed = false) {
+		if (!points.length) return "";
+		return `M${points.map((p) => `${fixed(p[0])} ${fixed(p[1])}`).join("L")}${closed ? "Z" : ""}`;
+	}
+	/** Solid triangle with its tip at `(x, y)`, pointing along `angle`. */
+	static head(x, y, angle, size = 7) {
+		const wing = (side) => [x - size * Math.cos(angle + side * .42), y - size * Math.sin(angle + side * .42)];
+		return `${this.line([
+			[x, y],
+			wing(1),
+			wing(-1)
+		], true)}`;
+	}
+	static arrow(x0, y0, x1, y1, size = 6) {
+		const angle = Math.atan2(y1 - y0, x1 - x0);
+		return `${this.line([[x0, y0], [x1, y1]])}${this.head(x1, y1, angle, size)}`;
+	}
+	/** Heads spaced evenly by arc length along a pixel polyline, showing direction of travel. */
+	static headsAlong(points, count, size = 7) {
+		if (points.length < 3) return "";
+		const lengths = [0];
+		for (let i = 1; i < points.length; i++) lengths.push(lengths[i - 1] + Math.hypot(points[i][0] - points[i - 1][0], points[i][1] - points[i - 1][1]));
+		const total = lengths[lengths.length - 1];
+		let d = "", i = 1;
+		for (let k = 0; k < count; k++) {
+			const goal = total * (k + .5) / count;
+			while (i < points.length - 1 && lengths[i] < goal) i++;
+			const a = points[i - 1], b = points[i];
+			d += this.head(b[0], b[1], Math.atan2(b[1] - a[1], b[0] - a[0]), size);
+		}
+		return d;
+	}
+	/** Fresh paths reveal by drawing on; re-rendered paths morph through `ctx.set`. */
+	static reveal(ctx, paths, d) {
+		paths.filter(function() {
+			return !this.getAttribute("d");
+		}).attr("d", d);
+		ctx.drawOn(paths);
+		ctx.set(paths, { d });
+		return paths;
+	}
+	static stroke(paths, color, width = 2) {
+		return paths.attr("fill", "none").attr("stroke", color).attr("stroke-width", width).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+	}
+	/** Marker dot with the 2px surface ring that keeps it legible on top of other marks. */
+	static dot(ctx, dots, x, y, fill, r = 4) {
+		dots.attr("fill", fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		return ctx.set(dots, {
+			cx: x,
+			cy: y,
+			r
+		}, {
+			cx: x,
+			cy: y,
+			r: 0
+		});
+	}
+};
+export { MathMarks };