@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/bars/LollipopChart.js

@@ -0,0 +1,130 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandChart } from "./BandChart.js";
+import { BarAggregate, BarRows, BarSort } from "./BarRows.js";
+import { mean, median, symbol } from "d3";
+// src/charts/bars/LollipopChart.ts
+var LollipopChartBaseline = /* @__PURE__ */ function(LollipopChartBaseline) {
+	LollipopChartBaseline["Zero"] = "zero";
+	LollipopChartBaseline["Mean"] = "mean";
+	LollipopChartBaseline["Median"] = "median";
+	return LollipopChartBaseline;
+}({});
+/** A lighter bar chart: use it when many long bars would be heavy, or to show deviation from an average. */
+var LollipopChart = class extends BandChart {
+	static meta = {
+		id: "bar-lollipop",
+		name: "Lollipop chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Ranks categories with a stem and head, trading bar weight for a cleaner read of many values.",
+		tags: [
+			"stem",
+			"ranking",
+			"deviation"
+		],
+		sample: (seed) => SampleData.categories(seed, 9, 3),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			sort: [
+				BarSort.Data,
+				BarSort.Descending,
+				BarSort.Ascending
+			],
+			baseline: [
+				"zero",
+				"mean",
+				"median"
+			],
+			symbol: [
+				SymbolKind.Circle,
+				SymbolKind.Diamond,
+				SymbolKind.Square
+			],
+			labels: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			orientation: Orientation.Vertical,
+			sort: BarSort.Data,
+			aggregate: BarAggregate.Sum,
+			baseline: "zero",
+			symbol: SymbolKind.Circle,
+			labels: false
+		};
+	}
+	get items() {
+		const { data, x, y, aggregate, sort } = this.options;
+		return BarRows.order(BarRows.rollup(data, x, y, aggregate), sort, (item) => item.value, (item) => item.band);
+	}
+	get reference() {
+		const values = this.items.map((item) => item.value);
+		if (this.options.baseline === "mean") return mean(values) ?? 0;
+		return this.options.baseline === "median" ? median(values) ?? 0 : 0;
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	bandNames() {
+		return this.items.map((item) => item.band);
+	}
+	baseline() {
+		return this.reference;
+	}
+	bandPadding() {
+		return .1;
+	}
+	valueExtent() {
+		const values = [...this.items.map((item) => item.value), this.reference];
+		return [Math.min(...values), Math.max(...values)];
+	}
+	reserve() {
+		const head = 10, text = this.options.labels ? this.vertical ? 14 : 28 : 0;
+		return [this.options.baseline !== "zero" || this.valueExtent()[0] < 0 ? head + text : 0, head + text];
+	}
+	drawBands(ctx, frame) {
+		const { items, reference } = this;
+		const color = ctx.palette.color(this.options.y);
+		const center = (band) => frame.center(band);
+		const stems = ctx.marks("stems", "line", items, (d) => d.band).attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(stems, {
+			x1: (d) => frame.stem(center(d.band), reference, d.value).x1,
+			y1: (d) => frame.stem(center(d.band), reference, d.value).y1,
+			x2: (d) => frame.stem(center(d.band), reference, d.value).x2,
+			y2: (d) => frame.stem(center(d.band), reference, d.value).y2
+		}, {
+			x1: (d) => frame.stem(center(d.band), reference, reference).x1,
+			y1: (d) => frame.stem(center(d.band), reference, reference).y1,
+			x2: (d) => frame.stem(center(d.band), reference, reference).x2,
+			y2: (d) => frame.stem(center(d.band), reference, reference).y2
+		}, 20);
+		const shape = symbol(Scales.symbol(this.options.symbol), 110)();
+		const heads = ctx.marks("heads", "path", items, (d) => d.band).attr("d", shape).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		const place = (value) => (d) => `translate(${frame.point(center(d.band), value(d)).join(",")})`;
+		ctx.set(heads, { transform: place((d) => d.value) }, { transform: place(() => reference) }, 20);
+		ctx.hover(heads, (d) => ({
+			title: d.band,
+			color,
+			rows: [[this.options.y, d.value]]
+		}));
+		const format = this.formatter(frame);
+		const lift = frame.vertical ? 8 : 9;
+		this.endLabels(ctx, frame, !this.options.labels ? [] : items.map((d) => {
+			const below = d.value < reference;
+			const at = frame.value.invert(frame.value(d.value) + (below === frame.vertical ? lift : -lift));
+			return {
+				key: d.band,
+				at: center(d.band),
+				value: at,
+				text: format(d.value),
+				below
+			};
+		}));
+	}
+};
+export { LollipopChart, LollipopChartBaseline };

package/dist/charts/bars/MirrorChart.js

@@ -0,0 +1,170 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { Scales } from "../../core/Scales.js";
+import { BarFrame } from "./BarFrame.js";
+import { BarRows } from "./BarRows.js";
+import { axisBottom, max, scaleBand, scaleLinear } from "d3";
+// src/charts/bars/MirrorChart.ts
+var MirrorMark = /* @__PURE__ */ function(MirrorMark) {
+	MirrorMark["Bar"] = "bar";
+	MirrorMark["Lollipop"] = "lollipop";
+	MirrorMark["Silhouette"] = "silhouette";
+	MirrorMark["Outline"] = "outline";
+	return MirrorMark;
+}({});
+var AXIS_ROOM = 24;
+var LABEL_CHARS = 14;
+/** Two series back to back on a shared band axis. Subclasses choose the bands and their order. */
+var MirrorChart = class extends Chart2D {
+	domains(rows) {
+		const reach = max(rows, (row) => Math.max(row.left, row.right)) || 1;
+		return [reach, reach];
+	}
+	get sides() {
+		const { data, x, y, series, left, right } = this.options;
+		const found = BarRows.pivot(data, x, series, y).series;
+		return {
+			left: left ?? found[0] ?? "Left",
+			right: right ?? found[1] ?? "Right"
+		};
+	}
+	pivoted() {
+		const { data, x, y, series } = this.options;
+		const pivot = BarRows.pivot(data, x, series, y);
+		const { left, right } = this.sides;
+		return pivot.bands.map((band) => ({
+			band,
+			left: Math.abs(pivot.cell(band, left)),
+			right: Math.abs(pivot.cell(band, right))
+		}));
+	}
+	legendItems() {
+		const { left, right } = this.sides;
+		return [left, right].map((key) => ({
+			key,
+			color: this.palette.color(key)
+		}));
+	}
+	draw(ctx) {
+		const rows = this.rows();
+		const { gutter, labels, padding } = this.options;
+		const { width, height: full } = ctx.plot;
+		const height = Math.max(10, full - AXIS_ROOM);
+		const labelWidth = (max(rows, (row) => Math.min(row.band.length, LABEL_CHARS)) ?? 0) * 6.2 + (gutter ? 16 : 10);
+		const panel = (width - labelWidth) / 2;
+		const room = labels ? 30 : 0;
+		const innerLeft = gutter ? panel : labelWidth + panel;
+		const innerRight = gutter ? panel + labelWidth : innerLeft;
+		const outerLeft = gutter ? 0 : labelWidth;
+		const [leftMax, rightMax] = this.domains(rows);
+		const frame = {
+			band: scaleBand(rows.map((row) => row.band), [0, height]).padding(padding ?? .15),
+			leftScale: scaleLinear([0, leftMax], [innerLeft, outerLeft + room]).nice(),
+			rightScale: scaleLinear([0, rightMax], [innerRight, width - room]).nice(),
+			sides: this.sides,
+			height
+		};
+		this.drawGrid(ctx, frame, panel);
+		this.drawAxis(ctx, "left", frame.leftScale, height, panel);
+		this.drawAxis(ctx, "right", frame.rightScale, height, panel, innerLeft === innerRight);
+		this.drawBandLabels(ctx, frame, rows, gutter ? width / 2 : labelWidth - 10, gutter ? "middle" : "end");
+		this.drawSide(ctx, frame, rows, "left");
+		this.drawSide(ctx, frame, rows, "right");
+		this.drawExtras(ctx, frame, rows);
+		this.spine(ctx, frame, innerLeft, innerRight);
+	}
+	/** Hook for marks layered over both sides. */
+	drawExtras(_ctx, _frame, _rows) {}
+	spine(ctx, frame, left, right) {
+		ctx.marks("spine", "line", left === right ? [left] : [left, right], (d) => d).attr("x1", (d) => d).attr("x2", (d) => d).attr("y1", 0).attr("y2", frame.height).attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+	}
+	ticks(panel) {
+		return Math.max(2, Math.floor(panel / 56));
+	}
+	drawGrid(ctx, frame, panel) {
+		const lines = this.options.grid === false ? [] : [frame.leftScale, frame.rightScale].flatMap((scale) => scale.ticks(this.ticks(panel)).slice(1).map((tick) => scale(tick)));
+		ctx.group("grid").lower().selectAll("line").data(lines).join("line").attr("x1", (d) => d).attr("x2", (d) => d).attr("y1", 0).attr("y2", frame.height).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+	}
+	drawAxis(ctx, side, scale, height, panel, sharedZero = false) {
+		const reach = scale.domain()[1] ?? 0;
+		const axis = ctx.group(`axis-${side}`).attr("transform", `translate(0,${height})`).call(axisBottom(scale).ticks(this.ticks(panel)).tickSizeOuter(0).tickFormat((value) => sharedZero && !+value ? "" : Scales.format(+value, reach)));
+		axis.select(".domain").attr("stroke", ctx.theme.axis);
+		axis.selectAll(".tick line").attr("stroke", ctx.theme.axis);
+		axis.selectAll("text").attr("fill", ctx.theme.inkSecondary).attr("font-size", 11).attr("font-family", ctx.theme.fontFamily);
+	}
+	drawBandLabels(ctx, frame, rows, x, anchor) {
+		const every = Math.max(1, Math.ceil(12 / (frame.band.step() || 1)));
+		const kept = rows.filter((_, i) => (rows.length - 1 - i) % every === 0);
+		const labels = ctx.text(ctx.marks("band-labels", "text", kept, (d) => d.band), 10.5).text((d) => BarRows.clip(d.band, LABEL_CHARS)).attr("text-anchor", anchor);
+		ctx.set(labels, {
+			x,
+			y: (d) => (frame.band(d.band) ?? 0) + frame.band.bandwidth() / 2 + 3.5
+		});
+	}
+	drawSide(ctx, frame, rows, side) {
+		const mark = this.options.mark ?? "bar";
+		const scale = side === "left" ? frame.leftScale : frame.rightScale;
+		const name = frame.sides[side];
+		const color = ctx.palette.color(name);
+		const bars = new BarFrame(false, scale, frame.band);
+		const at = (row) => frame.band(row.band) ?? 0;
+		const mid = (row) => at(row) + frame.band.bandwidth() / 2;
+		const tip = (row) => ({
+			title: row.band,
+			color,
+			rows: [[name, row[side]]]
+		});
+		const thick = Math.max(1, frame.band.bandwidth());
+		const filled = ctx.marks(`${side}-bars`, "path", mark === "bar" ? rows : [], (d) => d.band).attr("fill", color);
+		ctx.set(filled, { d: (d) => bars.bar(at(d), thick, 0, d[side]) }, { d: (d) => bars.bar(at(d), thick, 0, 0) }, 14);
+		ctx.hover(filled, tip);
+		const stems = ctx.marks(`${side}-stems`, "line", mark === "lollipop" ? rows : [], (d) => d.band).attr("stroke", color).attr("stroke-width", 2);
+		ctx.set(stems, {
+			x1: scale(0),
+			x2: (d) => scale(d[side]),
+			y1: mid,
+			y2: mid
+		}, {
+			x1: scale(0),
+			x2: scale(0),
+			y1: mid,
+			y2: mid
+		}, 14);
+		const heads = ctx.marks(`${side}-heads`, "circle", mark === "lollipop" ? rows : [], (d) => d.band).attr("r", Math.min(5, Math.max(3, frame.band.step() / 2 - 1))).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(heads, {
+			cx: (d) => scale(d[side]),
+			cy: mid
+		}, {
+			cx: scale(0),
+			cy: mid
+		}, 14);
+		ctx.hover(heads, tip);
+		const shaped = mark === "silhouette" || mark === "outline";
+		const profile = ctx.marks(`${side}-profile`, "path", shaped && rows.length ? [rows] : []).attr("fill", mark === "silhouette" ? color : "none").attr("stroke", mark === "outline" ? color : "none").attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(profile, { d: (d) => this.profilePath(d, side, scale, frame, mark === "silhouette") });
+		const zones = ctx.marks(`${side}-zones`, "rect", shaped ? rows : [], (d) => d.band).attr("fill", "transparent").attr("x", (d) => Math.min(scale(0), scale(d[side]))).attr("width", (d) => Math.abs(scale(0) - scale(d[side]))).attr("y", at).attr("height", thick);
+		ctx.hover(zones, tip);
+		const reach = scale.domain()[1] ?? 0;
+		const ends = ctx.text(ctx.marks(`${side}-labels`, "text", this.options.labels && frame.band.step() >= 12 ? rows : [], (d) => d.band), 10.5).text((d) => Scales.format(d[side], reach)).attr("text-anchor", side === "left" ? "end" : "start").style("pointer-events", "none");
+		const gap = mark === "lollipop" ? 9 : 5;
+		ctx.set(ends, {
+			x: (d) => scale(d[side]) + (side === "left" ? -gap : gap),
+			y: (d) => mid(d) + 3.5
+		}, { x: scale(0) });
+	}
+	profilePath(rows, side, scale, frame, closed) {
+		const half = frame.band.step() / 2;
+		const zero = +scale(0).toFixed(2);
+		const center = (row) => (frame.band(row.band) ?? 0) + frame.band.bandwidth() / 2;
+		const steps = rows.flatMap((row) => {
+			const px = +scale(row[side]).toFixed(2);
+			return [[px, +(center(row) - half).toFixed(2)], [px, +(center(row) + half).toFixed(2)]];
+		});
+		const first = center(rows[0]) - half, last = center(rows[rows.length - 1]) + half;
+		return `M${[
+			[zero, +first.toFixed(2)],
+			...steps,
+			[zero, +last.toFixed(2)]
+		].join("L")}${closed ? "Z" : ""}`;
+	}
+};
+export { MirrorChart, MirrorMark };

package/dist/charts/bars/PercentChangeBar.js

@@ -0,0 +1,174 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandChart } from "./BandChart.js";
+import { BarRows, BarSort } from "./BarRows.js";
+// src/charts/bars/PercentChangeBar.ts
+var PercentChangeMeasure = /* @__PURE__ */ function(PercentChangeMeasure) {
+	PercentChangeMeasure["Percent"] = "percent";
+	PercentChangeMeasure["Absolute"] = "absolute";
+	PercentChangeMeasure["Fold"] = "fold";
+	return PercentChangeMeasure;
+}({});
+var PercentChangeMark = /* @__PURE__ */ function(PercentChangeMark) {
+	PercentChangeMark["Bar"] = "bar";
+	PercentChangeMark["Lollipop"] = "lollipop";
+	PercentChangeMark["Arrow"] = "arrow";
+	return PercentChangeMark;
+}({});
+/** How much each category moved between two periods, signed around no-change. */
+var PercentChangeBar = class extends BandChart {
+	static meta = {
+		id: "bar-percent-change",
+		name: "Percent change bar",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots the signed change of each category between two periods as percent, absolute or fold change.",
+		tags: [
+			"delta",
+			"growth",
+			"year over year",
+			"variance"
+		],
+		sample: (seed) => SampleData.categories(seed, 8, 2),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			sort: [
+				BarSort.Data,
+				BarSort.Descending,
+				BarSort.Ascending
+			],
+			measure: [
+				"percent",
+				"absolute",
+				"fold"
+			],
+			mark: [
+				"bar",
+				"lollipop",
+				"arrow"
+			],
+			labels: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			series: "series",
+			orientation: Orientation.Horizontal,
+			sort: BarSort.Data,
+			measure: "percent",
+			mark: "bar",
+			labels: false
+		};
+	}
+	change(before, after) {
+		switch (this.options.measure) {
+			case "absolute": return after - before;
+			case "fold": return before > 0 && after > 0 ? Math.log2(after / before) : null;
+			default: return before ? (after - before) / Math.abs(before) * 100 : null;
+		}
+	}
+	get changes() {
+		const { data, x, y, series, from, to, sort } = this.options;
+		const pivot = BarRows.pivot(data, x, series, y);
+		const first = from ?? pivot.series[0] ?? "", last = to ?? pivot.series[pivot.series.length - 1] ?? "";
+		const rows = pivot.bands.flatMap((band) => {
+			const before = pivot.cell(band, first), after = pivot.cell(band, last), value = this.change(before, after);
+			return value === null || !pivot.has(band, first) || !pivot.has(band, last) ? [] : [{
+				band,
+				before,
+				after,
+				value
+			}];
+		});
+		return BarRows.order(rows, sort, (row) => row.value, (row) => row.band);
+	}
+	bandNames() {
+		return this.changes.map((change) => change.band);
+	}
+	unit() {
+		return this.options.measure === "percent" ? "%" : "";
+	}
+	tickFormat(scale) {
+		const format = super.tickFormat(scale);
+		return typeof (scale.domain?.())[0] === "number" && this.options.measure === "fold" ? (value) => `${+(2 ** +value).toFixed(2)}×` : format;
+	}
+	valueExtent() {
+		const values = this.changes.map((change) => change.value);
+		return [Math.min(0, ...values), Math.max(0, ...values)];
+	}
+	reserve() {
+		const mark = this.options.mark === "lollipop" ? 9 : 0;
+		if (!this.options.labels) return [mark, mark];
+		const room = (this.vertical ? 16 : 40) + mark;
+		return [room, room];
+	}
+	fill(value) {
+		return this.palette.diverging(value < 0 ? -.9 : .9);
+	}
+	legendItems() {
+		return [{
+			key: "Decrease",
+			color: this.palette.diverging(-.9)
+		}, {
+			key: "Increase",
+			color: this.palette.diverging(.9)
+		}];
+	}
+	fold(value) {
+		return `${(2 ** value).toFixed(2)}×`;
+	}
+	drawBands(ctx, frame) {
+		const { changes } = this;
+		const { mark, labels, measure } = this.options;
+		const line = mark !== "bar";
+		const bars = ctx.marks("bars", "path", line ? [] : changes, (d) => d.band).attr("fill", (d) => this.fill(d.value));
+		const at = (d) => frame.band(d.band) ?? 0;
+		ctx.set(bars, { d: (d) => frame.bar(at(d), frame.thick, 0, d.value) }, { d: (d) => frame.bar(at(d), frame.thick, 0, 0) }, 14);
+		const shaftEnd = (d) => mark === "arrow" && Math.abs(frame.value(d.value) - frame.value(0)) > 10 ? frame.value.invert(frame.value(d.value) - this.heading(frame, d) * 6) : d.value;
+		const stems = ctx.marks("stems", "line", line ? changes : [], (d) => d.band).attr("stroke", (d) => this.fill(d.value)).attr("stroke-width", 2);
+		const stem = (d) => frame.stem(frame.center(d.band), 0, shaftEnd(d));
+		ctx.set(stems, {
+			x1: (d) => stem(d).x1,
+			y1: (d) => stem(d).y1,
+			x2: (d) => stem(d).x2,
+			y2: (d) => stem(d).y2
+		});
+		const heads = ctx.marks("heads", "path", line ? changes : [], (d) => d.band).attr("fill", (d) => this.fill(d.value)).attr("d", (d) => mark === "lollipop" ? "M-6,0A6,6 0 1 1 6,0A6,6 0 1 1 -6,0Z" : this.arrow(frame, d)).attr("stroke", mark === "lollipop" ? ctx.theme.surface : "none").attr("stroke-width", 2);
+		ctx.set(heads, { transform: (d) => `translate(${frame.point(frame.center(d.band), d.value).join(",")})` }, { transform: (d) => `translate(${frame.point(frame.center(d.band), 0).join(",")})` }, 14);
+		const tip = (d) => ({
+			title: d.band,
+			color: this.fill(d.value),
+			rows: [
+				["Before", d.before],
+				["After", d.after],
+				["Change", measure === "fold" ? this.fold(d.value) : measure === "percent" ? `${d.value.toFixed(1)}%` : d.value]
+			]
+		});
+		ctx.hover(bars, tip);
+		ctx.hover(heads, tip);
+		const format = this.formatter(frame);
+		const nudge = mark === "lollipop" ? 8 : 0;
+		this.endLabels(ctx, frame, !labels ? [] : changes.map((d) => {
+			const below = d.value < 0;
+			const text = measure === "fold" ? this.fold(d.value) : `${d.value > 0 ? "+" : ""}${format(d.value)}`;
+			return {
+				key: d.band,
+				at: frame.center(d.band),
+				value: frame.value.invert(frame.value(d.value) + (below === frame.vertical ? nudge : -nudge)),
+				text,
+				below
+			};
+		}));
+	}
+	heading(frame, d) {
+		return frame.value(d.value) >= frame.value(0) ? 1 : -1;
+	}
+	arrow(frame, d) {
+		const s = this.heading(frame, d);
+		return frame.vertical ? `M0,0L6,${-s * 8}L-6,${-s * 8}Z` : `M0,0L${-s * 8},6L${-s * 8},-6Z`;
+	}
+};
+export { PercentChangeBar, PercentChangeMark, PercentChangeMeasure };

package/dist/charts/bars/PopulationPyramid.js

@@ -0,0 +1,101 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { MirrorChart, MirrorMark } from "./MirrorChart.js";
+// src/charts/bars/PopulationPyramid.ts
+var WIDTH = 5;
+var cohorts = (seed) => SampleData.categories(seed, 12, 2).map((row, i) => {
+	const band = Math.floor(i / 2);
+	return {
+		category: `${band * WIDTH}–${band * WIDTH + WIDTH - 1}`,
+		series: row.series,
+		value: Math.round((12 - band) ** 1.4 * 12 + +row.value)
+	};
+});
+/** Age-and-sex structure of a population as two mirrored histograms, youngest cohorts at the base. */
+var PopulationPyramid = class extends MirrorChart {
+	static meta = {
+		id: "bar-population-pyramid",
+		name: "Population pyramid",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Mirrors two cohort distributions around a spine to reveal the shape of a population.",
+		tags: [
+			"age",
+			"demographic",
+			"mirror histogram"
+		],
+		sample: cohorts,
+		variants: {
+			gutter: [true, false],
+			mark: [
+				MirrorMark.Bar,
+				MirrorMark.Silhouette,
+				MirrorMark.Outline
+			],
+			surplus: [false, true],
+			merge: [
+				1,
+				2,
+				3
+			],
+			padding: [
+				.1,
+				0,
+				.3
+			]
+		},
+		valid: (values) => !(values.surplus && values.mark !== MirrorMark.Bar) && (values.mark === MirrorMark.Bar || values.padding === .1)
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			series: "series",
+			gutter: true,
+			mark: MirrorMark.Bar,
+			merge: 1,
+			surplus: false,
+			topDown: false,
+			padding: .1,
+			labels: false
+		};
+	}
+	rows() {
+		const rows = this.pivoted(), size = Math.max(1, this.options.merge);
+		const merged = [];
+		for (let i = 0; i < rows.length; i += size) {
+			const part = rows.slice(i, i + size);
+			const first = part[0], last = part[part.length - 1];
+			const ends = [first.band.split("–")[0], last.band.split("–").at(-1)];
+			merged.push({
+				band: part.length > 1 ? ends.join("–") : first.band,
+				left: part.reduce((total, row) => total + row.left, 0),
+				right: part.reduce((total, row) => total + row.right, 0)
+			});
+		}
+		return this.options.topDown ? merged : merged.reverse();
+	}
+	drawExtras(ctx, frame, rows) {
+		const pieces = this.options.surplus ? rows.map((row) => ({
+			row,
+			matched: Math.min(row.left, row.right)
+		})) : [];
+		[{
+			scale: frame.leftScale,
+			value: (row) => row.left
+		}, {
+			scale: frame.rightScale,
+			value: (row) => row.right
+		}].forEach(({ scale, value }, i) => {
+			const veils = ctx.marks(`veil-${i}`, "rect", pieces, (d) => d.row.band).attr("fill", ctx.theme.surface).attr("fill-opacity", .5).style("pointer-events", "none");
+			ctx.set(veils, {
+				x: (d) => Math.min(scale(0), scale(Math.min(d.matched, value(d.row)))),
+				width: (d) => Math.abs(scale(0) - scale(Math.min(d.matched, value(d.row)))),
+				y: (d) => frame.band(d.row.band) ?? 0,
+				height: Math.max(1, frame.band.bandwidth())
+			});
+		});
+	}
+};
+export { PopulationPyramid };