@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/comparison/RangeDotChart.js

@@ -0,0 +1,131 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandValueChart } from "./BandValueChart.js";
+import { ComparisonSort, Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { group, max, min, symbol, symbolTriangle } from "d3";
+// src/charts/comparison/RangeDotChart.ts
+var RangeDotLink = /* @__PURE__ */ function(RangeDotLink) {
+	RangeDotLink["Line"] = "line";
+	RangeDotLink["Band"] = "band";
+	RangeDotLink["Arrow"] = "arrow";
+	RangeDotLink["None"] = "none";
+	return RangeDotLink;
+}({});
+/** Dumbbells: two or more series per row, joined so the distance between them is the story. */
+var RangeDotChart = class extends BandValueChart {
+	static meta = {
+		id: "comparison-range-dot",
+		name: "Range dot chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Places a dot per series on each row and joins them, to compare gaps between groups across categories.",
+		tags: [
+			"dumbbell",
+			"connected dot plot",
+			"barbell",
+			"cleveland"
+		],
+		sample: (seed) => SampleData.categories(seed, 8, 3),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			link: [
+				"line",
+				"band",
+				"arrow",
+				"none"
+			],
+			sort: [ComparisonSort.Input, ComparisonSort.Descending],
+			gaps: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			orientation: Orientation.Horizontal,
+			link: "line",
+			sort: ComparisonSort.Input,
+			gaps: false
+		};
+	}
+	bandLayout() {
+		const { data, category, series, value, sort, gaps } = this.options;
+		const rows = [...group(data, (row) => String(row[category] ?? ""))].flatMap(([name, members]) => {
+			const dots = Tally.group(members, series, value).map((tally) => ({
+				band: name,
+				series: tally.key,
+				value: tally.mean
+			}));
+			return dots.length ? [{
+				name,
+				dots,
+				low: min(dots, (d) => d.value),
+				high: max(dots, (d) => d.value),
+				first: dots[0].value,
+				last: dots[dots.length - 1].value
+			}] : [];
+		});
+		const items = Tally.sorted(rows, sort, (d) => d.high - d.low, (d) => d.name);
+		const reach = items.flatMap((d) => [d.low, d.high]);
+		const room = gaps && reach.length ? (Math.max(...reach) - Math.min(...reach)) * .14 : 0;
+		return {
+			bands: items.map((d) => d.name),
+			items,
+			values: reach.length ? [...reach, Math.max(...reach) + room] : []
+		};
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { link, gaps } = this.options;
+		const along = (d) => mid(d.name);
+		const tip = (d) => ({
+			title: d.name,
+			rows: [...d.dots.map((dot) => [dot.series, Tally.format(dot.value)]), ["Gap", Tally.format(d.high - d.low)]]
+		});
+		const arrow = link === "arrow";
+		const ruled = link === "line" || arrow;
+		const rules = ctx.marks("rules", "line", ruled ? items : [], (d) => d.name).attr("stroke", ctx.theme.axis).attr("stroke-width", 2);
+		const lead = (d) => arrow ? value(d.first) : value(d.low), tail = (d) => arrow ? value(d.last) : value(d.high);
+		settleMarks(ctx, rules, this.rule(along, lead, tail), this.rule(along, lead, lead), 25);
+		ctx.hover(rules, tip);
+		const thick = Math.min(14, band.bandwidth());
+		const spans = ctx.marks("spans", "rect", link === "band" ? items : [], (d) => d.name).attr("fill", ctx.theme.grid).attr("rx", Math.min(4, thick / 2));
+		settleMarks(ctx, spans, this.span(along, thick, (d) => value(d.low), (d) => value(d.high)), this.span(along, thick, (d) => value(d.low), (d) => value(d.low)), 25);
+		ctx.hover(spans, tip);
+		const dots = items.flatMap((d) => d.dots);
+		const marks = ctx.marks("dots", "circle", dots, (d) => `${d.band}/${d.series}`).attr("fill", (d) => ctx.palette.color(d.series)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, marks, {
+			...this.spot((d) => mid(d.band), (d) => value(d.value)),
+			r: 5.5
+		}, { r: 0 }, 6);
+		ctx.hover(marks, (d) => ({
+			title: d.band,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, Tally.format(d.value)]]
+		}));
+		const heads = ctx.marks("heads", "path", arrow ? items.filter((d) => d.first !== d.last) : [], (d) => d.name).attr("fill", ctx.theme.inkSecondary);
+		const turn = (d) => {
+			const up = d.last > d.first;
+			return this.vertical ? up ? 0 : 180 : up ? 90 : -90;
+		};
+		const offset = (d) => {
+			const sign = d.last > d.first ? -1 : 1;
+			return value((d.first + d.last) / 2) + (this.vertical ? sign : -sign) * 2;
+		};
+		settleMarks(ctx, heads, {
+			d: symbol(symbolTriangle, 34)(),
+			transform: (d) => this.vertical ? `translate(${along(d)},${offset(d)}) rotate(${turn(d)})` : `translate(${offset(d)},${along(d)}) rotate(${turn(d)})`
+		});
+		const texts = ctx.text(ctx.marks("gaps", "text", gaps ? items : [], (d) => d.name), 11, "secondary").text((d) => Tally.format(Math.round(d.high - d.low))).attr("text-anchor", this.vertical ? "middle" : "start");
+		settleMarks(ctx, texts, this.vertical ? {
+			x: along,
+			y: (d) => value(d.high) - 10
+		} : {
+			y: (d) => along(d) + 4,
+			x: (d) => value(d.high) + 10
+		});
+	}
+};
+export { RangeDotChart, RangeDotLink };

package/dist/charts/comparison/RankedDotChart.js

@@ -0,0 +1,128 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation, ScaleKind, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandValueChart } from "./BandValueChart.js";
+import { ComparisonSort, Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { scaleLog, symbol } from "d3";
+// src/charts/comparison/RankedDotChart.ts
+/** What ties each dot back to its label. */
+var RankedLeader = /* @__PURE__ */ function(RankedLeader) {
+	RankedLeader["Guide"] = "guide";
+	RankedLeader["Stem"] = "stem";
+	RankedLeader["None"] = "none";
+	return RankedLeader;
+}({});
+/** Cleveland's dot plot: ranked values on a common scale, using less ink and allowing a log axis where bars cannot. */
+var RankedDotChart = class extends BandValueChart {
+	static meta = {
+		id: "comparison-ranked-dot",
+		name: "Ranked dot chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Ranks categories along a common scale using a dot per row, a lighter and more precise alternative to bars.",
+		tags: [
+			"cleveland dot plot",
+			"lollipop",
+			"leaderboard"
+		],
+		sample: (seed) => SampleData.categories(seed, 12, 1),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			sort: [ComparisonSort.Descending, ComparisonSort.Ascending],
+			leader: [
+				"guide",
+				"stem",
+				"none"
+			],
+			symbol: [SymbolKind.Circle, SymbolKind.Diamond],
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			ranks: [false, true]
+		},
+		valid: (values) => !(values.scale === ScaleKind.Log && values.leader === "stem")
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			category: "category",
+			value: "value",
+			orientation: Orientation.Horizontal,
+			sort: ComparisonSort.Descending,
+			leader: "guide",
+			symbol: SymbolKind.Circle,
+			scale: ScaleKind.Linear,
+			ranks: false
+		};
+	}
+	get logged() {
+		return this.options.scale === ScaleKind.Log;
+	}
+	bandPadding() {
+		return .1;
+	}
+	valueScale() {
+		return this.logged ? scaleLog().base(2) : super.valueScale();
+	}
+	valueInset() {
+		return this.logged ? 9 : 0;
+	}
+	bandLayout() {
+		const { data, category, value, sort } = this.options;
+		const rows = Tally.group(data, category, value).map((tally) => ({
+			name: tally.key,
+			value: tally.mean
+		})).filter((d) => !this.logged || d.value > 0);
+		const best = Tally.sorted(rows, ComparisonSort.Descending, (d) => d.value, (d) => d.name).map((d, i) => ({
+			...d,
+			rank: i + 1
+		}));
+		const items = sort === ComparisonSort.Ascending ? best.reverse() : best;
+		const values = items.map((d) => d.value);
+		const headroom = this.options.ranks ? Math.max(...values, 0) * 1.1 : 0;
+		return {
+			bands: items.map((d) => d.name),
+			items,
+			values: this.logged ? values.length ? [...values, ...headroom ? [headroom] : []] : [1, 2] : [
+				0,
+				headroom,
+				...values
+			]
+		};
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { leader, ranks } = this.options;
+		const fill = ctx.palette.color(this.options.value);
+		const along = (d) => mid(d.name);
+		const at = (d) => value(d.value);
+		const [start, end] = value.range();
+		const tip = (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [["Value", Tally.format(d.value)], ["Rank", d.rank]]
+		});
+		const zero = () => this.logged ? start : value(0);
+		const guides = ctx.marks("guides", "line", leader === "guide" ? items : [], (d) => d.name).attr("stroke", ctx.theme.grid);
+		settleMarks(ctx, guides, this.rule(along, () => start, () => end));
+		const stems = ctx.marks("stems", "line", leader === "stem" ? items : [], (d) => d.name).attr("stroke", fill).attr("stroke-width", 2);
+		settleMarks(ctx, stems, this.rule(along, zero, at), this.rule(along, zero, zero), 20);
+		const shape = symbol(Scales.symbol(this.options.symbol), 80)();
+		const dots = ctx.marks("dots", "path", items, (d) => d.name).attr("fill", fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, dots, {
+			...this.point(along, at),
+			d: shape
+		}, this.point(along, zero), 20);
+		ctx.hover(dots, tip);
+		const step = band.step() || 1;
+		const shown = ranks && step >= (this.vertical ? 16 : 12) ? items : [];
+		const numbers = ctx.text(ctx.marks("ranks", "text", shown, (d) => d.name), 10, "muted").text((d) => `${d.rank}`).attr("text-anchor", "middle");
+		settleMarks(ctx, numbers, this.vertical ? {
+			x: along,
+			y: (d) => at(d) - 11
+		} : {
+			y: (d) => along(d) + 3,
+			x: (d) => at(d) + 13
+		});
+	}
+};
+export { RankedDotChart, RankedLeader };

package/dist/charts/comparison/SlopeGraphRanked.js

@@ -0,0 +1,195 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, CurveKind, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { curveBumpX, curveLinear, curveMonotoneX, line, max, mean, rollup, scaleLinear, scalePoint } from "d3";
+// src/charts/comparison/SlopeGraphRanked.ts
+/** What sets a line's height at each period. */
+var RankedSlopePosition = /* @__PURE__ */ function(RankedSlopePosition) {
+	RankedSlopePosition["Rank"] = "rank";
+	RankedSlopePosition["Value"] = "value";
+	RankedSlopePosition["Indexed"] = "indexed";
+	return RankedSlopePosition;
+}({});
+var RankedSlopeSpan = /* @__PURE__ */ function(RankedSlopeSpan) {
+	RankedSlopeSpan["Endpoints"] = "endpoints";
+	RankedSlopeSpan["AllPeriods"] = "all-periods";
+	return RankedSlopeSpan;
+}({});
+var RankedSlopeLabels = /* @__PURE__ */ function(RankedSlopeLabels) {
+	RankedSlopeLabels["Both"] = "both-sides";
+	RankedSlopeLabels["End"] = "end-only";
+	return RankedSlopeLabels;
+}({});
+var CURVES = {
+	[CurveKind.Linear]: curveLinear,
+	[CurveKind.Bump]: curveBumpX,
+	[CurveKind.Monotone]: curveMonotoneX
+};
+/** Who moved up, who fell: entities between two or more periods, by rank, by value, or indexed to the start. */
+var SlopeGraphRanked = class extends Chart2D {
+	static meta = {
+		id: "comparison-slope-ranked",
+		name: "Ranked slopegraph",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Connects each entity across periods so rank changes and direct before-after comparisons read as slopes.",
+		tags: [
+			"slopegraph",
+			"bump",
+			"before after",
+			"rank change"
+		],
+		sample: (seed) => SampleData.categories(seed, 9, 4),
+		variants: {
+			position: [
+				"rank",
+				"value",
+				"indexed"
+			],
+			span: ["endpoints", "all-periods"],
+			curve: [
+				CurveKind.Linear,
+				CurveKind.Bump,
+				CurveKind.Monotone
+			],
+			labels: ["both-sides", "end-only"]
+		},
+		valid: (values) => (values.curve !== CurveKind.Monotone || values.span === "all-periods") && !(values.position === "indexed" && values.labels === "both-sides")
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			entity: "category",
+			period: "series",
+			value: "value",
+			position: "rank",
+			span: "endpoints",
+			curve: CurveKind.Linear,
+			labels: "both-sides"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 16,
+			bottom: 10,
+			left: 16
+		};
+	}
+	lines() {
+		const { data, entity, period, value, position, span } = this.options;
+		const clean = data.filter((row) => Tally.num(row[value]) !== null);
+		const every = [...new Set(clean.map((row) => String(row[period])))];
+		const periods = span === "all-periods" || every.length < 3 ? every : [every[0], every[every.length - 1]];
+		const cells = rollup(clean, (rows) => mean(rows, (row) => Tally.num(row[value])) ?? 0, (row) => String(row[period]), (row) => String(row[entity]));
+		const ranks = new Map(periods.map((name) => [name, new Map([...cells.get(name) ?? []].sort((a, b) => b[1] - a[1]).map(([key], i) => [key, i + 1]))]));
+		return {
+			periods,
+			items: [...new Set(clean.map((row) => String(row[entity])))].flatMap((name) => {
+				const raw = periods.flatMap((at) => {
+					const cell = cells.get(at)?.get(name);
+					return cell === void 0 ? [] : [{
+						at,
+						cell
+					}];
+				});
+				if (!raw.length) return [];
+				const anchor = raw[0].cell;
+				const points = raw.map(({ at, cell }) => {
+					const rank = ranks.get(at).get(name);
+					return {
+						entity: name,
+						period: at,
+						value: cell,
+						rank,
+						level: position === "rank" ? rank : position === "indexed" ? anchor ? cell / anchor * 100 : 100 : cell
+					};
+				});
+				const first = points[0], last = points[points.length - 1];
+				return [{
+					entity: name,
+					points,
+					change: position === "rank" ? first.rank - last.rank : last.value - first.value
+				}];
+			})
+		};
+	}
+	tone(ctx, change, reach) {
+		return change === 0 ? ctx.theme.inkMuted : ctx.palette.diverging(-Math.sign(change) * (.5 + .5 * Math.abs(change) / (reach || 1)));
+	}
+	text(point) {
+		return this.options.position === "rank" ? `${point.rank}` : Tally.format(Math.round(point.level));
+	}
+	draw(ctx) {
+		const { width, height } = ctx.plot;
+		const { position, labels, curve } = this.options;
+		const { periods, items } = this.lines();
+		const longest = max(items, (d) => Tally.width(d.entity)) ?? 0;
+		const gutter = Math.min(Math.max(60, longest + 36), width * .33);
+		const both = labels === "both-sides";
+		const x = scalePoint(periods, [both ? gutter : 8, width - gutter]);
+		const levels = items.flatMap((d) => d.points.map((p) => p.level));
+		const top = 22, bottom = height - 6;
+		const low = Math.min(...levels, position === "rank" ? 1 : Infinity), high = Math.max(...levels, position === "rank" ? 2 : -Infinity);
+		const y = position === "rank" ? scaleLinear([low, high], [top, bottom]) : scaleLinear(Number.isFinite(low) ? [low, high > low ? high : low + 1] : [0, 1], [bottom, top]);
+		const px = (d) => x(d.period) ?? 0, py = (d) => y(d.level);
+		const heads = ctx.marks("periods", "text", periods, (d) => d);
+		ctx.text(heads, 11, "ink").attr("font-weight", 600).attr("text-anchor", "middle").attr("y", 11).text((d) => Tally.clip(d, 80));
+		settleMarks(ctx, heads, { x: (d) => x(d) ?? 0 });
+		const posts = ctx.marks("posts", "line", periods, (d) => d).attr("stroke", ctx.theme.grid);
+		settleMarks(ctx, posts, {
+			x1: (d) => x(d) ?? 0,
+			x2: (d) => x(d) ?? 0,
+			y1: 18,
+			y2: bottom + 2
+		});
+		const reach = max(items, (d) => Math.abs(d.change)) ?? 1;
+		const path = line().x(px).y(py).curve(CURVES[curve] ?? curveLinear);
+		const lines = ctx.marks("lines", "path", items, (d) => d.entity).attr("fill", "none").attr("stroke-width", 2).attr("stroke", (d) => this.tone(ctx, d.change, reach));
+		settleMarks(ctx, lines, { d: (d) => path(d.points) }, { d: (d) => line().x(px).y(() => y(d.points[0].level)).curve(curveLinear)(d.points) });
+		ctx.hover(lines, (d) => ({
+			title: d.entity,
+			color: this.tone(ctx, d.change, reach),
+			rows: d.points.map((p) => [p.period, `${Tally.format(p.value)} (#${p.rank})`])
+		}));
+		const dots = ctx.marks("dots", "circle", items.flatMap((d) => d.points.map((point) => ({
+			point,
+			change: d.change
+		}))), (d) => `${d.point.entity}/${d.point.period}`).attr("fill", (d) => this.tone(ctx, d.change, reach)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, dots, {
+			cx: (d) => px(d.point),
+			cy: (d) => py(d.point),
+			r: 4.5
+		}, { r: 0 });
+		ctx.hover(dots, (d) => ({
+			title: d.point.entity,
+			color: this.tone(ctx, d.change, reach),
+			rows: [[d.point.period, `${Tally.format(d.point.value)} (#${d.point.rank})`]]
+		}));
+		const place = (side) => {
+			const anchors = items.map((d) => d.points[side === "first" ? 0 : d.points.length - 1]);
+			const edge = x(periods[side === "first" ? 0 : periods.length - 1]) ?? 0;
+			const room = gutter - 6, shift = side === "first" ? -8 : 8;
+			return Tally.spread(anchors.map(py), 12, 26, bottom + 2).map(([index, at]) => {
+				const point = anchors[index];
+				const name = Tally.clip(point.entity, room - Tally.width(this.text(point)) - 10);
+				return {
+					key: `${side}/${point.entity}`,
+					text: side === "first" ? `${name}  ${this.text(point)}` : `${this.text(point)}  ${name}`,
+					x: edge + shift,
+					y: at + 4,
+					anchor: side === "first" ? "end" : "start"
+				};
+			});
+		};
+		const texts = ctx.text(ctx.marks("labels", "text", periods.length ? [...both ? place("first") : [], ...place("last")] : [], (d) => d.key), 11).attr("text-anchor", (d) => d.anchor).text((d) => d.text);
+		settleMarks(ctx, texts, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+};
+export { RankedSlopeLabels, RankedSlopePosition, RankedSlopeSpan, SlopeGraphRanked };

package/dist/charts/comparison/SmallMultipleBars.js

@@ -0,0 +1,134 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PanelChart, PanelFlow } from "./PanelChart.js";
+import { ComparisonSort, Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { max, mean, min, rollup, scaleBand, scaleLinear } from "d3";
+// src/charts/comparison/SmallMultipleBars.ts
+/** Which field makes the panels. */
+var BarFacet = /* @__PURE__ */ function(BarFacet) {
+	BarFacet["Series"] = "series";
+	BarFacet["Category"] = "category";
+	return BarFacet;
+}({});
+/** One small bar chart per group, sharing scales, for comparing shapes that overlap when stacked in one plot. */
+var SmallMultipleBars = class extends PanelChart {
+	static meta = {
+		id: "comparison-small-multiple-bars",
+		name: "Small multiple bars",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Repeats a bar chart across panels of a grouping field so each group shows its own shape on shared axes.",
+		tags: [
+			"facet",
+			"small multiples",
+			"panel chart"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 4),
+		variants: {
+			facet: ["series", "category"],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			flow: [
+				PanelFlow.Auto,
+				PanelFlow.Row,
+				PanelFlow.Column
+			],
+			freeScale: [false, true],
+			sort: [ComparisonSort.Input, ComparisonSort.Descending]
+		},
+		valid: (values) => !(values.freeScale && values.flow === PanelFlow.Column && values.orientation === Orientation.Horizontal)
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			category: "category",
+			series: "series",
+			value: "value",
+			facet: "series",
+			orientation: Orientation.Vertical,
+			flow: PanelFlow.Auto,
+			freeScale: false,
+			sort: ComparisonSort.Input
+		};
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 16,
+			bottom: 8,
+			left: 16
+		};
+	}
+	draw(ctx) {
+		const { data, category, series, value, facet, orientation, freeScale, sort } = this.options;
+		const panelField = facet === "series" ? series : category, barField = facet === "series" ? category : series;
+		const clean = data.filter((row) => Tally.num(row[value]) !== null);
+		const cells = rollup(clean, (rows) => mean(rows, (row) => Tally.num(row[value])) ?? 0, (row) => String(row[panelField] ?? ""), (row) => String(row[barField] ?? ""));
+		const keys = [...cells.keys()];
+		const names = [...new Set(clean.map((row) => String(row[barField] ?? "")))];
+		const every = [...cells.values()].flatMap((line) => [...line.values()]);
+		const vertical = orientation === Orientation.Vertical;
+		const longest = Math.min(64, (max(names, (name) => Tally.width(name)) ?? 0) + 6);
+		const widest = Tally.width(Tally.format(Math.round(max(every, Math.abs) ?? 0))) + 8;
+		const axisLeft = vertical ? widest : longest;
+		const panels = this.panels(ctx, keys, {
+			left: axisLeft,
+			bottom: 16,
+			gapX: freeScale ? vertical ? widest + 6 : 18 : 12,
+			gapY: freeScale && !vertical ? 20 : void 0
+		});
+		this.eachPanel(ctx, panels, (panel, group) => {
+			const line = cells.get(panel.key);
+			const bars = Tally.sorted([...line].map(([band, v]) => ({
+				panel: panel.key,
+				band,
+				value: v
+			})), sort, (d) => d.value, (d) => d.band);
+			const order = sort === ComparisonSort.Input ? names.filter((name) => line.has(name)) : bars.map((d) => d.band);
+			const span = freeScale ? [...line.values()] : every;
+			const low = Math.min(0, min(span) ?? 0), high = Math.max(0, max(span) ?? 1);
+			const scale = scaleLinear([low, high > low ? high : 1], vertical ? [panel.height, 0] : [0, panel.width]).nice();
+			const band = scaleBand(order, vertical ? [0, panel.width] : [0, panel.height]).padding(.16);
+			this.panelGrid(ctx, group, panel, scale, vertical ? "y" : "x", freeScale || (vertical ? panel.left : panel.bottom));
+			const color = ctx.palette.color(panel.key);
+			const zero = scale(0), thick = band.bandwidth();
+			const rx = Math.min(3, thick / 2);
+			const marks = ctx.marks("bars", "rect", bars, (d) => d.band, group).attr("fill", color).attr("rx", rx);
+			settleMarks(ctx, marks, vertical ? {
+				x: (d) => band(d.band),
+				width: thick,
+				y: (d) => Math.min(scale(d.value), zero),
+				height: (d) => Math.abs(scale(d.value) - zero)
+			} : {
+				y: (d) => band(d.band),
+				height: thick,
+				x: (d) => Math.min(scale(d.value), zero),
+				width: (d) => Math.abs(scale(d.value) - zero)
+			}, vertical ? {
+				y: zero,
+				height: 0
+			} : {
+				x: zero,
+				width: 0
+			}, 10);
+			ctx.hover(marks, (d) => ({
+				title: d.panel,
+				color,
+				rows: [[d.band, Tally.format(d.value)]]
+			}));
+			this.bandNames(ctx, group, panel, order, band, vertical, longest);
+		});
+	}
+	bandNames(ctx, group, panel, order, band, vertical, room) {
+		const step = band.step() || 1;
+		const labelled = vertical ? panel.bottom : panel.left && !panel.side;
+		const widest = max(order, (name) => Tally.width(name)) ?? 0;
+		const every = Math.max(1, Math.ceil((vertical ? Math.min(widest, 40) + 6 : 12) / step));
+		const shown = labelled ? order.filter((_, i) => i % every === 0) : [];
+		const texts = ctx.text(ctx.marks("names", "text", shown, (d) => d, group), 10, "secondary").text((d) => Tally.clip(d, vertical ? step * every - 2 : room - 6)).attr("text-anchor", vertical ? "middle" : "end");
+		if (vertical) texts.attr("x", (d) => band(d) + band.bandwidth() / 2).attr("y", panel.height + 12);
+		else texts.attr("x", -5).attr("y", (d) => band(d) + band.bandwidth() / 2 + 3);
+	}
+};
+export { BarFacet, SmallMultipleBars };