@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/proportion/PowerDiagram.js

@@ -0,0 +1,112 @@
+import { randomLcg } from "d3";
+// src/charts/proportion/PowerDiagram.ts
+var SeedPattern = /* @__PURE__ */ function(SeedPattern) {
+	SeedPattern["Spiral"] = "spiral-seeds";
+	SeedPattern["Ring"] = "ring-seeds";
+	SeedPattern["Scatter"] = "scattered-seeds";
+	return SeedPattern;
+}({});
+var GOLDEN = Math.PI * (3 - Math.sqrt(5));
+/** Weighted (power) Voronoi cells over a convex boundary, solved so cell areas meet target shares. */
+var PowerDiagram = class {
+	/** Keeps the side of a polygon where `a·x + b·y <= c`. */
+	static clip(polygon, a, b, c) {
+		const kept = [];
+		polygon.forEach((point, i) => {
+			const next = polygon[(i + 1) % polygon.length];
+			const here = a * point[0] + b * point[1] - c, there = a * next[0] + b * next[1] - c;
+			if (here <= 0) kept.push(point);
+			if (here < 0 !== there < 0) {
+				const t = here / (here - there);
+				kept.push([point[0] + (next[0] - point[0]) * t, point[1] + (next[1] - point[1]) * t]);
+			}
+		});
+		return kept;
+	}
+	static area(polygon) {
+		return Math.abs(polygon.reduce((total, [x, y], i) => {
+			const [u, v] = polygon[(i + 1) % polygon.length];
+			return total + x * v - u * y;
+		}, 0)) / 2;
+	}
+	static centroid(polygon) {
+		let x = 0, y = 0, twice = 0;
+		polygon.forEach(([px, py], i) => {
+			const [qx, qy] = polygon[(i + 1) % polygon.length], cross = px * qy - qx * py;
+			x += (px + qx) * cross;
+			y += (py + qy) * cross;
+			twice += cross;
+		});
+		return Math.abs(twice) < 1e-9 ? polygon[0] ?? [0, 0] : [x / (3 * twice), y / (3 * twice)];
+	}
+	/** Distance from a point to the nearest edge of a convex polygon. */
+	static clearance([x, y], polygon) {
+		return Math.min(...polygon.map(([ax, ay], i) => {
+			const [bx, by] = polygon[(i + 1) % polygon.length], length = Math.hypot(bx - ax, by - ay) || 1;
+			return Math.abs((bx - ax) * (ay - y) - (ax - x) * (by - ay)) / length;
+		}));
+	}
+	/** Moves every edge of a convex polygon inward by `distance`. */
+	static inset(polygon, distance) {
+		const clockwise = polygon.reduce((total, [x, y], i) => {
+			const [u, v] = polygon[(i + 1) % polygon.length];
+			return total + x * v - u * y;
+		}, 0) < 0;
+		return polygon.reduce((shape, [ax, ay], i) => {
+			const [bx, by] = polygon[(i + 1) % polygon.length], length = Math.hypot(bx - ax, by - ay);
+			if (length < 1e-6 || shape.length < 3) return shape;
+			const sign = clockwise ? 1 : -1, nx = sign * (by - ay) / length * -1, ny = sign * (ax - bx) / length * -1;
+			return this.clip(shape, nx, ny, nx * ax + ny * ay - distance);
+		}, polygon);
+	}
+	/** SVG path with corners softened by `radius`. */
+	static rounded(polygon, radius) {
+		const n = polygon.length;
+		return polygon.map(([x, y], i) => {
+			const [px, py] = polygon[(i + n - 1) % n], [qx, qy] = polygon[(i + 1) % n];
+			const toPrev = Math.hypot(px - x, py - y) || 1, toNext = Math.hypot(qx - x, qy - y) || 1;
+			const r = Math.min(radius, toPrev / 2, toNext / 2);
+			const ax = x + (px - x) / toPrev * r, ay = y + (py - y) / toPrev * r, bx = x + (qx - x) / toNext * r, by = y + (qy - y) / toNext * r;
+			return `${i ? "L" : "M"}${ax.toFixed(1)},${ay.toFixed(1)}Q${x.toFixed(1)},${y.toFixed(1)} ${bx.toFixed(1)},${by.toFixed(1)}`;
+		}).join("") + "Z";
+	}
+	static seeds(count, boundary, pattern) {
+		const centre = this.centroid(boundary), reach = this.clearance(centre, boundary) * .7;
+		const random = randomLcg(.3719);
+		return Array.from({ length: count }, (_, i) => {
+			if (pattern === "ring-seeds") return [centre[0] + Math.cos(i / count * Math.PI * 2) * reach, centre[1] + Math.sin(i / count * Math.PI * 2) * reach];
+			if (pattern === "scattered-seeds") return [centre[0] + (random() * 2 - 1) * reach, centre[1] + (random() * 2 - 1) * reach];
+			return [centre[0] + Math.cos(i * GOLDEN) * reach * Math.sqrt((i + .5) / count), centre[1] + Math.sin(i * GOLDEN) * reach * Math.sqrt((i + .5) / count)];
+		});
+	}
+	static cells(sites, weights, boundary) {
+		return sites.map(([x, y], i) => sites.reduce((cell, [u, v], j) => {
+			if (i === j || cell.length < 3) return cell;
+			return this.clip(cell, 2 * (u - x), 2 * (v - y), u * u + v * v - x * x - y * y - weights[j] + weights[i]);
+		}, boundary));
+	}
+	/** Alternates weight correction and centroid moves until each cell holds its `fractions` share of the boundary. */
+	static solve(fractions, boundary, pattern, iterations = 120) {
+		const whole = this.area(boundary);
+		const sites = this.seeds(fractions.length, boundary, pattern);
+		const weights = fractions.map(() => 0);
+		let cells = this.cells(sites, weights, boundary);
+		for (let round = 0; round < iterations; round++) {
+			cells.forEach((cell, i) => {
+				const target = fractions[i] * whole, area = cell.length >= 3 ? this.area(cell) : 0;
+				weights[i] += (target - area) * .55;
+				if (cell.length >= 3 && round < iterations * .7) {
+					const [x, y] = this.centroid(cell);
+					sites[i] = [sites[i][0] + (x - sites[i][0]) * .6, sites[i][1] + (y - sites[i][1]) * .6];
+				}
+			});
+			const low = Math.min(...weights);
+			weights.forEach((_, i) => {
+				weights[i] -= low;
+			});
+			cells = this.cells(sites, weights, boundary);
+		}
+		return cells;
+	}
+};
+export { PowerDiagram, SeedPattern };

package/dist/charts/proportion/ProportionalAreaChart.js

@@ -0,0 +1,191 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { MarkShape, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/ProportionalAreaChart.ts
+var AreaArrange = /* @__PURE__ */ function(AreaArrange) {
+	AreaArrange["Row"] = "side-by-side";
+	AreaArrange["Grid"] = "grid";
+	AreaArrange["Nested"] = "nested";
+	AreaArrange["Concentric"] = "concentric";
+	return AreaArrange;
+}({});
+var AreaLabel = /* @__PURE__ */ function(AreaLabel) {
+	AreaLabel["Caption"] = "captions";
+	AreaLabel["Inside"] = "inside";
+	AreaLabel["None"] = "unlabelled";
+	return AreaLabel;
+}({});
+var RAIL = 104;
+var CAPTION = 18;
+var outline = (symbol, size) => {
+	const half = (size / 2).toFixed(2), reach = (size * Math.SQRT1_2).toFixed(2);
+	if (symbol === MarkShape.Circle) {
+		const r = (size / Math.sqrt(Math.PI)).toFixed(2);
+		return `M0,-${r}A${r},${r} 0 1,1 0,${r}A${r},${r} 0 1,1 0,-${r}Z`;
+	}
+	if (symbol === MarkShape.Diamond) return `M0,-${reach}L${reach},0L0,${reach}L-${reach},0Z`;
+	return `M-${half},-${half}H${half}V${half}H-${half}Z`;
+};
+/** Scale comparison across orders of magnitude, where bars would flatten the small values. */
+var ProportionalAreaChart = class extends ShareChart {
+	static meta = {
+		id: "proportional-area",
+		name: "Proportional area chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares amounts as shapes whose area, never side length, is proportional to the value.",
+		tags: [
+			"area chart",
+			"nested squares",
+			"scaled shapes"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 1).map((row, i) => ({
+			...row,
+			value: Number(row.value) * 1.7 ** i
+		})),
+		variants: {
+			arrange: [
+				"side-by-side",
+				"grid",
+				"nested",
+				"concentric"
+			],
+			symbol: [
+				MarkShape.Circle,
+				MarkShape.Square,
+				MarkShape.Diamond
+			],
+			labels: [
+				"captions",
+				"inside",
+				"unlabelled"
+			],
+			sort: [ShareSort.Descending, ShareSort.Data]
+		},
+		valid: (values) => {
+			return !(values.arrange === "nested" || values.arrange === "concentric") || values.labels !== "inside" && values.sort === ShareSort.Descending;
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			arrange: "side-by-side",
+			symbol: MarkShape.Circle,
+			labels: "captions"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.labels === "unlabelled" ? LegendPosition.Top : LegendPosition.None);
+	}
+	/** Side of the square with the same area as the mark's bounding reach, per unit of `size`. */
+	get extent() {
+		return this.options.symbol === MarkShape.Square ? 1 : this.options.symbol === MarkShape.Circle ? 2 / Math.sqrt(Math.PI) : Math.SQRT2;
+	}
+	row(shares, width, height) {
+		const roots = shares.map((share) => Math.sqrt(share.value)), gap = 12;
+		const scale = Math.min((width - gap * (shares.length - 1)) / roots.reduce((a, b) => a + b, 0), height / Math.max(...roots)) / this.extent;
+		let x = (width - roots.reduce((a, b) => a + b * scale * this.extent, 0) - gap * (shares.length - 1)) / 2;
+		const floor = (height + Math.max(...roots) * scale * this.extent) / 2;
+		return shares.map((share, i) => {
+			const size = roots[i] * scale, wide = size * this.extent, at = x + wide / 2;
+			x += wide + gap;
+			return {
+				share,
+				x: at,
+				y: floor - wide / 2,
+				size
+			};
+		});
+	}
+	grid(shares, width, height) {
+		const columns = Math.max(1, Math.round(Math.sqrt(shares.length * width / Math.max(1, height))));
+		const lines = Math.ceil(shares.length / columns), cellW = width / columns, cellH = height / lines;
+		const top = Math.sqrt(Math.max(...shares.map((share) => share.value)));
+		const scale = (Math.min(cellW, cellH) - 6) / top / this.extent;
+		return shares.map((share, i) => ({
+			share,
+			x: (i % columns + .5) * cellW,
+			y: (Math.floor(i / columns) + .5) * cellH,
+			size: Math.sqrt(share.value) * scale
+		}));
+	}
+	stacked(shares, width, height) {
+		const scale = Math.min(width, height) / Math.sqrt(Math.max(...shares.map((share) => share.value))) / this.extent;
+		const centred = this.options.arrange === "concentric";
+		return shares.map((share) => {
+			const size = Math.sqrt(share.value) * scale;
+			return {
+				share,
+				x: width / 2,
+				y: centred ? height / 2 : height - size * this.extent / 2,
+				size
+			};
+		});
+	}
+	drawShares(ctx, shares) {
+		const { arrange, labels, symbol, value } = this.options;
+		const stacked = arrange === "nested" || arrange === "concentric";
+		const captions = labels === "captions";
+		const width = ctx.plot.width - (stacked && captions ? RAIL : 0), height = ctx.plot.height - (!stacked && captions ? CAPTION : 0);
+		const order = stacked ? [...shares].sort((a, b) => b.value - a.value) : shares;
+		const placed = arrange === "side-by-side" ? this.row(order, width, height) : arrange === "grid" ? this.grid(order, width, ctx.plot.height - (captions ? CAPTION : 0)) : this.stacked(order, width, height);
+		const marks = ctx.marks("shapes", "path", placed, (d) => d.share.name).attr("fill", (d) => ShareData.fill(ctx, d.share)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		const at = (d) => `translate(${d.x.toFixed(2)},${d.y.toFixed(2)})`;
+		ctx.set(marks, {
+			d: (d) => outline(symbol, d.size),
+			transform: (d) => `${at(d)} scale(1)`
+		}, { transform: (d) => `${at(d)} scale(0)` }, 50);
+		ctx.hover(marks, (d) => ({
+			title: d.share.name,
+			color: ShareData.fill(ctx, d.share),
+			rows: [[value, d.share.value], ["Share", ShareData.percent(d.share.fraction)]]
+		}));
+		const reach = (d) => d.size * this.extent / 2;
+		const inside = (labels === "inside" ? placed : []).filter((d) => reach(d) * (symbol === MarkShape.Square ? 2 : 1.5) > ShareData.width("00%") + 6);
+		const written = ctx.text(ctx.marks("inside", "text", inside, (d) => d.share.name)).attr("fill", (d) => ShareData.ink(ctx, ShareData.fill(ctx, d.share))).attr("text-anchor", "middle").attr("font-weight", 600).attr("pointer-events", "none").text((d) => ShareData.percent(d.share.fraction));
+		ctx.set(written, {
+			x: (d) => d.x,
+			y: (d) => d.y + 4
+		});
+		const room = width / Math.max(1, new Set(placed.map((d) => d.x)).size) - 4;
+		const under = (captions && !stacked ? placed : []).map((d) => {
+			const pad = arrange === "side-by-side" ? Math.max(room, reach(d) * 2) : room;
+			return {
+				key: d.share.name,
+				x: d.x,
+				y: arrange === "side-by-side" ? Math.max(...placed.map((p) => p.y + reach(p))) + 14 : d.y + reach(d) + 12,
+				text: ShareData.fit(d.share.name, pad)
+			};
+		});
+		const names = ctx.text(ctx.marks("captions", "text", under, (d) => d.key)).attr("text-anchor", "middle").text((d) => d.text);
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const tops = stacked && captions ? placed.map((d) => ({
+			d,
+			top: d.y - reach(d)
+		})).sort((a, b) => a.top - b.top) : [];
+		const rails = ShareData.dodge(tops.map((t) => t.top + 5), 15, 8, ctx.plot.height - 4);
+		const notes = tops.map(({ d }, i) => {
+			const startY = d.y - reach(d) + 5, startX = d.x, y = rails[i];
+			return {
+				key: d.share.name,
+				y,
+				path: `M${startX.toFixed(1)},${startY.toFixed(1)}L${(width + 4).toFixed(1)},${y.toFixed(1)}L${(width + 12).toFixed(1)},${y.toFixed(1)}`,
+				text: `${ShareData.fit(d.share.name, 54)}  ${ShareData.percent(d.share.fraction)}`
+			};
+		});
+		ctx.set(ctx.marks("leaders", "path", notes, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1), { d: (d) => d.path });
+		const rail = ctx.text(ctx.marks("rail", "text", notes, (d) => d.key)).attr("dy", 4).text((d) => d.text);
+		ctx.set(rail, {
+			x: width + 16,
+			y: (d) => d.y
+		});
+	}
+};
+export { AreaArrange, AreaLabel, ProportionalAreaChart };

package/dist/charts/proportion/PyramidChart.js

@@ -0,0 +1,154 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareChart } from "./ShareChart.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/PyramidChart.ts
+var PyramidApex = /* @__PURE__ */ function(PyramidApex) {
+	PyramidApex["Up"] = "apex-up";
+	PyramidApex["Down"] = "apex-down";
+	return PyramidApex;
+}({});
+/** Which measure of a band follows its value. `Area` is the honest default for a triangle. */
+var PyramidSizing = /* @__PURE__ */ function(PyramidSizing) {
+	PyramidSizing["Area"] = "by-area";
+	PyramidSizing["Height"] = "by-height";
+	PyramidSizing["Equal"] = "equal-height";
+	return PyramidSizing;
+}({});
+var PyramidForm = /* @__PURE__ */ function(PyramidForm) {
+	PyramidForm["Triangle"] = "triangle";
+	PyramidForm["Stepped"] = "stepped";
+	return PyramidForm;
+}({});
+var PyramidLabel = /* @__PURE__ */ function(PyramidLabel) {
+	PyramidLabel["Side"] = "side";
+	PyramidLabel["Inside"] = "inside";
+	PyramidLabel["None"] = "unlabelled";
+	return PyramidLabel;
+}({});
+var RAIL = 112;
+/** Parts of a whole with a natural rank: foundation at the base, the few at the tip. */
+var PyramidChart = class extends ShareChart {
+	static meta = {
+		id: "pyramid",
+		name: "Pyramid chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Slices a triangle into ranked layers so each part of a whole sits at its level in a hierarchy.",
+		tags: [
+			"triangle",
+			"hierarchy of needs",
+			"ranked share"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 1),
+		variants: {
+			apex: ["apex-up", "apex-down"],
+			sizing: [
+				"by-area",
+				"by-height",
+				"equal-height"
+			],
+			form: ["triangle", "stepped"],
+			labels: [
+				"side",
+				"inside",
+				"unlabelled"
+			],
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			]
+		},
+		valid: (values) => values.sizing !== "equal-height" || values.sort === ShareSort.Descending
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			apex: "apex-up",
+			sizing: "by-area",
+			form: "triangle",
+			labels: "side"
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.options.labels === "side" ? LegendPosition.None : LegendPosition.Top);
+	}
+	/** Layers from the tip (0) to the base (1). In `Area` mode a layer's share of the triangle equals its share of the whole. */
+	layers(shares) {
+		const { sizing } = this.options;
+		const fromTip = [...shares].reverse();
+		let area = 0;
+		return fromTip.map((share, i) => {
+			const before = area;
+			area += sizing === "equal-height" ? 1 / shares.length : share.fraction;
+			const at = (mass) => sizing === "by-area" ? Math.sqrt(mass) : mass;
+			return {
+				share,
+				from: at(before),
+				to: i === fromTip.length - 1 ? 1 : at(area)
+			};
+		});
+	}
+	drawShares(ctx, shares) {
+		const { apex, form, labels, value } = this.options;
+		const { height } = ctx.plot, side = labels === "side";
+		const width = ctx.plot.width - (side ? RAIL : 0);
+		const up = apex === "apex-up", cx = width / 2;
+		const fromTop = (t) => (up ? t : 1 - t) * height;
+		const half = (t) => t * width / 2;
+		const layers = this.layers(shares);
+		const yOf = (t, shift) => fromTop(t) + (up ? shift : -shift);
+		const outline = (d, scale = 1) => {
+			const gap = d.from > 0 ? 1 : 0, y0 = yOf(d.from, gap), y1 = yOf(d.to, -1);
+			const stepped = form === "stepped";
+			const w0 = half(stepped ? (d.from + d.to) / 2 : d.from) * scale, w1 = half(stepped ? (d.from + d.to) / 2 : d.to) * scale;
+			return `M${(cx - w0).toFixed(2)},${y0.toFixed(2)}L${(cx + w0).toFixed(2)},${y0.toFixed(2)}L${(cx + w1).toFixed(2)},${y1.toFixed(2)}L${(cx - w1).toFixed(2)},${y1.toFixed(2)}Z`;
+		};
+		const paths = ctx.marks("layers", "path", layers, (d) => d.share.name).attr("fill", (d) => ShareData.fill(ctx, d.share));
+		ctx.set(paths, { d: (d) => outline(d) }, { d: (d) => outline(d, 0) }, 50);
+		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 centre = (d) => (fromTop(d.from) + fromTop(d.to)) / 2;
+		const inner = (labels === "inside" ? layers : []).flatMap((d) => {
+			const text = ShareData.percent(d.share.fraction), room = form === "stepped" ? half((d.from + d.to) / 2) * 2 : half(Math.min(d.from, d.to) + (d.to - d.from) / 2) * 2;
+			if (ShareData.width(text) > room - 8 || Math.abs(fromTop(d.to) - fromTop(d.from)) < 15) return [];
+			return [{
+				key: d.share.name,
+				text,
+				y: centre(d) + 4,
+				fill: ShareData.ink(ctx, ShareData.fill(ctx, d.share))
+			}];
+		});
+		const written = ctx.text(ctx.marks("inside", "text", inner, (d) => d.key)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("font-weight", 600).attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(written, {
+			x: cx,
+			y: (d) => d.y
+		});
+		const ordered = (side ? [...layers] : []).sort((a, b) => centre(a) - centre(b));
+		const rails = ShareData.dodge(ordered.map(centre), 15, 8, height - 4);
+		const notes = ordered.map((d, i) => {
+			const y = rails[i], wall = cx + half((d.from + d.to) / 2) + 1, end = width + 6;
+			return {
+				key: d.share.name,
+				y,
+				path: `M${wall.toFixed(1)},${centre(d).toFixed(1)}L${(end - 8).toFixed(1)},${y.toFixed(1)}L${end.toFixed(1)},${y.toFixed(1)}`,
+				text: `${ShareData.fit(d.share.name, 68)}  ${ShareData.percent(d.share.fraction)}`,
+				x: end + 4
+			};
+		});
+		ctx.set(ctx.marks("leaders", "path", notes, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1), { d: (d) => d.path });
+		const names = ctx.text(ctx.marks("notes", "text", notes, (d) => d.key)).attr("dy", 4).text((d) => d.text);
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { PyramidApex, PyramidChart, PyramidForm, PyramidLabel, PyramidSizing };

package/dist/charts/proportion/SemiDonutChart.js

@@ -0,0 +1,106 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PieBase } from "./PieBase.js";
+import { ShareData } from "./ShareData.js";
+import { PieLabel, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/SemiDonutChart.ts
+var SemiOpening = /* @__PURE__ */ function(SemiOpening) {
+	SemiOpening["Down"] = "opens-down";
+	SemiOpening["Up"] = "opens-up";
+	SemiOpening["Left"] = "opens-left";
+	SemiOpening["Right"] = "opens-right";
+	return SemiOpening;
+}({});
+var CENTRE = {
+	["opens-down"]: 0,
+	["opens-right"]: -Math.PI / 2,
+	["opens-up"]: Math.PI,
+	["opens-left"]: Math.PI / 2
+};
+/** A share split on a shallow arc: compact in dashboards, and the ends read like a scale. */
+var SemiDonutChart = class extends PieBase {
+	static meta = {
+		id: "semi-donut",
+		name: "Semi donut",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lays parts of a whole along a half ring or horseshoe, using less height than a full donut.",
+		tags: [
+			"half donut",
+			"horseshoe",
+			"semicircle"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 1),
+		variants: {
+			arc: [
+				180,
+				240,
+				120
+			],
+			opening: [
+				"opens-down",
+				"opens-up",
+				"opens-left",
+				"opens-right"
+			],
+			hole: [.6, .78],
+			labels: [
+				PieLabel.Callout,
+				PieLabel.Inside,
+				PieLabel.None
+			],
+			sort: [ShareSort.Descending, ShareSort.Data]
+		},
+		valid: (values) => !(values.labels === PieLabel.Inside && values.hole === .78)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			arc: 180,
+			opening: "opens-down",
+			hole: .6
+		};
+	}
+	hole() {
+		return this.options.hole;
+	}
+	span() {
+		return this.options.arc * Math.PI / 180;
+	}
+	origin() {
+		return CENTRE[this.options.opening] - this.span() / 2;
+	}
+	stage(plot, shares) {
+		const start = this.origin(), steps = 72;
+		const rim = Array.from({ length: 73 }, (_, i) => start + this.span() * i / steps);
+		const xs = rim.flatMap((angle) => [Math.sin(angle), Math.sin(angle) * this.hole()]), ys = rim.flatMap((angle) => [-Math.cos(angle), -Math.cos(angle) * this.hole()]);
+		const [x0, x1, y0, y1] = [
+			Math.min(...xs),
+			Math.max(...xs),
+			Math.min(...ys),
+			Math.max(...ys)
+		];
+		const side = this.outside ? Math.min(96, Math.max(...shares.map((share) => ShareData.width(`${share.name}  00%`))) + 26) : 0;
+		const pad = this.outside ? 12 : 0;
+		const radius = Math.max(32, Math.min((plot.width - side * 2) / (x1 - x0), (plot.height - pad * 2) / (y1 - y0)));
+		const x = -(x0 + x1) / 2 * radius, y = -(y0 + y1) / 2 * radius;
+		return {
+			x,
+			y,
+			radius,
+			left: -plot.width / 2 - x,
+			right: plot.width / 2 - x,
+			top: -plot.height / 2 - y,
+			bottom: plot.height / 2 - y
+		};
+	}
+	decorate(ctx, shares, stage) {
+		const lead = shares.reduce((top, share) => share.value > top.value ? share : top);
+		const room = this.options.arc >= 180 && this.options.hole * stage.radius > 44;
+		const text = ctx.marks("lead", "text", room ? [lead] : [], (d) => d.name).attr("text-anchor", "middle").attr("font-family", ctx.theme.fontFamily).attr("fill", ctx.theme.ink).attr("font-size", 22).attr("font-weight", 600).text((d) => ShareData.percent(d.fraction));
+		ctx.set(text, { y: Math.cos(CENTRE[this.options.opening]) > .5 ? -4 : Math.cos(CENTRE[this.options.opening]) < -.5 ? 18 : 8 });
+	}
+};
+export { SemiDonutChart, SemiOpening };

package/dist/charts/proportion/SetData.js

@@ -0,0 +1,56 @@
+import { SampleData } from "../../data/SampleData.js";
+// src/charts/proportion/SetData.ts
+var degreeOf = (mask) => {
+	let count = 0;
+	for (let m = mask; m; m &= m - 1) count++;
+	return count;
+};
+/** Parses set-membership rows such as `{ sets: 'A&B', value: 12 }`, where each row is an exclusive combination. */
+var SetData = class {
+	static collect(rows, field, value, separator, limit) {
+		const parsed = (Array.isArray(rows) ? rows : []).flatMap((row) => {
+			const amount = Number(row?.[value]), names = [...new Set(String(row?.[field] ?? "").split(separator).map((name) => name.trim()).filter(Boolean))];
+			return Number.isFinite(amount) && amount > 0 && names.length ? [{
+				names,
+				amount
+			}] : [];
+		});
+		const sizes = /* @__PURE__ */ new Map();
+		for (const { names, amount } of parsed) for (const name of names) sizes.set(name, (sizes.get(name) ?? 0) + amount);
+		const kept = new Set([...sizes].sort((a, b) => b[1] - a[1]).slice(0, Math.min(limit, 30)).map(([name]) => name));
+		const names = [...sizes.keys()].filter((name) => kept.has(name));
+		const merged = /* @__PURE__ */ new Map();
+		for (const row of parsed) {
+			const mask = row.names.reduce((bits, name) => kept.has(name) ? bits | 1 << names.indexOf(name) : bits, 0);
+			if (mask) merged.set(mask, (merged.get(mask) ?? 0) + row.amount);
+		}
+		const regions = [...merged].map(([mask, amount]) => ({
+			mask,
+			names: this.members(mask, names),
+			degree: degreeOf(mask),
+			value: amount
+		}));
+		return {
+			names,
+			regions,
+			total: regions.reduce((sum, region) => sum + region.value, 0),
+			sizes: names.map((_, i) => regions.reduce((sum, region) => sum + (region.mask & 1 << i ? region.value : 0), 0))
+		};
+	}
+	static members(mask, names) {
+		return names.filter((_, i) => mask & 1 << i);
+	}
+	/** Six named sets over `SampleData.categories`, thinning as combinations get wider. */
+	static sample(seed, sets = 6) {
+		const rows = SampleData.categories(seed, 12, 8);
+		const names = [...new Set(rows.map((row) => String(row.series)))].slice(0, sets);
+		return Array.from({ length: 2 ** names.length - 1 }, (_, i) => {
+			const mask = i + 1, degree = degreeOf(mask);
+			return {
+				sets: this.members(mask, names).join("&"),
+				value: Math.max(1, Math.round(Number(rows[i].value) * (1.4 - i / 90) * 4 / 2 ** degree))
+			};
+		});
+	}
+};
+export { SetData };