@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/multivariate/GlyphPlot.js

@@ -0,0 +1,212 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { MultivariateKit } from "./MultivariateKit.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideNormal, WideTable } from "./WideTable.js";
+import { ascending, descending, scaleLinear, sum } from "d3";
+// src/charts/multivariate/GlyphPlot.ts
+var GlyphKind = /* @__PURE__ */ function(GlyphKind) {
+	GlyphKind["Star"] = "star";
+	GlyphKind["Whisker"] = "whisker";
+	GlyphKind["Petal"] = "petal";
+	GlyphKind["Profile"] = "profile";
+	GlyphKind["Face"] = "face";
+	return GlyphKind;
+}({});
+var GlyphLayout = /* @__PURE__ */ function(GlyphLayout) {
+	GlyphLayout["Grid"] = "grid";
+	GlyphLayout["Scatter"] = "scatter";
+	return GlyphLayout;
+}({});
+var GlyphOrder = /* @__PURE__ */ function(GlyphOrder) {
+	GlyphOrder["Given"] = "given";
+	GlyphOrder["Group"] = "group";
+	GlyphOrder["Magnitude"] = "magnitude";
+	return GlyphOrder;
+}({});
+var FACE = [
+	"Head",
+	"Eyes",
+	"Brows",
+	"Mouth",
+	"Nose"
+];
+var FLOOR = .1;
+var n2 = (value) => +value.toFixed(2);
+/** Give each observation its own small multivariate shape, then scan for families of similar shapes. */
+var GlyphPlot = class extends Chart2D {
+	static meta = {
+		id: "glyph-plot",
+		name: "Glyph plot",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Encodes every observation as a small composite shape, such as a star or a Chernoff face, so that similar rows look alike.",
+		tags: [
+			"multivariate",
+			"star plot",
+			"chernoff faces",
+			"icons",
+			"whisker"
+		],
+		sample: (seed) => MultivariateSample.wide(seed, 24),
+		variants: {
+			glyph: [
+				"star",
+				"whisker",
+				"petal",
+				"profile",
+				"face"
+			],
+			layout: ["grid", "scatter"],
+			order: [
+				"given",
+				"group",
+				"magnitude"
+			]
+		},
+		valid: (values) => values.layout === "grid" || values.order === "given"
+	};
+	defaults() {
+		return {
+			group: "group",
+			glyph: "star",
+			layout: "grid",
+			order: "given"
+		};
+	}
+	get scatter() {
+		return this.options.layout === "scatter";
+	}
+	get keyWidth() {
+		return this.size.width >= 300 ? 92 : 0;
+	}
+	plotMargin() {
+		return this.scatter ? {
+			top: 8,
+			right: 16,
+			bottom: 24,
+			left: 34
+		} : {
+			top: 6,
+			right: 16,
+			bottom: 10,
+			left: 16
+		};
+	}
+	outline(values, r) {
+		const n = values.length;
+		const polar = (i, length) => {
+			const angle = -Math.PI / 2 + i / n * Math.PI * 2;
+			return [n2(Math.cos(angle) * length), n2(Math.sin(angle) * length)];
+		};
+		switch (this.options.glyph) {
+			case "whisker": return `${values.map((value, i) => `M0,0L${polar(i, r * value)}`).join("")}M0,-1.5a1.5,1.5 0 1,0 .01,0`;
+			case "petal": {
+				const spread = Math.PI / n * .8;
+				return values.map((value, i) => {
+					const length = r * Math.sqrt(value), base = -Math.PI / 2 + i / n * Math.PI * 2;
+					const side = (turn) => `${n2(Math.cos(base + turn) * length * .7)},${n2(Math.sin(base + turn) * length * .7)}`;
+					return `M0,0Q${side(-spread)} ${polar(i, length)}Q${side(spread)} 0,0Z`;
+				}).join("");
+			}
+			case "profile": {
+				const w = r * 1.9 / n;
+				return values.map((value, i) => {
+					const x = n2(-r * .95 + i * w), h = n2(r * 1.8 * value), bar = n2(Math.max(1, w - 1.5));
+					return `M${x},${n2(r * .9)}v${-h}h${bar}v${h}Z`;
+				}).join("");
+			}
+			case "face": return this.face(values, r);
+			default: return `M${values.map((value, i) => polar(i, r * value)).join("L")}Z`;
+		}
+	}
+	face(values, r) {
+		const [head = .5, eyes = .5, brows = .5, mouth = .5, nose = .5] = values;
+		const rx = n2(r * (.62 + .36 * head)), ry = n2(r * .96);
+		const eye = n2(r * (.06 + .12 * eyes)), ex = n2(rx * .42), ey = n2(-r * .2);
+		const tilt = n2(r * .22 * (brows - .5)), by = n2(ey - r * .2);
+		const smile = n2(r * .7 * (mouth - .5)), mx = n2(rx * .5), my = n2(r * .48);
+		const circle = (cx, cy, radius) => `M${n2(cx - radius)},${cy}a${radius},${radius} 0 1,0 ${n2(radius * 2)},0a${radius},${radius} 0 1,0 ${n2(-radius * 2)},0`;
+		return [
+			`M${-rx},0a${rx},${ry} 0 1,0 ${n2(rx * 2)},0a${rx},${ry} 0 1,0 ${n2(-rx * 2)},0`,
+			circle(-ex, ey, eye),
+			circle(ex, ey, eye),
+			`M${n2(-ex - eye)},${n2(by + tilt)}L${n2(-ex + eye)},${n2(by - tilt)}M${n2(ex - eye)},${n2(by - tilt)}L${n2(ex + eye)},${n2(by + tilt)}`,
+			`M0,${n2(-r * .05)}v${n2(r * (.12 + .22 * nose))}`,
+			`M${-mx},${my}Q0,${n2(my + smile * 2)} ${mx},${my}`
+		].join("");
+	}
+	sorted(table) {
+		const records = table.complete;
+		const unit = table.normalised(WideNormal.MinMax, records);
+		const items = records.map((record, i) => ({
+			record,
+			values: unit[i].map((value) => FLOOR + .9 * value)
+		}));
+		if (this.options.order === "group") return items.sort((a, b) => ascending(table.groups.indexOf(a.record.group), table.groups.indexOf(b.record.group)));
+		if (this.options.order === "magnitude") return items.sort((a, b) => descending(sum(a.values), sum(b.values)));
+		return items;
+	}
+	draw(ctx) {
+		const table = WideTable.of(this.options);
+		if (!table.dimensions.length || !table.complete.length) return;
+		table.groups.forEach(ctx.palette.color);
+		const items = this.sorted(table);
+		const encoded = this.scatter && table.dimensions.length > 4 ? 2 : 0;
+		const names = table.dimensions.slice(encoded);
+		const glyphs = this.scatter ? this.placeScatter(ctx, table, items, encoded) : this.placeGrid(ctx, items);
+		const filled = this.options.glyph !== "whisker";
+		const color = (d) => ctx.palette.color(d.record.group);
+		const marks = ctx.marks("glyphs", "path", glyphs, (d) => d.record.index).attr("fill", (d) => filled ? color(d) : "none").attr("fill-opacity", .28).attr("stroke", color).attr("stroke-width", 1.5).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+		ctx.set(marks, {
+			d: (d) => d.d,
+			transform: (d) => `translate(${d.x},${d.y})`
+		}, {}, 8);
+		ctx.hover(marks, (d) => MultivariateKit.tooltip(table, d.record, color(d)));
+		if (this.keyWidth) this.drawKey(ctx, names);
+	}
+	drawKey(ctx, names) {
+		const { glyph } = this.options;
+		const heading = {
+			["star"]: "Clockwise",
+			["whisker"]: "Clockwise",
+			["petal"]: "Clockwise",
+			["profile"]: "Left to right",
+			["face"]: "Features"
+		}[glyph];
+		const entries = glyph === "face" ? names.slice(0, FACE.length).map((name, i) => `${FACE[i]}: ${name}`) : names;
+		MultivariateKit.key(ctx, heading, entries, ctx.plot.width - this.keyWidth + 12, this.keyWidth - 12);
+	}
+	placeGrid(ctx, items) {
+		const width = ctx.plot.width - this.keyWidth, { height } = ctx.plot;
+		const columns = Math.max(1, Math.ceil(Math.sqrt(items.length * (width / height))));
+		const rows = Math.ceil(items.length / columns);
+		const cw = width / columns, ch = height / rows, r = Math.min(cw, ch) / 2 - 2;
+		return items.map(({ record, values }, i) => ({
+			record,
+			values,
+			x: cw * (i % columns) + cw / 2,
+			y: ch * Math.floor(i / columns) + ch / 2,
+			d: this.outline(values, r)
+		}));
+	}
+	placeScatter(ctx, table, items, encoded) {
+		const width = ctx.plot.width - this.keyWidth, { height } = ctx.plot;
+		const r = Math.max(7, Math.min(16, Math.min(width, height) / 12));
+		const x = scaleLinear(table.bounds(0), [r, width - r]).nice(), y = scaleLinear(table.bounds(Math.min(1, table.dimensions.length - 1)), [height - r, r]).nice();
+		MultivariateKit.axes(ctx, x, y, {
+			width,
+			height,
+			xTicks: 5
+		});
+		return items.map(({ record, values }) => ({
+			record,
+			values,
+			x: x(record.values[0]),
+			y: y(record.values[Math.min(1, record.values.length - 1)]),
+			d: this.outline(values.slice(encoded), r)
+		}));
+	}
+};
+export { GlyphKind, GlyphLayout, GlyphOrder, GlyphPlot };

package/dist/charts/multivariate/HeatedParallelSets.js

@@ -0,0 +1,236 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { MultivariateKit } from "./MultivariateKit.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { ascending, descending, extent, group, rollup, scaleLinear, sum } from "d3";
+// src/charts/multivariate/HeatedParallelSets.ts
+var ParallelSetSort = /* @__PURE__ */ function(ParallelSetSort) {
+	ParallelSetSort["Given"] = "given";
+	ParallelSetSort["Size"] = "size";
+	ParallelSetSort["Heat"] = "heat";
+	return ParallelSetSort;
+}({});
+var ParallelSetWeight = /* @__PURE__ */ function(ParallelSetWeight) {
+	ParallelSetWeight["Count"] = "count";
+	ParallelSetWeight["Value"] = "value";
+	return ParallelSetWeight;
+}({});
+var ParallelSetRibbons = /* @__PURE__ */ function(ParallelSetRibbons) {
+	ParallelSetRibbons["Pairwise"] = "pairwise";
+	ParallelSetRibbons["Traced"] = "traced";
+	return ParallelSetRibbons;
+}({});
+/** Follow how categories split and recombine across columns, with colour showing a measure's level on each path. */
+var HeatedParallelSets = class extends Chart2D {
+	static meta = {
+		id: "heated-parallel-sets",
+		name: "Heated parallel sets",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws ribbons between categorical axes, sized by frequency and heated by the mean of a measure.",
+		tags: [
+			"multivariate",
+			"parsets",
+			"categorical",
+			"alluvial"
+		],
+		sample: (seed) => MultivariateSample.nominal(seed),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			sort: [
+				"given",
+				"size",
+				"heat"
+			],
+			weight: ["count", "value"],
+			ribbons: ["pairwise", "traced"],
+			curved: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			value: "value",
+			heat: "score",
+			orientation: Orientation.Horizontal,
+			sort: "given",
+			weight: "count",
+			ribbons: "pairwise",
+			curved: true
+		};
+	}
+	get flat() {
+		return this.options.orientation === Orientation.Horizontal;
+	}
+	legendItems() {
+		return [];
+	}
+	plotMargin() {
+		return {
+			top: 4,
+			right: 16,
+			bottom: 6,
+			left: this.flat ? 16 : 62
+		};
+	}
+	columns(rows) {
+		const { dimensions } = this.options;
+		if (dimensions) return dimensions;
+		return Object.keys(rows[0] ?? {}).filter((name) => rows.every((row) => typeof row[name] === "string" || row[name] == null));
+	}
+	tuples(rows, columns) {
+		const { value, heat, weight } = this.options;
+		return [...rollup(rows, (own) => ({
+			weight: weight === "value" ? sum(own, (row) => Math.abs(+row[value] || 0)) : own.length,
+			heat: sum(own, (row) => +row[heat] || 0) / own.length
+		}), (row) => columns.map((column) => String(row[column] ?? "–")).join("
"))].map(([key, part]) => ({
+			cats: key.split("
"),
+			...part
+		})).filter((tuple) => tuple.weight > 0);
+	}
+	nodes(tuples, columns, length) {
+		const { sort } = this.options;
+		const gap = 8;
+		const total = sum(tuples, (tuple) => tuple.weight);
+		return columns.map((_, axis) => {
+			const parts = [...group(tuples, (tuple) => tuple.cats[axis])].map(([name, own]) => {
+				const weight = sum(own, (tuple) => tuple.weight);
+				return {
+					axis,
+					name,
+					total: weight,
+					heat: sum(own, (tuple) => tuple.heat * tuple.weight) / weight,
+					start: 0,
+					length: 0
+				};
+			});
+			if (sort === "size") parts.sort((a, b) => descending(a.total, b.total));
+			if (sort === "heat") parts.sort((a, b) => ascending(a.heat, b.heat));
+			const scale = (length - gap * (parts.length - 1)) / (total || 1);
+			let cursor = 0;
+			for (const part of parts) {
+				part.start = cursor;
+				part.length = part.total * scale;
+				cursor += part.length + gap;
+			}
+			return parts;
+		});
+	}
+	ribbons(tuples, nodes) {
+		const traced = this.options.ribbons === "traced";
+		return nodes.slice(0, -1).flatMap((layer, axis) => {
+			const lookup = (cats, at) => nodes[at].find((node) => node.name === cats[at]);
+			const merged = rollup(tuples, (own) => {
+				const weight = sum(own, (tuple) => tuple.weight);
+				return {
+					weight,
+					heat: sum(own, (tuple) => tuple.heat * tuple.weight) / weight,
+					cats: own[0].cats
+				};
+			}, (tuple) => `${traced ? tuple.cats[0] : ""}|${tuple.cats[axis]}|${tuple.cats[axis + 1]}`);
+			const scaleOf = (node) => node.length / node.total;
+			const list = [...merged].map(([key, part]) => ({
+				key: `${axis}|${key}`,
+				from: lookup(part.cats, axis),
+				to: lookup(part.cats, axis + 1),
+				weight: part.weight,
+				heat: part.heat,
+				origin: traced ? part.cats[0] : "",
+				a0: 0,
+				b0: 0,
+				size: part.weight * scaleOf(lookup(part.cats, axis))
+			}));
+			for (const node of layer) {
+				let cursor = node.start;
+				for (const ribbon of list.filter((r) => r.from === node).sort((p, q) => ascending(p.to.start, q.to.start) || ascending(p.origin, q.origin))) {
+					ribbon.a0 = cursor;
+					cursor += ribbon.size;
+				}
+			}
+			for (const node of nodes[axis + 1]) {
+				let cursor = node.start;
+				for (const ribbon of list.filter((r) => r.to === node).sort((p, q) => ascending(p.from.start, q.from.start) || ascending(p.origin, q.origin))) {
+					ribbon.b0 = cursor;
+					cursor += ribbon.size;
+				}
+			}
+			return list;
+		});
+	}
+	draw(ctx) {
+		const rows = Array.isArray(this.options.data) ? this.options.data : [];
+		const columns = this.columns(rows);
+		if (columns.length < 2 || !rows.length) return;
+		const { width, height } = ctx.plot;
+		const foot = 14, head = this.flat ? 16 : 0;
+		const across = this.flat ? height - foot - head : width, along = (this.flat ? width : height - foot) - 11;
+		const tuples = this.tuples(rows, columns);
+		if (!tuples.length) return;
+		const nodes = this.nodes(tuples, columns, across);
+		const ribbons = this.ribbons(tuples, nodes);
+		const step = along / (columns.length - 1);
+		const pos = (axis) => axis * step;
+		const shift = this.flat ? head : 0;
+		const [low = 0, high = 1] = extent(ribbons, (ribbon) => ribbon.heat);
+		const heat = scaleLinear([low, high === low ? low + 1 : high], [.12, 1]);
+		const fill = (ribbon) => ctx.palette.sequential(heat(ribbon.heat));
+		const trim = (size) => Math.max(.5, size - 1);
+		const path = (r) => MultivariateKit.ribbon(pos(r.from.axis) + 10, shift + r.a0, shift + r.a0 + trim(r.size), pos(r.to.axis), shift + r.b0, shift + r.b0 + trim(r.size), this.options.curved, !this.flat);
+		const bands = ctx.marks("ribbons", "path", ribbons, (r) => r.key).attr("fill", fill).attr("fill-opacity", .85);
+		ctx.set(bands, { d: path }, {}, 3);
+		ctx.hover(bands, (r) => ({
+			title: `${r.from.name} → ${r.to.name}`,
+			color: fill(r),
+			rows: [["Weight", Math.round(r.weight)], [`Mean ${this.options.heat}`, +r.heat.toFixed(1)]]
+		}));
+		this.drawAxes(ctx, nodes.flat(), columns, {
+			pos,
+			shift,
+			top: head
+		});
+		MultivariateKit.ramp(ctx, Math.max(44, width - 150), height - 8, 90, String(+low.toFixed(0)), String(+high.toFixed(0)), this.options.heat);
+	}
+	drawAxes(ctx, nodes, columns, { pos, shift }) {
+		const flat = this.flat, last = columns.length - 1;
+		const bars = ctx.marks("nodes", "rect", nodes, (node) => `${node.axis}/${node.name}`).attr("fill", ctx.theme.inkSecondary).attr("rx", 2);
+		ctx.set(bars, flat ? {
+			x: (n) => pos(n.axis),
+			width: 10,
+			y: (n) => shift + n.start,
+			height: (n) => Math.max(1, n.length)
+		} : {
+			y: (n) => pos(n.axis),
+			height: 10,
+			x: (n) => n.start,
+			width: (n) => Math.max(1, n.length)
+		});
+		ctx.hover(bars, (node) => ({
+			title: node.name,
+			rows: [[columns[node.axis], Math.round(node.total)]]
+		}));
+		const fits = (node) => flat ? node.length >= 13 : node.length >= node.name.length * 6.2 + 4;
+		const labels = ctx.marks("labels", "text", nodes.filter(fits), (node) => `${node.axis}/${node.name}`).attr("dy", "0.32em").text((node) => node.name);
+		MultivariateKit.halo(ctx.text(labels, 10.5, "ink"), ctx).attr("text-anchor", (n) => flat ? n.axis === last ? "end" : "start" : "middle");
+		ctx.set(labels, flat ? {
+			x: (n) => n.axis === last ? pos(n.axis) - 4 : pos(n.axis) + 14,
+			y: (n) => shift + n.start + n.length / 2
+		} : {
+			x: (n) => n.start + n.length / 2,
+			y: (n) => pos(n.axis) + (n.axis === last ? -8 : 18)
+		});
+		const heads = columns.map((name, axis) => ({
+			name,
+			axis
+		}));
+		const names = ctx.marks("axis-names", "text", heads, (d) => d.name).attr("font-weight", 600).text((d) => d.name).attr("dy", "0.32em");
+		ctx.text(names, 11, "ink").attr("text-anchor", (d) => flat ? d.axis === last ? "end" : d.axis === 0 ? "start" : "middle" : "end");
+		ctx.set(names, flat ? {
+			x: (d) => pos(d.axis) + (d.axis === last ? 10 : d.axis === 0 ? 0 : 5),
+			y: 6
+		} : {
+			x: -6,
+			y: (d) => pos(d.axis) + 5
+		});
+	}
+};
+export { HeatedParallelSets, ParallelSetRibbons, ParallelSetSort, ParallelSetWeight };

package/dist/charts/multivariate/HyperboxChart.js

@@ -0,0 +1,200 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { MultivariateKit } from "./MultivariateKit.js";
+import { MultivariateSample } from "./MultivariateSample.js";
+import { WideTable } from "./WideTable.js";
+import { max, mean, range } from "d3";
+// src/charts/multivariate/HyperboxChart.ts
+var HyperboxProjection = /* @__PURE__ */ function(HyperboxProjection) {
+	HyperboxProjection["Even"] = "even";
+	HyperboxProjection["Cabinet"] = "cabinet";
+	HyperboxProjection["Fan"] = "fan";
+	return HyperboxProjection;
+}({});
+var HyperboxView = /* @__PURE__ */ function(HyperboxView) {
+	HyperboxView["Front"] = "front";
+	HyperboxView["Back"] = "back";
+	return HyperboxView;
+}({});
+var HyperboxFaces = /* @__PURE__ */ function(HyperboxFaces) {
+	HyperboxFaces["Shaded"] = "shaded";
+	HyperboxFaces["Wire"] = "wire";
+	return HyperboxFaces;
+}({});
+var HyperboxArrangement = /* @__PURE__ */ function(HyperboxArrangement) {
+	HyperboxArrangement["Grid"] = "grid";
+	HyperboxArrangement["Overlay"] = "overlay";
+	return HyperboxArrangement;
+}({});
+var HyperboxEntity = /* @__PURE__ */ function(HyperboxEntity) {
+	HyperboxEntity["Groups"] = "groups";
+	HyperboxEntity["Rows"] = "rows";
+	return HyperboxEntity;
+}({});
+/** Compare whole multivariate profiles as solid boxes whose edge lengths are the measures. */
+var HyperboxChart = class extends Chart2D {
+	static meta = {
+		id: "hyperbox",
+		name: "Hyperbox",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Projects an n-dimensional box into the plane, with one edge direction per measure and edge length showing its value.",
+		tags: [
+			"multivariate",
+			"zonotope",
+			"alpert",
+			"n-dimensional box"
+		],
+		sample: (seed) => MultivariateSample.wide(seed),
+		variants: {
+			entity: ["groups", "rows"],
+			projection: [
+				"even",
+				"cabinet",
+				"fan"
+			],
+			view: ["front", "back"],
+			faces: ["shaded", "wire"],
+			arrangement: ["grid", "overlay"]
+		},
+		valid: (values) => values.arrangement === "grid" || values.faces === "wire" && values.entity === "groups"
+	};
+	defaults() {
+		return {
+			group: "group",
+			projection: "even",
+			view: "front",
+			faces: "shaded",
+			arrangement: "grid",
+			entity: "groups",
+			maxBoxes: 8
+		};
+	}
+	get keyWidth() {
+		return this.size.width >= 300 ? 76 : 0;
+	}
+	plotMargin() {
+		return {
+			top: 4,
+			right: 16,
+			bottom: 8,
+			left: 16
+		};
+	}
+	directions(n) {
+		const { projection } = this.options;
+		if (projection === "cabinet") return range(n).map((i) => i === 0 ? 0 : i === 1 ? Math.PI / 2 : Math.PI / 2 + (i - 1) / Math.max(1, n - 1) * (Math.PI / 2));
+		if (projection === "fan") return range(n).map((i) => i / Math.max(1, n - 1) * (Math.PI * .62));
+		return range(n).map((i) => i / n * Math.PI);
+	}
+	entities(table) {
+		const tops = table.dimensions.map((_, d) => max(table.column(d), Math.abs) || 1);
+		const scale = (raw) => raw.map((value, d) => .08 + .92 * Math.min(1, Math.abs(value) / tops[d]));
+		if (this.options.entity === "rows") return table.complete.slice(0, this.options.maxBoxes).map((record) => ({
+			name: `Row ${record.index + 1}`,
+			group: record.group,
+			raw: record.values,
+			values: scale(record.values)
+		}));
+		return table.groups.map((name) => {
+			const own = table.complete.filter((record) => record.group === name);
+			const raw = table.dimensions.map((_, d) => mean(own, (record) => record.values[d]) ?? 0);
+			return {
+				name,
+				group: name,
+				raw,
+				values: scale(raw)
+			};
+		}).filter((entity) => entity.raw.some(Boolean));
+	}
+	/** Rhombic tiling of the box: sweep the lower edge path into the upper one, one swap per face. */
+	faces(generators) {
+		const n = generators.length, order = generators.map((_, i) => i), faces = [];
+		const swap = (at) => {
+			const start = order.slice(0, at).reduce((sum, i) => [sum[0] + generators[i][0], sum[1] + generators[i][1]], [0, 0]);
+			const a = generators[order[at]], b = generators[order[at + 1]];
+			faces.push({
+				shade: (order[at] + order[at + 1]) / Math.max(1, 2 * n - 3),
+				corners: [
+					start,
+					[start[0] + a[0], start[1] + a[1]],
+					[start[0] + a[0] + b[0], start[1] + a[1] + b[1]],
+					[start[0] + b[0], start[1] + b[1]]
+				]
+			});
+			[order[at], order[at + 1]] = [order[at + 1], order[at]];
+		};
+		if (this.options.view === "front") for (let pass = 0; pass < n - 1; pass++) for (let at = 0; at < n - 1 - pass; at++) swap(at);
+		else for (let pass = 0; pass < n - 1; pass++) for (let at = n - 2; at >= pass; at--) swap(at);
+		return faces;
+	}
+	draw(ctx) {
+		const table = WideTable.of(this.options);
+		if (table.dimensions.length < 2) return;
+		const entities = this.entities(table);
+		if (!entities.length) return;
+		const angles = this.directions(table.dimensions.length);
+		const width = ctx.plot.width - this.keyWidth, { height } = ctx.plot;
+		const overlay = this.options.arrangement === "overlay";
+		const shapes = entities.map((entity) => {
+			const generators = entity.values.map((value, d) => [Math.cos(angles[d]) * value, -Math.sin(angles[d]) * value]);
+			const faces = this.faces(generators);
+			const all = faces.flatMap((face) => face.corners);
+			const xs = all.map((p) => p[0]), ys = all.map((p) => p[1]);
+			return {
+				entity,
+				faces,
+				left: Math.min(...xs),
+				right: Math.max(...xs),
+				top: Math.min(...ys),
+				bottom: Math.max(...ys)
+			};
+		});
+		const columns = overlay ? 1 : Math.max(1, Math.ceil(Math.sqrt(entities.length * Math.max(1, width / height))));
+		const rows = Math.ceil(entities.length / columns), cw = width / columns, ch = height / rows, label = overlay ? 0 : 16;
+		const spanX = max(shapes, (s) => s.right - s.left), spanY = max(shapes, (s) => s.bottom - s.top);
+		const scale = Math.min((cw - 10) / spanX, (ch - label - 6) / spanY);
+		const tiles = shapes.flatMap((shape, i) => {
+			const cx = overlay ? width / 2 : cw * (i % columns) + cw / 2, cy = overlay ? height / 2 : ch * Math.floor(i / columns) + (ch - label) / 2;
+			const mx = overlay ? 0 : (shape.left + shape.right) / 2, my = overlay ? 0 : (shape.top + shape.bottom) / 2;
+			const ox = cx - (overlay ? (shapes[0].left + shapes[0].right) / 2 * scale : mx * scale), oy = cy - (overlay ? (shapes[0].top + shapes[0].bottom) / 2 * scale : my * scale);
+			return shape.faces.map((face, f) => ({
+				key: `${shape.entity.name}/${f}`,
+				entity: shape.entity,
+				shade: face.shade,
+				x: ox,
+				y: oy,
+				d: `M${face.corners.map((p) => `${(p[0] * scale).toFixed(2)},${(p[1] * scale).toFixed(2)}`).join("L")}Z`
+			}));
+		});
+		const shaded = this.options.faces === "shaded";
+		const color = (d) => ctx.palette.color(d.entity.group);
+		const wires = shapes.map((shape) => {
+			const own = tiles.filter((tile) => tile.entity === shape.entity);
+			return {
+				...own[0],
+				key: shape.entity.name,
+				d: own.map((tile) => tile.d).join("")
+			};
+		});
+		const marks = ctx.marks("faces", "path", shaded ? tiles : wires, (d) => d.key).attr("fill", (d) => shaded ? color(d) : "none").attr("fill-opacity", (d) => .2 + d.shade * .65).attr("stroke", (d) => shaded ? ctx.theme.surface : color(d)).attr("stroke-width", shaded ? 1 : 1.5).attr("stroke-linejoin", "round");
+		ctx.set(marks, {
+			d: (d) => d.d,
+			transform: (d) => `translate(${d.x},${d.y})`
+		});
+		ctx.hover(marks, (d) => ({
+			title: d.entity.name,
+			color: color(d),
+			rows: table.dimensions.map((name, i) => [name, +d.entity.raw[i].toFixed(2)])
+		}));
+		const names = overlay ? [] : shapes.map(({ entity, top, bottom }, i) => ({
+			text: entity.name,
+			x: cw * (i % columns) + cw / 2,
+			y: ch * Math.floor(i / columns) + (ch - label) / 2 + (bottom - top) * scale / 2 + 14
+		}));
+		ctx.text(ctx.marks("names", "text", names, (d) => d.text).attr("text-anchor", "middle").attr("x", (d) => d.x).attr("y", (d) => d.y).text((d) => MultivariateKit.trim(d.text, cw - 4)), 10.5);
+		if (this.keyWidth) MultivariateKit.key(ctx, "Edges", table.dimensions, ctx.plot.width - this.keyWidth + 8, this.keyWidth - 8);
+	}
+};
+export { HyperboxArrangement, HyperboxChart, HyperboxEntity, HyperboxFaces, HyperboxProjection, HyperboxView };

package/dist/charts/multivariate/InstancedSticks.js

@@ -0,0 +1,32 @@
+import { CylinderGeometry, InstancedMesh, MeshStandardMaterial, Object3D, Quaternion, Vector3 } from "three";
+// src/charts/multivariate/InstancedSticks.ts
+var UP = new Vector3(0, 1, 0);
+/** Thin cylinders between point pairs: the 3D stand-in for lines, which WebGL cannot draw wider than a pixel. */
+var InstancedSticks = class {
+	/** Adds one instanced mesh; `grow` draws each stick out from its `from` end on reveal. */
+	static add(ctx, sticks, radius, grow = true) {
+		const mesh = new InstancedMesh(new CylinderGeometry(radius, radius, 1, 8), new MeshStandardMaterial({ roughness: .5 }), sticks.length);
+		mesh.castShadow = true;
+		const dummy = new Object3D(), turn = new Quaternion(), start = new Vector3(), end = new Vector3(), along = new Vector3();
+		const place = (progress) => {
+			sticks.forEach((stick, i) => {
+				start.set(...stick.from);
+				end.set(...stick.to);
+				along.subVectors(end, start);
+				const length = Math.max(1e-4, along.length()) * (grow ? Math.max(.001, progress) : 1);
+				turn.setFromUnitVectors(UP, along.clone().normalize());
+				dummy.position.copy(start).addScaledVector(along.normalize(), length / 2);
+				dummy.quaternion.copy(turn);
+				dummy.scale.set(1, length, 1);
+				dummy.updateMatrix();
+				mesh.setMatrixAt(i, dummy.matrix);
+			});
+			mesh.instanceMatrix.needsUpdate = true;
+		};
+		sticks.forEach((stick, i) => mesh.setColorAt(i, ctx.color(String(stick.color))));
+		ctx.reveal(place);
+		ctx.root.add(mesh);
+		return mesh;
+	}
+};
+export { InstancedSticks };