@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/massive/MassiveTypes.js

@@ -0,0 +1,4 @@
+// src/charts/massive/MassiveTypes.ts
+/** Device pixels a point may stray past the plot and still count as on it: a point on a nice domain's edge lands there up to rounding. */
+var PLOT_SLACK = .5;
+export { PLOT_SLACK };

package/dist/charts/massive/MinMaxDecimator.js

@@ -0,0 +1,56 @@
+// src/charts/massive/MinMaxDecimator.ts
+/**
+* Keeps the first, lowest, highest and last point of every device-pixel column (M4), in x order.
+* Stroked at 1 device pixel of x it matches the full line, so spikes survive any amount of reduction.
+*/
+var MinMaxDecimator = class {
+	static reduce({ x, y }, from, to, { ax, bx, ay, by, width }) {
+		const out = new Float32Array((Math.ceil(width) + 4) * 8);
+		let used = 0, column = NaN;
+		let firstX = 0, firstY = 0, lastX = 0, lastY = 0, lowX = 0, lowY = Infinity, highX = 0, highY = -Infinity, lowAt = 0, highAt = 0;
+		const flush = () => {
+			const lowFirst = lowAt <= highAt;
+			const stops = [
+				firstX,
+				firstY,
+				lowFirst ? lowX : highX,
+				lowFirst ? lowY : highY,
+				lowFirst ? highX : lowX,
+				lowFirst ? highY : lowY,
+				lastX,
+				lastY
+			];
+			for (let i = 0; i < 8; i += 2) {
+				if (used && out[used - 2] === stops[i] && out[used - 1] === stops[i + 1]) continue;
+				out[used++] = stops[i];
+				out[used++] = stops[i + 1];
+			}
+		};
+		for (let i = from; i < to; i++) {
+			const px = ax * x[i] + bx, py = ay * y[i] + by, bucket = Math.floor(px);
+			if (bucket !== column) {
+				if (column === column) flush();
+				column = bucket;
+				firstX = px;
+				firstY = py;
+				lowY = Infinity;
+				highY = -Infinity;
+			}
+			if (py < lowY) {
+				lowY = py;
+				lowX = px;
+				lowAt = i;
+			}
+			if (py > highY) {
+				highY = py;
+				highX = px;
+				highAt = i;
+			}
+			lastX = px;
+			lastY = py;
+		}
+		if (column === column) flush();
+		return out.subarray(0, used);
+	}
+};
+export { MinMaxDecimator };

package/dist/charts/massive/PassThroughDecimator.js

@@ -0,0 +1,13 @@
+// src/charts/massive/PassThroughDecimator.ts
+/** Projects every point in a span, for lines small enough to stroke whole. */
+var PassThrough = class {
+	static reduce({ x, y }, from, to, { ax, bx, ay, by }) {
+		const out = new Float32Array((to - from) * 2);
+		for (let i = from, used = 0; i < to; i++) {
+			out[used++] = ax * x[i] + bx;
+			out[used++] = ay * y[i] + by;
+		}
+		return out;
+	}
+};
+export { PassThrough };

package/dist/charts/massive/index.js

@@ -0,0 +1,24 @@
+import { CanvasSurface } from "./CanvasSurface.js";
+import { PassThrough } from "./PassThroughDecimator.js";
+import { LttbDecimator } from "./LttbDecimator.js";
+import { PLOT_SLACK } from "./MassiveTypes.js";
+import { NearestIndex } from "./MassiveNearestIndex.js";
+import { PointColumns } from "./MassivePointColumns.js";
+import { MassiveChart } from "./MassiveChart.js";
+import { ColorTable } from "./MassiveColorTable.js";
+import { MassiveDecimation, MassiveDensityScale, MassiveDisplay } from "./MassiveEnums.js";
+import { DensityRaster } from "./MassiveDensityRaster.js";
+import { MassiveDensityChart } from "./MassiveDensityChart.js";
+import { LineLayer } from "./MassiveLineLayer.js";
+import { LineSeries } from "./MassiveLineSeries.js";
+import { MinMaxDecimator } from "./MinMaxDecimator.js";
+import { MassiveLineChart } from "./MassiveLineChart.js";
+import { MarkLayer } from "./MassiveMarkLayer.js";
+import { MassiveScatterChart } from "./MassiveScatterChart.js";
+// src/charts/massive/index.ts
+var massiveCatalog = [
+	MassiveScatterChart,
+	MassiveLineChart,
+	MassiveDensityChart
+];
+export { CanvasSurface, ColorTable, DensityRaster, LineLayer, LineSeries, LttbDecimator, MarkLayer, MassiveChart, MassiveDecimation, MassiveDensityChart, MassiveDensityScale, MassiveDisplay, MassiveLineChart, MassiveScatterChart, MinMaxDecimator, NearestIndex, PLOT_SLACK, PassThrough, PointColumns, massiveCatalog };

package/dist/charts/mathematical/ArgandDiagram.js

@@ -0,0 +1,222 @@
+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/ArgandDiagram.ts
+var ArgandView = /* @__PURE__ */ function(ArgandView) {
+	ArgandView["Vectors"] = "vectors";
+	ArgandView["Polar"] = "polar";
+	ArgandView["Conjugate"] = "conjugate";
+	ArgandView["Sum"] = "sum";
+	ArgandView["Product"] = "product";
+	ArgandView["Powers"] = "powers";
+	ArgandView["Roots"] = "roots";
+	return ArgandView;
+}({});
+var multiply = (a, b) => [a[0] * b[0] - a[1] * b[1], a[0] * b[1] + a[1] * b[0]];
+var mod = (z) => Math.hypot(z[0], z[1]);
+var arg = (z) => Math.atan2(z[1], z[0]);
+var show = (z) => `${MathNumerics.format(z[0])} ${z[1] < 0 ? "−" : "+"} ${MathNumerics.format(Math.abs(z[1]))}i`;
+/** Complex numbers as points and arrows on the plane: conjugates, sums, products, powers and roots, in their geometric meaning. */
+var ArgandDiagram = class extends MathPlane {
+	static meta = {
+		id: "argand",
+		name: "Argand diagram",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws complex numbers on the real and imaginary axes, with the geometry of their arithmetic made visible.",
+		tags: [
+			"complex plane",
+			"phasor",
+			"roots of unity",
+			"polar form"
+		],
+		sample: (seed) => {
+			return SampleData.points(seed, 4, 4).map((row, i) => {
+				const r = .7 + +row.size / 28, angle = .7 + i * 1.75;
+				return {
+					x: r * Math.cos(angle),
+					y: r * Math.sin(angle),
+					group: row.group
+				};
+			});
+		},
+		variants: {
+			view: Object.values(ArgandView),
+			unitCircle: [true, false],
+			frame: [PlaneFrame.Cross, PlaneFrame.Box]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			view: "vectors",
+			unitCircle: true,
+			degree: 6,
+			equal: true,
+			frame: PlaneFrame.Cross,
+			x: "x",
+			y: "y",
+			series: "group"
+		};
+	}
+	numbers() {
+		const { data, x, y, series } = this.options;
+		return data.flatMap((row, i) => {
+			const a = row[x], b = row[y];
+			if (a === null || a === void 0 || b === null || b === void 0 || !Number.isFinite(+a) || !Number.isFinite(+b)) return [];
+			return [{
+				name: String(row[series] ?? `z${i + 1}`),
+				z: [+a, +b]
+			}];
+		});
+	}
+	/** Arrows, dashed guides and angle arcs of the chosen view. */
+	layout() {
+		const { view, degree } = this.options;
+		const list = this.numbers();
+		const [p, q] = list;
+		const pointers = [], guides = [], arcs = [];
+		const add = (key, name, z, extra = {}) => pointers.push({
+			key,
+			name,
+			z,
+			...extra
+		});
+		const angle = (key, name, z, radius) => arcs.push({
+			key,
+			name,
+			start: 0,
+			end: arg(z),
+			radius
+		});
+		switch (view) {
+			case "polar":
+				list.forEach(({ name, z }, i) => {
+					add(`z${i}`, name, z);
+					angle(`a${i}`, name, z, .22 + i * .12);
+				});
+				break;
+			case "conjugate":
+				list.forEach(({ name, z }, i) => {
+					add(`z${i}`, name, z);
+					add(`c${i}`, name, [z[0], -z[1]], { result: true });
+					guides.push({
+						key: `g${i}`,
+						a: z,
+						b: [z[0], -z[1]]
+					});
+				});
+				break;
+			case "sum":
+				if (p && q) {
+					const sum = [p.z[0] + q.z[0], p.z[1] + q.z[1]];
+					add("p", p.name, p.z);
+					add("q", q.name, q.z);
+					add("s", "Sum", sum, { result: true });
+					guides.push({
+						key: "a",
+						a: p.z,
+						b: sum
+					}, {
+						key: "b",
+						a: q.z,
+						b: sum
+					});
+				}
+				break;
+			case "product":
+				if (p && q) {
+					const product = multiply(p.z, q.z);
+					add("p", p.name, p.z);
+					add("q", q.name, q.z);
+					add("s", "Product", product, { result: true });
+					angle("a", p.name, p.z, .3);
+					angle("b", q.name, q.z, .46);
+					angle("c", "Product", product, .62);
+				}
+				break;
+			case "powers":
+				if (p) {
+					let previous = [1, 0];
+					for (let k = 1; k <= degree * 2; k++) {
+						const power = multiply(previous, p.z);
+						add(`k${k}`, p.name, power, k === 1 ? {} : { from: previous });
+						previous = power;
+					}
+				}
+				break;
+			case "roots":
+				if (p) {
+					const r = Math.pow(mod(p.z) || 1, 1 / degree), base = arg(p.z) / degree;
+					add("z", p.name, p.z);
+					const roots = Array.from({ length: degree }, (_, k) => [r * Math.cos(base + Math.PI * 2 * k / degree), r * Math.sin(base + Math.PI * 2 * k / degree)]);
+					roots.forEach((z, k) => {
+						add(`r${k}`, "Roots", z, { result: true });
+						guides.push({
+							key: `g${k}`,
+							a: z,
+							b: roots[(k + 1) % degree]
+						});
+					});
+				}
+				break;
+			default: list.forEach(({ name, z }, i) => add(`z${i}`, name, z));
+		}
+		return {
+			pointers,
+			guides,
+			arcs
+		};
+	}
+	extent() {
+		const { pointers } = this.layout();
+		const reach = Math.max(this.options.unitCircle ? 1 : 0, ...pointers.flatMap((p) => [Math.abs(p.z[0]), Math.abs(p.z[1])]), .5) * 1.18;
+		return [[-reach, reach], [-reach, reach]];
+	}
+	plotPlane(ctx, { x, y }) {
+		const { unitCircle } = this.options;
+		const { pointers, guides, arcs } = this.layout();
+		const px = (z) => [x(z[0]), y(z[1])];
+		const unit = Math.abs(x(1) - x(0));
+		ctx.set(ctx.marks("arg-unit", "circle", unitCircle ? [0] : []).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-dasharray", "4 4"), {
+			cx: x(0),
+			cy: y(0),
+			r: unit
+		});
+		const lines = MathMarks.stroke(ctx.marks("arg-guide", "path", guides, (d) => d.key), ctx.theme.inkMuted, 1).attr("stroke-dasharray", "3 3");
+		ctx.set(lines, { d: (d) => MathMarks.line([px(d.a), px(d.b)]) });
+		const color = (name) => ctx.palette.color(name);
+		const sweep = (d) => MathMarks.line(MathNumerics.linspace(d.start, d.end, 32).map((t) => [x(0) + d.radius * unit * Math.cos(t), y(0) - d.radius * unit * Math.sin(t)]));
+		const arcsel = MathMarks.stroke(ctx.marks("arg-arc", "path", arcs, (d) => d.key), (d) => color(d.name), 1.5);
+		ctx.set(arcsel, { d: sweep });
+		ctx.hover(arcsel, (d) => ({
+			title: d.name,
+			color: color(d.name),
+			rows: [["arg", `${MathNumerics.format(d.end)} rad`]]
+		}));
+		const tip = (d) => {
+			const [a, b] = px(d.from ?? [0, 0]), [c, e] = px(d.z);
+			const n = Math.hypot(c - a, e - b) || 1;
+			return MathMarks.arrow(a, b, c - (c - a) / n * 4, e - (e - b) / n * 4, 8);
+		};
+		const arrows = ctx.marks("arg-arrow", "path", pointers, (d) => d.key).attr("stroke", (d) => color(d.name)).attr("fill", (d) => color(d.name)).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-dasharray", null);
+		ctx.set(arrows, { d: tip }, { d: tip }, 30);
+		const dots = MathMarks.dot(ctx, ctx.marks("arg-dot", "circle", pointers, (d) => d.key), (d) => px(d.z)[0], (d) => px(d.z)[1], (d) => d.result ? ctx.theme.surface : color(d.name), 4);
+		dots.attr("stroke", (d) => d.result ? color(d.name) : ctx.theme.surface);
+		const describe = (d) => ({
+			title: d.name,
+			color: color(d.name),
+			rows: [
+				["z", show(d.z)],
+				["|z|", MathNumerics.format(mod(d.z))],
+				["arg z", `${MathNumerics.format(arg(d.z))} rad`]
+			]
+		});
+		ctx.hover(arrows, describe);
+		ctx.hover(dots, describe);
+	}
+};
+export { ArgandDiagram, ArgandView };

package/dist/charts/mathematical/BandRaster.js

@@ -0,0 +1,34 @@
+// src/charts/mathematical/BandRaster.ts
+/**
+* Scalar images as vector paths, with no canvas: a grid is quantised into bands and each band becomes one
+* run-length path. A few dozen DOM nodes carry tens of thousands of cells, and hovering highlights a whole band.
+*/
+var BandRaster = class {
+	/** `level(i, j)` returns a band index, or -1 to leave the cell empty. */
+	static paths(columns, rows, width, height, level, top = 0) {
+		const parts = /* @__PURE__ */ new Map();
+		const cw = width / columns, ch = height / rows;
+		const emit = (band, start, end, j) => {
+			if (band < 0) return;
+			let part = parts.get(band);
+			if (!part) parts.set(band, part = []);
+			part.push(`M${+(start * cw).toFixed(2)} ${+(top + j * ch).toFixed(2)}h${+((end - start) * cw).toFixed(2)}v${+ch.toFixed(2)}h${-+((end - start) * cw).toFixed(2)}z`);
+		};
+		for (let j = 0; j < rows; j++) {
+			let start = 0, band = level(0, j);
+			for (let i = 1; i < columns; i++) {
+				const next = level(i, j);
+				if (next === band) continue;
+				emit(band, start, i, j);
+				start = i;
+				band = next;
+			}
+			emit(band, start, columns, j);
+		}
+		return [...parts].sort((a, b) => a[0] - b[0]).map(([band, part]) => ({
+			band,
+			d: part.join("")
+		}));
+	}
+};
+export { BandRaster };

package/dist/charts/mathematical/BifurcationDiagram.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandRaster } from "./BandRaster.js";
+import { ITERATION_MAPS, IterationMapKind } from "./IterationMap.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { MathPlane } from "./MathPlane.js";
+import { area } from "d3";
+// src/charts/mathematical/BifurcationDiagram.ts
+/** Density keeps the invariant measure; binary keeps the attractor's skeleton. */
+var BifurcationView = /* @__PURE__ */ function(BifurcationView) {
+	BifurcationView["Density"] = "density";
+	BifurcationView["Binary"] = "binary";
+	return BifurcationView;
+}({});
+var BifurcationWindow = /* @__PURE__ */ function(BifurcationWindow) {
+	BifurcationWindow["Full"] = "full";
+	BifurcationWindow["Zoom"] = "zoom";
+	return BifurcationWindow;
+}({});
+var BANDS = 14;
+var STRIP = 62;
+/** Long-run states of an iterated map against its parameter: the route from fixed point through period doubling to chaos. */
+var BifurcationDiagram = class extends MathPlane {
+	static meta = {
+		id: "bifurcation",
+		name: "Bifurcation diagram",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Plots the attractor of a one-parameter map as the parameter sweeps, with an optional Lyapunov exponent strip.",
+		tags: [
+			"chaos",
+			"logistic map",
+			"period doubling",
+			"lyapunov"
+		],
+		sample: (seed) => SampleData.categories(seed, 2, 1).map((row) => ({ x: 3 + +row.value / 200 })),
+		variants: {
+			map: Object.values(IterationMapKind),
+			view: Object.values(BifurcationView),
+			window: Object.values(BifurcationWindow),
+			lyapunov: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			map: IterationMapKind.Logistic,
+			view: "density",
+			window: "full",
+			lyapunov: false,
+			x: "x"
+		};
+	}
+	get system() {
+		return ITERATION_MAPS[this.options.map];
+	}
+	reserve() {
+		return {
+			right: 0,
+			bottom: this.options.lyapunov ? STRIP : 0
+		};
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			left: this.options.yLabel ? 58 : 34
+		};
+	}
+	extent() {
+		const { r: [a, b], zoom } = this.system;
+		return [this.options.window === "zoom" ? [a + (b - a) * zoom[0], a + (b - a) * zoom[1]] : [a, b], this.system.x];
+	}
+	exponent(r) {
+		const { f, start, x: range } = this.system;
+		let x = start, sum = 0;
+		const h = 1e-6;
+		for (let i = 0; i < 300; i++) {
+			x = f(x, r);
+			if (i < 100) continue;
+			sum += Math.log(Math.max(1e-9, Math.abs((f(x + h, r) - f(x - h, r)) / (2 * h))));
+			if (!Number.isFinite(x)) return NaN;
+		}
+		return Math.max(-3, Math.min(range[1] > 2 ? 2 : 1.5, sum / 200));
+	}
+	plotPlane(ctx, { x, y, box, width, height }) {
+		const { view, lyapunov, data, x: key } = this.options;
+		const { f, start } = this.system;
+		const cols = Math.floor(width / 2), rows = Math.floor(height / 2);
+		const counts = new Float64Array(cols * rows);
+		const [lo, hi] = box[1];
+		for (let i = 0; i < cols; i++) {
+			const r = x.invert((i + .5) / cols * width);
+			let value = start;
+			for (let n = 0; n < 700; n++) {
+				value = f(value, r);
+				if (n < (view === "binary" ? 520 : 260) || !Number.isFinite(value)) continue;
+				const j = Math.floor((hi - value) / (hi - lo) * rows);
+				if (j >= 0 && j < rows) counts[i + j * cols]++;
+			}
+		}
+		const peak = Math.log1p(Math.max(...counts));
+		const raster = BandRaster.paths(cols, rows, width, height, (i, j) => {
+			const c = counts[i + j * cols];
+			if (!c) return -1;
+			return view === "binary" ? 13 : Math.min(13, Math.floor(Math.log1p(c) / peak * BANDS));
+		});
+		const cells = ctx.marks("bif-band", "path", raster, (d) => d.band).attr("fill", (d) => ctx.palette.sequential(view === "binary" ? .72 : .25 + .75 * ((d.band + 1) / BANDS))).attr("shape-rendering", "crispEdges");
+		ctx.set(cells, { d: (d) => d.d });
+		ctx.hover(cells, (d) => ({
+			title: "Visit density",
+			rows: [["Band", `${d.band + 1} of ${BANDS}`]]
+		}));
+		this.probe(ctx, {
+			x,
+			y,
+			box,
+			width,
+			height
+		}, (value) => ({
+			title: `r = ${MathNumerics.format(value, 4)}`,
+			rows: [["Lyapunov λ", MathNumerics.format(this.exponent(value))]]
+		}));
+		const marks = data.map((row) => +row[key]).filter((value) => row0(value, box[0]));
+		const refs = ctx.marks("bif-ref", "line", marks, (d) => d).attr("stroke", ctx.theme.ink).attr("stroke-width", 1).attr("stroke-dasharray", "3 3");
+		ctx.set(refs, {
+			x1: (d) => x(d),
+			x2: (d) => x(d),
+			y1: 0,
+			y2: height
+		});
+		const strip = lyapunov ? MathNumerics.linspace(box[0][0], box[0][1], Math.floor(width / 2)).map((r) => [r, this.exponent(r)]) : [];
+		const top = height + 22, bottom = height + STRIP - 2;
+		const levels = strip.map((p) => p[1]).filter(Number.isFinite);
+		const reach = Math.max(.2, ...levels.map(Math.abs));
+		const zero = (top + bottom) / 2;
+		const ly = (value) => zero - value / reach * (bottom - top) / 2;
+		const shape = (sign) => area().x((p) => x(p[0])).y0(zero).y1((p) => ly(sign > 0 ? Math.max(0, p[1]) : Math.min(0, p[1]))).defined((p) => Number.isFinite(p[1]))(strip) ?? "";
+		const lobes = lyapunov ? [{
+			sign: 1,
+			d: shape(1)
+		}, {
+			sign: -1,
+			d: shape(-1)
+		}] : [];
+		const fills = ctx.marks("bif-lyapunov", "path", lobes, (d) => d.sign).attr("fill", (d) => ctx.palette.diverging(d.sign * .9));
+		ctx.set(fills, { d: (d) => d.d });
+		ctx.hover(fills, (d) => ({ title: d.sign > 0 ? "λ > 0: chaotic" : "λ < 0: periodic" }));
+		ctx.text(ctx.marks("bif-tag", "text", lyapunov ? ["λ"] : []).attr("x", -10).attr("y", zero + 4).attr("text-anchor", "end").text((d) => d), 11, "secondary");
+		ctx.set(ctx.marks("bif-zero", "path", lyapunov ? [MathMarks.line([[0, zero], [width, zero]])] : []).attr("stroke", ctx.theme.axis).attr("fill", "none"), { d: (d) => d });
+	}
+};
+var row0 = (value, [a, b]) => Number.isFinite(value) && value >= a && value <= b;
+export { BifurcationDiagram, BifurcationView, BifurcationWindow };

package/dist/charts/mathematical/CobwebPlot.js

@@ -0,0 +1,133 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ITERATION_MAPS, IterationMapKind } from "./IterationMap.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { MathPlane } from "./MathPlane.js";
+// src/charts/mathematical/CobwebPlot.ts
+/** Where along the map's parameter range to sit, from settled to chaotic. */
+var CobwebRegime = /* @__PURE__ */ function(CobwebRegime) {
+	CobwebRegime["Settled"] = "settled";
+	CobwebRegime["Cycling"] = "cycling";
+	CobwebRegime["Doubling"] = "doubling";
+	CobwebRegime["Chaotic"] = "chaotic";
+	return CobwebRegime;
+}({});
+var AT = {
+	["settled"]: .08,
+	["cycling"]: .3,
+	["doubling"]: .56,
+	["chaotic"]: .96
+};
+/** Graphical iteration: the staircase between a map and the diagonal that shows why an orbit converges, cycles or wanders. */
+var CobwebPlot = class extends MathPlane {
+	panel = 0;
+	static meta = {
+		id: "cobweb",
+		name: "Cobweb plot",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Follows iterates of a map by bouncing between its curve and the line y = x, with an optional time series.",
+		tags: [
+			"iteration",
+			"fixed point",
+			"logistic map",
+			"staircase"
+		],
+		sample: (seed) => MathNumerics.fit(SampleData.points(seed, 2, 2), "x", "y", [[.12, .42], [0, 1]]).map(([x]) => ({ x })),
+		variants: {
+			map: Object.values(IterationMapKind),
+			regime: Object.values(CobwebRegime),
+			series: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			map: IterationMapKind.Logistic,
+			regime: "chaotic",
+			series: false,
+			steps: 48,
+			x: "x"
+		};
+	}
+	get system() {
+		return ITERATION_MAPS[this.options.map];
+	}
+	get parameter() {
+		const [a, b] = this.system.r;
+		return this.options.r ?? a + (b - a) * AT[this.options.regime];
+	}
+	reserve() {
+		return {
+			right: this.panel,
+			bottom: 0
+		};
+	}
+	extent() {
+		return [this.system.x, this.system.x];
+	}
+	orbit(start) {
+		const { f } = this.system;
+		const r = this.parameter;
+		const values = [start];
+		for (let i = 0; i < this.options.steps; i++) {
+			const next = f(values[i], r);
+			if (!Number.isFinite(next)) break;
+			values.push(next);
+		}
+		return values;
+	}
+	draw(ctx) {
+		this.panel = this.options.series ? Math.floor(ctx.plot.width * .42) : 0;
+		super.draw(ctx);
+	}
+	plotPlane(ctx, plane) {
+		const { data, x: key, series: showSeries } = this.options;
+		const { f } = this.system;
+		const { x, y, box, width, height } = plane;
+		const r = this.parameter;
+		const inRange = (v) => Math.max(box[1][0], Math.min(box[1][1], v));
+		const px = (p) => [x(p[0]), y(inRange(p[1]))];
+		const starts = data.map((row) => row[key] === null ? NaN : +row[key]).filter((v) => Number.isFinite(v) && v >= box[0][0] && v <= box[0][1]).slice(0, 3);
+		const orbits = (starts.length ? starts : [this.system.start]).map((start, i) => ({
+			i,
+			name: `x₀ = ${MathNumerics.format(start)}`,
+			values: this.orbit(start)
+		}));
+		ctx.set(MathMarks.stroke(ctx.marks("cob-diagonal", "path", [0]), ctx.theme.axis, 1.5), { d: () => MathMarks.line([px([box[0][0], box[0][0]]), px([box[0][1], box[0][1]])]) });
+		const curve = MathNumerics.clip(MathNumerics.trace((v) => f(v, r), box[0], 500), box[1]);
+		MathMarks.reveal(ctx, MathMarks.stroke(ctx.marks("cob-map", "path", [0]), ctx.theme.ink), () => curve.map((run) => MathMarks.line(run.map(px))).join(""));
+		const web = (values) => {
+			const points = [[values[0], box[1][0]]];
+			for (let i = 0; i < values.length - 1; i++) points.push([values[i], values[i + 1]], [values[i + 1], values[i + 1]]);
+			return MathMarks.line(points.map(px));
+		};
+		const color = (d) => ctx.palette.color(d.name);
+		const webs = MathMarks.stroke(ctx.marks("cob-web", "path", orbits, (d) => d.i), color, 1.25);
+		MathMarks.reveal(ctx, webs, (d) => web(d.values));
+		ctx.hover(webs, (d) => ({
+			title: d.name,
+			color: color(d),
+			rows: [
+				["r", MathNumerics.format(r, 4)],
+				["Final x", MathNumerics.format(d.values[d.values.length - 1])],
+				["Map", this.system.symbol]
+			]
+		}));
+		MathMarks.dot(ctx, ctx.marks("cob-start", "circle", orbits, (d) => d.i), (d) => x(d.values[0]), () => height, color);
+		const gap = 28, left = width + gap, right = left + Math.max(0, this.panel - gap - 8);
+		const tx = (i) => left + (right - left) * i / this.options.steps;
+		const steps = showSeries ? orbits : [];
+		const lines = MathMarks.stroke(ctx.marks("cob-series", "path", steps, (d) => d.i), color, 1.5);
+		MathMarks.reveal(ctx, lines, (d) => MathMarks.line(d.values.map((v, i) => [tx(i), y(inRange(v))])));
+		ctx.hover(lines, (d) => ({
+			title: d.name,
+			color: color(d)
+		}));
+		ctx.set(ctx.marks("cob-base", "path", showSeries ? [0] : []).attr("stroke", ctx.theme.axis).attr("fill", "none"), { d: `M${left} ${height}H${right}` });
+		ctx.text(ctx.marks("cob-note", "text", showSeries ? ["0", `step ${this.options.steps}`] : []).attr("x", (_, i) => i ? right : left).attr("text-anchor", (_, i) => i ? "end" : "start").attr("y", height + 16).text((d) => d), 10.5);
+	}
+};
+export { CobwebPlot, CobwebRegime };