@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/proportion/MosaicChart.js

@@ -0,0 +1,224 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+import { format, scaleLinear, sum } from "d3";
+// src/charts/proportion/MosaicChart.ts
+/**
+* `Marimekko`: width by category total, height by share within it. `BarMekko`: width by total, height in
+* absolute units. `Spine`: equal widths, height by share.
+*/
+var MosaicMode = /* @__PURE__ */ function(MosaicMode) {
+	MosaicMode["Marimekko"] = "marimekko";
+	MosaicMode["BarMekko"] = "bar-mekko";
+	MosaicMode["Spine"] = "spine";
+	return MosaicMode;
+}({});
+var MosaicLabel = /* @__PURE__ */ function(MosaicLabel) {
+	MosaicLabel["Cells"] = "cell-values";
+	MosaicLabel["Headers"] = "headers-only";
+	MosaicLabel["None"] = "unlabelled";
+	return MosaicLabel;
+}({});
+var percent = format(".0%");
+/** Two-way part-to-whole: how big each market is, and who holds it. */
+var MosaicChart = class extends CartesianChart {
+	static meta = {
+		id: "mosaic",
+		name: "Mosaic chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Divides a rectangle by two categorical variables so cell area shows each combination of the whole.",
+		tags: [
+			"marimekko",
+			"mekko",
+			"spine plot",
+			"variable width"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 4),
+		variants: {
+			mode: [
+				"marimekko",
+				"bar-mekko",
+				"spine"
+			],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			sort: [
+				ShareSort.Descending,
+				ShareSort.Data,
+				ShareSort.Ascending
+			],
+			seriesSort: [ShareSort.Data, ShareSort.Descending],
+			labels: [
+				"cell-values",
+				"headers-only",
+				"unlabelled"
+			]
+		}
+	};
+	percentScale = null;
+	defaults() {
+		return {
+			x: "category",
+			series: "series",
+			y: "value",
+			grid: false,
+			mode: "marimekko",
+			orientation: Orientation.Vertical,
+			sort: ShareSort.Descending,
+			seriesSort: ShareSort.Data,
+			labels: "cell-values"
+		};
+	}
+	get vertical() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	get equal() {
+		return this.options.mode === "spine";
+	}
+	get headers() {
+		return this.options.labels !== "unlabelled";
+	}
+	plotMargin() {
+		const base = super.plotMargin();
+		return {
+			...base,
+			top: this.vertical && this.headers ? 26 : base.top,
+			right: !this.vertical && this.headers ? 64 : base.right
+		};
+	}
+	xTicks() {
+		return this.vertical && this.equal ? 0 : 5;
+	}
+	yTicks() {
+		return !this.vertical && this.equal ? 0 : 5;
+	}
+	tickFormat(scale) {
+		return scale === this.percentScale ? (value) => percent(+value) : super.tickFormat(scale);
+	}
+	spans() {
+		const { data, x, y, series, sort, seriesSort } = this.options;
+		const rows = Array.isArray(data) ? data : [];
+		let cursor = 0;
+		return ShareData.collect(rows, x, y, sort, Number.MAX_SAFE_INTEGER).map((share) => {
+			const width = this.equal ? 1 : share.value, start = cursor;
+			cursor += width;
+			const parts = ShareData.collect(rows.filter((row) => String(row[x] ?? "Unknown") === share.name), series, y, seriesSort);
+			return {
+				name: share.name,
+				total: share.value,
+				start,
+				end: cursor,
+				parts
+			};
+		});
+	}
+	scales(ctx) {
+		const spans = this.spans();
+		const along = spans.at(-1)?.end ?? 1;
+		const depth = this.options.mode === "bar-mekko" ? Math.max(1, ...spans.map((span) => span.total)) : 1;
+		const value = scaleLinear([0, depth], this.vertical ? [ctx.plot.height, 0] : [0, ctx.plot.width]);
+		const span = scaleLinear([0, along], this.vertical ? [0, ctx.plot.width] : [0, ctx.plot.height]);
+		this.percentScale = depth === 1 ? value : null;
+		return this.vertical ? {
+			x: span,
+			y: value
+		} : {
+			x: value,
+			y: span
+		};
+	}
+	plotMarks(ctx, axes) {
+		const spans = this.spans();
+		const series = sum(spans, (span) => span.parts.length);
+		for (const name of new Set((Array.isArray(this.options.data) ? this.options.data : []).map((row) => String(row[this.options.series] ?? "Unknown")))) ctx.palette.color(name);
+		if (ShareData.noData(ctx, !series, ctx.plot.width / 2, ctx.plot.height / 2)) return;
+		const vertical = this.vertical, absolute = this.options.mode === "bar-mekko";
+		const spanScale = vertical ? axes.x : axes.y, valueScale = vertical ? axes.y : axes.x;
+		const cells = spans.flatMap((span) => {
+			let cursor = 0;
+			return span.parts.map((part) => {
+				const amount = absolute ? part.value : part.fraction, from = cursor;
+				cursor += amount;
+				return {
+					span,
+					part,
+					from,
+					to: cursor
+				};
+			});
+		});
+		const box = (d) => {
+			const a = spanScale(d.span.start), b = spanScale(d.span.end), c = valueScale(d.from), e = valueScale(d.to);
+			const spanLow = Math.min(a, b), spanSize = Math.max(1, Math.abs(b - a) - 2), valueLow = Math.min(c, e), valueSize = Math.max(1, Math.abs(e - c) - 2);
+			return vertical ? {
+				x: spanLow + 1,
+				y: valueLow + 1,
+				width: spanSize,
+				height: valueSize
+			} : {
+				x: valueLow + 1,
+				y: spanLow + 1,
+				width: valueSize,
+				height: spanSize
+			};
+		};
+		const round = (value) => +value.toFixed(2);
+		const rects = ctx.marks("cells", "rect", cells, (d) => `${d.span.name}/${d.part.name}`).attr("fill", (d) => ShareData.fill(ctx, d.part)).attr("rx", 3);
+		ctx.set(rects, {
+			x: (d) => round(box(d).x),
+			y: (d) => round(box(d).y),
+			width: (d) => round(box(d).width),
+			height: (d) => round(box(d).height)
+		}, vertical ? {
+			y: ctx.plot.height,
+			height: 0
+		} : {
+			x: 0,
+			width: 0
+		}, 8);
+		ctx.hover(rects, (d) => ({
+			title: `${d.span.name} · ${d.part.name}`,
+			color: ShareData.fill(ctx, d.part),
+			rows: [
+				[this.options.y, d.part.value],
+				["Of span", ShareData.percent(d.part.fraction)],
+				["Span total", d.span.total]
+			]
+		}));
+		const written = (this.options.labels === "cell-values" ? cells : []).flatMap((d) => {
+			const rect = box(d), text = ShareData.percent(d.part.fraction);
+			if (ShareData.width(text) > rect.width - 6 || rect.height < 15) return [];
+			return [{
+				key: `${d.span.name}/${d.part.name}`,
+				text,
+				x: rect.x + rect.width / 2,
+				y: rect.y + rect.height / 2 + 4,
+				fill: ShareData.ink(ctx, ShareData.fill(ctx, d.part))
+			}];
+		});
+		const values = ctx.text(ctx.marks("values", "text", written, (d) => d.key)).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(values, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const heads = (this.headers ? spans : []).flatMap((span) => {
+			const start = spanScale(span.start), end = spanScale(span.end), size = Math.abs(end - start), centre = (start + end) / 2;
+			const text = vertical ? ShareData.fit(span.name, size - 4) : size >= 13 ? ShareData.fit(span.name, 58) : "";
+			return text ? [{
+				key: span.name,
+				text,
+				x: vertical ? centre : ctx.plot.width + 6,
+				y: vertical ? -8 : centre + 4
+			}] : [];
+		});
+		const names = ctx.text(ctx.marks("headers", "text", heads, (d) => d.key)).attr("text-anchor", vertical ? "middle" : "start").text((d) => d.text);
+		ctx.set(names, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { MosaicChart, MosaicLabel, MosaicMode };

package/dist/charts/proportion/NestedDonut.js

@@ -0,0 +1,182 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ShareData } from "./ShareData.js";
+import { ShareSort } from "./ShareEnums.js";
+import { interpolateRgb, pie } from "d3";
+// src/charts/proportion/NestedDonut.ts
+/** `Rings` compares the same categories across series; `Hierarchy` breaks each category into its series. */
+var NestedMode = /* @__PURE__ */ function(NestedMode) {
+	NestedMode["Rings"] = "rings";
+	NestedMode["Hierarchy"] = "hierarchy";
+	return NestedMode;
+}({});
+var RingSizing = /* @__PURE__ */ function(RingSizing) {
+	RingSizing["EqualWidth"] = "equal-width";
+	RingSizing["EqualArea"] = "equal-area";
+	return RingSizing;
+}({});
+/** How much of the circle a ring sweeps. `Proportional` scales each ring's sweep by its total. */
+var RingSweep = /* @__PURE__ */ function(RingSweep) {
+	RingSweep["Full"] = "full-circle";
+	RingSweep["Open"] = "open-quarter";
+	RingSweep["Proportional"] = "proportional-sweep";
+	return RingSweep;
+}({});
+var TAU = Math.PI * 2;
+var OPEN = TAU * .75;
+/** Compare two or three part-to-whole splits, or read a two-level breakdown, in one figure. */
+var NestedDonut = class extends RadialChart {
+	static meta = {
+		id: "nested-donut",
+		name: "Nested donut",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks donut rings to compare the same split across series, or to break categories into sub-parts.",
+		tags: [
+			"multi-level pie",
+			"concentric donut",
+			"multi-ring"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 3),
+		variants: {
+			mode: ["rings", "hierarchy"],
+			sizing: ["equal-width", "equal-area"],
+			sweep: [
+				"full-circle",
+				"open-quarter",
+				"proportional-sweep"
+			],
+			sort: [ShareSort.Data, ShareSort.Descending],
+			hole: [.34, .54],
+			values: [true, false]
+		},
+		valid: (values) => values.mode === "rings" || values.sweep === "full-circle"
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			mode: "rings",
+			sizing: "equal-width",
+			sweep: "full-circle",
+			sort: ShareSort.Data,
+			hole: .34,
+			values: true
+		};
+	}
+	rows() {
+		return Array.isArray(this.options.data) ? this.options.data : [];
+	}
+	seriesNames() {
+		return [...new Set(this.rows().map((row) => String(row[this.options.series] ?? "Unknown")))];
+	}
+	part(series) {
+		return series === void 0 ? this.rows() : this.rows().filter((row) => String(row[this.options.series] ?? "Unknown") === series);
+	}
+	radii(count, radius) {
+		const hole = this.options.hole * radius;
+		const edge = (i) => this.options.sizing === "equal-area" ? Math.sqrt(hole ** 2 + (radius ** 2 - hole ** 2) * i / count) : hole + (radius - hole) * i / count;
+		return Array.from({ length: count }, (_, i) => [edge(i), edge(i + 1)]);
+	}
+	rings(radius) {
+		const { category, value, sort, sweep, mode } = this.options;
+		const slicer = (shares, from, to) => pie().value((share) => share.value).sort(null).startAngle(from).endAngle(to)(shares);
+		if (mode === "hierarchy") {
+			const parents = slicer(ShareData.collect(this.rows(), category, value, sort), 0, TAU);
+			const bands = this.radii(2, radius);
+			const outer = parents.flatMap((parent) => {
+				const rows = this.rows().filter((row) => String(row[category] ?? "Unknown") === parent.data.name);
+				return slicer(ShareData.collect(rows, this.options.series, value, sort), parent.startAngle, parent.endAngle).map((slice, i, all) => ({
+					...slice,
+					parent,
+					i,
+					count: all.length
+				}));
+			});
+			return [{
+				name: "Categories",
+				slices: parents,
+				inner: bands[0][0],
+				outer: bands[0][1]
+			}, {
+				name: "Parts",
+				slices: outer,
+				inner: bands[1][0],
+				outer: bands[1][1]
+			}];
+		}
+		const names = this.seriesNames().slice(0, 5);
+		const rings = names.map((name) => ({
+			name,
+			shares: ShareData.collect(this.part(name), category, value, sort)
+		}));
+		const totals = rings.map((ring) => ring.shares.reduce((total, share) => total + share.value, 0));
+		const biggest = Math.max(...totals, 1);
+		const bands = this.radii(names.length, radius);
+		return rings.map((ring, i) => {
+			const end = sweep === "full-circle" ? TAU : sweep === "open-quarter" ? OPEN : OPEN * totals[i] / biggest;
+			return {
+				name: ring.name,
+				slices: slicer(ring.shares, 0, end),
+				inner: bands[i][0],
+				outer: bands[i][1]
+			};
+		});
+	}
+	drawRadial(ctx, { radius }) {
+		const { category, value, sort, mode, sweep, values } = this.options;
+		const parents = ShareData.collect(this.rows(), category, value, sort);
+		ShareData.register(ctx, parents);
+		if (ShareData.noData(ctx, !parents.length, 0, 0)) return;
+		const rings = this.rings(radius);
+		const tint = (slice) => {
+			const child = slice;
+			if (!child.parent) return ShareData.fill(ctx, slice.data);
+			return interpolateRgb(ShareData.fill(ctx, child.parent.data), ctx.theme.surface)(.12 + .55 * child.i / Math.max(1, child.count - 1 || 1));
+		};
+		const segments = rings.flatMap((ring) => ring.slices.map((slice) => ({
+			ring,
+			slice,
+			shape: ShareData.arcs(() => ring.inner + 1, () => ring.outer - 1, ring.outer, 2)
+		})));
+		const key = (d) => `${d.ring.name}/${d.slice.parent?.data.name ?? ""}/${d.slice.data.name}`;
+		const paths = ctx.marks("segments", "path", segments, key).attr("fill", (d) => tint(d.slice));
+		ctx.set(paths, { d: (d) => d.shape(d.slice) ?? "" }, { d: (d) => d.shape({
+			...d.slice,
+			endAngle: d.slice.startAngle
+		}) ?? "" }, 10);
+		ctx.hover(paths, (d) => ({
+			title: mode === "rings" ? `${d.slice.data.name} · ${d.ring.name}` : d.slice.data.name,
+			color: tint(d.slice),
+			rows: [[value, d.slice.data.value], ["Share", ShareData.percent(d.slice.data.fraction)]]
+		}));
+		const labels = (values ? segments : []).flatMap((d) => {
+			const at = (d.ring.inner + d.ring.outer) / 2, angle = (d.slice.startAngle + d.slice.endAngle) / 2;
+			const text = ShareData.percent(d.slice.data.fraction);
+			const room = Math.min(d.ring.outer - d.ring.inner - 2, (d.slice.endAngle - d.slice.startAngle) * at);
+			if (Math.hypot(ShareData.width(text, 10), 11) > room * 1.05) return [];
+			return [{
+				key: key(d),
+				text,
+				x: Math.sin(angle) * at,
+				y: -Math.cos(angle) * at,
+				fill: ShareData.ink(ctx, tint(d.slice))
+			}];
+		});
+		const percent = ctx.text(ctx.marks("values", "text", labels, (d) => d.key), 10).attr("fill", (d) => d.fill).attr("text-anchor", "middle").attr("pointer-events", "none").text((d) => d.text);
+		ctx.set(percent, {
+			x: (d) => d.x,
+			y: (d) => d.y + 3.5
+		});
+		const named = mode === "rings" && sweep !== "full-circle" ? rings : [];
+		const names = ctx.text(ctx.marks("ring-names", "text", named, (d) => d.name), 10.5).attr("text-anchor", "end").text((d) => ShareData.fit(d.name, radius));
+		ctx.set(names, {
+			x: -6,
+			y: (d) => -(d.inner + d.outer) / 2 + 3.5
+		});
+	}
+};
+export { NestedDonut, NestedMode, RingSizing, RingSweep };

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