@mstone6969/graph 0.0.0-stage → 0.2.0

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 };

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 };