@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/mathematical/ComplexDomainColoring.js

@@ -0,0 +1,188 @@
+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, PlaneFrame } from "./MathPlane.js";
+// src/charts/mathematical/ComplexDomainColoring.ts
+var DomainForm = /* @__PURE__ */ function(DomainForm) {
+	DomainForm["Roots"] = "roots";
+	DomainForm["Cubic"] = "cubic";
+	DomainForm["Joukowski"] = "joukowski";
+	DomainForm["Sine"] = "sine";
+	DomainForm["Exponential"] = "exponential";
+	DomainForm["Essential"] = "essential";
+	return DomainForm;
+}({});
+/** What the two-hue scale carries. Phase is folded through cosine: a rainbow wheel is deliberately not offered. */
+var DomainChannel = /* @__PURE__ */ function(DomainChannel) {
+	DomainChannel["Phase"] = "phase";
+	DomainChannel["Sectors"] = "sectors";
+	DomainChannel["Modulus"] = "modulus";
+	DomainChannel["Checker"] = "checker";
+	DomainChannel["Enhanced"] = "enhanced";
+	return DomainChannel;
+}({});
+var mul = (a, b) => [a[0] * b[0] - a[1] * b[1], a[0] * b[1] + a[1] * b[0]];
+var div = (a, b) => {
+	const n = b[0] * b[0] + b[1] * b[1];
+	return [(a[0] * b[0] + a[1] * b[1]) / n, (a[1] * b[0] - a[0] * b[1]) / n];
+};
+var exp = ([a, b]) => {
+	const e = Math.exp(Math.min(a, 40));
+	return [e * Math.cos(b), e * Math.sin(b)];
+};
+var FORMS = {
+	["cubic"]: (a, b) => {
+		const z = [a, b], c = mul(mul(z, z), z);
+		return [c[0] - 1, c[1]];
+	},
+	["joukowski"]: (a, b) => {
+		const r = div([1, 0], [a, b]);
+		return [a + r[0], b + r[1]];
+	},
+	["sine"]: (a, b) => [Math.sin(a) * Math.cosh(b), Math.cos(a) * Math.sinh(b)],
+	["exponential"]: (a, b) => exp([a, b]),
+	["essential"]: (a, b) => exp(div([1, 0], [a, b]))
+};
+/** Portrait of a complex function: zeros, poles and branch structure in one image, using a diverging scale, never a rainbow. */
+var ComplexDomainColoring = class extends MathPlane {
+	static meta = {
+		id: "complex-domain-coloring",
+		name: "Complex domain colouring",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Paints each point of the complex plane by the phase or modulus of f(z), revealing zeros, poles and conformal structure.",
+		tags: [
+			"complex analysis",
+			"phase portrait",
+			"conformal map",
+			"zeros and poles"
+		],
+		sample: (seed) => MathNumerics.fit(SampleData.points(seed, 5, 2), "x", "y", [[-2.4, 2.4], [-1.5, 1.5]]).map(([x, y], i) => ({
+			x,
+			y,
+			kind: i % 2 ? "pole" : "zero"
+		})),
+		variants: {
+			form: Object.values(DomainForm),
+			channel: Object.values(DomainChannel),
+			overlay: [false, true],
+			frame: [PlaneFrame.Box, PlaneFrame.Cross]
+		},
+		valid: (v) => !(v.frame === PlaneFrame.Cross && v.overlay)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			form: "roots",
+			channel: "enhanced",
+			overlay: false,
+			equal: true,
+			x: "x",
+			y: "y",
+			kind: "kind",
+			cell: 2
+		};
+	}
+	extent() {
+		return this.options.form === "sine" ? [[-Math.PI * 1.25, Math.PI * 1.25], [-2.2, 2.2]] : [[-3, 3], [-2, 2]];
+	}
+	fn() {
+		const { fn, form, data, x, y, kind } = this.options;
+		if (fn) return fn;
+		if (form !== "roots") return FORMS[form];
+		const roots = data.filter((row) => row[x] !== null && row[y] !== null && Number.isFinite(+row[x]) && Number.isFinite(+row[y])).map((row) => ({
+			at: [+row[x], +row[y]],
+			pole: row[kind] === "pole"
+		}));
+		return (a, b) => roots.reduce((value, { at, pole }) => pole ? div(value, [a - at[0], b - at[1]]) : mul(value, [a - at[0], b - at[1]]), [1, 0]);
+	}
+	/** Scalar for one point, in -1..1 on the diverging channels and 0..1 on modulus. */
+	tone(re, im) {
+		const { channel } = this.options;
+		const phase = Math.atan2(im, re);
+		const log = Math.log2(Math.hypot(re, im) || 1e-12);
+		switch (channel) {
+			case "phase": return Math.cos(phase);
+			case "sectors": return (Math.floor((phase + Math.PI) / (2 * Math.PI) * 8) % 2 ? 1 : -1) * (.35 + .5 * Math.abs(Math.cos(phase)));
+			case "modulus": return Math.tanh(log / 5);
+			case "checker": return (Math.floor((phase + Math.PI) / (2 * Math.PI) * 12) + Math.floor(log)) % 2 ? .75 : -.75;
+			default: return Math.cos(phase) * (.45 + .55 * (log - Math.floor(log)));
+		}
+	}
+	plotPlane(ctx, { x, y, box, width, height }) {
+		const { cell, overlay, channel } = this.options;
+		const f = this.fn();
+		const cols = Math.max(4, Math.floor(width / cell)), rows = Math.max(4, Math.floor(height / cell));
+		const levels = new Int16Array(cols * rows);
+		for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) {
+			const [re, im] = f(x.invert((i + .5) / cols * width), y.invert((j + .5) / rows * height));
+			const t = this.tone(re, im);
+			levels[i + j * cols] = Number.isFinite(t) ? Math.round((t + 1) / 2 * 20) : -1;
+		}
+		const tone = (band) => 2 * band / 20 - 1;
+		const fill = channel === "modulus" ? (band) => ctx.palette.sequential(band / 20) : (band) => ctx.palette.diverging(tone(band));
+		const cells = ctx.marks("dom-band", "path", BandRaster.paths(cols, rows, width, height, (i, j) => levels[i + j * cols]), (d) => d.band).attr("fill", (d) => fill(d.band)).attr("shape-rendering", "crispEdges");
+		ctx.set(cells, { d: (d) => d.d });
+		ctx.hover(cells, (d) => ({
+			title: channel === "modulus" ? "log₂ |f| band" : "cos(arg f) band",
+			rows: [["Level", MathNumerics.format(tone(d.band), 2)]]
+		}));
+		const mod = (a, b) => {
+			const [re, im] = f(a, b);
+			return Math.log2(Math.hypot(re, im) || 1e-9);
+		};
+		const rings = overlay ? [
+			-2,
+			-1,
+			0,
+			1,
+			2
+		].map((level) => ({
+			level,
+			d: MathNumerics.levelLines(mod, box, level, 150, 100).map((line) => MathMarks.line(line.map((p) => [x(p[0]), y(p[1])]))).join("")
+		})) : [];
+		const contour = MathMarks.stroke(ctx.marks("dom-contour", "path", rings, (d) => d.level), ctx.theme.ink, 1).attr("stroke-opacity", .55);
+		ctx.set(contour, { d: (d) => d.d });
+		ctx.hover(contour, (d) => ({ title: `|f(z)| = ${2 ** d.level}` }));
+		const critical = overlay ? this.critical(mod, box) : [];
+		const dots = ctx.marks("dom-root", "circle", critical, (d) => `${d.x.toFixed(3)},${d.y.toFixed(3)}`);
+		MathMarks.dot(ctx, dots, (d) => x(d.x), (d) => y(d.y), (d) => d.pole ? ctx.theme.surface : ctx.theme.ink);
+		dots.attr("stroke", (d) => d.pole ? ctx.theme.ink : ctx.theme.surface);
+		ctx.hover(dots, (d) => ({
+			title: d.pole ? "Pole" : "Zero",
+			rows: [["Re z", MathNumerics.format(d.x)], ["Im z", MathNumerics.format(d.y)]]
+		}));
+	}
+	/** Local extremes of log |f| that are far from 1: zeros below, poles above. */
+	critical(mod, box) {
+		const nx = 90;
+		const grid = MathNumerics.grid(mod, box, nx, 60);
+		const out = [];
+		for (let j = 1; j < 59; j++) for (let i = 1; i < 89; i++) {
+			const v = grid[i + j * nx];
+			if (Math.abs(v) < 2.2) continue;
+			const around = [
+				-1,
+				0,
+				1
+			].flatMap((dj) => [
+				-1,
+				0,
+				1
+			].map((di) => grid[i + di + (j + dj) * nx])).filter((_, k) => k !== 4);
+			if (v < 0 ? around.every((n) => v <= n) : around.every((n) => v >= n)) {
+				const px = box[0][0] + (box[0][1] - box[0][0]) * i / 89, py = box[1][0] + (box[1][1] - box[1][0]) * j / 59;
+				if (!out.some((o) => Math.hypot(o.x - px, o.y - py) < .2)) out.push({
+					x: px,
+					y: py,
+					pole: v > 0
+				});
+			}
+		}
+		return out.slice(0, 16);
+	}
+};
+export { ComplexDomainColoring, DomainChannel, DomainForm };

package/dist/charts/mathematical/FibonacciSpiralChart.js

@@ -0,0 +1,255 @@
+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";
+import { ascending, max, sum } from "d3";
+// src/charts/mathematical/FibonacciSpiralChart.ts
+/** Filled squares, nested golden rectangles, or a sunflower of rows. */
+var FibonacciLayout = /* @__PURE__ */ function(FibonacciLayout) {
+	FibonacciLayout["Tiling"] = "tiling";
+	FibonacciLayout["Outline"] = "outline";
+	FibonacciLayout["Sunflower"] = "sunflower";
+	return FibonacciLayout;
+}({});
+/** Quarter arcs through the squares, or the true logarithmic spiral they approximate. */
+var FibonacciCurve = /* @__PURE__ */ function(FibonacciCurve) {
+	FibonacciCurve["Arcs"] = "arcs";
+	FibonacciCurve["Golden"] = "golden";
+	return FibonacciCurve;
+}({});
+/** Divergence between successive seeds in a sunflower. */
+var PhyllotaxisAngle = /* @__PURE__ */ function(PhyllotaxisAngle) {
+	PhyllotaxisAngle["Golden"] = "golden";
+	PhyllotaxisAngle["Lucas"] = "lucas";
+	PhyllotaxisAngle["Near"] = "near";
+	return PhyllotaxisAngle;
+}({});
+var DEGREES = {
+	["golden"]: 137.508,
+	["lucas"]: 99.502,
+	["near"]: 137.1
+};
+/** The golden-ratio tiling and spiral, plus a sunflower packing that gives every row a seed: order and growth at a glance. */
+var FibonacciSpiralChart = class extends Chart2D {
+	static meta = {
+		id: "fibonacci-spiral",
+		name: "Fibonacci spiral",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Tiles squares of Fibonacci side with the spiral through them, or packs rows as sunflower seeds at the golden angle.",
+		tags: [
+			"golden ratio",
+			"phyllotaxis",
+			"sunflower",
+			"tiling"
+		],
+		sample: (seed) => SampleData.distribution(seed, 40, 3),
+		variants: {
+			layout: Object.values(FibonacciLayout),
+			curve: Object.values(FibonacciCurve),
+			angle: Object.values(PhyllotaxisAngle),
+			terms: [
+				10,
+				7,
+				13
+			],
+			clockwise: [false, true]
+		},
+		valid: (v) => v.layout === "sunflower" ? v.curve === "arcs" && v.terms === 10 : v.angle === "golden"
+	};
+	defaults() {
+		return {
+			layout: "tiling",
+			curve: "arcs",
+			angle: "golden",
+			terms: 10,
+			clockwise: false,
+			value: "value",
+			series: "group"
+		};
+	}
+	/** Each square attaches to the growing rectangle: right, top, left, bottom. y is up. */
+	squares() {
+		const terms = this.options.terms;
+		const out = [];
+		let x0 = 0, y0 = 0, x1 = 0, y1 = 0, a = 1, b = 1;
+		for (let i = 0; i < terms; i++) {
+			const side = i === 0 ? 1 : b;
+			let x = 0, y = 0;
+			let from, to, pivot;
+			switch (i % 4) {
+				case 0:
+					x = x1;
+					y = y0;
+					from = [x, y];
+					to = [x + side, y + side];
+					pivot = [x, y + side];
+					break;
+				case 1:
+					x = x0;
+					y = y1;
+					from = [x + side, y];
+					to = [x, y + side];
+					pivot = [x, y];
+					break;
+				case 2:
+					x = x0 - side;
+					y = y0;
+					from = [x + side, y + side];
+					to = [x, y];
+					pivot = [x + side, y];
+					break;
+				default:
+					x = x0;
+					y = y0 - side;
+					from = [x, y + side];
+					to = [x + side, y];
+					pivot = [x + side, y + side];
+			}
+			x0 = Math.min(x0, x);
+			y0 = Math.min(y0, y);
+			x1 = Math.max(x1, x + side);
+			y1 = Math.max(y1, y + side);
+			out.push({
+				i,
+				side,
+				x,
+				y,
+				from,
+				to,
+				pivot,
+				term: side,
+				bounds: [
+					x0,
+					y0,
+					x1,
+					y1
+				]
+			});
+			if (i > 0) [a, b] = [b, a + b];
+		}
+		return out;
+	}
+	/** Quarter circle about the pivot, or a log spiral about the tiling's limit point. */
+	spiral(squares) {
+		if (this.options.curve === "arcs") return squares.flatMap((s) => MathNumerics.linspace(0, 1, 18).map((t) => {
+			const a0 = Math.atan2(s.from[1] - s.pivot[1], s.from[0] - s.pivot[0]);
+			return [s.pivot[0] + s.side * Math.cos(a0 + t * Math.PI / 2), s.pivot[1] + s.side * Math.sin(a0 + t * Math.PI / 2)];
+		}));
+		const last = squares.slice(-4);
+		if (last.length < 4) return squares.map((s) => s.from);
+		const [p, q, r, u] = last.map((s) => s.from);
+		const dx1 = r[0] - p[0], dy1 = r[1] - p[1], dx2 = u[0] - q[0], dy2 = u[1] - q[1];
+		const t = ((q[0] - p[0]) * dy2 - (q[1] - p[1]) * dx2) / (dx1 * dy2 - dy1 * dx2 || 1);
+		const eye = [p[0] + dx1 * t, p[1] + dy1 * t];
+		const keys = [...squares.map((s) => s.from), squares[squares.length - 1].to];
+		return keys.slice(1).flatMap((key, i) => {
+			const prev = keys[i];
+			const ra = Math.hypot(prev[0] - eye[0], prev[1] - eye[1]), rb = Math.hypot(key[0] - eye[0], key[1] - eye[1]);
+			const begin = Math.atan2(prev[1] - eye[1], prev[0] - eye[0]);
+			const sweep = (Math.atan2(key[1] - eye[1], key[0] - eye[0]) - begin + 2 * Math.PI) % (2 * Math.PI);
+			return MathNumerics.linspace(0, 1, 16).map((s) => {
+				const radius = ra * (rb / (ra || 1)) ** s, angle = begin + s * sweep;
+				return [eye[0] + radius * Math.cos(angle), eye[1] + radius * Math.sin(angle)];
+			});
+		});
+	}
+	draw(ctx) {
+		if (this.options.layout === "sunflower") {
+			this.drawSunflower(ctx);
+			ctx.marks("fib-square", "rect", []);
+			ctx.marks("fib-term", "text", []);
+			ctx.marks("fib-spiral", "path", []);
+			return;
+		}
+		ctx.marks("fib-seed", "circle", []);
+		this.drawTiling(ctx);
+	}
+	drawTiling(ctx) {
+		const { width, height } = ctx.plot;
+		const { layout, clockwise } = this.options;
+		const squares = this.squares();
+		const curve = this.spiral(squares);
+		const left = Math.min(...squares.map((s) => s.x), ...curve.map((p) => p[0])), right = Math.max(...squares.map((s) => s.x + s.side), ...curve.map((p) => p[0]));
+		const low = Math.min(...squares.map((s) => s.y), ...curve.map((p) => p[1])), high = Math.max(...squares.map((s) => s.y + s.side), ...curve.map((p) => p[1]));
+		const k = Math.min(width / (right - left), height / (high - low));
+		const ox = (width - (right - left) * k) / 2, oy = (height - (high - low) * k) / 2;
+		const px = (v) => clockwise ? ox + (right - v) * k : ox + (v - left) * k;
+		const py = (v) => oy + (high - v) * k;
+		const outline = layout === "outline";
+		const count = squares.length;
+		const tone = (s) => ctx.palette.sequential(.12 + .8 * (count - 1 - s.i) / Math.max(1, count - 1));
+		const cells = ctx.marks("fib-square", "rect", squares, (d) => d.i).attr("rx", Math.min(3, k / 2)).attr("fill", (d) => outline ? "none" : tone(d)).attr("stroke", outline ? ctx.theme.axis : "none");
+		const box = outline ? {
+			x: (d) => clockwise ? px(d.bounds[2]) : px(d.bounds[0]),
+			y: (d) => py(d.bounds[3]),
+			width: (d) => (d.bounds[2] - d.bounds[0]) * k,
+			height: (d) => (d.bounds[3] - d.bounds[1]) * k
+		} : {
+			x: (d) => (clockwise ? px(d.x + d.side) : px(d.x)) + 1,
+			y: (d) => py(d.y + d.side) + 1,
+			width: (d) => Math.max(.5, d.side * k - 2),
+			height: (d) => Math.max(.5, d.side * k - 2)
+		};
+		ctx.set(cells, box, {
+			x: box.x,
+			y: box.y,
+			width: 0,
+			height: 0
+		}, 40);
+		ctx.hover(cells, (d) => ({
+			title: `Term ${d.i + 1}: ${d.term}`,
+			rows: d.i ? [["Ratio to previous", MathNumerics.format(d.term / squares[d.i - 1].term, 5)]] : []
+		}));
+		const tags = ctx.marks("fib-term", "text", squares.filter((s) => s.side * k > 22), (d) => d.i).attr("text-anchor", "middle").attr("x", (d) => px(d.x + d.side / 2)).attr("y", (d) => py(d.y + d.side / 2) + 4).text((d) => d.term).attr("font-family", ctx.theme.fontFamily).attr("font-size", (d) => Math.min(20, 9 + d.side * k / 24));
+		if (outline) ctx.text(tags, 11, "muted");
+		else tags.attr("fill", (d) => ctx.palette.inkOn(hex(tone(d))));
+		const line = MathMarks.stroke(ctx.marks("fib-spiral", "path", [0]), outline ? ctx.palette.color("Spiral") : ctx.theme.ink, 2.5);
+		MathMarks.reveal(ctx, line, () => MathMarks.line(curve.map((p) => [px(p[0]), py(p[1])])));
+	}
+	drawSunflower(ctx) {
+		const { width, height } = ctx.plot;
+		const { data, value, series, angle, clockwise } = this.options;
+		const rows = data.filter((row) => row[value] !== null && Number.isFinite(+row[value]) && +row[value] > 0).map((row, i) => ({
+			i,
+			v: +row[value],
+			group: String(row[series] ?? "Value")
+		})).sort((a, b) => ascending(b.v, a.v));
+		const peak = max(rows, (d) => d.v) ?? 1;
+		const room = Math.min(width, height) / 2 - 4;
+		const totalArea = sum(rows, (d) => d.v / peak) || 1;
+		const biggest = Math.min(11, room * Math.sqrt(.5 / totalArea));
+		const spread = (room - biggest) / Math.sqrt(rows.length || 1);
+		const turn = DEGREES[angle] * Math.PI / 180 * (clockwise ? -1 : 1);
+		const seeds = rows.map((d, n) => ({
+			...d,
+			n,
+			x: width / 2 + spread * Math.sqrt(n + .5) * Math.cos(n * turn),
+			y: height / 2 + spread * Math.sqrt(n + .5) * Math.sin(n * turn),
+			r: biggest * Math.sqrt(d.v / peak)
+		}));
+		const dots = ctx.marks("fib-seed", "circle", seeds, (d) => d.i).attr("fill", (d) => ctx.palette.color(d.group)).attr("stroke", ctx.theme.surface).attr("stroke-width", 1);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: (d) => d.r
+		}, {
+			cx: width / 2,
+			cy: height / 2,
+			r: 0
+		}, 4);
+		ctx.hover(dots, (d) => ({
+			title: d.group,
+			color: ctx.palette.color(d.group),
+			rows: [["Value", d.v], ["Rank", d.n + 1]]
+		}));
+	}
+};
+/** `palette.inkOn` wants hex; the sequential ramp returns rgb(). */
+function hex(color) {
+	const parts = color.match(/\d+/g);
+	return parts ? `#${parts.slice(0, 3).map((part) => (+part).toString(16).padStart(2, "0")).join("")}` : color;
+}
+export { FibonacciCurve, FibonacciLayout, FibonacciSpiralChart, PhyllotaxisAngle };

package/dist/charts/mathematical/FieldPlot.js

@@ -0,0 +1,131 @@
+import { BandRaster } from "./BandRaster.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { MathPlane } from "./MathPlane.js";
+import { extent } from "d3";
+// src/charts/mathematical/FieldPlot.ts
+var FieldForm = /* @__PURE__ */ function(FieldForm) {
+	FieldForm["Saddle"] = "saddle";
+	FieldForm["SpiralSink"] = "spiral-sink";
+	FieldForm["Vortex"] = "vortex";
+	FieldForm["Shear"] = "shear";
+	FieldForm["Dipole"] = "dipole";
+	FieldForm["Charges"] = "charges";
+	return FieldForm;
+}({});
+var BOX = [[-3.6, 3.6], [-2.4, 2.4]];
+var present = (row, key) => row[key] !== null && row[key] !== void 0 && Number.isFinite(+row[key]);
+var DIPOLE = [{
+	x: -1.2,
+	y: 0,
+	q: 1
+}, {
+	x: 1.2,
+	y: 0,
+	q: -1
+}];
+var coulombPotential = (sources) => (x, y) => sources.reduce((sum, s) => sum + s.q / Math.sqrt((x - s.x) ** 2 + (y - s.y) ** 2 + .02), 0);
+/** Charges at the rows' positions; softened so the field stays finite right on a charge. */
+function coulomb(sources) {
+	return (x, y) => {
+		let u = 0, v = 0;
+		for (const s of sources) {
+			const dx = x - s.x, dy = y - s.y, r2 = dx * dx + dy * dy + .02, k = s.q / (r2 * Math.sqrt(r2));
+			u += k * dx;
+			v += k * dy;
+		}
+		return [u, v];
+	};
+}
+var FORMS = {
+	["saddle"]: (x, y) => [x, -y],
+	["spiral-sink"]: (x, y) => [-.35 * x - y, x - .35 * y],
+	["vortex"]: (x, y) => {
+		const r2 = x * x + y * y + .25;
+		return [-y / r2, x / r2];
+	},
+	["shear"]: (x, y) => [Math.sin(y * 1.4), Math.sin(x * 1.1) * .6],
+	["dipole"]: coulomb(DIPOLE)
+};
+/** Plane with a 2D vector field: resolves named forms, charges, sampled rows or a live function. */
+var FieldPlot = class extends MathPlane {
+	defaults() {
+		return {
+			...super.defaults(),
+			form: "saddle",
+			x: "x",
+			y: "y",
+			u: "u",
+			v: "v",
+			charge: "charge"
+		};
+	}
+	get sampled() {
+		const { data, x, y, u, v } = this.options;
+		return data.filter((row) => present(row, x) && present(row, y) && present(row, u) && present(row, v));
+	}
+	field() {
+		const { fn, form, x, y, u, v } = this.options;
+		if (fn) return fn;
+		const sampled = this.sampled;
+		if (sampled.length) return (a, b) => {
+			let su = 0, sv = 0, sw = 0;
+			for (const row of sampled) {
+				const weight = 1 / ((a - +row[x]) ** 2 + (b - +row[y]) ** 2 + 1e-6) ** 2;
+				su += weight * +row[u];
+				sv += weight * +row[v];
+				sw += weight;
+			}
+			return [su / sw, sv / sw];
+		};
+		if (form !== "charges") return FORMS[form];
+		return coulomb(this.charges());
+	}
+	charges() {
+		const { data, x, y, charge } = this.options;
+		return data.filter((row) => present(row, x) && present(row, y)).map((row) => ({
+			x: +row[x],
+			y: +row[y],
+			q: present(row, charge) ? +row[charge] : 1
+		}));
+	}
+	extent() {
+		const { form, fn, x, y, data } = this.options;
+		const rows = this.sampled.length ? this.sampled : form === "charges" && !fn ? data : [];
+		if (!rows.length) return BOX;
+		const pad = ([a = -1, b = 1]) => [a - (b - a || 1) * .15, b + (b - a || 1) * .15];
+		return [pad(extent(rows, (row) => +row[x])), pad(extent(rows, (row) => +row[y]))];
+	}
+	curl(field, h) {
+		return (a, b) => (field(a + h, b)[1] - field(a - h, b)[1] - field(a, b + h)[0] + field(a, b - h)[0]) / (2 * h);
+	}
+	divergence(field, h) {
+		return (a, b) => (field(a + h, b)[0] - field(a - h, b)[0] + field(a, b + h)[1] - field(a, b - h)[1]) / (2 * h);
+	}
+	/** Electric potential for the charge forms, whose curl and divergence are empty away from the charges. */
+	potential() {
+		if (this.options.fn || this.sampled.length) return null;
+		const { form } = this.options;
+		if (form === "dipole") return coulombPotential(DIPOLE);
+		return form === "charges" ? coulombPotential(this.charges()) : null;
+	}
+	/** A scalar of the plane as a diverging backdrop, recessive enough for glyphs to sit on top. */
+	scalarBackdrop(ctx, { x, y, width, height }, title, value) {
+		const cols = Math.floor(width / 3), rows = Math.floor(height / 3);
+		const values = [];
+		for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) values.push(value(x.invert((i + .5) / cols * width), y.invert((j + .5) / rows * height)));
+		const sorted = values.map(Math.abs).filter(Number.isFinite).sort((a, b) => a - b);
+		const peak = sorted[Math.floor(sorted.length * .95)] || 1;
+		const bands = BandRaster.paths(cols, rows, width, height, (i, j) => {
+			const t = Math.max(-1, Math.min(1, (values[i + j * cols] ?? 0) / peak));
+			return Math.round((t + 1) / 2 * 10);
+		});
+		const tone = (band) => 2 * band / 10 - 1;
+		const cells = ctx.marks("field-backdrop", "path", bands, (d) => d.band).attr("fill", (d) => ctx.palette.diverging(tone(d.band) * .6)).attr("shape-rendering", "crispEdges");
+		ctx.set(cells, { d: (d) => d.d });
+		ctx.hover(cells, (d) => ({
+			title,
+			rows: [["Value", MathNumerics.format(tone(d.band) * peak)]]
+		}));
+	}
+};
+export { FieldForm, FieldPlot };