@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/mathematical/SetRelationChart.js

@@ -0,0 +1,393 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { ascending, descending, group, linkHorizontal, scaleBand, scaleLinear } from "d3";
+// src/charts/mathematical/SetRelationChart.ts
+var SetRelationView = /* @__PURE__ */ function(SetRelationView) {
+	SetRelationView["Venn"] = "venn";
+	SetRelationView["Euler"] = "euler";
+	SetRelationView["Mapping"] = "mapping";
+	SetRelationView["Matrix"] = "matrix";
+	SetRelationView["UpSet"] = "upset";
+	return SetRelationView;
+}({});
+var SetRelationOrder = /* @__PURE__ */ function(SetRelationOrder) {
+	SetRelationOrder["FirstSeen"] = "first-seen";
+	SetRelationOrder["Size"] = "size";
+	return SetRelationOrder;
+}({});
+var lens = (r1, r2, d) => {
+	if (d >= r1 + r2) return 0;
+	if (d <= Math.abs(r1 - r2)) return Math.PI * Math.min(r1, r2) ** 2;
+	return r1 * r1 * Math.acos((d * d + r1 * r1 - r2 * r2) / (2 * d * r1)) + r2 * r2 * Math.acos((d * d + r2 * r2 - r1 * r1) / (2 * d * r2)) - .5 * Math.sqrt((-d + r1 + r2) * (d + r1 - r2) * (d - r1 + r2) * (d + r1 + r2));
+};
+var degree = (mask) => mask ? (mask & 1) + degree(mask >> 1) : 0;
+/** Centre distance at which two circles overlap by `area`. */
+var separation = (r1, r2, area) => {
+	let lo = Math.abs(r1 - r2), hi = r1 + r2;
+	for (let i = 0; i < 48; i++) {
+		const mid = (lo + hi) / 2;
+		if (lens(r1, r2, mid) > area) lo = mid;
+		else hi = mid;
+	}
+	return (lo + hi) / 2;
+};
+/** Sets and how they relate, from Venn figures for small questions to UpSet bars for real overlap data. */
+var SetRelationChart = class extends Chart2D {
+	static meta = {
+		id: "set-relation",
+		name: "Set relation chart",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows membership and overlap of sets as a Venn, area-true Euler, mapping, incidence matrix or UpSet view.",
+		tags: [
+			"venn",
+			"euler",
+			"upset",
+			"relation",
+			"mapping diagram"
+		],
+		sample: (seed) => SampleData.categories(seed, 12, 3).filter((row) => +row.value > 52),
+		variants: {
+			view: Object.values(SetRelationView),
+			sets: [3, 2],
+			order: Object.values(SetRelationOrder)
+		},
+		valid: (v) => !(v.order === "size" && (v.view === "venn" || v.view === "euler"))
+	};
+	defaults() {
+		return {
+			view: "venn",
+			sets: 3,
+			order: "first-seen",
+			element: "category",
+			set: "series"
+		};
+	}
+	family() {
+		const { data, element, set, sets, order } = this.options;
+		const clean = data.filter((row) => row[element] !== null && row[element] !== void 0 && row[set] !== null && row[set] !== void 0);
+		const groups = [...group(clean, (row) => String(row[set]))].map(([name, rows]) => [name, new Set(rows.map((row) => String(row[element])))]);
+		const chosen = [...groups].sort((a, b) => descending(a[1].size, b[1].size)).slice(0, sets);
+		const names = groups.filter((g) => chosen.includes(g)).map((g) => g[0]);
+		if (order === "size") names.sort((a, b) => descending(chosen.find((g) => g[0] === a)[1].size, chosen.find((g) => g[0] === b)[1].size));
+		const member = new Map(chosen);
+		const elements = [...new Set(names.flatMap((name) => [...member.get(name)]))];
+		if (order === "size") {
+			const degree = (e) => names.filter((name) => member.get(name).has(e)).length;
+			elements.sort((a, b) => descending(degree(a), degree(b)) || ascending(a, b));
+		}
+		return {
+			names,
+			elements,
+			member
+		};
+	}
+	regions({ names, elements, member }) {
+		const buckets = /* @__PURE__ */ new Map();
+		for (const e of elements) {
+			const mask = names.reduce((bits, name, i) => bits | (member.get(name).has(e) ? 1 << i : 0), 0);
+			buckets.set(mask, [...buckets.get(mask) ?? [], e]);
+		}
+		return [...buckets].map(([mask, members]) => ({
+			key: `${mask}`,
+			mask,
+			members
+		}));
+	}
+	draw(ctx) {
+		const family = this.family();
+		const { view } = this.options;
+		const clear = (name, tag) => ctx.marks(name, tag, []);
+		for (const [name, tag] of [
+			["rel-circle", "circle"],
+			["rel-count", "text"],
+			["rel-name", "text"],
+			["rel-link", "path"],
+			["rel-node", "circle"],
+			["rel-cell", "rect"],
+			["rel-bar", "rect"],
+			["rel-dot", "circle"],
+			["rel-line", "line"],
+			["rel-text", "text"]
+		]) clear(name, tag);
+		if (view === "venn") this.drawCircles(ctx, family, false);
+		else if (view === "euler") this.drawCircles(ctx, family, true);
+		else if (view === "mapping") this.drawMapping(ctx, family);
+		else if (view === "matrix") this.drawMatrix(ctx, family);
+		else this.drawUpSet(ctx, family);
+	}
+	drawCircles(ctx, family, honest) {
+		const { width, height } = ctx.plot;
+		const { names, member } = family;
+		const n = names.length;
+		const raw = [];
+		const radius = names.map((name) => member.get(name).size).map((size) => honest ? Math.sqrt(size / Math.PI) : 1);
+		const shared = (i, j) => [...member.get(names[i])].filter((e) => member.get(names[j]).has(e)).length;
+		if (n === 1) raw.push({
+			name: names[0],
+			x: 0,
+			y: 0,
+			r: radius[0]
+		});
+		if (n === 2) {
+			const d = honest ? separation(radius[0], radius[1], shared(0, 1)) : 1.15;
+			raw.push({
+				name: names[0],
+				x: 0,
+				y: 0,
+				r: radius[0]
+			}, {
+				name: names[1],
+				x: d,
+				y: 0,
+				r: radius[1]
+			});
+		}
+		if (n >= 3) {
+			const ab = honest ? separation(radius[0], radius[1], shared(0, 1)) : 1.15;
+			const ac = honest ? separation(radius[0], radius[2], shared(0, 2)) : 1.15;
+			const bc = honest ? separation(radius[1], radius[2], shared(1, 2)) : 1.15;
+			const cx = ab ? (ac * ac - bc * bc + ab * ab) / (2 * ab) : 0;
+			const cy = Math.sqrt(Math.max(0, ac * ac - cx * cx));
+			raw.push({
+				name: names[0],
+				x: 0,
+				y: cy,
+				r: radius[0]
+			}, {
+				name: names[1],
+				x: ab,
+				y: cy,
+				r: radius[1]
+			}, {
+				name: names[2],
+				x: cx,
+				y: 0,
+				r: radius[2]
+			});
+		}
+		if (!raw.length) return;
+		const left = Math.min(...raw.map((c) => c.x - c.r)), right = Math.max(...raw.map((c) => c.x + c.r));
+		const top = Math.min(...raw.map((c) => c.y - c.r)), bottom = Math.max(...raw.map((c) => c.y + c.r));
+		const k = Math.min((width - 120) / (right - left), (height - 40) / (bottom - top));
+		const ox = (width - (right - left) * k) / 2 - left * k, oy = (height - (bottom - top) * k) / 2 - top * k;
+		const circles = raw.map((c) => ({
+			...c,
+			cx: ox + c.x * k,
+			cy: oy + c.y * k,
+			pr: c.r * k
+		}));
+		const shapes = ctx.marks("rel-circle", "circle", circles, (d) => d.name).attr("fill", (d) => ctx.palette.color(d.name)).attr("fill-opacity", .22).attr("stroke", (d) => ctx.palette.color(d.name)).attr("stroke-width", 2);
+		ctx.set(shapes, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: (d) => d.pr
+		}, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: 0
+		}, 60);
+		ctx.hover(shapes, (d) => ({
+			title: d.name,
+			color: ctx.palette.color(d.name),
+			rows: [["Members", member.get(d.name).size]]
+		}));
+		const regions = this.regions(family);
+		const anchor = (mask) => {
+			const inside = circles.filter((_, i) => mask & 1 << i), outside = circles.filter((_, i) => !(mask & 1 << i));
+			let best = [inside[0].cx, inside[0].cy], score = -Infinity;
+			for (const px of MathNumerics.linspace(0, width, 60)) for (const py of MathNumerics.linspace(0, height, 40)) {
+				const clearance = Math.min(...inside.map((c) => c.pr - Math.hypot(px - c.cx, py - c.cy)), ...outside.map((c) => Math.hypot(px - c.cx, py - c.cy) - c.pr));
+				if (clearance > score) {
+					score = clearance;
+					best = [px, py];
+				}
+			}
+			return best;
+		};
+		const counts = regions.map((region) => ({
+			...region,
+			at: anchor(region.mask)
+		}));
+		const labels = ctx.text(ctx.marks("rel-count", "text", counts, (d) => d.key).attr("text-anchor", "middle").attr("x", (d) => d.at[0]).attr("y", (d) => d.at[1] + 4).text((d) => d.members.length), 12, "ink");
+		ctx.hover(labels, (d) => ({
+			title: names.filter((_, i) => d.mask & 1 << i).join(" ∩ "),
+			rows: [["Elements", d.members.slice(0, 6).join(", ") + (d.members.length > 6 ? "…" : "")]]
+		}));
+		const mx = circles.reduce((total, c) => total + c.cx, 0) / n, my = circles.reduce((total, c) => total + c.cy, 0) / n;
+		const tags = circles.map((c) => {
+			const dx = c.cx - mx, dy = c.cy - my, length = Math.hypot(dx, dy) || 1;
+			const ux = n > 1 ? dx / length : 0, uy = n > 1 ? dy / length : -1;
+			return {
+				name: c.name,
+				x: c.cx + ux * (c.pr + 7),
+				y: c.cy + uy * (c.pr + 7) + 4 + uy * 3,
+				anchor: Math.abs(ux) < .35 ? "middle" : ux > 0 ? "start" : "end"
+			};
+		});
+		ctx.text(ctx.marks("rel-name", "text", tags, (d) => d.name).attr("text-anchor", (d) => d.anchor).attr("x", (d) => d.x).attr("y", (d) => d.y).text((d) => d.name), 11);
+	}
+	drawMapping(ctx, { names, elements, member }) {
+		const { width, height } = ctx.plot;
+		const left = 66, right = width - 76;
+		const ey = scaleBand(elements, [4, height - 4]).padding(.15), sy = scaleBand(names, [height * .06, height * .94]).padding(.3);
+		const pairs = names.flatMap((name) => elements.filter((e) => member.get(name).has(e)).map((e) => ({
+			key: `${e}/${name}`,
+			e,
+			name
+		})));
+		const path = linkHorizontal().x((p) => p[0]).y((p) => p[1]);
+		const ends = (d) => ({
+			source: [72, ey(d.e) + ey.bandwidth() / 2],
+			target: [right - 6, sy(d.name) + sy.bandwidth() / 2]
+		});
+		const links = ctx.marks("rel-link", "path", pairs, (d) => d.key).attr("fill", "none").attr("stroke", (d) => ctx.palette.color(d.name)).attr("stroke-width", 1.5).attr("stroke-opacity", .7);
+		ctx.set(links, { d: (d) => path(ends(d)) ?? "" });
+		ctx.hover(links, (d) => ({
+			title: `${d.e} ∈ ${d.name}`,
+			color: ctx.palette.color(d.name)
+		}));
+		const nodes = [...elements.map((e) => ({
+			key: `e/${e}`,
+			x: left,
+			y: ey(e) + ey.bandwidth() / 2,
+			fill: ctx.theme.inkMuted,
+			label: e,
+			side: -1
+		})), ...names.map((name) => ({
+			key: `s/${name}`,
+			x: right,
+			y: sy(name) + sy.bandwidth() / 2,
+			fill: ctx.palette.color(name),
+			label: name,
+			side: 1
+		}))];
+		const dots = ctx.marks("rel-node", "circle", nodes, (d) => d.key).attr("fill", (d) => d.fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: (d) => d.side > 0 ? 6 : 4
+		});
+		ctx.hover(dots, (d) => ({ title: d.label }));
+		const fits = ey.step() >= 11;
+		ctx.text(ctx.marks("rel-text", "text", nodes.filter((d) => d.side > 0 || fits), (d) => d.key).attr("text-anchor", (d) => d.side > 0 ? "start" : "end").attr("x", (d) => d.x + d.side * 10).attr("y", (d) => d.y + 4).text((d) => d.label.slice(0, 10)), 10.5);
+	}
+	drawMatrix(ctx, { names, elements, member }) {
+		const { width, height } = ctx.plot;
+		const left = 62, top = 18;
+		const x = scaleBand(names, [left, Math.min(width, left + names.length * 64)]).paddingInner(.08);
+		const y = scaleBand(elements, [top, height]).paddingInner(.08);
+		const cells = elements.flatMap((e) => names.map((name) => ({
+			key: `${e}/${name}`,
+			e,
+			name,
+			on: member.get(name).has(e)
+		})));
+		const rects = ctx.marks("rel-cell", "rect", cells, (d) => d.key).attr("rx", 3).attr("fill", (d) => d.on ? ctx.palette.color(d.name) : ctx.theme.grid);
+		const rail = Math.min(4, y.bandwidth());
+		ctx.set(rects, {
+			x: (d) => x(d.name),
+			y: (d) => y(d.e) + (d.on ? 0 : (y.bandwidth() - rail) / 2),
+			width: x.bandwidth(),
+			height: (d) => d.on ? y.bandwidth() : rail
+		}, {
+			x: (d) => x(d.name),
+			y: (d) => y(d.e),
+			width: x.bandwidth(),
+			height: 0
+		}, 6);
+		ctx.hover(rects, (d) => ({
+			title: `${d.e} ${d.on ? "∈" : "∉"} ${d.name}`,
+			color: d.on ? ctx.palette.color(d.name) : void 0
+		}));
+		const every = Math.ceil(11 / Math.max(1, y.step()));
+		const labels = [...names.map((name) => ({
+			key: `s${name}`,
+			text: name,
+			x: x(name) + x.bandwidth() / 2,
+			y: 12,
+			anchor: "middle"
+		})), ...elements.filter((_, i) => i % every === 0).map((e) => ({
+			key: `e${e}`,
+			text: e.slice(0, 9),
+			x: 56,
+			y: y(e) + y.bandwidth() / 2 + 4,
+			anchor: "end"
+		}))];
+		ctx.text(ctx.marks("rel-text", "text", labels, (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);
+	}
+	drawUpSet(ctx, family) {
+		const { width, height } = ctx.plot;
+		const { names } = family;
+		const regions = this.regions(family);
+		if (this.options.order === "size") regions.sort((a, b) => descending(a.members.length, b.members.length));
+		else regions.sort((a, b) => descending(degree(a.mask), degree(b.mask)) || ascending(a.mask, b.mask));
+		const left = 58, rowH = Math.min(20, height * .42 / Math.max(1, names.length));
+		const base = height - rowH * names.length - 8;
+		const x = scaleBand(regions.map((r) => r.key), [left, width]).padding(.25);
+		const y = scaleLinear([0, Math.max(1, ...regions.map((r) => r.members.length))], [base, 14]);
+		const bars = ctx.marks("rel-bar", "rect", regions, (d) => d.key).attr("rx", Math.min(4, x.bandwidth() / 2)).attr("fill", ctx.palette.sequential(.75));
+		ctx.set(bars, {
+			x: (d) => x(d.key),
+			width: x.bandwidth(),
+			y: (d) => y(d.members.length),
+			height: (d) => base - y(d.members.length)
+		}, {
+			x: (d) => x(d.key),
+			width: x.bandwidth(),
+			y: base,
+			height: 0
+		}, 30);
+		ctx.hover(bars, (d) => ({
+			title: names.filter((_, i) => d.mask & 1 << i).join(" ∩ "),
+			rows: [["Exactly in", d.members.length]]
+		}));
+		const rowY = (i) => base + 12 + i * rowH + rowH / 2 - 4;
+		const dots = regions.flatMap((r) => names.map((name, i) => ({
+			key: `${r.key}/${name}`,
+			cx: x(r.key) + x.bandwidth() / 2,
+			cy: rowY(i),
+			on: !!(r.mask & 1 << i),
+			name
+		})));
+		const pips = ctx.marks("rel-dot", "circle", dots, (d) => d.key).attr("fill", (d) => d.on ? ctx.palette.color(d.name) : ctx.theme.grid);
+		ctx.set(pips, {
+			cx: (d) => d.cx,
+			cy: (d) => d.cy,
+			r: Math.min(5, rowH / 2 - 1)
+		});
+		const joins = regions.flatMap((r) => {
+			const on = names.map((_, i) => i).filter((i) => r.mask & 1 << i);
+			return on.length > 1 ? [{
+				key: r.key,
+				x: x(r.key) + x.bandwidth() / 2,
+				y1: rowY(on[0]),
+				y2: rowY(on[on.length - 1])
+			}] : [];
+		});
+		ctx.set(ctx.marks("rel-line", "line", joins, (d) => d.key).attr("stroke", ctx.theme.inkMuted).attr("stroke-width", 2), {
+			x1: (d) => d.x,
+			x2: (d) => d.x,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		const labels = [...names.map((name, i) => ({
+			key: name,
+			text: name,
+			x: 50,
+			y: rowY(i) + 4,
+			anchor: "end"
+		})), ...regions.filter((r) => x.bandwidth() > 12).map((r) => ({
+			key: `c${r.key}`,
+			text: `${r.members.length}`,
+			x: x(r.key) + x.bandwidth() / 2,
+			y: y(r.members.length) - 4,
+			anchor: "middle"
+		}))];
+		ctx.text(ctx.marks("rel-text", "text", labels, (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);
+	}
+};
+export { SetRelationChart, SetRelationOrder, SetRelationView };

package/dist/charts/mathematical/SlopeFieldChart.js

@@ -0,0 +1,145 @@
+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 } from "./MathPlane.js";
+import { scaleSequential } from "d3";
+// src/charts/mathematical/SlopeFieldChart.ts
+var SlopeEquation = /* @__PURE__ */ function(SlopeEquation) {
+	SlopeEquation["Linear"] = "linear";
+	SlopeEquation["Logistic"] = "logistic";
+	SlopeEquation["Separable"] = "separable";
+	SlopeEquation["Forced"] = "forced";
+	SlopeEquation["Riccati"] = "riccati";
+	SlopeEquation["Decay"] = "decay";
+	return SlopeEquation;
+}({});
+var SlopeGlyph = /* @__PURE__ */ function(SlopeGlyph) {
+	SlopeGlyph["Segment"] = "segment";
+	SlopeGlyph["Arrow"] = "arrow";
+	return SlopeGlyph;
+}({});
+var EQUATIONS = {
+	["linear"]: (x, y) => x - y,
+	["logistic"]: (_, y) => y * (1 - y / 2),
+	["separable"]: (x, y) => -x * y / 2,
+	["forced"]: (x, y) => Math.sin(x) - y / 2,
+	["riccati"]: (x, y) => (x * x + y * y) / 4 - 1,
+	["decay"]: (x, y) => -y + Math.cos(x * 1.5)
+};
+var BOX = [[-5, 5], [-3, 3]];
+/** Direction field of a first-order ODE, dy/dx = f(x, y): shows every solution's behaviour at once, without solving it. */
+var SlopeFieldChart = class extends MathPlane {
+	static meta = {
+		id: "slope-field",
+		name: "Slope field",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Draws the slope of a first-order differential equation at each lattice point, with solutions through chosen starts.",
+		tags: [
+			"direction field",
+			"ode",
+			"differential equation",
+			"isocline"
+		],
+		sample: (seed) => {
+			const rows = SampleData.points(seed, 5, 1);
+			return MathNumerics.fit(rows, "x", "y", [[-4, 2], [-2.4, 2.4]]).map(([x, y]) => ({
+				x,
+				y
+			}));
+		},
+		variants: {
+			equation: Object.values(SlopeEquation),
+			glyph: Object.values(SlopeGlyph),
+			density: [
+				24,
+				16,
+				34
+			],
+			solutions: [true, false],
+			isocline: [false, true]
+		},
+		valid: (v) => !(v.glyph === "arrow" && v.density === 34)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			equation: "linear",
+			glyph: "segment",
+			density: 24,
+			solutions: true,
+			isocline: false,
+			x: "x",
+			y: "y"
+		};
+	}
+	extent() {
+		return BOX;
+	}
+	get slope() {
+		return this.options.fn ?? EQUATIONS[this.options.equation];
+	}
+	plotPlane(ctx, { x, y, box, width, height }) {
+		const { data, glyph, density, solutions, isocline } = this.options;
+		const slope = this.slope;
+		const pixels = (line) => MathMarks.line(line.map((p) => [x(p[0]), y(p[1])]));
+		const step = width / density;
+		const rows = Math.max(2, Math.round(height / step));
+		const scaleY = Math.abs((y(0) - y(1)) / (x(1) - x(0)));
+		const cells = Array.from({ length: density * rows }, (_, k) => {
+			const i = k % density, j = Math.floor(k / density);
+			const px = (i + .5) * step, py = (j + .5) * height / rows;
+			const gx = x.invert(px), gy = y.invert(py);
+			return {
+				k,
+				px,
+				py,
+				gx,
+				gy,
+				m: slope(gx, gy)
+			};
+		}).filter((cell) => Number.isFinite(cell.m));
+		const steepest = Math.max(...cells.map((cell) => Math.abs(cell.m)), 1e-6);
+		const tone = scaleSequential((t) => ctx.palette.sequential(t)).domain([0, Math.sqrt(steepest)]);
+		const half = Math.min(step, height / rows) * .38;
+		const glyphPath = (cell) => {
+			const a = Math.atan(cell.m * scaleY);
+			const dx = Math.cos(a) * half, dy = -Math.sin(a) * half;
+			return glyph === "arrow" ? MathMarks.arrow(cell.px - dx, cell.py - dy, cell.px + dx, cell.py + dy, 4.5) : MathMarks.line([[cell.px - dx, cell.py - dy], [cell.px + dx, cell.py + dy]]);
+		};
+		const ink = (d) => solutions ? ctx.theme.axis : tone(Math.sqrt(Math.abs(d.m)) * .75 + .25 * Math.sqrt(steepest));
+		const ticks = ctx.marks("slope-glyph", "path", cells, (d) => d.k);
+		ticks.attr("stroke", ink).attr("stroke-width", 1.5).attr("stroke-linecap", "round").attr("fill", glyph === "arrow" ? ink : "none");
+		ctx.set(ticks, { d: glyphPath }, { d: glyphPath });
+		ctx.hover(ticks, (d) => ({
+			title: `(${MathNumerics.format(d.gx)}, ${MathNumerics.format(d.gy)})`,
+			rows: [["dy/dx", MathNumerics.format(d.m)]]
+		}));
+		const zero = isocline ? [MathNumerics.levelLines(slope, box).map(pixels).join("")] : [];
+		MathMarks.stroke(ctx.marks("slope-iso", "path", zero), ctx.theme.ink, 1.5).attr("stroke-dasharray", "1 5").attr("d", (d) => d);
+		const starts = data.flatMap((row) => {
+			const a = +row[this.options.x], b = +row[this.options.y];
+			return Number.isFinite(a) && Number.isFinite(b) && row[this.options.x] !== null ? [[a, b]] : [];
+		});
+		const walk = (dt, start) => MathNumerics.rk4((a, b) => [1, slope(a, b)], start, dt, 1500, box);
+		const curves = (solutions ? starts : []).map((start, i) => ({
+			i,
+			start,
+			line: [...walk(-.012, start).reverse(), ...walk(.012, start)]
+		}));
+		const accent = ctx.palette.color("Solution");
+		const lines = MathMarks.stroke(ctx.marks("slope-solution", "path", curves, (d) => d.i), accent, 2);
+		MathMarks.reveal(ctx, lines, (d) => pixels(d.line));
+		const dots = MathMarks.dot(ctx, ctx.marks("slope-start", "circle", curves, (d) => d.i), (d) => x(d.start[0]), (d) => y(d.start[1]), accent);
+		const describe = (d) => ({
+			title: "Solution",
+			color: accent,
+			rows: [["y(" + MathNumerics.format(d.start[0]) + ")", MathNumerics.format(d.start[1])]]
+		});
+		ctx.hover(lines, describe);
+		ctx.hover(dots, describe);
+	}
+};
+export { SlopeEquation, SlopeFieldChart, SlopeGlyph };