@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/proportion/UpSetPlot.js

@@ -0,0 +1,245 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SetData } from "./SetData.js";
+import { ShareData } from "./ShareData.js";
+import { scaleLinear } from "d3";
+// src/charts/proportion/UpSetPlot.ts
+var UpSetOrder = /* @__PURE__ */ function(UpSetOrder) {
+	UpSetOrder["Size"] = "by-size";
+	UpSetOrder["Degree"] = "by-degree";
+	UpSetOrder["Group"] = "grouped-by-set";
+	return UpSetOrder;
+}({});
+var TOTALS = 62;
+var NAMES = 58;
+var TOP = 48;
+/** Set overlaps once a Venn gives out: many sets, ranked intersections, exact counts. */
+var UpSetPlot = class extends Chart2D {
+	static meta = {
+		id: "upset",
+		name: "UpSet plot",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Ranks set intersections as bars above a membership matrix, staying readable with many sets.",
+		tags: [
+			"sets",
+			"intersection",
+			"matrix",
+			"venn alternative"
+		],
+		sample: (seed) => SetData.sample(seed, 6),
+		variants: {
+			order: [
+				"by-size",
+				"by-degree",
+				"grouped-by-set"
+			],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			setBars: [true, false],
+			minDegree: [1, 2],
+			limit: [5, 6]
+		}
+	};
+	defaults() {
+		return {
+			sets: "sets",
+			value: "value",
+			separator: "&",
+			limit: 6,
+			order: "by-size",
+			orientation: Orientation.Vertical,
+			setBars: true,
+			minDegree: 1
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? LegendPosition.None;
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			right: this.options.orientation === Orientation.Horizontal ? 36 : 16
+		};
+	}
+	ranked(table) {
+		const { order, minDegree } = this.options;
+		const size = (a, b) => b.value - a.value;
+		const lowest = (region) => Math.log2(region.mask & -region.mask);
+		const compare = order === "by-degree" ? (a, b) => a.degree - b.degree || size(a, b) : order === "grouped-by-set" ? (a, b) => lowest(a) - lowest(b) || a.degree - b.degree || size(a, b) : size;
+		return table.regions.filter((region) => region.degree >= minDegree).sort(compare);
+	}
+	draw(ctx) {
+		const { data, sets, value, separator, limit, orientation, setBars } = this.options;
+		const table = SetData.collect(data, sets, value, separator, limit);
+		const regions = this.ranked(table);
+		if (ShareData.noData(ctx, !regions.length, ctx.plot.width / 2, ctx.plot.height / 2)) return;
+		const vertical = orientation === Orientation.Vertical;
+		const across = vertical ? ctx.plot.width : ctx.plot.height, down = vertical ? ctx.plot.height : ctx.plot.width;
+		const names = table.names.map((name, i) => ({
+			name,
+			size: table.sizes[i],
+			index: i
+		})).sort((a, b) => b.size - a.size);
+		const gutter = (setBars ? TOTALS : 0) + (vertical ? NAMES : TOP);
+		const room = Math.max(40, across - gutter);
+		const shown = regions.slice(0, Math.max(1, Math.floor(room / 11)));
+		const step = room / shown.length;
+		const laneSize = Math.min(20, Math.max(11, down * .5 / names.length));
+		const head = down - laneSize * names.length - 6;
+		const toXY = (u, v) => vertical ? [u, v] : [v, u];
+		const laneOf = new Map(names.map((entry, i) => [entry.index, head + 6 + (i + .5) * laneSize]));
+		const columns = shown.map((region, i) => ({
+			region,
+			centre: gutter + (i + .5) * step
+		}));
+		const grid = ctx.theme.grid, ink = ctx.theme.inkSecondary;
+		const stripes = names.filter((_, i) => i % 2 === 0).map((entry) => ({
+			name: entry.name,
+			lane: laneOf.get(entry.index)
+		}));
+		const band = ctx.marks("stripes", "rect", stripes, (d) => d.name).attr("fill", grid).attr("opacity", .5).attr("rx", 3);
+		const stripe = (d) => {
+			const [x, y] = toXY(gutter, d.lane - laneSize / 2), [w, h] = toXY(room, laneSize);
+			return {
+				x,
+				y,
+				width: w,
+				height: h
+			};
+		};
+		ctx.set(band, {
+			x: (d) => stripe(d).x,
+			y: (d) => stripe(d).y,
+			width: (d) => stripe(d).width,
+			height: (d) => stripe(d).height
+		});
+		const scale = scaleLinear([0, Math.max(...shown.map((d) => d.value))], [0, Math.max(10, head - 18)]);
+		const barWide = Math.max(4, Math.min(step * .66, 26));
+		const bar = (d) => {
+			const size = scale(d.region.value);
+			const [x, y] = toXY(d.centre - barWide / 2, head - size), [w, h] = toXY(barWide, size);
+			return {
+				x,
+				y,
+				width: w,
+				height: h
+			};
+		};
+		const bars = ctx.marks("bars", "rect", columns, (d) => d.region.mask).attr("fill", ink).attr("rx", 3);
+		const collapsed = (d) => {
+			const [x, y] = toXY(d.centre - barWide / 2, head), [w, h] = toXY(barWide, 0);
+			return {
+				x,
+				y,
+				width: w,
+				height: h
+			};
+		};
+		ctx.set(bars, {
+			x: (d) => bar(d).x,
+			y: (d) => bar(d).y,
+			width: (d) => bar(d).width,
+			height: (d) => bar(d).height
+		}, {
+			x: (d) => collapsed(d).x,
+			y: (d) => collapsed(d).y,
+			width: (d) => collapsed(d).width,
+			height: (d) => collapsed(d).height
+		}, 18);
+		const tip = (d) => ({
+			title: d.region.names.join(" ∩ "),
+			rows: [
+				[value, d.region.value],
+				["Sets", d.region.degree],
+				["Share", ShareData.percent(d.region.value / table.total)]
+			]
+		});
+		ctx.hover(bars, tip);
+		const reach = Math.max(...shown.map((d) => d.value));
+		const counts = columns.filter((d) => d.region.value === reach || (vertical ? ShareData.width(Scales.format(d.region.value, reach), 10) + 4 <= step : step >= 12));
+		const tops = ctx.text(ctx.marks("counts", "text", counts, (d) => d.region.mask), 10).attr("text-anchor", vertical ? "middle" : "end").text((d) => Scales.format(d.region.value, reach));
+		ctx.set(tops, {
+			x: (d) => vertical ? d.centre : head - scale(d.region.value) - 4,
+			y: (d) => vertical ? head - scale(d.region.value) - 4 : d.centre + 3.5
+		});
+		const links = columns.filter((d) => d.region.degree > 1).map((d) => {
+			const lanes = d.region.names.map((name) => laneOf.get(table.names.indexOf(name)));
+			const [x1, y1] = toXY(d.centre, Math.min(...lanes)), [x2, y2] = toXY(d.centre, Math.max(...lanes));
+			return {
+				key: d.region.mask,
+				x1,
+				y1,
+				x2,
+				y2
+			};
+		});
+		ctx.set(ctx.marks("links", "line", links, (d) => d.key).attr("stroke", ink).attr("stroke-width", 2), {
+			x1: (d) => d.x1,
+			y1: (d) => d.y1,
+			x2: (d) => d.x2,
+			y2: (d) => d.y2
+		});
+		const radius = Math.max(3.2, Math.min(laneSize * .32, step * .34, 5.5));
+		const cells = columns.flatMap((column) => names.map((entry) => ({
+			column,
+			entry,
+			member: !!(column.region.mask & 1 << entry.index)
+		})));
+		const dots = ctx.marks("dots", "circle", cells, (d) => `${d.column.region.mask}/${d.entry.name}`).attr("fill", (d) => d.member ? ink : ctx.theme.axis).attr("fill-opacity", (d) => d.member ? 1 : .35);
+		ctx.set(dots, {
+			cx: (d) => toXY(d.column.centre, laneOf.get(d.entry.index))[0],
+			cy: (d) => toXY(d.column.centre, laneOf.get(d.entry.index))[1],
+			r: (d) => d.member ? radius : radius * .7
+		});
+		ctx.hover(dots.filter((d) => d.member), (d) => tip(d.column));
+		const gutterEnd = gutter - 6, totals = setBars ? scaleLinear([0, Math.max(...names.map((d) => d.size))], [0, 54]) : null;
+		const labelEdge = setBars ? gutterEnd - TOTALS : gutterEnd;
+		const labels = names.map((entry) => {
+			const [x, y] = toXY(labelEdge, laneOf.get(entry.index));
+			return {
+				key: entry.name,
+				x,
+				y,
+				text: ShareData.fit(entry.name, vertical ? 54 : TOP * 1.4)
+			};
+		});
+		const written = ctx.text(ctx.marks("names", "text", labels, (d) => d.key)).attr("text-anchor", vertical ? "end" : "start").text((d) => d.text);
+		ctx.set(written, {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			transform: (d) => vertical ? `translate(0,4)` : `rotate(-38,${d.x},${d.y}) translate(2,0)`
+		});
+		const totalBars = (totals ? names : []).map((entry) => {
+			const size = totals(entry.size), lane = laneOf.get(entry.index);
+			const [x, y] = toXY(gutterEnd - size, lane - Math.min(6, laneSize * .34)), [w, h] = toXY(size, Math.min(12, laneSize * .68));
+			return {
+				entry,
+				x,
+				y,
+				width: w,
+				height: h
+			};
+		});
+		const side = ctx.marks("totals", "rect", totalBars, (d) => d.entry.name).attr("fill", (d) => ctx.palette.color(d.entry.name)).attr("rx", 3);
+		ctx.set(side, {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: (d) => d.width,
+			height: (d) => d.height
+		}, vertical ? {
+			x: gutterEnd,
+			width: 0
+		} : {
+			y: gutterEnd,
+			height: 0
+		}, 30);
+		ctx.hover(side, (d) => ({
+			title: d.entry.name,
+			color: ctx.palette.color(d.entry.name),
+			rows: [["Set size", d.entry.size]]
+		}));
+	}
+};
+export { UpSetOrder, UpSetPlot };

package/dist/charts/proportion/VennDiagram.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SetData } from "./SetData.js";
+import { SetDiagram, SetLabel } from "./SetDiagram.js";
+// src/charts/proportion/VennDiagram.ts
+/** `Standard` is the textbook pose; `Turned` rotates the whole figure a half-step. */
+var VennPose = /* @__PURE__ */ function(VennPose) {
+	VennPose["Standard"] = "standard";
+	VennPose["Turned"] = "turned";
+	return VennPose;
+}({});
+var rad = Math.PI / 180;
+/** Ellipse arrangements in which every one of the `2^n - 1` regions exists. */
+var LAYOUTS = {
+	1: [{
+		cx: 0,
+		cy: 0,
+		rx: 1,
+		ry: 1,
+		angle: 0
+	}],
+	2: [{
+		cx: -.55,
+		cy: 0,
+		rx: 1,
+		ry: 1,
+		angle: 0
+	}, {
+		cx: .55,
+		cy: 0,
+		rx: 1,
+		ry: 1,
+		angle: 0
+	}],
+	3: [
+		90,
+		210,
+		330
+	].map((a) => ({
+		cx: Math.cos(a * rad) * .62,
+		cy: -Math.sin(a * rad) * .62,
+		rx: 1,
+		ry: 1,
+		angle: 0
+	})),
+	4: [
+		{
+			cx: -.217,
+			cy: -.228,
+			rx: 1,
+			ry: .45,
+			angle: 47.7 * rad
+		},
+		{
+			cx: 0,
+			cy: -.499,
+			rx: 1,
+			ry: .45,
+			angle: 47.7 * rad
+		},
+		{
+			cx: 0,
+			cy: -.499,
+			rx: 1,
+			ry: .45,
+			angle: -47.7 * rad
+		},
+		{
+			cx: .217,
+			cy: -.228,
+			rx: 1,
+			ry: .45,
+			angle: -47.7 * rad
+		}
+	],
+	5: [
+		0,
+		72,
+		144,
+		216,
+		288
+	].map((a) => ({
+		cx: Math.sin(a * rad) * .228,
+		cy: -Math.cos(a * rad) * .228,
+		rx: 1,
+		ry: .597,
+		angle: (a + 109.2) * rad
+	}))
+};
+/** All logical overlaps of up to five sets, whether or not they hold data. For relationships, not sizes. */
+var VennDiagram = class extends SetDiagram {
+	static meta = {
+		id: "venn",
+		name: "Venn diagram",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws every logical overlap of up to five sets at fixed positions, showing which combinations exist.",
+		tags: [
+			"sets",
+			"overlap",
+			"intersection"
+		],
+		sample: (seed) => SetData.sample(seed, 5),
+		variants: {
+			limit: [
+				3,
+				2,
+				4,
+				5
+			],
+			pose: ["standard", "turned"],
+			labels: [
+				SetLabel.Values,
+				SetLabel.Names,
+				SetLabel.None
+			]
+		},
+		valid: (values) => !(values.labels === SetLabel.Names && values.limit === 5)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			pose: "standard"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.labels === SetLabel.Names && this.options.limit <= 3 ? LegendPosition.None : LegendPosition.Top);
+	}
+	place(unit, { width, height }, turn) {
+		const cos = Math.cos(turn), sin = Math.sin(turn);
+		const turned = unit.map((shape) => ({
+			...shape,
+			cx: shape.cx * cos - shape.cy * sin,
+			cy: shape.cx * sin + shape.cy * cos,
+			angle: shape.angle + turn
+		}));
+		const reachX = (s) => Math.hypot(s.rx * Math.cos(s.angle), s.ry * Math.sin(s.angle)), reachY = (s) => Math.hypot(s.rx * Math.sin(s.angle), s.ry * Math.cos(s.angle));
+		const x0 = Math.min(...turned.map((s) => s.cx - reachX(s))), x1 = Math.max(...turned.map((s) => s.cx + reachX(s)));
+		const y0 = Math.min(...turned.map((s) => s.cy - reachY(s))), y1 = Math.max(...turned.map((s) => s.cy + reachY(s)));
+		const scale = Math.min((width - 4) / (x1 - x0), (height - 4) / (y1 - y0));
+		return turned.map((s) => ({
+			...s,
+			cx: width / 2 + (s.cx - (x0 + x1) / 2) * scale,
+			cy: height / 2 + (s.cy - (y0 + y1) / 2) * scale,
+			rx: s.rx * scale,
+			ry: s.ry * scale
+		}));
+	}
+	shapes(ctx, table) {
+		const count = table.names.length;
+		const turn = this.options.pose === "turned" ? (count === 2 ? 90 : count === 3 ? 180 : count === 4 ? 90 : 36) * rad : 0;
+		return this.place(LAYOUTS[count] ?? LAYOUTS[5], ctx.plot, turn);
+	}
+};
+export { VennDiagram, VennPose };

package/dist/charts/proportion/VoronoiShareChart.js

@@ -0,0 +1,139 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PowerDiagram, SeedPattern } from "./PowerDiagram.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/VoronoiShareChart.ts
+var VoronoiBoundary = /* @__PURE__ */ function(VoronoiBoundary) {
+	VoronoiBoundary["Circle"] = "circle";
+	VoronoiBoundary["Square"] = "rectangle";
+	VoronoiBoundary["Hexagon"] = "hexagon";
+	VoronoiBoundary["Triangle"] = "triangle";
+	return VoronoiBoundary;
+}({});
+var VoronoiLabel = /* @__PURE__ */ function(VoronoiLabel) {
+	VoronoiLabel["Names"] = "names";
+	VoronoiLabel["Percent"] = "percent-only";
+	VoronoiLabel["None"] = "unlabelled";
+	return VoronoiLabel;
+}({});
+var SIDES = {
+	["circle"]: 72,
+	["hexagon"]: 6,
+	["triangle"]: 3
+};
+/** A treemap's area-honest shares in organic cells, for editorial pieces inside a meaningful outline. */
+var VoronoiShareChart = class extends ShareChart {
+	static meta = {
+		id: "voronoi-share",
+		name: "Voronoi share diagram",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Divides a shape into weighted Voronoi cells whose areas match each part of a whole.",
+		tags: [
+			"voronoi treemap",
+			"power diagram",
+			"tessellation"
+		],
+		sample: (seed) => SampleData.categories(seed, 8, 1),
+		variants: {
+			boundary: [
+				"circle",
+				"rectangle",
+				"hexagon",
+				"triangle"
+			],
+			seeds: [
+				SeedPattern.Spiral,
+				SeedPattern.Ring,
+				SeedPattern.Scatter
+			],
+			labels: [
+				"names",
+				"percent-only",
+				"unlabelled"
+			],
+			sort: [ShareSort.Descending, ShareSort.Data]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			boundary: "circle",
+			seeds: SeedPattern.Spiral,
+			labels: "names"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.labels === "names" ? LegendPosition.None : LegendPosition.Top);
+	}
+	outline(width, height) {
+		const sides = SIDES[this.options.boundary];
+		if (!sides) return [
+			[0, 0],
+			[width, 0],
+			[width, height],
+			[0, height]
+		];
+		const unit = Array.from({ length: sides }, (_, i) => [Math.sin(i * Math.PI * 2 / sides), -Math.cos(i * Math.PI * 2 / sides)]);
+		const [x0, x1] = [Math.min(...unit.map((p) => p[0])), Math.max(...unit.map((p) => p[0]))], [y0, y1] = [Math.min(...unit.map((p) => p[1])), Math.max(...unit.map((p) => p[1]))];
+		const scale = Math.min(width / (x1 - x0), height / (y1 - y0));
+		return unit.map(([x, y]) => [width / 2 + (x - (x0 + x1) / 2) * scale, height / 2 + (y - (y0 + y1) / 2) * scale]);
+	}
+	cells(shares, width, height) {
+		const solved = PowerDiagram.solve(shares.map((share) => share.fraction), this.outline(width, height), this.options.seeds);
+		return shares.flatMap((share, i) => {
+			const points = PowerDiagram.inset(solved[i], 1);
+			if (points.length < 3) return [];
+			const anchor = PowerDiagram.centroid(points);
+			return [{
+				share,
+				points,
+				anchor,
+				room: PowerDiagram.clearance(anchor, points)
+			}];
+		});
+	}
+	drawShares(ctx, shares) {
+		const { labels, value } = this.options;
+		const cells = this.cells(shares, ctx.plot.width, ctx.plot.height);
+		const paths = ctx.marks("cells", "path", cells, (d) => d.share.name).attr("fill", (d) => ShareData.fill(ctx, d.share));
+		const middle = `${ctx.plot.width / 2},${ctx.plot.height / 2}`;
+		ctx.set(paths, {
+			d: (d) => PowerDiagram.rounded(d.points, 4),
+			transform: "translate(0,0) scale(1)"
+		}, { transform: `translate(${middle}) scale(0)` }, 30);
+		ctx.hover(paths, (d) => ({
+			title: d.share.name,
+			color: ShareData.fill(ctx, d.share),
+			rows: [[value, d.share.value], ["Share", ShareData.percent(d.share.fraction)]]
+		}));
+		const written = (labels === "unlabelled" ? [] : cells).flatMap((d) => {
+			const percent = ShareData.percent(d.share.fraction);
+			if (d.room * 1.8 < ShareData.width(percent)) return [];
+			const name = labels === "names" && d.room >= 15 ? ShareData.fit(d.share.name, d.room * 1.9) : "";
+			return [{
+				key: d.share.name,
+				name,
+				percent,
+				x: d.anchor[0],
+				y: d.anchor[1],
+				fill: ShareData.ink(ctx, ShareData.fill(ctx, d.share))
+			}];
+		});
+		const titles = ctx.text(ctx.marks("names", "text", written.filter((d) => d.name), (d) => d.key)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.name);
+		ctx.set(titles, {
+			x: (d) => d.x.toFixed(1),
+			y: (d) => (d.y - 2).toFixed(1)
+		});
+		const shares2 = ctx.text(ctx.marks("percents", "text", written, (d) => d.key)).attr("fill", (d) => d.fill).attr("font-weight", 600).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.percent);
+		ctx.set(shares2, {
+			x: (d) => d.x.toFixed(1),
+			y: (d) => (d.y + (d.name ? 11 : 4)).toFixed(1)
+		});
+	}
+};
+export { VoronoiBoundary, VoronoiLabel, VoronoiShareChart };

package/dist/charts/proportion/Waffle3DChart.js

@@ -0,0 +1,164 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+import { range } from "d3";
+import { BoxGeometry, CylinderGeometry, InstancedMesh, Mesh, MeshStandardMaterial, Object3D, PlaneGeometry, ShadowMaterial, SphereGeometry } from "three";
+// src/charts/proportion/Waffle3DChart.ts
+/** `Plate` is one 10×10 layer; `Block` packs 100 units into a cube; `Towers` gives each part its own column. */
+var WaffleSolid = /* @__PURE__ */ function(WaffleSolid) {
+	WaffleSolid["Plate"] = "plate";
+	WaffleSolid["Block"] = "block";
+	WaffleSolid["Towers"] = "towers";
+	return WaffleSolid;
+}({});
+var UnitShape = /* @__PURE__ */ function(UnitShape) {
+	UnitShape["Cube"] = "cube";
+	UnitShape["Sphere"] = "sphere";
+	UnitShape["Cylinder"] = "cylinder";
+	return UnitShape;
+}({});
+var UnitPath = /* @__PURE__ */ function(UnitPath) {
+	UnitPath["Rows"] = "rows";
+	UnitPath["Snake"] = "snake";
+	return UnitPath;
+}({});
+var FLOOR = -.72;
+/** A waffle built from 100 solid units, for a tactile sense of how much of the whole each part is. */
+var Waffle3DChart = class extends Chart3D {
+	static meta = {
+		id: "waffle-3d",
+		name: "3D waffle",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Builds a whole from 100 solid units, where the count of each colour reads as its percentage.",
+		tags: [
+			"unit chart",
+			"cubes",
+			"voxel"
+		],
+		sample: (seed) => SampleData.categories(seed, 4, 1),
+		variants: {
+			solid: [
+				"plate",
+				"block",
+				"towers"
+			],
+			unit: [
+				"cube",
+				"sphere",
+				"cylinder"
+			],
+			path: ["rows", "snake"],
+			gap: [.14, .32]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			value: "value",
+			limit: 8,
+			sort: ShareSort.Descending,
+			solid: "plate",
+			unit: "cube",
+			path: "rows",
+			gap: .14,
+			elevation: 32,
+			distance: 4.2
+		};
+	}
+	walk(side) {
+		return range(side).flatMap((row) => range(side).map((i) => [this.options.path === "snake" && row % 2 ? side - 1 - i : i, row]));
+	}
+	units(shares) {
+		const counts = ShareData.allocate(shares, 100);
+		const owners = shares.flatMap((share, i) => Array.from({ length: counts[i] }, () => share));
+		const { solid } = this.options;
+		if (solid === "towers") {
+			const across = Math.max(1, Math.ceil(Math.sqrt(shares.length))), slot = 1.8 / across;
+			const pitch = slot * .8 / 3;
+			const centres = shares.map((share, i) => ({
+				share,
+				x: (i % across + .5) * slot - .9,
+				z: (Math.floor(i / across) + .5) * slot - .9
+			}));
+			return {
+				units: shares.flatMap((share, i) => range(counts[i]).map((n) => {
+					const [col, row] = this.walk(3)[n % 9];
+					return {
+						share,
+						x: centres[i].x + (col - 1) * pitch,
+						y: Math.floor(n / 9) * pitch,
+						z: centres[i].z + (row - 1) * pitch
+					};
+				})),
+				pitch,
+				centres
+			};
+		}
+		const side = solid === "block" ? 5 : 10, pitch = 1.7 / side, layers = solid === "block" ? 4 : 1;
+		const footprint = this.walk(side);
+		return {
+			units: owners.map((share, i) => {
+				const [col, row] = footprint[i % footprint.length];
+				return {
+					share,
+					x: (col - (side - 1) / 2) * pitch,
+					y: Math.min(layers - 1, Math.floor(i / footprint.length)) * pitch,
+					z: (row - (side - 1) / 2) * pitch
+				};
+			}),
+			pitch,
+			centres: []
+		};
+	}
+	build(ctx) {
+		const { data, category, value, limit, sort, unit, gap } = this.options;
+		const shares = ShareData.collect(data, category, value, sort, limit);
+		ShareData.register(ctx, shares);
+		if (!shares.length) return;
+		const { units, pitch, centres } = this.units(shares);
+		const size = pitch * (1 - gap);
+		const geometry = unit === "cube" ? new BoxGeometry(size, size, size) : unit === "sphere" ? new SphereGeometry(size / 2, 18, 12) : new CylinderGeometry(size / 2, size / 2, size, 20);
+		const mesh = new InstancedMesh(geometry, new MeshStandardMaterial({
+			roughness: .5,
+			metalness: .04
+		}), units.length);
+		mesh.castShadow = mesh.receiveShadow = true;
+		units.forEach((d, i) => mesh.setColorAt(i, ctx.color(ShareData.fill(ctx, d.share))));
+		const dummy = new Object3D();
+		const count = units.length;
+		ctx.reveal((t) => {
+			units.forEach((d, i) => {
+				const local = Math.min(1, Math.max(0, t * 1.5 - i / count * .5));
+				dummy.position.set(d.x, FLOOR + size / 2 + d.y + (1 - local) * 1.2, d.z);
+				dummy.scale.setScalar(Math.max(.001, local));
+				dummy.updateMatrix();
+				mesh.setMatrixAt(i, dummy.matrix);
+			});
+			mesh.instanceMatrix.needsUpdate = true;
+		}, 1.2);
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => {
+			const share = units[i].share;
+			return {
+				title: share.name,
+				color: ShareData.fill(ctx, share),
+				rows: [[value, share.value], ["Share", ShareData.percent(share.fraction)]]
+			};
+		});
+		const shadow = new Mesh(new PlaneGeometry(3.2, 3.2), new ShadowMaterial({ opacity: .16 }));
+		shadow.rotation.x = -Math.PI / 2;
+		shadow.position.y = -.73;
+		shadow.receiveShadow = true;
+		ctx.root.add(shadow);
+		for (const { share, x, z } of centres) ctx.label(ShareData.percent(share.fraction), [
+			x,
+			-.78,
+			z + .34
+		], "secondary", 11);
+	}
+};
+export { UnitPath, UnitShape, Waffle3DChart, WaffleSolid };