@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/scatter/ConnectedScatter.js

@@ -0,0 +1,144 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterScaling, scatterNumber } from "./ScatterBase.js";
+import { ascending, group, line, utcFormat } from "d3";
+// src/charts/scatter/ConnectedScatter.ts
+var ConnectedArrows = /* @__PURE__ */ function(ConnectedArrows) {
+	ConnectedArrows["None"] = "no-arrows";
+	ConnectedArrows["Along"] = "arrows-along";
+	ConnectedArrows["End"] = "arrow-end";
+	return ConnectedArrows;
+}({});
+var ConnectedDotMode = /* @__PURE__ */ function(ConnectedDotMode) {
+	ConnectedDotMode["All"] = "all-dots";
+	ConnectedDotMode["Ends"] = "end-dots";
+	ConnectedDotMode["Sparse"] = "sparse-dots";
+	ConnectedDotMode["None"] = "no-dots";
+	return ConnectedDotMode;
+}({});
+/** Pair the walks of two series, one x/y path per pair of series. */
+function pairedWalks(seed) {
+	const rows = SampleData.timeSeries(seed, 30, 4);
+	const days = [...group(rows, (row) => +row.date).values()], first = days[0], rebased = (day, i) => +(+day[i].value - +first[i].value + 60).toFixed(2);
+	return days.flatMap((day) => [{
+		date: day[0].date,
+		x: rebased(day, 0),
+		y: rebased(day, 1),
+		group: "Pair A"
+	}, {
+		date: day[0].date,
+		x: rebased(day, 2),
+		y: rebased(day, 3),
+		group: "Pair B"
+	}]);
+}
+/** Two measures traced through time as a path: for loops, reversals and phase shifts a line chart hides. */
+var ConnectedScatter = class extends ScatterBase {
+	static meta = {
+		id: "connected-scatter",
+		name: "Connected scatter",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Joins x/y points in time order to show how two measures move together.",
+		tags: [
+			"phase plot",
+			"trajectory",
+			"time path"
+		],
+		sample: pairedWalks,
+		variants: {
+			curve: [
+				CurveKind.CatmullRom,
+				CurveKind.Linear,
+				CurveKind.Basis,
+				CurveKind.Cardinal
+			],
+			arrows: [
+				"arrows-along",
+				"no-arrows",
+				"arrow-end"
+			],
+			dots: [
+				"sparse-dots",
+				"all-dots",
+				"end-dots"
+			],
+			endLabels: [true, false],
+			scaling: [ScatterScaling.Linear, ScatterScaling.LogLog]
+		},
+		valid: (v) => !(v.curve === CurveKind.Basis && v.dots === "all-dots")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			order: "date",
+			curve: CurveKind.CatmullRom,
+			arrows: "arrows-along",
+			dots: "sparse-dots",
+			endLabels: true,
+			periodicLabels: false
+		};
+	}
+	orderValue(point) {
+		const raw = point.row[this.options.order];
+		return Number.isFinite(scatterNumber(raw)) ? scatterNumber(raw) : point.index;
+	}
+	orderLabel(point) {
+		const raw = point.row[this.options.order];
+		return raw instanceof Date ? utcFormat("%b %-d")(raw) : String(raw ?? point.index);
+	}
+	plotPoints(ctx, _axes, points) {
+		const { curve, arrows, dots, endLabels, periodicLabels } = this.options;
+		const paths = [...group(points, (point) => point.group)].map(([key, set]) => ({
+			key,
+			set: [...set].sort((a, b) => ascending(this.orderValue(a), this.orderValue(b)))
+		}));
+		const trace = line().x((d) => d.px).y((d) => d.py).curve(Scales.curve(curve));
+		const lines = ctx.marks("paths", "path", paths, (d) => d.key).attr("fill", "none").attr("stroke", (d) => ctx.palette.color(d.key)).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+		ctx.set(lines, { d: (d) => trace(d.set) });
+		ctx.drawOn(lines);
+		const visible = dots === "no-dots" ? [] : paths.flatMap(({ set }) => set.filter((_, i) => dots === "all-dots" || i === 0 || i === set.length - 1 || dots === "sparse-dots" && i % 6 === 0));
+		this.drawDots(ctx, visible, { radius: this.options.radius - .5 });
+		const heads = paths.flatMap(({ key, set }) => {
+			return (arrows === "no-arrows" ? [] : arrows === "arrow-end" ? [set.length - 1] : set.flatMap((_, i) => i % 6 === 3 ? [i] : [])).flatMap((i) => {
+				const a = set[Math.max(0, i - 1)], b = set[Math.min(set.length - 1, i + (arrows === "arrow-end" ? 0 : 1))];
+				return a && b && a !== b ? [{
+					key,
+					at: i,
+					x: (a.px + b.px) / 2,
+					y: (a.py + b.py) / 2,
+					tip: arrows === "arrow-end" ? b : null,
+					angle: Math.atan2(b.py - a.py, b.px - a.px) * (180 / Math.PI)
+				}] : [];
+			});
+		});
+		const arrow = ctx.marks("arrows", "path", heads, (d) => `${d.key}/${d.at}`).attr("fill", (d) => ctx.palette.color(d.key)).attr("d", "M6,0L-5,-5L-2,0L-5,5Z");
+		ctx.set(arrow, { transform: (d) => `translate(${d.tip?.px ?? d.x},${d.tip?.py ?? d.y}) rotate(${d.angle})` });
+		const every = (set) => Math.max(1, Math.ceil(set.length / 5));
+		const ends = endLabels ? paths.flatMap(({ set }) => set.length > 1 ? set.filter((_, i) => i === 0 || i === set.length - 1 || periodicLabels && i % every(set) === 0) : []) : [];
+		const taken = [];
+		const tags = ends.flatMap((point) => {
+			const right = point.px < ctx.plot.width - 60;
+			const y = Math.max(10, Math.min(ctx.plot.height - 4, point.py + (point.py < 16 ? 14 : -9)));
+			const x = right ? point.px + 7 : point.px - 7;
+			if (taken.some(([tx, ty]) => Math.abs(tx - x) < 44 && Math.abs(ty - y) < 13)) return [];
+			taken.push([x, y]);
+			return [{
+				point,
+				x,
+				y,
+				right
+			}];
+		});
+		const notes = ctx.marks("end-labels", "text", tags, (d) => d.point.index).attr("text-anchor", (d) => d.right ? "start" : "end").text((d) => this.orderLabel(d.point));
+		ctx.text(notes, 10.5, "secondary");
+		this.halo(notes, ctx);
+		ctx.set(notes, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { ConnectedArrows, ConnectedDotMode, ConnectedScatter };

package/dist/charts/scatter/ConvexHullScatter.js

@@ -0,0 +1,168 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterGeometry } from "./ScatterGeometry.js";
+import { ScatterBase } from "./ScatterBase.js";
+import { curveCatmullRomClosed, curveLinearClosed, group, line, packEnclose, polygonArea, polygonHull } from "d3";
+// src/charts/scatter/ConvexHullScatter.ts
+var HullShape = /* @__PURE__ */ function(HullShape) {
+	HullShape["Convex"] = "convex";
+	HullShape["Concave"] = "concave";
+	HullShape["Box"] = "bounding-box";
+	HullShape["Circle"] = "enclosing-circle";
+	HullShape["Onion"] = "onion-layers";
+	return HullShape;
+}({});
+var HullScope = /* @__PURE__ */ function(HullScope) {
+	HullScope["PerGroup"] = "per-group";
+	HullScope["Overall"] = "overall";
+	return HullScope;
+}({});
+var MAX_LAYERS = 5;
+/** Marks each group's territory with a hull, box, circle or onion layers. */
+var ConvexHullScatter = class extends ScatterBase {
+	static meta = {
+		id: "hull-scatter",
+		name: "Convex hull scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Wraps each group of points in a boundary to compare extent, overlap and shape.",
+		tags: [
+			"convex hull",
+			"alpha shape",
+			"concave hull",
+			"onion peeling",
+			"bagplot"
+		],
+		sample: (seed) => SampleData.points(seed, 90, 3),
+		variants: {
+			shape: [
+				"convex",
+				"concave",
+				"bounding-box",
+				"enclosing-circle",
+				"onion-layers"
+			],
+			scope: ["per-group", "overall"],
+			offset: [
+				10,
+				0,
+				20
+			],
+			smooth: [true, false],
+			markers: [true, false]
+		},
+		valid: (v) => (v.shape === "convex" || v.shape === "onion-layers" ? v.smooth === true || v.offset === 0 : v.smooth === false) && (v.shape === "convex" || v.shape === "bounding-box" || v.shape === "enclosing-circle" || v.offset === 0)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			shape: "convex",
+			scope: "per-group",
+			offset: 10,
+			smooth: true,
+			markers: true,
+			radius: 4
+		};
+	}
+	legendItems() {
+		return this.options.scope === "overall" && !this.options.markers ? [] : super.legendItems();
+	}
+	inset() {
+		return this.options.offset + 4;
+	}
+	pathOf(vertices) {
+		const curve = this.options.smooth ? curveCatmullRomClosed : curveLinearClosed;
+		return line().curve(curve)(vertices) ?? "";
+	}
+	wrapped(vertices) {
+		const offset = this.options.offset;
+		if (!offset) return vertices;
+		return polygonHull(vertices.flatMap((vertex) => ScatterGeometry.ring(vertex, offset))) ?? vertices;
+	}
+	outlines(ctx, key, set) {
+		const { shape, offset } = this.options;
+		const vertices = set.map((point) => [point.px, point.py]);
+		const outline = (id, ring, layer = 0) => ({
+			id: `${key}/${id}`,
+			key,
+			d: this.pathOf(ring),
+			area: Math.abs(polygonArea(ring)),
+			count: set.length,
+			layer
+		});
+		if (shape === "bounding-box") {
+			const xs = vertices.map((v) => v[0]), ys = vertices.map((v) => v[1]), pad = offset;
+			const [x0, x1, y0, y1] = [
+				Math.min(...xs) - pad,
+				Math.max(...xs) + pad,
+				Math.min(...ys) - pad,
+				Math.max(...ys) + pad
+			];
+			return [outline("box", [
+				[x0, y0],
+				[x1, y0],
+				[x1, y1],
+				[x0, y1]
+			])];
+		}
+		if (shape === "enclosing-circle") {
+			const { x, y, r } = packEnclose(set.map((point) => ({
+				x: point.px,
+				y: point.py,
+				r: 0
+			})));
+			const { width, height } = ctx.plot;
+			return [outline("circle", ScatterGeometry.ring([x, y], r + offset, 64).map(([px, py]) => [Math.max(1, Math.min(width - 1, px)), Math.max(1, Math.min(height - 1, py))]))];
+		}
+		if (shape === "concave") return this.concave(key, vertices, set.length);
+		if (shape === "onion-layers") return this.onion(key, vertices, set.length);
+		const hull = polygonHull(vertices);
+		return hull ? [outline("hull", this.wrapped(hull))] : vertices.length > 1 ? [outline("hull", vertices)] : [];
+	}
+	concave(key, vertices, count) {
+		const edges = ScatterGeometry.delaunayEdges(vertices).map((edge) => edge.length).sort((a, b) => a - b);
+		const typical = edges[Math.floor(edges.length / 2)] ?? 1;
+		return ScatterGeometry.concave(vertices, typical * 2.4).map((loop, i) => ({
+			id: `${key}/loop${i}`,
+			key,
+			d: this.pathOf(loop),
+			area: Math.abs(polygonArea(loop)),
+			count,
+			layer: 0
+		}));
+	}
+	onion(key, vertices, count) {
+		const layers = [];
+		let rest = vertices;
+		for (let layer = 0; layer < MAX_LAYERS && rest.length > 2; layer++) {
+			const hull = polygonHull(rest);
+			if (!hull) break;
+			const on = new Set(hull.map(String));
+			rest = rest.filter((vertex) => !on.has(String(vertex)));
+			layers.push({
+				id: `${key}/layer${layer}`,
+				key,
+				d: this.pathOf(hull),
+				area: Math.abs(polygonArea(hull)),
+				count,
+				layer
+			});
+		}
+		return layers;
+	}
+	plotPoints(ctx, _axes, points) {
+		const overall = this.options.scope === "overall";
+		const shapes = (overall ? points.length ? [["All", points]] : [] : [...group(points, (point) => point.group)]).flatMap(([key, set]) => this.outlines(ctx, key, set));
+		const ink = (key) => overall ? ctx.theme.inkSecondary : ctx.palette.color(key);
+		const marks = ctx.marks("hulls", "path", shapes, (d) => d.id).attr("fill", (d) => ink(d.key)).attr("fill-opacity", .1).attr("stroke", (d) => ink(d.key)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(marks, { d: (d) => d.d });
+		ctx.hover(marks, (d) => ({
+			title: d.key,
+			color: ink(d.key),
+			rows: [["Points", d.count], ["Area px²", Math.round(d.area)]]
+		}));
+		this.drawDots(ctx, this.options.markers ? points : []);
+	}
+};
+export { ConvexHullScatter, HullScope, HullShape };

package/dist/charts/scatter/DropLineScatter.js

@@ -0,0 +1,121 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase, ScatterMarker, ScatterScaling } from "./ScatterBase.js";
+import { mean, median } from "d3";
+// src/charts/scatter/DropLineScatter.ts
+var DropAxis = /* @__PURE__ */ function(DropAxis) {
+	DropAxis["Vertical"] = "vertical-drops";
+	DropAxis["Horizontal"] = "horizontal-drops";
+	DropAxis["Both"] = "both-drops";
+	return DropAxis;
+}({});
+var DropReference = /* @__PURE__ */ function(DropReference) {
+	DropReference["Axis"] = "to-axis";
+	DropReference["Mean"] = "to-mean";
+	DropReference["Median"] = "to-median";
+	return DropReference;
+}({});
+/** Points stemmed to an axis or an average, so small samples read as deviations from a reference. */
+var DropLineScatter = class extends ScatterBase {
+	static meta = {
+		id: "dropline-scatter",
+		name: "Drop-line scatter",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Connects each point to an axis or average so exact positions and deviations are easy to read.",
+		tags: [
+			"stem plot",
+			"lollipop scatter",
+			"deviation",
+			"drop lines"
+		],
+		sample: (seed) => SampleData.points(seed, 26, 3),
+		variants: {
+			drop: [
+				"vertical-drops",
+				"horizontal-drops",
+				"both-drops"
+			],
+			reference: [
+				"to-axis",
+				"to-mean",
+				"to-median"
+			],
+			marker: [ScatterMarker.Circle, ScatterMarker.PerGroup],
+			scaling: [
+				ScatterScaling.Linear,
+				ScatterScaling.SemilogX,
+				ScatterScaling.SemilogY,
+				ScatterScaling.LogLog
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			drop: "vertical-drops",
+			reference: "to-axis"
+		};
+	}
+	target(values, fallback, scale) {
+		const { reference } = this.options;
+		if (reference === "to-axis" || !values.length) return fallback;
+		return scale(reference === "to-mean" ? mean(values) : median(values));
+	}
+	plotPoints(ctx, axes, points) {
+		const { drop, reference } = this.options, { left, right, top, bottom } = this.frame(ctx);
+		const toY = this.target(points.map((p) => p.y), bottom, axes.y), toX = this.target(points.map((p) => p.x), left, axes.x);
+		const down = drop !== "horizontal-drops", across = drop !== "vertical-drops";
+		const stems = points.flatMap((point) => [...down ? [{
+			id: `${point.index}/v`,
+			x1: point.px,
+			x2: point.px,
+			y1: point.py,
+			y2: toY,
+			point
+		}] : [], ...across ? [{
+			id: `${point.index}/h`,
+			x1: point.px,
+			x2: toX,
+			y1: point.py,
+			y2: point.py,
+			point
+		}] : []]);
+		const lines = ctx.marks("stems", "line", stems, (d) => d.id).attr("stroke", (d) => this.hue(ctx, d.point)).attr("stroke-width", 1.5).attr("stroke-opacity", .5);
+		ctx.set(lines, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		}, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x1,
+			y1: (d) => d.y1,
+			y2: (d) => d.y1
+		}, 4);
+		ctx.hover(lines, (d) => this.tooltip(ctx, d.point));
+		const rules = reference === "to-axis" ? [] : [...down ? [{
+			id: "y",
+			x1: left,
+			x2: right,
+			y1: toY,
+			y2: toY
+		}] : [], ...across ? [{
+			id: "x",
+			x1: toX,
+			x2: toX,
+			y1: top,
+			y2: bottom
+		}] : []];
+		const guides = ctx.marks("reference", "line", rules, (d) => d.id).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 1.5).attr("stroke-dasharray", "5 4");
+		ctx.set(guides, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		this.drawDots(ctx, points);
+	}
+};
+export { DropAxis, DropLineScatter, DropReference };

package/dist/charts/scatter/EllipseScatter.js

@@ -0,0 +1,194 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ScatterBase } from "./ScatterBase.js";
+import { curveLinearClosed, group, line, mean } from "d3";
+// src/charts/scatter/EllipseScatter.ts
+var EllipseEstimator = /* @__PURE__ */ function(EllipseEstimator) {
+	EllipseEstimator["Classical"] = "classical";
+	EllipseEstimator["Robust"] = "robust";
+	return EllipseEstimator;
+}({});
+var EllipseScope = /* @__PURE__ */ function(EllipseScope) {
+	EllipseScope["PerGroup"] = "per-group";
+	EllipseScope["Overall"] = "overall";
+	return EllipseScope;
+}({});
+var NESTED = [
+	.95,
+	.8,
+	.5
+];
+var TRIM = .9;
+var STEPS = 72;
+var reach = (level) => Math.sqrt(-2 * Math.log(1 - level));
+/** Mean and covariance, optionally re-estimated without the outlying 10% and rescaled for consistency. */
+function moments(xs, ys, estimator) {
+	const fit = (keep) => {
+		const cx = mean(keep, (i) => xs[i]), cy = mean(keep, (i) => ys[i]), dof = Math.max(1, keep.length - 1);
+		const sum = (f) => keep.reduce((total, i) => total + f(i), 0) / dof;
+		return {
+			cx,
+			cy,
+			xx: sum((i) => (xs[i] - cx) ** 2),
+			yy: sum((i) => (ys[i] - cy) ** 2),
+			xy: sum((i) => (xs[i] - cx) * (ys[i] - cy))
+		};
+	};
+	let current = fit(xs.map((_, i) => i));
+	if (estimator !== "robust" || xs.length < 8) return current;
+	for (let round = 0; round < 3; round++) {
+		const m = current, det = m.xx * m.yy - m.xy ** 2 || 1e-9;
+		const distance = (i) => {
+			const dx = xs[i] - m.cx, dy = ys[i] - m.cy;
+			return (m.yy * dx * dx - 2 * m.xy * dx * dy + m.xx * dy * dy) / det;
+		};
+		current = fit(xs.map((_, i) => i).sort((a, b) => distance(a) - distance(b)).slice(0, Math.ceil(xs.length * TRIM)));
+	}
+	const factor = TRIM / (1 - .09999999999999998 * (1 + -2 * Math.log(.09999999999999998) / 2));
+	return {
+		...current,
+		xx: current.xx * factor,
+		yy: current.yy * factor,
+		xy: current.xy * factor
+	};
+}
+function axesOf({ xx, yy, xy }) {
+	const middle = (xx + yy) / 2, delta = Math.sqrt(((xx - yy) / 2) ** 2 + xy ** 2);
+	return {
+		major: Math.sqrt(Math.max(0, middle + delta)),
+		minor: Math.sqrt(Math.max(0, middle - delta)),
+		angle: Math.atan2(2 * xy, xx - yy) / 2
+	};
+}
+/** Group clouds summarised by covariance ellipses: how far, how tilted, how overlapping. */
+var EllipseScatter = class extends ScatterBase {
+	static meta = {
+		id: "ellipse-scatter",
+		name: "Confidence ellipse scatter",
+		family: ChartFamily.Statistical,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Summarises each group with a covariance ellipse showing its centre, spread and correlation.",
+		tags: [
+			"confidence ellipse",
+			"covariance",
+			"pca",
+			"bivariate normal"
+		],
+		sample: (seed) => SampleData.points(seed, 120, 3),
+		variants: {
+			level: [
+				.95,
+				.5,
+				.99
+			],
+			nested: [false, true],
+			estimator: ["classical", "robust"],
+			scope: ["per-group", "overall"],
+			centroids: [true, false],
+			principalAxes: [false, true],
+			markers: [true, false]
+		},
+		valid: (v) => !v.nested || v.level === .95
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			level: .95,
+			nested: false,
+			estimator: "classical",
+			scope: "per-group",
+			centroids: true,
+			principalAxes: false,
+			markers: true,
+			radius: 3.5
+		};
+	}
+	legendItems() {
+		return this.options.scope === "overall" && !this.options.markers ? [] : super.legendItems();
+	}
+	sets(points) {
+		return this.options.scope === "overall" ? [["All", points]] : [...group(points, (point) => point.group)];
+	}
+	get levels() {
+		return this.options.nested ? NESTED : [this.options.level];
+	}
+	extents(points, value, varianceOf) {
+		const widest = Math.max(...this.levels);
+		return this.sets(points).filter(([, set]) => set.length > 2).flatMap(([, set]) => {
+			const m = moments(set.map((p) => p.x), set.map((p) => p.y), this.options.estimator);
+			const center = varianceOf === varianceX ? m.cx : m.cy, half = reach(widest) * Math.sqrt(varianceOf(m));
+			return [center - half, center + half];
+		}).concat(points.map(value));
+	}
+	xValues(points) {
+		return this.extents(points, (p) => p.x, varianceX);
+	}
+	yValues(points) {
+		return this.extents(points, (p) => p.y, varianceY);
+	}
+	plotPoints(ctx, _axes, points) {
+		const { markers, centroids, principalAxes, estimator } = this.options;
+		const clouds = this.sets(points).filter(([, set]) => set.length > 2).map(([key, set]) => {
+			const m = moments(set.map((p) => p.px), set.map((p) => p.py), estimator);
+			return {
+				key,
+				count: set.length,
+				m,
+				...axesOf(m)
+			};
+		});
+		const ink = (key) => this.options.scope === "overall" ? ctx.theme.inkSecondary : ctx.palette.color(key);
+		const shapes = clouds.flatMap((cloud) => this.levels.map((level) => ({
+			...cloud,
+			level,
+			id: `${cloud.key}/${level}`
+		})));
+		const outline = line().curve(curveLinearClosed);
+		const path = (d) => {
+			const k = reach(d.level), cos = Math.cos(d.angle), sin = Math.sin(d.angle);
+			return outline(Array.from({ length: STEPS }, (_, i) => {
+				const t = i / STEPS * Math.PI * 2, u = k * d.major * Math.cos(t), v = k * d.minor * Math.sin(t);
+				return [d.m.cx + u * cos - v * sin, d.m.cy + u * sin + v * cos];
+			}));
+		};
+		const areas = ctx.marks("ellipses", "path", shapes, (d) => d.id).attr("fill", (d) => ink(d.key)).attr("fill-opacity", .1).attr("stroke", (d) => ink(d.key)).attr("stroke-width", 2);
+		ctx.set(areas, { d: path });
+		ctx.hover(areas, (d) => ({
+			title: d.key,
+			color: ink(d.key),
+			rows: [["Contains", `${Math.round(d.level * 100)}%`], ["Points", d.count]]
+		}));
+		this.drawDots(ctx, markers ? points : [], {});
+		const span = principalAxes ? clouds.flatMap((c) => {
+			const k = reach(Math.max(...this.levels));
+			const ends = (length, angle) => ({
+				x1: c.m.cx - k * length * Math.cos(angle),
+				y1: c.m.cy - k * length * Math.sin(angle),
+				x2: c.m.cx + k * length * Math.cos(angle),
+				y2: c.m.cy + k * length * Math.sin(angle)
+			});
+			return [{
+				id: `${c.key}/major`,
+				key: c.key,
+				...ends(c.major, c.angle)
+			}, {
+				id: `${c.key}/minor`,
+				key: c.key,
+				...ends(c.minor, c.angle + Math.PI / 2)
+			}];
+		}) : [];
+		const rules = ctx.marks("principal", "line", span, (d) => d.id).attr("stroke", (d) => ink(d.key)).attr("stroke-width", 1.5).attr("stroke-dasharray", "4 3");
+		ctx.set(rules, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y1,
+			y2: (d) => d.y2
+		});
+		const crosses = ctx.marks("centroids", "path", centroids ? clouds : [], (d) => d.key).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5).attr("d", "M-1.8,-6H1.8V-1.8H6V1.8H1.8V6H-1.8V1.8H-6V-1.8H-1.8Z");
+		ctx.set(crosses, { transform: (d) => `translate(${d.m.cx},${d.m.cy})` });
+	}
+};
+var varianceX = (m) => m.xx;
+var varianceY = (m) => m.yy;
+export { EllipseEstimator, EllipseScatter, EllipseScope };