@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/proportion/ParliamentChart.js

@@ -0,0 +1,221 @@
+import { ChartFamily, DataShape, Dimension } 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";
+import { range } from "d3";
+// src/charts/proportion/ParliamentChart.ts
+var ParliamentLayout = /* @__PURE__ */ function(ParliamentLayout) {
+	ParliamentLayout["Hemicycle"] = "hemicycle";
+	ParliamentLayout["Horseshoe"] = "horseshoe";
+	ParliamentLayout["Ring"] = "ring";
+	ParliamentLayout["Westminster"] = "westminster";
+	ParliamentLayout["Classroom"] = "classroom";
+	return ParliamentLayout;
+}({});
+/** `Wedge` seats a party in one block from aisle to wall; `Band` fills the chamber row by row. */
+var SeatOrder = /* @__PURE__ */ function(SeatOrder) {
+	SeatOrder["Wedge"] = "wedges";
+	SeatOrder["Band"] = "bands";
+	return SeatOrder;
+}({});
+var SPANS = {
+	["hemicycle"]: Math.PI,
+	["horseshoe"]: Math.PI * 4 / 3,
+	["ring"]: Math.PI * 1.96
+};
+var HOLE = .38;
+/** Seat counts where the majority line is the story: chambers, boards, committees. */
+var ParliamentChart = class extends ShareChart {
+	static meta = {
+		id: "parliament",
+		name: "Parliament chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Seats one mark per member in chamber rows so party blocks and the majority line read at a glance.",
+		tags: [
+			"seats",
+			"hemicycle",
+			"election",
+			"unit chart"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 1).map((row) => ({
+			...row,
+			value: Math.round(Number(row.value) * .85)
+		})),
+		variants: {
+			layout: [
+				"hemicycle",
+				"horseshoe",
+				"ring",
+				"westminster",
+				"classroom"
+			],
+			order: ["wedges", "bands"],
+			symbol: [
+				MarkShape.Circle,
+				MarkShape.Square,
+				MarkShape.Diamond
+			],
+			majority: [true, false]
+		},
+		valid: (values) => values.layout !== "classroom" || values.majority === false
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending,
+			layout: "hemicycle",
+			order: "wedges",
+			symbol: MarkShape.Circle,
+			majority: true,
+			limit: 8
+		};
+	}
+	/** Concentric rows: seats per row follow row length, spacing shrinks until every seat fits. */
+	arcs(seats, span, radius) {
+		const inner = radius * HOLE;
+		let pitch = Math.sqrt(span / 2 * (radius ** 2 - inner ** 2) / Math.max(1, seats));
+		for (let tries = 0; tries < 80; tries++, pitch *= .98) {
+			const rows = range(Math.max(1, Math.floor((radius - inner) / pitch))).map((i) => radius - pitch / 2 - i * pitch);
+			const lengths = rows.map((r) => r * span), total = lengths.reduce((sum, length) => sum + length, 0);
+			const room = lengths.map((length) => Math.floor(length / pitch));
+			if (room.reduce((sum, count) => sum + count, 0) < seats) continue;
+			const counts = ShareData.allocate(lengths.map((length) => ({ fraction: length / total })), seats).map((count, i) => Math.min(count, room[i]));
+			for (let left = seats - counts.reduce((sum, n) => sum + n, 0), i = 0; left > 0; i = (i + 1) % rows.length) if (counts[i] < room[i]) {
+				counts[i] += 1;
+				left--;
+			}
+			return {
+				places: rows.flatMap((r, row) => range(counts[row]).map((i) => {
+					const sweep = counts[row] === 1 ? .5 : i / (counts[row] - 1), angle = -span / 2 + sweep * span;
+					return {
+						x: Math.sin(angle) * r,
+						y: -Math.cos(angle) * r,
+						sweep,
+						row
+					};
+				})),
+				pitch
+			};
+		}
+		return {
+			places: [],
+			pitch
+		};
+	}
+	benches(seats, width, height, counts) {
+		const government = counts[0] ?? seats, others = seats - government;
+		const longest = Math.max(government, others);
+		const fit = (columns) => Math.min(width / columns, (height * .5 - 8) / Math.ceil(longest / columns));
+		const rows = range(1, longest + 1).reduce((best, columns) => fit(columns) > fit(best) ? columns : best, 1);
+		const pitch = fit(rows);
+		const lay = (count, sign, offset) => range(count).map((i) => {
+			const column = i % rows, depth = Math.floor(i / rows);
+			return {
+				x: (column - (rows - 1) / 2) * pitch,
+				y: sign * (10 + (depth + .5) * pitch),
+				sweep: (offset + i) / seats,
+				row: depth
+			};
+		});
+		return {
+			places: [...lay(government, -1, 0), ...lay(others, 1, government)],
+			pitch
+		};
+	}
+	classroom(seats, width, height) {
+		const cols = Math.max(1, Math.ceil(Math.sqrt(seats * width / Math.max(1, height))));
+		const lines = Math.ceil(seats / cols), pitch = Math.min(width / cols, height / lines);
+		return {
+			pitch,
+			places: range(seats).map((i) => {
+				const line = Math.floor(i / cols);
+				return {
+					x: (i % cols - (cols - 1) / 2) * pitch,
+					y: (line - (lines - 1) / 2) * pitch,
+					sweep: i % cols / cols,
+					row: line
+				};
+			})
+		};
+	}
+	drawShares(ctx, shares) {
+		const { layout, order, symbol, majority, value, seats: wanted } = this.options;
+		const { width, height } = ctx.plot;
+		const whole = shares.reduce((total, share) => total + share.value, 0);
+		const seats = Math.min(1500, Math.max(1, Math.round(wanted ?? whole)));
+		const counts = ShareData.allocate(shares, seats);
+		const span = SPANS[layout];
+		const radius = span ? Math.min(width / 2, height / (span >= 6 ? 2 : span > Math.PI ? 1 + Math.sin(span / 2 - Math.PI / 2) : 1)) : 0;
+		const hall = span ? this.arcs(seats, span, radius) : layout === "westminster" ? this.benches(seats, width, height, counts) : this.classroom(seats, width, height);
+		const cy = !span ? height / 2 : span >= 6 ? height / 2 : radius;
+		const ordered = [...hall.places].sort(order === "wedges" ? (a, b) => a.sweep - b.sweep || a.row - b.row : (a, b) => a.row - b.row || a.sweep - b.sweep);
+		let cursor = 0;
+		const seated = shares.flatMap((share, s) => range(counts[s]).flatMap((i) => {
+			const place = ordered[cursor++];
+			return place ? [{
+				key: `${share.name}.${i}`,
+				...place,
+				share,
+				size: Math.max(2, hall.pitch * .82),
+				x: width / 2 + place.x,
+				y: cy + place.y
+			}] : [];
+		}));
+		const side = (d) => d.size * (symbol === MarkShape.Diamond ? .74 : 1);
+		const marks = ctx.marks("seats", "rect", seated, (d) => d.key).attr("fill", (d) => ShareData.fill(ctx, d.share));
+		ctx.set(marks, {
+			x: (d) => (d.x - side(d) / 2).toFixed(2),
+			y: (d) => (d.y - side(d) / 2).toFixed(2),
+			width: (d) => side(d).toFixed(2),
+			height: (d) => side(d).toFixed(2),
+			rx: (d) => (symbol === MarkShape.Circle ? side(d) / 2 : Math.min(2, side(d) * .22)).toFixed(2),
+			transform: (d) => symbol === MarkShape.Diamond ? `rotate(45,${d.x.toFixed(2)},${d.y.toFixed(2)})` : null
+		}, {
+			width: 0,
+			height: 0
+		}, 1);
+		ctx.hover(marks, (d) => ({
+			title: d.share.name,
+			color: ShareData.fill(ctx, d.share),
+			rows: [
+				[value, d.share.value],
+				["Seats", counts[shares.indexOf(d.share)]],
+				["Share", ShareData.percent(d.share.fraction)]
+			]
+		}));
+		const needed = Math.floor(seats / 2) + 1;
+		const rule = majority ? this.majorityRule(layout, width, height, cy, radius, span) : null;
+		ctx.set(ctx.marks("majority", "path", rule ? [rule] : []).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 1).attr("stroke-dasharray", "3 3"), { d: (d) => d.path });
+		const note = ctx.text(ctx.marks("majority-note", "text", rule ? [rule] : []), 11, "ink").attr("text-anchor", (d) => d.anchor).text(ShareData.width(`${needed} of ${seats} for a majority`) <= radius * HOLE * 1.8 || !span ? `${needed} of ${seats} for a majority` : `Majority ${needed}`);
+		ctx.set(note, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+	majorityRule(layout, width, height, cy, radius, span) {
+		const cx = width / 2;
+		if (span && span < 6) return {
+			path: `M${cx},${cy - (radius * HOLE - 2)}V${cy - radius}`,
+			x: cx,
+			y: cy - 8 - (span > Math.PI ? radius * .1 : 0),
+			anchor: "middle"
+		};
+		if (span) return {
+			path: `M${cx},${cy - radius * HOLE + 2}V${cy - radius}`,
+			x: cx,
+			y: cy + 4,
+			anchor: "middle"
+		};
+		if (layout === "westminster") return {
+			path: `M0,${height / 2}H${width}`,
+			x: width,
+			y: height / 2 - 4,
+			anchor: "end"
+		};
+		return null;
+	}
+};
+export { ParliamentChart, ParliamentLayout, SeatOrder };

package/dist/charts/proportion/PieBase.js

@@ -0,0 +1,189 @@
+import { LegendPosition } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { ShareData } from "./ShareData.js";
+import { PieAnchor, PieLabel, PieSweep, ShareSort } from "./ShareEnums.js";
+import { easeCubicOut, interpolateNumber, pie } from "d3";
+// src/charts/proportion/PieBase.ts
+var TAU = Math.PI * 2;
+var ROW = 14;
+var mid = (slice) => (slice.startAngle + slice.endAngle) / 2;
+var polar = (angle, radius) => [Math.sin(angle) * radius, -Math.cos(angle) * radius];
+/** Shared geometry of angle-encoded charts: slices, sweep-in, callouts and inside labels. */
+var PieBase = class extends RadialChart {
+	defaults() {
+		return {
+			category: "category",
+			value: "value",
+			sort: ShareSort.Data,
+			limit: 8,
+			labels: PieLabel.Callout,
+			anchor: PieAnchor.Top,
+			direction: PieSweep.Clockwise
+		};
+	}
+	/** Directly labelled pies do not repeat themselves with a legend. */
+	get legendPosition() {
+		return this.options.legend ?? (this.outside ? LegendPosition.None : LegendPosition.Top);
+	}
+	get outside() {
+		return this.options.labels === PieLabel.Callout || this.options.labels === PieLabel.Spider;
+	}
+	/** Inner radius as a fraction of the outer radius. */
+	hole() {
+		return 0;
+	}
+	/** Swept angle, in radians. */
+	span() {
+		return TAU;
+	}
+	origin(shares) {
+		const lead = this.options.anchor === PieAnchor.Balanced ? (shares[0]?.fraction ?? 0) * this.span() / 2 : 0;
+		return this.options.direction === PieSweep.CounterClockwise ? lead : -lead;
+	}
+	/** How far marks reach beyond the radius, as a multiple of it. */
+	reach() {
+		return 1;
+	}
+	/** Distance a slice is pulled out along its mid-angle, in px. */
+	offset(_slice, _radius) {
+		return 0;
+	}
+	outer(_slice, radius) {
+		return radius;
+	}
+	/** Runs once the shares are known and before any geometry is read. */
+	prepare(_shares) {}
+	/** Extra marks drawn on top, in stage coordinates. */
+	decorate(_ctx, _shares, _stage) {}
+	stage(plot, shares) {
+		const side = this.outside ? Math.min(96, Math.max(...shares.map((share) => ShareData.width(this.caption(share)))) + 26) : 0;
+		const room = Math.min(plot.width / 2 - side, plot.height / 2 - (this.outside ? 10 : 0));
+		return {
+			x: 0,
+			y: 0,
+			radius: Math.max(32, room / this.reach()),
+			left: -plot.width / 2,
+			right: plot.width / 2,
+			top: -plot.height / 2,
+			bottom: plot.height / 2
+		};
+	}
+	drawRadial(ctx, _frame) {
+		const { data, category, value, sort, limit, direction } = this.options;
+		const shares = ShareData.collect(data, category, value, sort, limit);
+		ShareData.register(ctx, shares);
+		if (ShareData.noData(ctx, !shares.length, 0, 0)) return;
+		this.prepare(shares);
+		const stage = this.stage(ctx.plot, shares);
+		const inner = ctx.nest(`translate(${stage.x},${stage.y})`, "stage");
+		const start = this.origin(shares), sign = direction === PieSweep.CounterClockwise ? -1 : 1;
+		const slices = pie().value((share) => share.value).sort(null).startAngle(start).endAngle(start + sign * this.span())(shares);
+		const hole = this.hole() * stage.radius;
+		const shape = ShareData.arcs(() => hole, (slice) => this.outer(slice, stage.radius), stage.radius, slices.length > 1 ? 2 : 0);
+		const paths = ctx.marks("slices", "path", slices, (slice) => slice.data.name, inner.root).attr("fill", (slice) => ShareData.fill(ctx, slice.data));
+		ctx.set(paths, { transform: (slice) => this.shift(slice, stage.radius) });
+		this.sweep(paths, shape, start);
+		ctx.hover(paths, (slice) => ({
+			title: slice.data.name,
+			color: ShareData.fill(ctx, slice.data),
+			rows: [[value, slice.data.value], ["Share", ShareData.percent(slice.data.fraction)]]
+		}));
+		this.drawInside(inner, slices, shape, stage);
+		this.drawCallouts(inner, slices, stage);
+		this.decorate(inner, shares, stage);
+	}
+	shift(slice, radius) {
+		const [x, y] = polar(mid(slice), this.offset(slice, radius));
+		return `translate(${x.toFixed(2)},${y.toFixed(2)})`;
+	}
+	/** Path strings cannot tween through arc flags, so slices interpolate their angles instead. */
+	sweep(paths, shape, rest) {
+		if (!this.animated) {
+			paths.attr("d", (slice) => shape(slice));
+			return;
+		}
+		paths.transition("sweep").duration(750).ease(easeCubicOut).delay((_, i) => i * 24).attrTween("d", function(slice) {
+			const node = this;
+			const [from, to] = node.__slice ?? [rest, rest];
+			const start = interpolateNumber(from, slice.startAngle), end = interpolateNumber(to, slice.endAngle);
+			node.__slice = [slice.startAngle, slice.endAngle];
+			return (t) => shape({
+				...slice,
+				startAngle: start(t),
+				endAngle: end(t)
+			}) ?? "";
+		});
+	}
+	caption(share) {
+		return `${share.name}  ${ShareData.percent(share.fraction)}`;
+	}
+	drawInside(ctx, slices, shape, stage) {
+		const { radius } = stage;
+		const placed = (this.options.labels === PieLabel.Inside ? slices : []).flatMap((slice) => {
+			const inner = this.hole() * radius, outer = this.outer(slice, radius), depth = outer - inner;
+			const at = inner ? (inner + outer) / 2 : outer * .64;
+			const chord = Math.min(Math.PI, Math.abs(slice.endAngle - slice.startAngle)) * at;
+			const share = ShareData.percent(slice.data.fraction);
+			const fits = (wide, tall) => Math.hypot(wide, tall) <= Math.min(chord * .92, inner ? depth * 1.1 : outer);
+			if (!fits(ShareData.width(share), 13)) return [];
+			const name = fits(ShareData.width(slice.data.name), 28) ? [slice.data.name] : [];
+			const [x, y] = polar(mid(slice), at + this.offset(slice, radius));
+			return [{
+				key: slice.data.name,
+				lines: [...name, share],
+				x,
+				y,
+				fill: ShareData.ink(ctx, ShareData.fill(ctx, slice.data))
+			}];
+		});
+		const labels = ctx.marks("inside", "text", placed, (d) => d.key).attr("text-anchor", "middle").attr("pointer-events", "none");
+		ctx.text(labels).attr("fill", (d) => d.fill);
+		labels.selectAll("tspan").data((d) => d.lines.map((line, i) => ({
+			line,
+			dy: i ? 13 : d.lines.length > 1 ? -2 : 4
+		}))).join("tspan").attr("x", 0).attr("dy", (d) => d.dy).attr("font-weight", (_, i, all) => i === all.length - 1 ? 600 : 400).text((d) => d.line);
+		ctx.set(labels, { transform: (d) => `translate(${d.x.toFixed(1)},${d.y.toFixed(1)})` });
+	}
+	callouts(slices, stage) {
+		const { radius } = stage, spider = this.options.labels === PieLabel.Spider;
+		const rows = Math.max(1, Math.floor((stage.bottom - stage.top) / ROW));
+		return [1, -1].flatMap((side) => {
+			const points = slices.filter((slice) => (Math.sin(mid(slice)) >= 0 ? 1 : -1) === side).sort((a, b) => b.value - a.value).slice(0, rows).map((slice) => {
+				const angle = mid(slice), reach = this.outer(slice, radius) + this.offset(slice, radius);
+				return {
+					slice,
+					rim: polar(angle, reach),
+					elbow: polar(angle, reach + 11)
+				};
+			}).sort((a, b) => a.elbow[1] - b.elbow[1]);
+			const rails = ShareData.dodge(points.map((point) => point.elbow[1]), ROW, stage.top + 6, stage.bottom - 6);
+			const column = side * (radius * this.reach() + 22);
+			return points.flatMap((point, i) => {
+				const y = rails[i], end = spider ? column : point.elbow[0] + side * 9;
+				const x = end + side * 4, room = side > 0 ? stage.right - x : x - stage.left;
+				const name = ShareData.fit(point.slice.data.name, room - 34), share = ShareData.percent(point.slice.data.fraction);
+				const text = name ? `${name}  ${share}` : share;
+				const round = (value) => value.toFixed(1);
+				return [{
+					key: point.slice.data.name,
+					x,
+					y,
+					anchor: side > 0 ? "start" : "end",
+					text,
+					path: `M${round(point.rim[0])},${round(point.rim[1])}L${round(point.elbow[0])},${round(y)}L${round(end)},${round(y)}`
+				}];
+			});
+		});
+	}
+	drawCallouts(ctx, slices, stage) {
+		const placed = this.outside ? this.callouts(slices, stage) : [];
+		const leaders = ctx.marks("leaders", "path", placed, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+		ctx.set(leaders, { d: (d) => d.path });
+		const labels = ctx.text(ctx.marks("callouts", "text", placed, (d) => d.key)).attr("dy", 4).attr("text-anchor", (d) => d.anchor).text((d) => d.text);
+		ctx.set(labels, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { PieBase };

package/dist/charts/proportion/PieChart.js

@@ -0,0 +1,44 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PieBase } from "./PieBase.js";
+import { PieAnchor, PieLabel, PieSweep, ShareSort } from "./ShareEnums.js";
+// src/charts/proportion/PieChart.ts
+/** A few parts of one whole, where the reader only needs the rough split. */
+var PieChart = class extends PieBase {
+	static meta = {
+		id: "pie",
+		name: "Pie chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Splits a circle by angle to show how a few parts make up one whole.",
+		tags: [
+			"pie",
+			"share",
+			"part-to-whole"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			],
+			labels: [
+				PieLabel.Callout,
+				PieLabel.Spider,
+				PieLabel.Inside,
+				PieLabel.None
+			],
+			direction: [PieSweep.Clockwise, PieSweep.CounterClockwise],
+			anchor: [PieAnchor.Top, PieAnchor.Balanced]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			sort: ShareSort.Descending
+		};
+	}
+};
+export { PieChart };

package/dist/charts/proportion/PiePerCategory.js

@@ -0,0 +1,132 @@
+import { Chart2D } from "../../core/Chart2D.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 { max, pie } from "d3";
+// src/charts/proportion/PiePerCategory.ts
+var FacetForm = /* @__PURE__ */ function(FacetForm) {
+	FacetForm["Pie"] = "pie";
+	FacetForm["Donut"] = "donut";
+	FacetForm["Half"] = "half-ring";
+	return FacetForm;
+}({});
+/** `Area` scales each pie so its area follows the category total. */
+var FacetSizing = /* @__PURE__ */ function(FacetSizing) {
+	FacetSizing["Equal"] = "equal-size";
+	FacetSizing["Area"] = "area-by-total";
+	return FacetSizing;
+}({});
+var FacetArrange = /* @__PURE__ */ function(FacetArrange) {
+	FacetArrange["Grid"] = "grid";
+	FacetArrange["Row"] = "single-row";
+	FacetArrange["ByTotal"] = "ranked-grid";
+	return FacetArrange;
+}({});
+/** Small multiples: compare the same split across many categories without stacking rings. */
+var PiePerCategory = class extends Chart2D {
+	static meta = {
+		id: "pie-per-category",
+		name: "Pie small multiples",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws one small pie per category so the same split can be compared across a group.",
+		tags: [
+			"small multiples",
+			"facet",
+			"trellis"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 4),
+		variants: {
+			form: [
+				"pie",
+				"donut",
+				"half-ring"
+			],
+			sizing: ["equal-size", "area-by-total"],
+			arrange: [
+				"grid",
+				"single-row",
+				"ranked-grid"
+			],
+			sort: [ShareSort.Data, ShareSort.Descending]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			form: "pie",
+			sizing: "equal-size",
+			arrange: "grid",
+			sort: ShareSort.Data,
+			limit: 12
+		};
+	}
+	facets(ctx) {
+		const { data, category, series, value, sort, limit, arrange, sizing, form } = this.options;
+		const rows = Array.isArray(data) ? data : [];
+		const parts = ShareData.collect(rows, category, value, ShareSort.Data, Number.MAX_SAFE_INTEGER).map((part) => ({
+			name: part.name,
+			shares: ShareData.collect(rows.filter((row) => String(row[category] ?? "Unknown") === part.name), series, value, sort),
+			total: part.value
+		})).sort((a, b) => arrange === "ranked-grid" ? b.total - a.total : 0).slice(0, limit);
+		ShareData.register(ctx, ShareData.collect(rows, series, value));
+		const { width, height } = ctx.plot;
+		const columns = arrange === "single-row" ? parts.length : Math.min(parts.length, Math.max(1, Math.round(Math.sqrt(parts.length * width / Math.max(1, height)))));
+		const lines = Math.ceil(parts.length / Math.max(1, columns));
+		const cellW = width / Math.max(1, columns), cellH = height / Math.max(1, lines);
+		const half = form === "half-ring";
+		const biggest = Math.max(1, max(parts, (part) => part.total) ?? 1);
+		const room = Math.min(cellW / 2 - 4, half ? cellH - 24 : (cellH - 20) / 2 - 2);
+		return parts.map((part, i) => {
+			const radius = Math.max(6, sizing === "area-by-total" ? room * Math.sqrt(part.total / biggest) : room);
+			const column = i % Math.max(1, columns), line = Math.floor(i / Math.max(1, columns));
+			const middle = half ? cellH - 19 : (cellH - 16) / 2 + 1;
+			return {
+				...part,
+				x: cellW * (column + .5),
+				y: cellH * line + middle,
+				radius
+			};
+		});
+	}
+	draw(ctx) {
+		const facets = this.facets(ctx);
+		if (ShareData.noData(ctx, !facets.length, ctx.plot.width / 2, ctx.plot.height / 2)) return;
+		const { form, value } = this.options;
+		const half = form === "half-ring", ring = form !== "pie";
+		const [from, to] = half ? [-Math.PI / 2, Math.PI / 2] : [0, Math.PI * 2];
+		const slicer = pie().value((share) => share.value).sort(null).startAngle(from).endAngle(to);
+		const segments = facets.flatMap((facet) => {
+			const shape = ShareData.arcs(() => ring ? facet.radius * .56 : 0, () => facet.radius, facet.radius, 1.5);
+			return slicer(facet.shares).map((slice) => ({
+				facet,
+				slice,
+				shape
+			}));
+		});
+		const paths = ctx.marks("slices", "path", segments, (d) => `${d.facet.name}/${d.slice.data.name}`).attr("fill", (d) => ShareData.fill(ctx, d.slice.data));
+		ctx.set(paths, {
+			d: (d) => d.shape(d.slice) ?? "",
+			transform: (d) => `translate(${d.facet.x.toFixed(1)},${d.facet.y.toFixed(1)})`
+		}, { d: (d) => d.shape({
+			...d.slice,
+			endAngle: d.slice.startAngle
+		}) ?? "" }, 6);
+		ctx.hover(paths, (d) => ({
+			title: `${d.facet.name} · ${d.slice.data.name}`,
+			color: ShareData.fill(ctx, d.slice.data),
+			rows: [[value, d.slice.data.value], ["Share", ShareData.percent(d.slice.data.fraction)]]
+		}));
+		const cell = ctx.plot.width / Math.max(1, new Set(facets.map((facet) => facet.x)).size);
+		const names = ctx.text(ctx.marks("names", "text", facets, (d) => d.name)).attr("text-anchor", "middle").text((d) => ShareData.fit(d.name, cell - 6));
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y + (half ? 14 : Math.max(...facets.map((facet) => facet.radius)) + 13)
+		});
+	}
+};
+export { FacetArrange, FacetForm, FacetSizing, PiePerCategory };