@mstone6969/graph 0.0.0-stage → 0.2.0

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 };

package/dist/charts/mathematical/StreamlineChart.js

@@ -0,0 +1,159 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FieldForm, FieldPlot } from "./FieldPlot.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { mean } from "d3";
+// src/charts/mathematical/StreamlineChart.ts
+/** Even spacing fills the plane uniformly; lattice seeds give short "curly vectors". */
+var StreamSeeding = /* @__PURE__ */ function(StreamSeeding) {
+	StreamSeeding["Even"] = "even";
+	StreamSeeding["Lattice"] = "lattice";
+	return StreamSeeding;
+}({});
+var STEP = 2;
+/** Integrated flow lines with the Jobard-Lefer spacing rule: the tidiest way to read circulation and topology of a field. */
+var StreamlineChart = class extends FieldPlot {
+	static meta = {
+		id: "streamline",
+		name: "Streamline chart",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Follows a vector field along evenly spaced flow lines, with colour and width carrying speed.",
+		tags: [
+			"flow",
+			"stream plot",
+			"fluid",
+			"curly vectors"
+		],
+		sample: (seed) => {
+			const rows = SampleData.points(seed, 4, 2);
+			return MathNumerics.fit(rows, "x", "y", [[-2.2, 2.2], [-1.5, 1.5]]).map(([x, y], i) => ({
+				x,
+				y,
+				charge: i % 2 ? -1 : 1
+			}));
+		},
+		variants: {
+			form: Object.values(FieldForm),
+			seeding: Object.values(StreamSeeding),
+			taper: [false, true],
+			arrows: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			seeding: "even",
+			taper: false,
+			arrows: true,
+			separation: 16
+		};
+	}
+	walk(field, plane, start, sign, limit, stop) {
+		const { x, y, width, height } = plane;
+		const sx = Math.abs(x(1) - x(0)), sy = Math.abs(y(0) - y(1));
+		const velocity = (px, py) => {
+			const [u, v] = field(x.invert(px), y.invert(py));
+			return [u * sx, -v * sy];
+		};
+		const points = [start], speeds = [];
+		let [px, py] = start;
+		for (let n = 0; n < limit; n++) {
+			const [a, b] = velocity(px, py), m = Math.hypot(a, b);
+			if (!Number.isFinite(m) || m < 1e-6) break;
+			const [c, d] = velocity(px + sign * STEP * a / m / 2, py + sign * STEP * b / m / 2), k = Math.hypot(c, d) || 1;
+			px += sign * STEP * c / k;
+			py += sign * STEP * d / k;
+			if (px < 0 || py < 0 || px > width || py > height || stop([px, py], n)) break;
+			points.push([px, py]);
+			speeds.push(m);
+		}
+		return {
+			points,
+			speeds
+		};
+	}
+	streams(field, plane) {
+		const { width, height } = plane;
+		const gap = this.options.separation;
+		const out = [];
+		if (this.options.seeding === "lattice") {
+			const cols = Math.floor(width / (gap * 1.6)), rows = Math.floor(height / (gap * 1.6));
+			for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) {
+				const start = [(i + .5) / cols * width, (j + .5) / rows * height];
+				const { points, speeds } = this.walk(field, plane, start, 1, 12, () => false);
+				if (points.length > 2) out.push({
+					key: i + j * cols,
+					pixels: points,
+					speeds
+				});
+			}
+			return out;
+		}
+		const cell = gap / 2;
+		const cols = Math.ceil(width / cell) + 1, rows = Math.ceil(height / cell) + 1;
+		const taken = new Int32Array(cols * rows).fill(-1);
+		const index = ([px, py]) => Math.floor(px / cell) + Math.floor(py / cell) * cols;
+		const blocked = ([px, py], self) => {
+			const ci = Math.floor(px / cell), cj = Math.floor(py / cell);
+			for (let j = cj - 1; j <= cj + 1; j++) for (let i = ci - 1; i <= ci + 1; i++) {
+				if (i < 0 || j < 0 || i >= cols || j >= rows) continue;
+				const owner = taken[i + j * cols];
+				if (owner >= 0 && owner !== self) return true;
+			}
+			return false;
+		};
+		const seedStep = gap * .8;
+		let id = 0;
+		for (let py = seedStep / 2; py < height; py += seedStep) for (let px = seedStep / 2; px < width; px += seedStep) {
+			const seed = [px, py];
+			if (blocked(seed, id)) continue;
+			const stop = (p) => blocked(p, id);
+			const forward = this.walk(field, plane, seed, 1, 800, stop);
+			const backward = this.walk(field, plane, seed, -1, 800, stop);
+			const pixels = [...backward.points.slice(1).reverse(), ...forward.points];
+			if (pixels.length < 12) continue;
+			for (const point of pixels) taken[index(point)] = id;
+			out.push({
+				key: id,
+				pixels,
+				speeds: [...backward.speeds.reverse(), ...forward.speeds]
+			});
+			id++;
+		}
+		return out;
+	}
+	plotPlane(ctx, plane) {
+		const { taper, arrows } = this.options;
+		const field = this.field();
+		const streams = this.streams(field, plane);
+		const sorted = streams.flatMap((s) => s.speeds).sort((a, b) => a - b);
+		const top = sorted[Math.floor(sorted.length * .95)] || 1;
+		const level = (speed) => Math.min(1, Math.sqrt(speed / top));
+		const tone = (d) => ctx.palette.sequential(.3 + .7 * level(mean(d.speeds) ?? 0));
+		const ribbon = (d) => {
+			const left = [], right = [];
+			d.pixels.forEach((p, i) => {
+				const a = d.pixels[Math.max(0, i - 1)], b = d.pixels[Math.min(d.pixels.length - 1, i + 1)];
+				const n = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+				const w = .5 + 2 * level(d.speeds[Math.min(i, d.speeds.length - 1)] ?? 0);
+				left.push([p[0] - (b[1] - a[1]) / n * w, p[1] + (b[0] - a[0]) / n * w]);
+				right.push([p[0] + (b[1] - a[1]) / n * w, p[1] - (b[0] - a[0]) / n * w]);
+			});
+			return MathMarks.line([...left, ...right.reverse()], true);
+		};
+		const shape = (d) => taper ? ribbon(d) : MathMarks.line(d.pixels);
+		const lines = ctx.marks("stream-line", "path", streams, (d) => d.key).attr("fill", (d) => taper ? tone(d) : "none").attr("stroke", (d) => taper ? "none" : tone(d)).attr("stroke-width", 1.75).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		ctx.set(lines, { d: shape }, { d: shape });
+		if (!taper) ctx.drawOn(lines);
+		ctx.hover(lines, (d) => ({
+			title: "Streamline",
+			rows: [["Mean speed", MathNumerics.format(mean(d.speeds) ?? 0)], ["Peak speed", MathNumerics.format(Math.max(...d.speeds))]]
+		}));
+		const heads = ctx.marks("stream-head", "path", arrows ? streams : [], (d) => d.key).attr("fill", tone);
+		ctx.set(heads, { d: (d) => MathMarks.headsAlong(d.pixels, Math.max(1, Math.round(d.pixels.length / 90)), d.pixels.length > 30 ? 7 : 5) });
+	}
+};
+export { StreamSeeding, StreamlineChart };

package/dist/charts/mathematical/TaylorSeriesChart.js

@@ -0,0 +1,175 @@
+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";
+// src/charts/mathematical/TaylorSeriesChart.ts
+var TaylorFunction = /* @__PURE__ */ function(TaylorFunction) {
+	TaylorFunction["Sine"] = "sine";
+	TaylorFunction["Exponential"] = "exponential";
+	TaylorFunction["Logarithm"] = "logarithm";
+	TaylorFunction["Geometric"] = "geometric";
+	TaylorFunction["Arctangent"] = "arctangent";
+	TaylorFunction["Gaussian"] = "gaussian";
+	return TaylorFunction;
+}({});
+/** Stacked degrees over the function, or the remaining error of each degree. */
+var TaylorView = /* @__PURE__ */ function(TaylorView) {
+	TaylorView["Approximants"] = "approximants";
+	TaylorView["Error"] = "error";
+	return TaylorView;
+}({});
+var factorial = (n) => n < 2 ? 1 : n * factorial(n - 1);
+var SERIES = {
+	["sine"]: {
+		f: Math.sin,
+		label: "sin x",
+		domain: [-Math.PI * 2.4, Math.PI * 2.4],
+		range: [-2.6, 2.6],
+		rho: Infinity,
+		coefficient: (n) => n % 2 ? (-1) ** ((n - 1) / 2) / factorial(n) : 0
+	},
+	["exponential"]: {
+		f: Math.exp,
+		label: "eˣ",
+		domain: [-4, 3.4],
+		range: [-3, 24],
+		rho: Infinity,
+		coefficient: (n) => 1 / factorial(n)
+	},
+	["logarithm"]: {
+		f: Math.log1p,
+		label: "ln(1 + x)",
+		domain: [-1.4, 2.6],
+		range: [-3, 2.4],
+		rho: 1,
+		coefficient: (n) => n ? (-1) ** (n + 1) / n : 0
+	},
+	["geometric"]: {
+		f: (x) => 1 / (1 - x),
+		label: "1 / (1 − x)",
+		domain: [-2.2, 1.9],
+		range: [-4, 8],
+		rho: 1,
+		coefficient: () => 1
+	},
+	["arctangent"]: {
+		f: Math.atan,
+		label: "arctan x",
+		domain: [-2.6, 2.6],
+		range: [-2.8, 2.8],
+		rho: 1,
+		coefficient: (n) => n % 2 ? (-1) ** ((n - 1) / 2) / n : 0
+	},
+	["gaussian"]: {
+		f: (x) => Math.exp(-x * x),
+		label: "e^(−x²)",
+		domain: [-3, 3],
+		range: [-1.4, 2],
+		rho: Infinity,
+		coefficient: (n) => n % 2 ? 0 : (-1) ** (n / 2) / factorial(n / 2)
+	}
+};
+/** Polynomials closing in on a function near a point, and where they stop working: the radius of convergence made visible. */
+var TaylorSeriesChart = class extends MathPlane {
+	static meta = {
+		id: "taylor-series",
+		name: "Taylor series chart",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Overlays Maclaurin polynomials of rising degree on a function, or plots the error each degree leaves.",
+		tags: [
+			"maclaurin",
+			"approximation",
+			"polynomial",
+			"convergence"
+		],
+		sample: (seed) => SampleData.categories(seed, 4, 1).map((_, i) => ({ order: 2 * i + 1 + (i > 2 ? 2 : 0) })),
+		variants: {
+			fn: Object.values(TaylorFunction),
+			view: Object.values(TaylorView),
+			radius: [true, false],
+			frame: [PlaneFrame.Box, PlaneFrame.Cross]
+		},
+		valid: (v) => !(v.radius === false && ![
+			"logarithm",
+			"geometric",
+			"arctangent"
+		].includes(v.fn))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			fn: "sine",
+			view: "approximants",
+			radius: true,
+			order: "order"
+		};
+	}
+	get series() {
+		return SERIES[this.options.fn];
+	}
+	orders() {
+		const { data, order } = this.options;
+		const list = data.map((row) => Math.round(+row[order])).filter((n) => Number.isFinite(n) && n >= 0 && n <= 40);
+		return [...new Set(list)].sort((a, b) => a - b);
+	}
+	polynomial(degree) {
+		const { coefficient } = this.series;
+		const terms = Array.from({ length: degree + 1 }, (_, n) => coefficient(n));
+		return (x) => terms.reduceRight((sum, c) => sum * x + c, 0);
+	}
+	extent() {
+		const { domain, range } = this.series;
+		return [domain, this.options.view === "error" ? [-7, 1.5] : range];
+	}
+	plotPlane(ctx, plane) {
+		const { view, radius } = this.options;
+		const { x, y, box, width, height } = plane;
+		const { f, rho, label } = this.series;
+		const degrees = this.orders();
+		const pixels = (runs) => runs.map((run) => MathMarks.line(run.map((p) => [x(p[0]), y(p[1])]))).join("");
+		const error = view === "error";
+		const bands = radius && Number.isFinite(rho) ? [{
+			key: "l",
+			x: 0,
+			w: Math.max(0, x(Math.max(-rho, box[0][0])))
+		}, {
+			key: "r",
+			x: x(Math.min(rho, box[0][1])),
+			w: Math.max(0, width - x(Math.min(rho, box[0][1])))
+		}].filter((band) => band.w > 0) : [];
+		const outside = ctx.marks("tay-outside", "rect", bands, (d) => d.key).attr("fill", ctx.theme.grid).attr("fill-opacity", .6);
+		ctx.set(outside, {
+			x: (d) => d.x,
+			y: 0,
+			width: (d) => d.w,
+			height
+		});
+		ctx.hover(outside, () => ({
+			title: "Outside the radius of convergence",
+			rows: [["|x| >", rho]]
+		}));
+		const curveOf = (degree) => {
+			const p = this.polynomial(degree);
+			return error ? (v) => Math.log10(Math.abs(p(v) - f(v)) + 1e-9) : p;
+		};
+		const lines = degrees.map((degree) => ({
+			degree,
+			name: `degree ${degree}`,
+			fn: curveOf(degree)
+		}));
+		const color = (d) => ctx.palette.color(d.name);
+		const paths = MathMarks.stroke(ctx.marks("tay-poly", "path", lines, (d) => d.degree), color, 1.75);
+		MathMarks.reveal(ctx, paths, (d) => pixels(MathNumerics.clip(MathNumerics.trace(d.fn, box[0], 700), box[1])));
+		const target = MathMarks.stroke(ctx.marks("tay-function", "path", error ? [] : [0]), ctx.theme.ink, 2.5);
+		ctx.set(target, { d: () => pixels(MathNumerics.clip(MathNumerics.trace(f, box[0], 700), box[1])) });
+		this.probe(ctx, plane, (v) => ({
+			title: `x = ${MathNumerics.format(v)}`,
+			rows: [[label, MathNumerics.format(f(v))], ...lines.map((line) => [line.name, MathNumerics.format(error ? Math.abs(this.polynomial(line.degree)(v) - f(v)) : line.fn(v))])]
+		}));
+		ctx.text(ctx.marks("tay-note", "text", [error ? `log₁₀ |error|, ${label}` : label]).attr("x", 6).attr("y", 13).text((d) => d), 11, "ink");
+	}
+};
+export { TaylorFunction, TaylorSeriesChart, TaylorView };

package/dist/charts/mathematical/VectorFieldChart.js

@@ -0,0 +1,140 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FieldForm, FieldPlot } from "./FieldPlot.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { PlaneFrame } from "./MathPlane.js";
+// src/charts/mathematical/VectorFieldChart.ts
+var VectorGlyph = /* @__PURE__ */ function(VectorGlyph) {
+	VectorGlyph["Arrow"] = "arrow";
+	VectorGlyph["Wedge"] = "wedge";
+	VectorGlyph["Pin"] = "pin";
+	return VectorGlyph;
+}({});
+/** Uniform shows direction only; proportional makes length the magnitude. */
+var VectorLength = /* @__PURE__ */ function(VectorLength) {
+	VectorLength["Uniform"] = "uniform";
+	VectorLength["Proportional"] = "proportional";
+	return VectorLength;
+}({});
+var VectorLattice = /* @__PURE__ */ function(VectorLattice) {
+	VectorLattice["Square"] = "square";
+	VectorLattice["Hexagonal"] = "hexagonal";
+	return VectorLattice;
+}({});
+/** Arrows on a lattice for a function from R² to R²: direction and strength of a flow or force at every point. */
+var VectorFieldChart = class extends FieldPlot {
+	static meta = {
+		id: "vector-field",
+		name: "Vector field",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Places a glyph at each lattice point to show the direction and magnitude of a field, from formulas, charges or sampled rows.",
+		tags: [
+			"quiver",
+			"gradient",
+			"flow",
+			"electric field"
+		],
+		sample: (seed) => {
+			const rows = SampleData.points(seed, 4, 2);
+			return MathNumerics.fit(rows, "x", "y", [[-2.2, 2.2], [-1.5, 1.5]]).map(([x, y], i) => ({
+				x,
+				y,
+				charge: i % 2 ? -1 : 1
+			}));
+		},
+		variants: {
+			form: Object.values(FieldForm),
+			glyph: Object.values(VectorGlyph),
+			length: Object.values(VectorLength),
+			lattice: Object.values(VectorLattice),
+			backdrop: [false, true]
+		},
+		valid: (v) => !(v.backdrop && (v.form === FieldForm.Saddle || v.form === FieldForm.SpiralSink))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			glyph: "arrow",
+			length: "uniform",
+			lattice: "square",
+			backdrop: false,
+			spacing: 26,
+			frame: PlaneFrame.Box
+		};
+	}
+	plotPlane(ctx, plane) {
+		const { glyph, length, lattice, backdrop, spacing } = this.options;
+		const { x, y, width, height } = plane;
+		const field = this.field();
+		const potential = this.potential();
+		const h = (plane.box[0][1] - plane.box[0][0]) / 400;
+		if (backdrop) this.scalarBackdrop(ctx, plane, potential ? "Potential" : "Curl", potential ?? this.curl(field, h));
+		const hex = lattice === "hexagonal";
+		const stepX = spacing, stepY = hex ? spacing * .866 : spacing;
+		const rows = Math.max(1, Math.floor(height / stepY)), cols = Math.max(1, Math.floor(width / stepX));
+		const inset = stepX / 2;
+		const nodes = Array.from({ length: rows * cols }, (_, k) => {
+			const i = k % cols, j = Math.floor(k / cols);
+			const px = (width - (cols - 1) * stepX) / 2 + i * stepX + (hex && j % 2 ? stepX / 4 : hex ? -stepX / 4 : 0);
+			const py = (height - (rows - 1) * stepY) / 2 + j * stepY;
+			const gx = x.invert(px), gy = y.invert(py);
+			const [u, v] = field(gx, gy);
+			return {
+				k,
+				px,
+				py,
+				gx,
+				gy,
+				u,
+				v,
+				m: Math.hypot(u, v)
+			};
+		}).filter((node) => Number.isFinite(node.m));
+		const sorted = nodes.map((node) => node.m).sort((a, b) => a - b);
+		const top = sorted[Math.floor(sorted.length * .95)] || 1;
+		const reach = inset * .86;
+		const dir = (node) => {
+			const scale = length === "proportional" ? Math.min(1, Math.sqrt(node.m / top)) : 1;
+			const n = node.m || 1;
+			return {
+				dx: node.u / n * reach * scale,
+				dy: -node.v / n * reach * scale,
+				scale
+			};
+		};
+		const shape = (node) => {
+			const { dx, dy } = dir(node);
+			if (glyph === "wedge") {
+				const nx = -dy * .28, ny = dx * .28;
+				return MathMarks.line([
+					[node.px + dx, node.py + dy],
+					[node.px - dx * .8 + nx, node.py - dy * .8 + ny],
+					[node.px - dx * .8 - nx, node.py - dy * .8 - ny]
+				], true);
+			}
+			if (glyph === "pin") return MathMarks.line([[node.px, node.py], [node.px + dx * 1.6, node.py + dy * 1.6]]);
+			return MathMarks.arrow(node.px - dx, node.py - dy, node.px + dx, node.py + dy, Math.min(6, 2.5 + Math.hypot(dx, dy) / 2));
+		};
+		const tone = (node) => ctx.palette.sequential(.35 + .65 * Math.min(1, Math.sqrt(node.m / top)));
+		const arrows = ctx.marks("vec-glyph", "path", nodes, (d) => d.k).attr("stroke", tone).attr("fill", tone).attr("stroke-width", glyph === "pin" ? 2 : 1.25).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		ctx.set(arrows, { d: shape }, { d: shape });
+		ctx.hover(arrows, (d) => ({
+			title: `(${MathNumerics.format(d.gx)}, ${MathNumerics.format(d.gy)})`,
+			rows: [
+				["u", MathNumerics.format(d.u)],
+				["v", MathNumerics.format(d.v)],
+				["|F|", MathNumerics.format(d.m)]
+			]
+		}));
+		const pins = ctx.marks("vec-pin", "circle", glyph === "pin" ? nodes : [], (d) => d.k).attr("fill", tone);
+		ctx.set(pins, {
+			cx: (d) => d.px,
+			cy: (d) => d.py,
+			r: 2
+		});
+	}
+};
+export { VectorFieldChart, VectorGlyph, VectorLattice, VectorLength };

package/dist/charts/mathematical/index.js

@@ -0,0 +1,47 @@
+import { MathPlane, PlaneFrame, PlaneTicks } from "./MathPlane.js";
+import { ArgandDiagram, ArgandView } from "./ArgandDiagram.js";
+import { IterationMapKind } from "./IterationMap.js";
+import { BifurcationDiagram, BifurcationView, BifurcationWindow } from "./BifurcationDiagram.js";
+import { CobwebPlot, CobwebRegime } from "./CobwebPlot.js";
+import { ComplexDomainColoring, DomainChannel, DomainForm } from "./ComplexDomainColoring.js";
+import { FibonacciCurve, FibonacciLayout, FibonacciSpiralChart, PhyllotaxisAngle } from "./FibonacciSpiralChart.js";
+import { FourierSeriesChart, FourierView, FourierWave } from "./FourierSeriesChart.js";
+import { FunctionCompanion, FunctionFill, FunctionPlot } from "./FunctionPlot.js";
+import { ImplicitForm, ImplicitPlot, ImplicitView } from "./ImplicitPlot.js";
+import { LissajousChart, LissajousLayout, LissajousRatio, LissajousView } from "./LissajousChart.js";
+import { FractalRegion, FractalSet, FractalShading, MandelbrotChart } from "./MandelbrotChart.js";
+import { NumberLineArrangement, NumberLineChart, NumberLineMark } from "./NumberLineChart.js";
+import { ParametricForm, ParametricPlot, ParametricTrace } from "./ParametricPlot.js";
+import { FieldForm, FieldPlot } from "./FieldPlot.js";
+import { PhaseBackdrop, PhasePortrait, PhaseSystem } from "./PhasePortrait.js";
+import { PolarConvention, PolarCurveForm, PolarCurvePlot } from "./PolarCurvePlot.js";
+import { RiemannMethod, RiemannSumChart } from "./RiemannSumChart.js";
+import { SetRelationChart, SetRelationOrder, SetRelationView } from "./SetRelationChart.js";
+import { SlopeEquation, SlopeFieldChart, SlopeGlyph } from "./SlopeFieldChart.js";
+import { StreamSeeding, StreamlineChart } from "./StreamlineChart.js";
+import { TaylorFunction, TaylorSeriesChart, TaylorView } from "./TaylorSeriesChart.js";
+import { VectorFieldChart, VectorGlyph, VectorLattice, VectorLength } from "./VectorFieldChart.js";
+// src/charts/mathematical/index.ts
+var mathematicalCatalog = [
+	FunctionPlot,
+	ParametricPlot,
+	PolarCurvePlot,
+	ImplicitPlot,
+	SlopeFieldChart,
+	VectorFieldChart,
+	StreamlineChart,
+	ComplexDomainColoring,
+	MandelbrotChart,
+	PhasePortrait,
+	BifurcationDiagram,
+	LissajousChart,
+	FourierSeriesChart,
+	RiemannSumChart,
+	NumberLineChart,
+	ArgandDiagram,
+	FibonacciSpiralChart,
+	SetRelationChart,
+	CobwebPlot,
+	TaylorSeriesChart
+];
+export { ArgandDiagram, ArgandView, BifurcationDiagram, BifurcationView, BifurcationWindow, CobwebPlot, CobwebRegime, ComplexDomainColoring, DomainChannel, DomainForm, FibonacciCurve, FibonacciLayout, FibonacciSpiralChart, FieldForm, FieldPlot, FourierSeriesChart, FourierView, FourierWave, FractalRegion, FractalSet, FractalShading, FunctionCompanion, FunctionFill, FunctionPlot, ImplicitForm, ImplicitPlot, ImplicitView, IterationMapKind, LissajousChart, LissajousLayout, LissajousRatio, LissajousView, MandelbrotChart, MathPlane, NumberLineArrangement, NumberLineChart, NumberLineMark, ParametricForm, ParametricPlot, ParametricTrace, PhaseBackdrop, PhasePortrait, PhaseSystem, PhyllotaxisAngle, PlaneFrame, PlaneTicks, PolarConvention, PolarCurveForm, PolarCurvePlot, RiemannMethod, RiemannSumChart, SetRelationChart, SetRelationOrder, SetRelationView, SlopeEquation, SlopeFieldChart, SlopeGlyph, StreamSeeding, StreamlineChart, TaylorFunction, TaylorSeriesChart, TaylorView, VectorFieldChart, VectorGlyph, VectorLattice, VectorLength, mathematicalCatalog };