@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/bars/HistogramBar.js

@@ -0,0 +1,217 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, CurveKind, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarFrame } from "./BarFrame.js";
+import { BarRows } from "./BarRows.js";
+import { ascending, bin, deviation, extent, line, max, quantile, scaleBand, scaleLinear, sum, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges } from "d3";
+// src/charts/bars/HistogramBar.ts
+var HistogramBarBinning = /* @__PURE__ */ function(HistogramBarBinning) {
+	HistogramBarBinning["Sturges"] = "sturges";
+	HistogramBarBinning["Scott"] = "scott";
+	HistogramBarBinning["FreedmanDiaconis"] = "freedman-diaconis";
+	HistogramBarBinning["Sqrt"] = "sqrt";
+	return HistogramBarBinning;
+}({});
+var HistogramBarLayout = /* @__PURE__ */ function(HistogramBarLayout) {
+	HistogramBarLayout["Single"] = "single";
+	HistogramBarLayout["Stacked"] = "stacked";
+	HistogramBarLayout["Overlaid"] = "overlaid";
+	return HistogramBarLayout;
+}({});
+var ROUND_STEPS = [
+	1,
+	1.5,
+	2,
+	2.5,
+	3,
+	4,
+	5,
+	6,
+	8,
+	10
+];
+/** Snap a raw bin width to a round number, so bin edges read like 30–35 rather than 31.7–36.2. */
+var roundStep = (raw) => {
+	const power = 10 ** Math.floor(Math.log10(raw));
+	return ROUND_STEPS.reduce((best, step) => Math.abs(step * power - raw) < Math.abs(best * power - raw) ? step : best) * power;
+};
+/** The shape of one numeric column, on rounded bins that are easy to read and quote. */
+var HistogramBar = class extends CartesianChart {
+	static meta = {
+		id: "bar-histogram",
+		name: "Histogram",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Counts values into rounded-range bins chosen by a standard rule, to show the shape of a distribution.",
+		tags: [
+			"bins",
+			"frequency",
+			"distribution",
+			"cumulative"
+		],
+		sample: (seed) => SampleData.distribution(seed),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			binning: [
+				"sturges",
+				"scott",
+				"sqrt"
+			],
+			layout: [
+				"single",
+				"stacked",
+				"overlaid"
+			],
+			cumulative: [false, true],
+			density: [false, true]
+		},
+		valid: (values) => !(values.density && (values.cumulative || values.layout !== "single"))
+	};
+	defaults() {
+		return {
+			y: "value",
+			series: "group",
+			orientation: Orientation.Vertical,
+			binning: "sturges",
+			layout: "single",
+			cumulative: false,
+			density: false
+		};
+	}
+	get vertical() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	get legendPosition() {
+		return this.options.layout === "single" ? LegendPosition.None : super.legendPosition;
+	}
+	get values() {
+		const { data, y, series, layout } = this.options;
+		return (data ?? []).flatMap((row) => {
+			const value = BarRows.number(row[y]);
+			return value === null ? [] : [{
+				value,
+				series: layout === "single" ? "All" : BarRows.label(row[series])
+			}];
+		});
+	}
+	thresholds(values) {
+		const [low = 0, high = 1] = extent(values);
+		if (low === high) return [low, low + 1];
+		const { binning } = this.options;
+		const count = binning === "scott" ? thresholdScott(values, low, high) : binning === "freedman-diaconis" ? thresholdFreedmanDiaconis(values, low, high) : binning === "sqrt" ? Math.ceil(Math.sqrt(values.length)) : thresholdSturges(values);
+		const step = roundStep((high - low) / Math.max(1, count || 10));
+		const first = Math.floor(low / step), last = Math.ceil(high / step);
+		return Array.from({ length: last - first + 1 }, (_, i) => +((first + i) * step).toPrecision(10));
+	}
+	buckets() {
+		const { values } = this;
+		const edges = this.thresholds(values.map((item) => item.value));
+		const series = [...new Set(values.map((item) => item.series))];
+		const binner = bin().domain([edges[0], edges[edges.length - 1]]).thresholds(edges.slice(1, -1));
+		const counts = series.map((name) => binner(values.filter((item) => item.series === name).map((item) => item.value)));
+		const { cumulative, layout } = this.options;
+		const running = series.map(() => 0);
+		return {
+			buckets: (counts[0] ?? []).flatMap((_, b) => {
+				let stack = 0;
+				return series.map((name, s) => {
+					const bucket = counts[s][b];
+					running[s] += bucket.length;
+					const count = cumulative ? running[s] : bucket.length;
+					const start = layout === "stacked" ? stack : 0;
+					stack += count;
+					return {
+						x0: bucket.x0,
+						x1: bucket.x1,
+						series: name,
+						start,
+						end: start + count,
+						count
+					};
+				});
+			}),
+			series,
+			edges
+		};
+	}
+	scales(ctx) {
+		const { buckets, edges } = this.buckets();
+		const { width, height } = ctx.plot;
+		const top = max(buckets, (bucket) => bucket.end) || 1;
+		const along = scaleLinear([edges[0], edges[edges.length - 1]], this.vertical ? [0, width] : [height, 0]);
+		const count = scaleLinear([0, top], this.vertical ? [height, 0] : [0, width]).nice();
+		return this.vertical ? {
+			x: along,
+			y: count
+		} : {
+			x: count,
+			y: along
+		};
+	}
+	plotMarks(ctx, axes) {
+		const along = this.vertical ? axes.x : axes.y;
+		const count = this.vertical ? axes.y : axes.x;
+		const frame = new BarFrame(this.vertical, count, scaleBand());
+		const { buckets, series } = this.buckets();
+		const { layout, density } = this.options;
+		const single = layout === "single";
+		if (!this.vertical) this.countGrid(ctx, count);
+		const overlaid = layout === "overlaid";
+		const edge = (d) => Math.min(along(d.x0), along(d.x1)) + 1;
+		const size = (d) => Math.max(1, Math.abs(along(d.x1) - along(d.x0)) - 2);
+		const name = (d) => single ? this.options.y : d.series;
+		const shown = overlaid ? [] : buckets;
+		const bars = ctx.marks("bars", "path", shown, (d) => `${d.x0}/${d.series}`).attr("fill", (d) => ctx.palette.color(name(d)));
+		const outer = (d) => d.series === series[series.length - 1];
+		ctx.set(bars, { d: (d) => frame.bar(edge(d), size(d), d.start, d.end, outer(d) ? 3 : 0, d.start ? 2 : 0) }, { d: (d) => frame.bar(edge(d), size(d), d.start, d.start, 0) }, 6);
+		const tip = (d) => ({
+			title: `${d.x0}–${d.x1}`,
+			color: ctx.palette.color(name(d)),
+			rows: [[single ? "Count" : d.series, d.count]]
+		});
+		ctx.hover(bars, tip);
+		const steps = series.map((key) => ({
+			key,
+			path: this.stepPath(buckets.filter((d) => d.series === key), along, count)
+		}));
+		const areas = ctx.marks("outlines", "path", overlaid ? steps : [], (d) => d.key).attr("fill", (d) => this.options.cumulative ? "none" : ctx.palette.color(d.key)).attr("fill-opacity", .16).attr("stroke", (d) => ctx.palette.color(d.key)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(areas, { d: (d) => d.path });
+		const zones = ctx.marks("zones", "rect", overlaid ? buckets : [], (d) => `${d.x0}/${d.series}`).attr("fill", "transparent").attr("x", (d) => this.vertical ? edge(d) : 0).attr("y", (d) => this.vertical ? count(d.end) : edge(d)).attr("width", (d) => this.vertical ? size(d) : count(d.end)).attr("height", (d) => this.vertical ? Math.abs(count(0) - count(d.end)) : size(d));
+		ctx.hover(zones, tip);
+		this.drawDensity(ctx, density ? this.kde(buckets) : [], along, count);
+	}
+	stepPath(rows, along, count) {
+		const point = (x, n) => this.vertical ? `${along(x).toFixed(2)},${count(n).toFixed(2)}` : `${count(n).toFixed(2)},${along(x).toFixed(2)}`;
+		if (!rows.length) return "";
+		const close = this.options.cumulative ? [] : [point(rows[rows.length - 1].x1, 0)];
+		return `M${[
+			point(rows[0].x0, 0),
+			...rows.flatMap((row) => [point(row.x0, row.count), point(row.x1, row.count)]),
+			...close
+		].join("L")}`;
+	}
+	countGrid(ctx, count) {
+		const ticks = this.options.grid === false ? [] : count.ticks(Math.min(this.xTicks(), Math.floor(ctx.plot.width / 80)));
+		ctx.group("count-grid").lower().selectAll("line").data(ticks).join("line").attr("x1", (tick) => count(tick)).attr("x2", (tick) => count(tick)).attr("y1", 0).attr("y2", ctx.plot.height).attr("stroke", ctx.theme.grid);
+	}
+	/** Gaussian kernel density with Silverman's bandwidth, scaled to bin counts. */
+	kde(buckets) {
+		const values = this.values.map((item) => item.value).sort(ascending);
+		if (values.length < 2 || !buckets.length) return [];
+		const h = .9 * (Math.min(deviation(values) ?? 1, ((quantile(values, .75) ?? 0) - (quantile(values, .25) ?? 0)) / 1.34) || 1) * values.length ** -.2;
+		const width = buckets[0].x1 - buckets[0].x0;
+		const low = buckets[0].x0, high = buckets[buckets.length - 1].x1;
+		return Array.from({ length: 64 }, (_, i) => {
+			const at = low + (high - low) * i / 63;
+			return [at, sum(values, (value) => Math.exp(-.5 * ((at - value) / h) ** 2)) / (h * Math.sqrt(2 * Math.PI)) * width];
+		});
+	}
+	drawDensity(ctx, points, along, count) {
+		const curve = line().curve(Scales.curve(CurveKind.Monotone)).x((d) => this.vertical ? along(d[0]) : count(d[1])).y((d) => this.vertical ? count(d[1]) : along(d[0]));
+		const paths = ctx.marks("density", "path", points.length ? [points] : []).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("d", (d) => curve(d));
+		ctx.drawOn(paths);
+	}
+};
+export { HistogramBar, HistogramBarBinning, HistogramBarLayout };

package/dist/charts/bars/IconlessRankBar.js

@@ -0,0 +1,139 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarFrame } from "./BarFrame.js";
+import { BarRows, BarSort } from "./BarRows.js";
+import { scaleLinear } from "d3";
+// src/charts/bars/IconlessRankBar.ts
+var IconlessRankLayout = /* @__PURE__ */ function(IconlessRankLayout) {
+	IconlessRankLayout["Inline"] = "inline";
+	IconlessRankLayout["Stacked"] = "stacked";
+	IconlessRankLayout["Inside"] = "inside";
+	return IconlessRankLayout;
+}({});
+var IconlessRankAlign = /* @__PURE__ */ function(IconlessRankAlign) {
+	IconlessRankAlign["Left"] = "left";
+	IconlessRankAlign["Right"] = "right";
+	return IconlessRankAlign;
+}({});
+var NUMERAL = 22;
+/** A typographic leaderboard: rank, name, value and a quiet bar, with no logos or icons needed. */
+var IconlessRankBar = class extends Chart2D {
+	static meta = {
+		id: "bar-iconless-rank",
+		name: "Iconless rank bar",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Turns a ranking into a readable list of numbered rows with proportional bars, for leaderboards and top-N panels.",
+		tags: [
+			"leaderboard",
+			"top n",
+			"list",
+			"ranking"
+		],
+		sample: (seed) => SampleData.categories(seed, 12, 1),
+		variants: {
+			layout: [
+				"inline",
+				"stacked",
+				"inside"
+			],
+			top: [
+				8,
+				5,
+				12
+			],
+			sort: [BarSort.Descending, BarSort.Ascending],
+			rail: [false, true],
+			align: ["left", "right"]
+		}
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			layout: "inline",
+			top: 8,
+			sort: BarSort.Descending,
+			rail: false,
+			align: "left"
+		};
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	items(capacity) {
+		const { data, x, y, sort, top } = this.options;
+		const rows = BarRows.order(BarRows.rollup(data, x, y), sort, (row) => row.value, (row) => row.band);
+		let rank = 0;
+		const ranked = rows.map((row, index) => {
+			if (!index || row.value !== rows[index - 1].value) rank = index + 1;
+			return {
+				...row,
+				rank,
+				index
+			};
+		});
+		return ranked.slice(0, Math.min(top || ranked.length, capacity));
+	}
+	draw(ctx) {
+		const { layout, align, rail, y } = this.options;
+		const { width, height } = ctx.plot;
+		const stacked = layout === "stacked", inside = layout === "inside";
+		const items = this.items(Math.max(1, Math.floor(height / (stacked ? 28 : 16))));
+		const row = height / Math.max(1, items.length);
+		const reach = Math.max(0, ...items.map((item) => Math.abs(item.value)));
+		const widest = Math.max(0, ...items.map((item) => Math.min(item.band.length, 16)));
+		const nameWidth = stacked || inside ? 0 : widest * 6.2 + 12;
+		const right = align === "right";
+		const valueWidth = stacked ? 0 : 36;
+		const start = NUMERAL + nameWidth + (inside && right ? valueWidth : 0), end = width - (inside && right ? 0 : valueWidth);
+		const scale = scaleLinear([0, reach || 1], right ? [end, start] : [start, end]);
+		const frame = new BarFrame(false, scale);
+		const thick = stacked ? Math.min(8, row * .3) : inside ? Math.min(row - 3, 22) : Math.min(12, Math.max(4, row - 8));
+		const top = (d) => d.index * row + (stacked ? row - thick - 3 : (row - thick) / 2);
+		const color = ctx.palette.color(y);
+		const rails = ctx.marks("rails", "path", rail ? items : [], (d) => d.band).attr("fill", ctx.theme.grid);
+		ctx.set(rails, { d: (d) => frame.bar(top(d), thick, 0, reach || 1, 3) });
+		const bars = ctx.marks("bars", "path", items, (d) => d.band).attr("fill", color);
+		ctx.set(bars, { d: (d) => frame.bar(top(d), thick, 0, Math.abs(d.value), 4) }, { d: (d) => frame.bar(top(d), thick, 0, 0, 4) }, 25);
+		ctx.hover(bars, (d) => ({
+			title: d.band,
+			color,
+			rows: [["Rank", d.rank], [y, d.value]]
+		}));
+		const lineY = (d) => stacked ? top(d) - 4 : d.index * row + row / 2 + 3.5;
+		const format = (value) => Scales.format(value, reach);
+		const numbers = ctx.text(ctx.marks("ranks", "text", items, (d) => d.band), 11, "muted").attr("text-anchor", "end").text((d) => d.rank);
+		ctx.set(numbers, {
+			x: 14,
+			y: lineY
+		});
+		const names = ctx.text(ctx.marks("names", "text", items, (d) => d.band), 11, "ink").text((d) => BarRows.clip(d.band, inside ? 28 : 16)).attr("text-anchor", "start");
+		const insideFill = (d) => Math.abs(scale(Math.abs(d.value)) - scale(0)) > d.band.length * 6.2 + 12;
+		if (inside) names.attr("fill", (d) => insideFill(d) ? ctx.palette.inkOn(color) : ctx.theme.ink);
+		ctx.set(names, {
+			x: (d) => inside ? this.nameX(right, start, scale, d) : NUMERAL,
+			y: lineY
+		});
+		if (inside && right) names.attr("text-anchor", (d) => insideFill(d) ? "end" : "start");
+		const values = ctx.text(ctx.marks("values", "text", items, (d) => d.band), 11, "secondary").attr("text-anchor", "end").text((d) => format(d.value));
+		ctx.set(values, {
+			x: width,
+			y: lineY
+		});
+		if (inside && right) values.attr("text-anchor", "start");
+		if (inside && right) ctx.set(values, {
+			x: NUMERAL,
+			y: lineY
+		});
+	}
+	nameX(right, start, scale, d) {
+		const fill = Math.abs(scale(Math.abs(d.value)) - scale(0));
+		if (fill > d.band.length * 6.2 + 12) return right ? scale(0) - 8 : start + 8;
+		return right ? Math.max(start, scale(Math.abs(d.value)) - d.band.length * 6.2 - 8) : start + fill + 6;
+	}
+};
+export { IconlessRankAlign, IconlessRankBar, IconlessRankLayout };

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/MarimekkoBar.js

@@ -0,0 +1,191 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarRows, BarSort } from "./BarRows.js";
+import { ascending, descending, scaleLinear, sum } from "d3";
+// src/charts/bars/MarimekkoBar.ts
+var MekkoMode = /* @__PURE__ */ function(MekkoMode) {
+	MekkoMode["Mosaic"] = "mosaic";
+	MekkoMode["Spine"] = "spine";
+	return MekkoMode;
+}({});
+/** Band positions at custom offsets, so tick labels can sit under columns of unequal width. */
+var placed = (bands, centers, span) => {
+	const scale = ((band) => centers.get(band));
+	return Object.assign(scale, {
+		domain: () => bands,
+		range: () => [0, span],
+		copy: () => scale
+	});
+};
+/** Two-way composition: column width is a category's size, segment height its internal mix. */
+var MarimekkoBar = class extends CartesianChart {
+	static meta = {
+		id: "bar-marimekko",
+		name: "Marimekko bar",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Sizes columns by total and splits them by share, so each cell area is that combination of a market.",
+		tags: [
+			"mekko",
+			"mosaic",
+			"spine",
+			"variable width"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 4),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			mode: ["mosaic", "spine"],
+			sort: [
+				BarSort.Descending,
+				BarSort.Data,
+				BarSort.Ascending
+			],
+			ranked: [false, true],
+			labels: [false, true]
+		},
+		valid: (values) => !(values.mode === "spine" && values.ranked)
+	};
+	zoomAxes() {
+		return null;
+	}
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			series: "series",
+			orientation: Orientation.Vertical,
+			mode: "mosaic",
+			sort: BarSort.Descending,
+			ranked: false,
+			labels: false
+		};
+	}
+	get vertical() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	layout() {
+		const { data, x, y, series, sort, ranked, mode, focus } = this.options;
+		const positive = (data ?? []).filter((row) => (BarRows.number(row[y]) ?? 0) > 0);
+		const pivot = BarRows.pivot(positive, x, series, y);
+		const grand = sum(pivot.bands, pivot.total) || 1;
+		const bands = BarRows.order(pivot.bands, sort, pivot.total, (band) => band);
+		const spine = mode === "spine";
+		const key = focus ?? pivot.series[0] ?? "";
+		const names = spine ? [key, "Other"] : pivot.series;
+		let along = 0;
+		const columns = [], cells = [];
+		for (const band of bands) {
+			const total = pivot.total(band), span = total / grand;
+			columns.push({
+				band,
+				total,
+				start: along,
+				end: along + span
+			});
+			const value = (name) => spine && name === "Other" ? total - pivot.cell(band, key) : pivot.cell(band, name);
+			const parts = names.map((name) => ({
+				name,
+				size: value(name)
+			})).filter((part) => part.size > 0);
+			if (ranked) parts.sort((a, b) => descending(a.size, b.size) || ascending(a.name, b.name));
+			let up = 0;
+			for (const { name, size } of parts) {
+				const share = size / total;
+				cells.push({
+					band,
+					series: name,
+					value: size,
+					share,
+					x0: along,
+					x1: along + span,
+					y0: up,
+					y1: up + share
+				});
+				up += share;
+			}
+			along += span;
+		}
+		return {
+			columns,
+			cells,
+			series: names
+		};
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot;
+		const { columns } = this.layout();
+		const across = this.vertical ? width : height;
+		const band = placed(columns.map((column) => column.band), new Map(columns.map((column) => [column.band, (column.start + column.end) / 2 * across])), across);
+		const share = scaleLinear([0, 100], this.vertical ? [height, 0] : [0, width]);
+		return this.vertical ? {
+			x: band,
+			y: share
+		} : {
+			x: share,
+			y: band
+		};
+	}
+	tickFormat(scale) {
+		if (typeof (scale.domain?.() ?? [])[0] === "number") return (value) => `${value}%`;
+		const { columns } = this.layout();
+		const [, span = 0] = scale.range();
+		const width = new Map(columns.map((column) => [column.band, (column.end - column.start) * span]));
+		return (value) => {
+			const name = String(value), room = this.vertical ? Math.floor(((width.get(name) ?? 0) - 6) / 6.2) : 14;
+			return room < 3 ? "" : BarRows.clip(name, room);
+		};
+	}
+	plotMarks(ctx) {
+		const { cells, series } = this.layout();
+		const { width, height } = ctx.plot;
+		if (this.options.mode === "mosaic") series.forEach(ctx.palette.color);
+		const across = this.vertical ? width : height, along = this.vertical ? height : width;
+		const box = (d) => {
+			const a = d.x0 * across + 1, b = d.x1 * across - 1;
+			const c = (1 - d.y1) * along + (d.y1 < 1 ? 1 : 0), e = (1 - d.y0) * along - (d.y0 > 0 ? 1 : 0);
+			return this.vertical ? {
+				x: a,
+				y: c,
+				width: Math.max(0, b - a),
+				height: Math.max(0, e - c)
+			} : {
+				x: along - e,
+				y: a,
+				width: Math.max(0, e - c),
+				height: Math.max(0, b - a)
+			};
+		};
+		const fill = (d) => d.series === "Other" && this.options.mode === "spine" ? ctx.theme.grid : ctx.palette.color(d.series);
+		const rects = ctx.marks("cells", "rect", cells, (d) => `${d.band}/${d.series}`).attr("fill", fill).attr("rx", 2);
+		ctx.set(rects, {
+			x: (d) => box(d).x,
+			y: (d) => box(d).y,
+			width: (d) => box(d).width,
+			height: (d) => box(d).height
+		}, this.vertical ? {
+			x: (d) => box(d).x,
+			width: (d) => box(d).width,
+			y: height,
+			height: 0
+		} : {
+			y: (d) => box(d).y,
+			height: (d) => box(d).height,
+			x: 0,
+			width: 0
+		}, 10);
+		ctx.hover(rects, (d) => ({
+			title: d.band,
+			color: fill(d),
+			rows: [[d.series, d.value], ["Share of column", `${(d.share * 100).toFixed(1)}%`]]
+		}));
+		const fits = (d) => box(d).width >= 28 && box(d).height >= 16;
+		const text = ctx.marks("cell-labels", "text", this.options.labels ? cells.filter(fits) : [], (d) => `${d.band}/${d.series}`).text((d) => `${Math.round(d.share * 100)}%`).attr("text-anchor", "middle").attr("font-size", 10.5).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => d.series === "Other" ? ctx.theme.inkSecondary : ctx.palette.inkOn(fill(d))).style("pointer-events", "none");
+		ctx.set(text, {
+			x: (d) => box(d).x + box(d).width / 2,
+			y: (d) => box(d).y + box(d).height / 2 + 3.5
+		});
+	}
+};
+export { MarimekkoBar, MekkoMode };