@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/mathematical/ParametricPlot.js

@@ -0,0 +1,203 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { MathPlane, PlaneFrame } from "./MathPlane.js";
+import { extent, group } from "d3";
+// src/charts/mathematical/ParametricPlot.ts
+var ParametricForm = /* @__PURE__ */ function(ParametricForm) {
+	ParametricForm["Hypotrochoid"] = "hypotrochoid";
+	ParametricForm["Epitrochoid"] = "epitrochoid";
+	ParametricForm["Lemniscate"] = "lemniscate";
+	ParametricForm["Astroid"] = "astroid";
+	ParametricForm["Cycloid"] = "cycloid";
+	ParametricForm["Butterfly"] = "butterfly";
+	ParametricForm["Involute"] = "involute";
+	ParametricForm["Clothoid"] = "clothoid";
+	return ParametricForm;
+}({});
+/** How the parameter t is shown: not at all, as a magnitude ramp, or as evenly timed beads that reveal speed. */
+var ParametricTrace = /* @__PURE__ */ function(ParametricTrace) {
+	ParametricTrace["Line"] = "line";
+	ParametricTrace["Time"] = "time";
+	ParametricTrace["Beads"] = "beads";
+	return ParametricTrace;
+}({});
+var TAU = Math.PI * 2;
+var CHUNKS = 28;
+var finite = (value, fallback) => Number.isFinite(value) ? value : fallback;
+var gcd = (a, b) => b < 1e-6 ? a : gcd(b, a % b);
+function named(form, a, b, d) {
+	const turns = (r, R) => TAU * r / gcd(Math.max(1, Math.round(R)), Math.max(1, Math.round(r)));
+	switch (form) {
+		case "epitrochoid": return {
+			range: [0, turns(b, a)],
+			fn: (t) => [(a + b) * Math.cos(t) - d * Math.cos((a + b) / b * t), (a + b) * Math.sin(t) - d * Math.sin((a + b) / b * t)]
+		};
+		case "lemniscate": return {
+			range: [0, TAU],
+			fn: (t) => {
+				const q = 1 + Math.sin(t) ** 2;
+				return [a * Math.cos(t) / q, b * Math.sin(t) * Math.cos(t) / q];
+			}
+		};
+		case "astroid": return {
+			range: [0, TAU],
+			fn: (t) => [a * Math.cos(t) ** 3, b * Math.sin(t) ** 3]
+		};
+		case "cycloid": return {
+			range: [0, 3 * TAU],
+			fn: (t) => [a * t - d * Math.sin(t), a - d * Math.cos(t)]
+		};
+		case "butterfly": return {
+			range: [0, 12 * Math.PI],
+			fn: (t) => {
+				const r = Math.exp(Math.cos(t)) - 2 * Math.cos(4 * t) - Math.sin(t / 12) ** 5;
+				return [a * Math.sin(t) * r, a * Math.cos(t) * r];
+			}
+		};
+		case "involute": return {
+			range: [0, b * TAU],
+			fn: (t) => [a * (Math.cos(t) + t * Math.sin(t)), a * (Math.sin(t) - t * Math.cos(t))]
+		};
+		case "clothoid": {
+			const step = .004, table = [[0, 0]];
+			for (let i = 1; i < 1400; i++) {
+				const [x, y] = table[i - 1], s = i * step;
+				table.push([x + Math.cos(s * s) * step, y + Math.sin(s * s) * step]);
+			}
+			return {
+				range: [-b * .8, b * .8],
+				fn: (t) => {
+					const p = table[Math.min(table.length - 1, Math.round(Math.abs(t) / step))];
+					return [a * Math.sign(t) * p[0], a * Math.sign(t) * p[1]];
+				}
+			};
+		}
+		default: return {
+			range: [0, turns(b, a)],
+			fn: (t) => [(a - b) * Math.cos(t) + d * Math.cos((a - b) / b * t), (a - b) * Math.sin(t) - d * Math.sin((a - b) / b * t)]
+		};
+	}
+}
+/** Curves traced by a parameter, such as spirographs, cycloids and spirals, from formulas, named forms or ordered rows. */
+var ParametricPlot = class extends MathPlane {
+	static meta = {
+		id: "parametric-plot",
+		name: "Parametric plot",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Traces (x(t), y(t)) as t runs, showing direction and speed of travel along the path.",
+		tags: [
+			"spirograph",
+			"trochoid",
+			"cycloid",
+			"curve"
+		],
+		sample: (seed) => SampleData.categories(seed, 2, 1).map((row, i) => {
+			const v = +row.value;
+			return {
+				name: String(row.category),
+				a: 5 + i * 2 + v % 2,
+				b: 2 + i,
+				d: 1.5 + v % 3 * .6
+			};
+		}),
+		variants: {
+			form: Object.values(ParametricForm),
+			trace: Object.values(ParametricTrace),
+			arrows: [false, true],
+			frame: [PlaneFrame.Box, PlaneFrame.Cross]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			form: "hypotrochoid",
+			trace: "line",
+			arrows: false,
+			equal: true,
+			x: "x",
+			y: "y",
+			series: "group"
+		};
+	}
+	traced() {
+		const { data, form, x, y, series } = this.options;
+		const usable = (cell) => cell !== void 0 && cell !== null && Number.isFinite(+cell);
+		const rows = data.filter((item) => usable(item[x]) && usable(item[y]));
+		const fromRows = [...group(rows, (row) => String(row[series] ?? "Path"))].map(([name, part]) => ({
+			name,
+			points: part.map((row) => [+row[x], +row[y]]),
+			times: part.map((_, i) => i)
+		}));
+		const curves = data.filter((item) => !rows.includes(item) && "name" in item);
+		return [...fromRows, ...curves.map((curve) => {
+			const { fn, range } = curve.fn ? {
+				fn: curve.fn,
+				range: curve.range ?? [0, TAU]
+			} : named(form, finite(curve.a, 5), finite(curve.b, 3), finite(curve.d, 2));
+			const times = MathNumerics.linspace(range[0], range[1], 1400);
+			return {
+				name: curve.name,
+				times,
+				points: times.map(fn).filter((p) => Number.isFinite(p[0]) && Number.isFinite(p[1]))
+			};
+		})];
+	}
+	extent() {
+		const points = this.traced().flatMap((curve) => curve.points);
+		const pad = ([a = -1, b = 1]) => [a - (b - a) * .06, b + (b - a) * .06];
+		return [pad(extent(points, (p) => p[0])), pad(extent(points, (p) => p[1]))];
+	}
+	plotPlane(ctx, { x, y }) {
+		const { trace, arrows } = this.options;
+		const curves = this.traced().map((curve) => ({
+			...curve,
+			pixels: curve.points.map((p) => [x(p[0]), y(p[1])])
+		}));
+		const timed = trace === "time";
+		const lines = MathMarks.stroke(ctx.marks("par-line", "path", timed ? [] : curves, (d) => d.name), (d) => ctx.palette.color(d.name), trace === "beads" ? 1 : 2).attr("stroke-opacity", trace === "beads" ? .5 : 1);
+		MathMarks.reveal(ctx, lines, (d) => MathMarks.line(d.pixels));
+		ctx.hover(lines, (d) => ({
+			title: d.name,
+			color: ctx.palette.color(d.name),
+			rows: [["t from", MathNumerics.format(d.times[0])], ["t to", MathNumerics.format(d.times[d.times.length - 1])]]
+		}));
+		const chunks = timed ? curves.flatMap((curve) => Array.from({ length: CHUNKS }, (_, k) => {
+			const step = (curve.pixels.length - 1) / CHUNKS;
+			return {
+				key: `${curve.name}/${k}`,
+				name: curve.name,
+				k,
+				d: MathMarks.line(curve.pixels.slice(Math.floor(k * step), Math.ceil((k + 1) * step) + 1)),
+				t: curve.times[Math.floor((k + .5) * step)]
+			};
+		})) : [];
+		const ramp = MathMarks.stroke(ctx.marks("par-time", "path", chunks, (d) => d.key), (d) => ctx.palette.sequential(.22 + .78 * d.k / CHUNKS), 2.5);
+		ctx.set(ramp, { d: (d) => d.d });
+		ctx.hover(ramp, (d) => ({
+			title: d.name,
+			rows: [["t", MathNumerics.format(d.t)]]
+		}));
+		const beads = trace === "beads" ? curves.flatMap((curve) => Array.from({ length: 32 }, (_, k) => {
+			const i = Math.floor(k * (curve.pixels.length - 1) / 32);
+			return {
+				key: `${curve.name}/${k}`,
+				name: curve.name,
+				at: curve.pixels[i],
+				t: curve.times[i]
+			};
+		})).filter((d) => d.at) : [];
+		const dots = MathMarks.dot(ctx, ctx.marks("par-bead", "circle", beads, (d) => d.key), (d) => d.at[0], (d) => d.at[1], (d) => ctx.palette.color(d.name), 4);
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			color: ctx.palette.color(d.name),
+			rows: [["t", MathNumerics.format(d.t)]]
+		}));
+		const heads = ctx.marks("par-head", "path", arrows ? curves : [], (d) => d.name).attr("fill", (d) => timed ? ctx.theme.ink : ctx.palette.color(d.name)).attr("stroke", "none");
+		ctx.set(heads, { d: (d) => MathMarks.headsAlong(d.pixels, 7, 9) });
+	}
+};
+export { ParametricForm, ParametricPlot, ParametricTrace };

package/dist/charts/mathematical/ParametricSurface3D.js

@@ -0,0 +1,234 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { BufferGeometry, Color, DoubleSide, Float32BufferAttribute, InstancedMesh, LineBasicMaterial, LineSegments, Mesh, MeshStandardMaterial, Object3D, SphereGeometry } from "three";
+// src/charts/mathematical/ParametricSurface3D.ts
+var SurfaceForm = /* @__PURE__ */ function(SurfaceForm) {
+	SurfaceForm["Torus"] = "torus";
+	SurfaceForm["Mobius"] = "mobius";
+	SurfaceForm["Klein"] = "klein";
+	SurfaceForm["Seashell"] = "seashell";
+	SurfaceForm["Enneper"] = "enneper";
+	SurfaceForm["Helicoid"] = "helicoid";
+	SurfaceForm["Dini"] = "dini";
+	SurfaceForm["Boy"] = "boy";
+	return SurfaceForm;
+}({});
+var SurfaceRender = /* @__PURE__ */ function(SurfaceRender) {
+	SurfaceRender["Solid"] = "solid";
+	SurfaceRender["Mesh"] = "mesh";
+	SurfaceRender["Dots"] = "dots";
+	return SurfaceRender;
+}({});
+var TAU = Math.PI * 2;
+var U = 150;
+var V = 60;
+function named(form, a, b) {
+	const { sin, cos, tan, log, exp } = Math;
+	switch (form) {
+		case "mobius": return {
+			u: [0, TAU],
+			v: [-1, 1],
+			fn: (u, v) => [
+				(1 + v / 2 * cos(u / 2)) * cos(u),
+				(1 + v / 2 * cos(u / 2)) * sin(u),
+				v / 2 * sin(u / 2)
+			]
+		};
+		case "klein": return {
+			u: [0, TAU],
+			v: [0, TAU],
+			fn: (u, v) => {
+				const r = 2 + cos(u / 2) * sin(v) - sin(u / 2) * sin(2 * v);
+				return [
+					r * cos(u),
+					r * sin(u),
+					sin(u / 2) * sin(v) + cos(u / 2) * sin(2 * v)
+				];
+			}
+		};
+		case "seashell": return {
+			u: [0, 3 * TAU],
+			v: [0, TAU],
+			fn: (u, v) => {
+				const g = exp(u / 7), r = g * (1 + .55 * cos(v));
+				return [
+					r * cos(u),
+					r * sin(u),
+					g * (.55 * sin(v)) - g * 1.6
+				];
+			}
+		};
+		case "enneper": return {
+			u: [-1.6, 1.6],
+			v: [-1.6, 1.6],
+			fn: (u, v) => [
+				u - u ** 3 / 3 + u * v * v,
+				v - v ** 3 / 3 + v * u * u,
+				u * u - v * v
+			]
+		};
+		case "helicoid": return {
+			u: [-TAU, TAU],
+			v: [-1.6, 1.6],
+			fn: (u, v) => [
+				v * cos(u * b),
+				v * sin(u * b),
+				u / 2.4
+			]
+		};
+		case "dini": return {
+			u: [0, 2.5 * TAU],
+			v: [.08, 2],
+			fn: (u, v) => [
+				cos(u) * sin(v),
+				sin(u) * sin(v),
+				cos(v) + log(tan(v / 2)) + .18 * u
+			]
+		};
+		case "boy": return {
+			u: [0, Math.PI],
+			v: [0, Math.PI],
+			fn: (u, v) => {
+				const c = cos(u), s = sin(u), cv = cos(v), q = 2 ** .5, d = 2 - q * sin(3 * u) * sin(2 * v);
+				return [
+					(q * cv * cv * cos(2 * u) + c * sin(2 * v)) / d,
+					(q * cv * cv * sin(2 * u) - s * sin(2 * v)) / d,
+					3 * cv * cv / d
+				];
+			}
+		};
+		default: return {
+			u: [0, TAU],
+			v: [0, TAU],
+			fn: (u, v) => [
+				(a + b * cos(v)) * cos(u),
+				(a + b * cos(v)) * sin(u),
+				b * sin(v)
+			]
+		};
+	}
+}
+/** Surfaces given by two parameters, including one-sided and self-crossing forms that no height map can draw. */
+var ParametricSurface3D = class extends Chart3D {
+	static meta = {
+		id: "parametric-surface-3d",
+		name: "Parametric surface",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Three,
+		shape: DataShape.Function,
+		description: "Renders a surface in (u, v) as a solid, a mesh or a point cloud, from named forms such as the Möbius strip and Klein bottle.",
+		tags: [
+			"mobius",
+			"klein bottle",
+			"torus",
+			"minimal surface",
+			"topology"
+		],
+		sample: (seed) => SampleData.categories(seed, 1, 1).map((row) => ({
+			name: String(row.category),
+			a: 2,
+			b: .6 + +row.value % 5 * .08
+		})),
+		variants: {
+			form: Object.values(SurfaceForm),
+			render: Object.values(SurfaceRender),
+			sweep: [1, .7]
+		}
+	};
+	defaults() {
+		return {
+			form: "torus",
+			render: "solid",
+			sweep: 1,
+			azimuth: 35,
+			elevation: 28,
+			distance: 3.9
+		};
+	}
+	grid(spec) {
+		const { form, sweep } = this.options;
+		const base = named(form, spec.a ?? 2, spec.b ?? .7);
+		const fn = spec.fn ?? base.fn, u = spec.u ?? base.u, v = spec.v ?? base.v;
+		const us = MathNumerics.linspace(u[0], u[0] + (u[1] - u[0]) * sweep, U), vs = MathNumerics.linspace(v[0], v[1], V);
+		return us.map((a) => vs.map((b) => fn(a, b).map((c) => Number.isFinite(c) ? c : 0)));
+	}
+	build(ctx) {
+		const { render, data } = this.options;
+		const spec = data[0];
+		if (!spec) return;
+		const grid = this.grid(spec);
+		const flat = grid.flat();
+		const axis = (k) => {
+			const values = flat.map((p) => p[k]);
+			return [Math.min(...values), Math.max(...values)];
+		};
+		const [a0, a1] = axis(0), [b0, b1] = axis(1), [c0, c1] = axis(2);
+		const unit = 1.9 / Math.max(a1 - a0, b1 - b0, c1 - c0, 1e-6);
+		const positions = (p) => [
+			(p[0] - (a0 + a1) / 2) * unit,
+			(p[2] - (c0 + c1) / 2) * unit,
+			(p[1] - (b0 + b1) / 2) * unit
+		];
+		const tone = (i) => new Color(ctx.palette.sequential(.25 + .75 * i / 149)).toArray();
+		const vertices = grid.flatMap((line) => line.flatMap(positions));
+		const colors = grid.flatMap((line, i) => line.flatMap(() => tone(i)));
+		const tag = () => ({
+			title: spec.name,
+			rows: [["Vertices", 9e3]]
+		});
+		if (render === "dots") {
+			const picked = flat.filter((_, i) => i % 3 === 0);
+			const cloud = new InstancedMesh(new SphereGeometry(.014, 6, 5), new MeshStandardMaterial({ roughness: .5 }), picked.length);
+			const dummy = new Object3D();
+			picked.forEach((p, i) => {
+				dummy.position.set(...positions(p));
+				dummy.updateMatrix();
+				cloud.setMatrixAt(i, dummy.matrix);
+				cloud.setColorAt(i, new Color(...tone(Math.floor(i * 3 / V))));
+			});
+			cloud.castShadow = true;
+			ctx.reveal((progress) => {
+				cloud.count = Math.max(1, Math.floor(picked.length * progress));
+			}, 1.6);
+			ctx.root.add(cloud);
+			ctx.pick(cloud, tag);
+			return;
+		}
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(vertices, 3));
+		geometry.setAttribute("color", new Float32BufferAttribute(colors, 3));
+		if (render === "mesh") {
+			const pairs = [];
+			for (let i = 0; i < U; i++) for (let j = 0; j < V; j++) {
+				const at = i * V + j;
+				if (j % 4 === 0 && i < 149) pairs.push(at, at + V);
+				if (i % 6 === 0 && j < 59) pairs.push(at, at + 1);
+			}
+			geometry.setIndex(pairs);
+			const lines = new LineSegments(geometry, new LineBasicMaterial({ vertexColors: true }));
+			ctx.reveal((progress) => geometry.setDrawRange(0, Math.floor(pairs.length * progress)), 1.6);
+			ctx.root.add(lines);
+			return;
+		}
+		const faces = [];
+		for (let i = 0; i < 149; i++) for (let j = 0; j < 59; j++) {
+			const p = i * V + j;
+			faces.push(p, p + V, p + 1, p + 1, p + V, p + V + 1);
+		}
+		geometry.setIndex(faces);
+		geometry.computeVertexNormals();
+		const mesh = new Mesh(geometry, new MeshStandardMaterial({
+			vertexColors: true,
+			side: DoubleSide,
+			roughness: .48,
+			metalness: .05
+		}));
+		mesh.castShadow = mesh.receiveShadow = true;
+		ctx.reveal((progress) => geometry.setDrawRange(0, Math.floor(faces.length * progress)), 1.4);
+		ctx.root.add(mesh);
+		ctx.pick(mesh, tag);
+	}
+};
+export { ParametricSurface3D, SurfaceForm, SurfaceRender };

package/dist/charts/mathematical/PhasePortrait.js

@@ -0,0 +1,210 @@
+import { ChartFamily, DataShape, Dimension, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FieldPlot } from "./FieldPlot.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { PlaneFrame } from "./MathPlane.js";
+import { symbol } from "d3";
+// src/charts/mathematical/PhasePortrait.ts
+var PhaseSystem = /* @__PURE__ */ function(PhaseSystem) {
+	PhaseSystem["Pendulum"] = "pendulum";
+	PhaseSystem["VanDerPol"] = "van-der-pol";
+	PhaseSystem["LotkaVolterra"] = "lotka-volterra";
+	PhaseSystem["Duffing"] = "duffing";
+	PhaseSystem["Linear"] = "linear";
+	PhaseSystem["Competition"] = "competition";
+	return PhaseSystem;
+}({});
+var PhaseBackdrop = /* @__PURE__ */ function(PhaseBackdrop) {
+	PhaseBackdrop["None"] = "none";
+	PhaseBackdrop["Arrows"] = "arrows";
+	PhaseBackdrop["Divergence"] = "divergence";
+	return PhaseBackdrop;
+}({});
+var SYSTEMS = {
+	["pendulum"]: {
+		fn: (x, y) => [y, -Math.sin(x) - .12 * y],
+		box: [[-7, 7], [-3.2, 3.2]]
+	},
+	["van-der-pol"]: {
+		fn: (x, y) => [y, 1.2 * (1 - x * x) * y - x],
+		box: [[-3.2, 3.2], [-4.4, 4.4]]
+	},
+	["lotka-volterra"]: {
+		fn: (x, y) => [x * (1 - .5 * y), y * (.5 * x - .75)],
+		box: [[0, 5.5], [0, 4.6]]
+	},
+	["duffing"]: {
+		fn: (x, y) => [y, x - x ** 3 - .18 * y],
+		box: [[-2, 2], [-1.5, 1.5]]
+	},
+	["linear"]: {
+		fn: (x, y) => [-.2 * x + y, -x - .2 * y],
+		box: [[-3, 3], [-2.2, 2.2]]
+	},
+	["competition"]: {
+		fn: (x, y) => [x * (3 - x - 2 * y), y * (2 - x - y)],
+		box: [[0, 3.6], [0, 2.8]]
+	}
+};
+var SYMBOL = symbol();
+/** Trajectories of a 2D autonomous system in state space, with equilibria classified: for seeing stability, cycles and basins. */
+var PhasePortrait = class extends FieldPlot {
+	static meta = {
+		id: "phase-portrait",
+		name: "Phase portrait",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Draws trajectories of a two-dimensional dynamical system with nullclines and classified equilibria.",
+		tags: [
+			"dynamical system",
+			"state space",
+			"limit cycle",
+			"nullcline"
+		],
+		sample: (seed) => MathNumerics.fit(SampleData.points(seed, 4, 2), "x", "y", [[.2, 1.8], [.2, 1.4]]).map(([x, y]) => ({
+			x,
+			y
+		})),
+		variants: {
+			system: Object.values(PhaseSystem),
+			backdrop: [
+				"arrows",
+				"none",
+				"divergence"
+			],
+			nullclines: [false, true],
+			equilibria: [true, false]
+		},
+		valid: (v) => v.backdrop !== "divergence" || [
+			"van-der-pol",
+			"lotka-volterra",
+			"competition"
+		].includes(v.system)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			system: "pendulum",
+			backdrop: "arrows",
+			nullclines: false,
+			equilibria: true,
+			duration: 24,
+			seeded: true,
+			frame: PlaneFrame.Box
+		};
+	}
+	field() {
+		return this.options.fn ?? SYSTEMS[this.options.system].fn;
+	}
+	extent() {
+		if (this.options.fn) return super.extent();
+		return SYSTEMS[this.options.system].box;
+	}
+	/** Newton from a lattice of starts, deduplicated, classified by the Jacobian's trace and determinant. */
+	equilibria(field, [[x0, x1], [y0, y1]]) {
+		const found = [], h = 1e-5;
+		const jacobian = (a, b) => {
+			const [ur, vr] = field(a + h, b), [ul, vl] = field(a - h, b), [ut, vt] = field(a, b + h), [ub, vb] = field(a, b - h);
+			return [
+				(ur - ul) / (2 * h),
+				(ut - ub) / (2 * h),
+				(vr - vl) / (2 * h),
+				(vt - vb) / (2 * h)
+			];
+		};
+		for (const sx of MathNumerics.linspace(x0, x1, 15)) for (const sy of MathNumerics.linspace(y0, y1, 11)) {
+			let a = sx, b = sy;
+			for (let k = 0; k < 24; k++) {
+				const [u, v] = field(a, b), [m, n, p, q] = jacobian(a, b), det = m * q - n * p;
+				if (!Number.isFinite(det) || Math.abs(det) < 1e-9) break;
+				a -= (q * u - n * v) / det;
+				b -= (m * v - p * u) / det;
+			}
+			const [u, v] = field(a, b);
+			if (Math.hypot(u, v) > 1e-6 || a < x0 || a > x1 || b < y0 || b > y1) continue;
+			if (found.some((e) => Math.hypot(e.x - a, e.y - b) < .001)) continue;
+			const [m, n, p, q] = jacobian(a, b), trace = m + q, det = m * q - n * p, disc = trace * trace - 4 * det;
+			const kind = det < 0 ? "Saddle" : disc < 0 ? Math.abs(trace) < 1e-6 ? "Centre" : trace < 0 ? "Stable spiral" : "Unstable spiral" : trace < 0 ? "Stable node" : "Unstable node";
+			found.push({
+				x: a,
+				y: b,
+				kind,
+				stable: kind.startsWith("Stable")
+			});
+		}
+		return found;
+	}
+	plotPlane(ctx, plane) {
+		const { data, backdrop, nullclines, equilibria, duration, seeded, x: xKey, y: yKey } = this.options;
+		const { x, y, box, width, height } = plane;
+		const field = this.field();
+		const accent = ctx.palette.color("Trajectory");
+		if (backdrop === "divergence") this.scalarBackdrop(ctx, plane, "Divergence", this.divergence(field, .001));
+		else ctx.marks("field-backdrop", "path", []);
+		const pixels = (line) => MathMarks.line(line.map((p) => [x(p[0]), y(p[1])]));
+		const lattice = backdrop === "arrows" ? Array.from({ length: 286 }, (_, k) => {
+			const px = (k % 22 + .5) / 22 * width, py = (Math.floor(k / 22) + .5) / 13 * height;
+			const [u, v] = field(x.invert(px), y.invert(py)), n = Math.hypot(u * width, v * height) || 1;
+			return {
+				k,
+				px,
+				py,
+				dx: u * width / n * 5.5,
+				dy: -v * height / n * 5.5
+			};
+		}) : [];
+		ctx.set(ctx.marks("phase-flow", "path", lattice, (d) => d.k).attr("stroke", ctx.theme.axis).attr("fill", ctx.theme.axis).attr("stroke-width", 1), { d: (d) => MathMarks.arrow(d.px - d.dx, d.py - d.dy, d.px + d.dx, d.py + d.dy, 3.5) });
+		const nulls = nullclines ? [{
+			key: "ẋ = 0",
+			d: MathNumerics.levelLines((a, b) => field(a, b)[0], box).map(pixels).join("")
+		}, {
+			key: "ẏ = 0",
+			d: MathNumerics.levelLines((a, b) => field(a, b)[1], box).map(pixels).join("")
+		}] : [];
+		const clines = MathMarks.stroke(ctx.marks("phase-null", "path", nulls, (d) => d.key), (d) => ctx.palette.color(d.key), 1.5).attr("stroke-dasharray", "5 4");
+		ctx.set(clines, { d: (d) => d.d });
+		ctx.hover(clines, (d) => ({
+			title: d.key,
+			color: ctx.palette.color(d.key)
+		}));
+		const [[x0, x1], [y0, y1]] = box;
+		const starts = data.flatMap((row) => {
+			const a = row[xKey], b = row[yKey];
+			if (a === null || a === void 0 || b === null || b === void 0 || !Number.isFinite(+a) || !Number.isFinite(+b)) return [];
+			return +a >= x0 && +a <= x1 && +b >= y0 && +b <= y1 ? [[+a, +b]] : [];
+		});
+		if (seeded) for (let j = 0; j < 4; j++) for (let i = 0; i < 5; i++) starts.push([x0 + (x1 - x0) * (i + .5 + j % 2 * .2) / 5, y0 + (y1 - y0) * (j + .5) / 4]);
+		const paths = starts.map((start, i) => ({
+			i,
+			start,
+			line: MathNumerics.rk4(field, start, .02, Math.round(duration / .02), box)
+		}));
+		const lines = MathMarks.stroke(ctx.marks("phase-path", "path", paths, (d) => d.i), accent, 1.75);
+		MathMarks.reveal(ctx, lines, (d) => pixels(d.line));
+		ctx.hover(lines, (d) => ({
+			title: "Trajectory",
+			color: accent,
+			rows: [["Start x", MathNumerics.format(d.start[0])], ["Start y", MathNumerics.format(d.start[1])]]
+		}));
+		const heads = ctx.marks("phase-head", "path", paths, (d) => d.i).attr("fill", accent);
+		ctx.set(heads, { d: (d) => MathMarks.headsAlong(d.line.map((p) => [x(p[0]), y(p[1])]), 2, 8) });
+		const points = equilibria ? this.equilibria(field, box) : [];
+		const glyph = (d) => SYMBOL.type(Scales.symbol(d.kind === "Saddle" ? SymbolKind.Cross : SymbolKind.Circle)).size(90)();
+		const marks = ctx.marks("phase-eq", "path", points, (d) => `${d.x.toFixed(3)},${d.y.toFixed(3)}`).attr("fill", (d) => d.stable ? ctx.theme.ink : ctx.theme.surface).attr("stroke", (d) => d.stable ? ctx.theme.surface : ctx.theme.ink).attr("stroke-width", 2);
+		ctx.set(marks, {
+			d: glyph,
+			transform: (d) => `translate(${x(d.x)},${y(d.y)})`
+		});
+		ctx.hover(marks, (d) => ({
+			title: d.kind,
+			rows: [["x", MathNumerics.format(d.x)], ["y", MathNumerics.format(d.y)]]
+		}));
+		const first = points.filter((point, i) => points.findIndex((other) => other.kind === point.kind) === i);
+		const tags = ctx.marks("phase-tag", "text", width > 260 ? first : [], (d) => d.kind).attr("text-anchor", (d) => x(d.x) > width - 80 ? "end" : "start").attr("x", (d) => x(d.x) + (x(d.x) > width - 80 ? -9 : 9)).attr("y", (d) => y(d.y) + (y(d.y) < 16 ? 14 : -7)).text((d) => d.kind.toLowerCase());
+		ctx.text(tags, 10.5, "ink").style("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 2.5).attr("stroke-opacity", .85);
+	}
+};
+export { PhaseBackdrop, PhasePortrait, PhaseSystem };