@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/mathematical/PolarCurvePlot.js

@@ -0,0 +1,190 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { MathPlane } from "./MathPlane.js";
+import { group, scaleLinear } from "d3";
+// src/charts/mathematical/PolarCurvePlot.ts
+var PolarCurveForm = /* @__PURE__ */ function(PolarCurveForm) {
+	PolarCurveForm["Rose"] = "rose";
+	PolarCurveForm["Cardioid"] = "cardioid";
+	PolarCurveForm["Limacon"] = "limacon";
+	PolarCurveForm["Lemniscate"] = "lemniscate";
+	PolarCurveForm["Archimedean"] = "archimedean";
+	PolarCurveForm["Logarithmic"] = "logarithmic";
+	PolarCurveForm["Fermat"] = "fermat";
+	PolarCurveForm["Lituus"] = "lituus";
+	return PolarCurveForm;
+}({});
+/** Maths measures θ anticlockwise from east, navigation clockwise from north. */
+var PolarConvention = /* @__PURE__ */ function(PolarConvention) {
+	PolarConvention["Math"] = "math";
+	PolarConvention["Compass"] = "compass";
+	return PolarConvention;
+}({});
+var TAU = Math.PI * 2;
+function named(form, a, k) {
+	switch (form) {
+		case "cardioid": return {
+			range: [0, TAU],
+			fn: (t) => a * (1 + Math.cos(t))
+		};
+		case "limacon": return {
+			range: [0, TAU],
+			fn: (t) => a * (.5 + k / 2 * Math.cos(t))
+		};
+		case "lemniscate": return {
+			range: [0, TAU],
+			fn: (t) => {
+				const c = Math.cos(2 * t);
+				return c < 0 ? NaN : a * Math.sqrt(c);
+			}
+		};
+		case "archimedean": return {
+			range: [0, 3 * TAU],
+			fn: (t) => a * t / TAU
+		};
+		case "logarithmic": return {
+			range: [0, 3 * TAU],
+			fn: (t) => a / 12 * Math.exp(.15 * t)
+		};
+		case "fermat": return {
+			range: [0, 3 * TAU],
+			fn: (t) => a * Math.sqrt(t / (3 * TAU))
+		};
+		case "lituus": return {
+			range: [.35, 4 * TAU],
+			fn: (t) => a * .5 / Math.sqrt(t)
+		};
+		default: return {
+			range: [0, k % 2 ? Math.PI : TAU],
+			fn: (t) => a * Math.cos(k * t)
+		};
+	}
+}
+/** Curves in polar form, r as a function of θ: roses, cardioids and spirals, on a true polar grid. */
+var PolarCurvePlot = class extends RadialChart {
+	static meta = {
+		id: "polar-curve",
+		name: "Polar curve plot",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Plots r(θ) on a polar grid, for curves whose symmetry only shows in polar coordinates.",
+		tags: [
+			"rose",
+			"cardioid",
+			"spiral",
+			"limacon"
+		],
+		sample: (seed) => SampleData.categories(seed, 2, 1).map((row, i) => ({
+			name: String(row.category),
+			a: 1 + i * .5,
+			k: 2 + +row.value % 3 + i
+		})),
+		variants: {
+			form: Object.values(PolarCurveForm),
+			convention: Object.values(PolarConvention),
+			fill: [false, true],
+			radii: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			form: "rose",
+			convention: "math",
+			fill: false,
+			radii: false,
+			theta: "theta",
+			r: "r",
+			series: "group"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 18,
+			right: 24,
+			bottom: 18,
+			left: 24
+		};
+	}
+	curves() {
+		const { data, form, theta, r, series } = this.options;
+		const usable = (cell) => cell !== null && cell !== void 0 && Number.isFinite(+cell);
+		const rows = data.filter((item) => usable(item[theta]) && usable(item[r]));
+		const measured = [...group(rows, (row) => String(row[series] ?? "r"))].map(([name, part]) => ({
+			name,
+			closed: false,
+			samples: part.map((row) => [+row[theta], +row[r]])
+		}));
+		const live = data.filter((item) => !rows.includes(item) && "name" in item).map((curve) => {
+			const { fn, range } = curve.fn ? {
+				fn: curve.fn,
+				range: curve.range ?? [0, TAU]
+			} : named(form, curve.a ?? 1, curve.k ?? 3);
+			return {
+				name: curve.name,
+				closed: Math.abs(range[1] - range[0] - TAU) < 1e-9,
+				samples: MathNumerics.linspace(range[0], range[1], 900).map((t) => [t, fn(t)])
+			};
+		});
+		return [...measured, ...live];
+	}
+	drawRadial(ctx, { radius }) {
+		const { convention, fill, radii } = this.options;
+		const curves = this.curves();
+		const peak = Math.max(0, ...curves.flatMap((curve) => curve.samples.map((s) => Math.abs(s[1])).filter(Number.isFinite))) || 1;
+		const r = scaleLinear([0, peak], [0, radius - 4]).nice();
+		const compass = convention === "compass";
+		const at = (theta, value) => {
+			const a = compass ? theta - Math.PI / 2 : -theta;
+			return [r(value) * Math.cos(a), r(value) * Math.sin(a)];
+		};
+		const outer = r.range()[1] * (radius - 4) / (r(r.domain()[1]) || 1);
+		const rings = r.ticks(4).filter((tick) => tick > 0);
+		const edge = Math.max(...rings.map((tick) => r(tick)), outer > 0 ? Math.min(outer, radius - 4) : 0);
+		ctx.set(ctx.marks("pol-ring", "circle", rings, (d) => d).attr("fill", "none").attr("stroke", ctx.theme.grid), { r: (d) => r(d) }, { r: 0 });
+		const angles = Array.from({ length: 8 }, (_, i) => i * Math.PI / 4);
+		ctx.set(ctx.marks("pol-spoke", "line", angles, (d) => d).attr("stroke", ctx.theme.grid), {
+			x1: 0,
+			y1: 0,
+			x2: (d) => edge * Math.cos(compass ? d - Math.PI / 2 : -d),
+			y2: (d) => edge * Math.sin(compass ? d - Math.PI / 2 : -d)
+		});
+		const place = (d, axis) => (edge + 11) * (axis ? Math.sin(compass ? d - Math.PI / 2 : -d) : Math.cos(compass ? d - Math.PI / 2 : -d));
+		ctx.text(ctx.marks("pol-angle", "text", angles, (d) => d).attr("text-anchor", "middle").attr("x", (d) => place(d, 0)).attr("y", (d) => place(d, 1) + 4).text((d) => MathPlane.piLabel(d)), 10);
+		ctx.text(ctx.marks("pol-value", "text", rings, (d) => d).attr("x", (d) => r(d) * .38 + 3).attr("y", (d) => -r(d) * .92 - 2).text((d) => MathNumerics.format(d)), 10, "muted");
+		const path = (samples) => {
+			const runs = [[]];
+			for (const [theta, value] of samples) if (Number.isFinite(value)) runs[runs.length - 1].push(at(theta, value));
+			else if (runs[runs.length - 1].length) runs.push([]);
+			return runs.filter((run) => run.length > 1).map((run) => MathMarks.line(run)).join("");
+		};
+		const color = (d) => ctx.palette.color(d.name);
+		ctx.set(ctx.marks("pol-fill", "path", fill ? curves : [], (d) => d.name).attr("fill", color).attr("fill-opacity", .16).attr("fill-rule", "nonzero"), { d: (d) => path(d.samples).replace(/M/g, "M0 0L") + "Z" });
+		const stems = radii ? curves.flatMap((curve) => curve.samples.filter((s, i) => i % 25 === 0 && Number.isFinite(s[1])).map((s, i) => ({
+			key: `${curve.name}/${i}`,
+			name: curve.name,
+			s
+		}))) : [];
+		const spokes = ctx.marks("pol-stem", "line", stems, (d) => d.key).attr("stroke", (d) => ctx.palette.color(d.name)).attr("stroke-width", 1).attr("stroke-opacity", .5);
+		ctx.set(spokes, {
+			x1: 0,
+			y1: 0,
+			x2: (d) => at(d.s[0], d.s[1])[0],
+			y2: (d) => at(d.s[0], d.s[1])[1]
+		});
+		const lines = MathMarks.stroke(ctx.marks("pol-line", "path", curves, (d) => d.name), color);
+		MathMarks.reveal(ctx, lines, (d) => path(d.samples));
+		ctx.hover(lines, (d) => {
+			const values = d.samples.map((s) => s[1]).filter(Number.isFinite);
+			return {
+				title: d.name,
+				color: color(d),
+				rows: [["r min", MathNumerics.format(Math.min(...values))], ["r max", MathNumerics.format(Math.max(...values))]]
+			};
+		});
+	}
+};
+export { PolarConvention, PolarCurveForm, PolarCurvePlot };

package/dist/charts/mathematical/RiemannSumChart.js

@@ -0,0 +1,185 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { resolveCurves, robustRange } from "./FunctionCurves.js";
+import { MathMarks } from "./MathMarks.js";
+import { MathNumerics } from "./MathNumerics.js";
+import { MathPlane, PlaneFrame } from "./MathPlane.js";
+import { randomLcg, randomUniform } from "d3";
+// src/charts/mathematical/RiemannSumChart.ts
+var RiemannMethod = /* @__PURE__ */ function(RiemannMethod) {
+	RiemannMethod["Left"] = "left";
+	RiemannMethod["Right"] = "right";
+	RiemannMethod["Midpoint"] = "midpoint";
+	RiemannMethod["Trapezoid"] = "trapezoid";
+	RiemannMethod["Simpson"] = "simpson";
+	RiemannMethod["Upper"] = "upper";
+	RiemannMethod["Lower"] = "lower";
+	RiemannMethod["Random"] = "random";
+	return RiemannMethod;
+}({});
+var SPAN = [0, 6];
+/** Numerical integration made visible: the rectangles, trapezoids or parabolas behind a sum, and how far it lands from the true integral. */
+var RiemannSumChart = class extends MathPlane {
+	static meta = {
+		id: "riemann-sum",
+		name: "Riemann sum chart",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Two,
+		shape: DataShape.Function,
+		description: "Approximates the area under a curve by slices, showing signed area, sample points and the error against the true integral.",
+		tags: [
+			"integral",
+			"trapezoid rule",
+			"simpson",
+			"numerical integration"
+		],
+		sample: (seed) => {
+			const [row] = SampleData.categories(seed, 1, 1);
+			const a = +row.value / 100;
+			return [{
+				name: "f(x)",
+				fn: (x) => .6 + (1 + a) * Math.sin(x * .9) + .15 * x
+			}];
+		},
+		variants: {
+			method: Object.values(RiemannMethod),
+			n: [
+				8,
+				4,
+				16,
+				32
+			],
+			frame: [PlaneFrame.Box, PlaneFrame.Cross]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			method: "midpoint",
+			n: 8,
+			x: "x",
+			y: "y",
+			series: "group"
+		};
+	}
+	resolved() {
+		const { data, x, y, series, xDomain } = this.options;
+		const { curves, domain } = resolveCurves(data, x, y, series);
+		return {
+			curve: curves[0],
+			span: xDomain ?? domain ?? SPAN
+		};
+	}
+	extent() {
+		const { curve, span } = this.resolved();
+		if (!curve) return [span, [0, 1]];
+		const [low, high] = robustRange(MathNumerics.linspace(span[0], span[1], 300).map(curve.fn));
+		return [span, [Math.min(low, 0), Math.max(high, 0)]];
+	}
+	slices(fn, [a, b], plane) {
+		const { method, n } = this.options;
+		const { x, y } = plane;
+		const h = (b - a) / n, base = y(0);
+		const random = randomUniform.source(randomLcg(.42))(0, 1);
+		return Array.from({ length: n }, (_, i) => {
+			const l = a + i * h, r = l + h;
+			const left = x(l), right = Math.max(left + 1, x(r) - (n > 16 ? 1 : 2));
+			const box = (at) => {
+				const v = fn(at), top = y(v);
+				return {
+					i,
+					a: l,
+					b: r,
+					area: v * h,
+					tag: [x(at), top],
+					d: MathMarks.line([
+						[left, base],
+						[left, top],
+						[right, top],
+						[right, base]
+					], true)
+				};
+			};
+			const scan = () => MathNumerics.linspace(l, r, 24);
+			const by = (pick) => {
+				const xs = scan(), ys = xs.map(fn), best = pick(ys);
+				return box(xs[ys.indexOf(best)]);
+			};
+			switch (method) {
+				case "left": return box(l);
+				case "right": return box(r);
+				case "random": return box(l + random() * h);
+				case "upper": return by((ys) => Math.max(...ys));
+				case "lower": return by((ys) => Math.min(...ys));
+				case "trapezoid": {
+					const p = fn(l), q = fn(r);
+					return {
+						i,
+						a: l,
+						b: r,
+						area: (p + q) / 2 * h,
+						tag: null,
+						d: MathMarks.line([
+							[left, base],
+							[left, y(p)],
+							[right, y(q)],
+							[right, base]
+						], true)
+					};
+				}
+				case "simpson": {
+					const p = fn(l), m = fn((l + r) / 2), q = fn(r);
+					const cap = MathNumerics.linspace(0, 1, 16).map((t) => {
+						const v = p * (2 * t - 1) * (t - 1) + 4 * m * t * (1 - t) + q * t * (2 * t - 1);
+						return [left + (right - left) * t, y(v)];
+					});
+					return {
+						i,
+						a: l,
+						b: r,
+						area: h / 6 * (p + 4 * m + q),
+						tag: null,
+						d: MathMarks.line([
+							[left, base],
+							...cap,
+							[right, base]
+						], true)
+					};
+				}
+				default: return box((l + r) / 2);
+			}
+		});
+	}
+	plotPlane(ctx, plane) {
+		const { curve, span } = this.resolved();
+		const { x, y, box, width } = plane;
+		if (!curve) return;
+		const { fn } = curve;
+		const slices = this.slices(fn, span, plane);
+		const tone = (d) => ctx.palette.diverging((d.area >= 0 ? 1 : -1) * -.62);
+		const bars = ctx.marks("rie-slice", "path", slices, (d) => d.i).attr("fill", tone);
+		ctx.set(bars, { d: (d) => d.d }, {}, 10);
+		bars.filter(function() {
+			return !this.getAttribute("d");
+		}).attr("d", (d) => d.d);
+		ctx.hover(bars, (d) => ({
+			title: `[${MathNumerics.format(d.a)}, ${MathNumerics.format(d.b)}]`,
+			rows: [["Signed area", MathNumerics.format(d.area)]]
+		}));
+		const runs = MathNumerics.clip(MathNumerics.trace(fn, box[0], 500), box[1]);
+		const line = MathMarks.stroke(ctx.marks("rie-curve", "path", [0]), ctx.theme.ink);
+		MathMarks.reveal(ctx, line, () => runs.map((run) => MathMarks.line(run.map((p) => [x(p[0]), y(p[1])]))).join(""));
+		const tags = this.options.n <= 16 ? slices.filter((d) => d.tag) : [];
+		const dots = ctx.marks("rie-tag", "circle", tags, (d) => d.i);
+		MathMarks.dot(ctx, dots, (d) => d.tag[0], (d) => d.tag[1], ctx.theme.ink);
+		ctx.hover(dots, (d) => ({
+			title: "Sample point",
+			rows: [["Signed area", MathNumerics.format(d.area)]]
+		}));
+		const sum = slices.reduce((total, d) => total + d.area, 0);
+		const exact = MathNumerics.integrate(fn, span[0], span[1]);
+		const note = `Σ ${MathNumerics.format(sum, 4)}  ·  ∫ ${MathNumerics.format(exact, 4)}  ·  error ${MathNumerics.format(sum - exact, 2)}`;
+		ctx.text(ctx.marks("rie-note", "text", [note]).attr("x", width - 2).attr("y", 11).attr("text-anchor", "end").text((d) => d), 11, "ink");
+	}
+};
+export { RiemannMethod, RiemannSumChart };