@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/comparison/EffectForestPlot.js

@@ -0,0 +1,207 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandValueChart } from "./BandValueChart.js";
+import { Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { max, scaleLog, scaleSqrt, sum, symbol, symbolDiamond } from "d3";
+// src/charts/comparison/EffectForestPlot.ts
+var ForestMarker = /* @__PURE__ */ function(ForestMarker) {
+	ForestMarker["Weighted"] = "weighted-square";
+	ForestMarker["Dot"] = "dot";
+	ForestMarker["Diamond"] = "diamond";
+	return ForestMarker;
+}({});
+var ForestSort = /* @__PURE__ */ function(ForestSort) {
+	ForestSort["Input"] = "input";
+	ForestSort["Effect"] = "effect";
+	ForestSort["Precision"] = "precision";
+	return ForestSort;
+}({});
+var COLUMN = 112;
+var POOLED = "Pooled";
+/** The meta-analysis staple: one estimate and interval per study, a line of no effect, and a pooled diamond. */
+var EffectForestPlot = class extends BandValueChart {
+	static meta = {
+		id: "comparison-forest",
+		name: "Forest plot",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lines up effect estimates and confidence intervals from several studies against a line of no effect.",
+		tags: [
+			"meta-analysis",
+			"blobbogram",
+			"odds ratio",
+			"coefficient plot"
+		],
+		sample: (seed) => SampleData.points(seed, 9, 3).map((row, i) => {
+			const log = (+row.y - +row.x * .8 - 10) / 40 + .12, se = .08 + 1.2 / (+row.size + 3);
+			return {
+				study: `Study ${i + 1}`,
+				effect: +Math.exp(log).toFixed(3),
+				low: +Math.exp(log - 1.96 * se).toFixed(3),
+				high: +Math.exp(log + 1.96 * se).toFixed(3),
+				weight: +(1 / (se * se)).toFixed(1)
+			};
+		}),
+		variants: {
+			scale: [ScaleKind.Log, ScaleKind.Linear],
+			marker: [
+				"weighted-square",
+				"dot",
+				"diamond"
+			],
+			sort: [
+				"input",
+				"effect",
+				"precision"
+			],
+			pooled: [true, false],
+			table: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			study: "study",
+			effect: "effect",
+			low: "low",
+			high: "high",
+			weight: "weight",
+			noEffect: 1,
+			orientation: Orientation.Horizontal,
+			scale: ScaleKind.Log,
+			marker: "weighted-square",
+			sort: "input",
+			pooled: true,
+			table: true
+		};
+	}
+	get logged() {
+		return this.options.scale === ScaleKind.Log;
+	}
+	bandPadding() {
+		return .15;
+	}
+	valueScale() {
+		return this.logged ? scaleLog().base(2) : super.valueScale();
+	}
+	valueReach(ctx) {
+		return ctx.plot.width - (this.options.table ? COLUMN : 8);
+	}
+	xTicks() {
+		return 5;
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			bottom: this.options.xLabel ? 44 : 24
+		};
+	}
+	bandLayout() {
+		const { data, study, effect, low, high, weight, sort, noEffect, pooled } = this.options;
+		const on = (value) => this.logged ? Math.log(value) : value;
+		const rows = data.flatMap((row, i) => {
+			const e = Tally.num(row[effect]), a = Tally.num(row[low]), b = Tally.num(row[high]);
+			if (e === null || a === null || b === null || this.logged && (e <= 0 || a <= 0 || b <= 0)) return [];
+			const se = Math.abs(on(b) - on(a)) / 3.92;
+			return [{
+				name: rowName(row[study], i),
+				effect: e,
+				low: Math.min(a, b),
+				high: Math.max(a, b),
+				weight: Tally.num(row[weight]) ?? (se ? 1 / (se * se) : 1),
+				pooled: false
+			}];
+		});
+		const items = sort === "effect" ? rows.sort((a, b) => b.effect - a.effect) : sort === "precision" ? rows.sort((a, b) => a.high / a.low - b.high / b.low) : rows;
+		const summary = pooled ? this.pool(items, on) : null;
+		if (summary) items.push(summary);
+		const values = [...this.logged && noEffect <= 0 ? [] : [noEffect], ...items.flatMap((d) => [d.low, d.high])];
+		return {
+			bands: items.map((d) => d.name),
+			items,
+			values: values.length ? values : [1, 2]
+		};
+	}
+	/** Fixed-effect inverse-variance pooling on the axis the data is read on. */
+	pool(rows, on) {
+		const weighed = rows.map((d) => ({
+			d,
+			se: Math.abs(on(d.high) - on(d.low)) / 3.92
+		})).filter(({ se }) => se > 0);
+		if (weighed.length < 2) return null;
+		const total = sum(weighed, ({ se }) => 1 / (se * se));
+		const centre = sum(weighed, ({ d, se }) => on(d.effect) / (se * se)) / total;
+		const half = 1.96 * Math.sqrt(1 / total);
+		const off = (value) => this.logged ? Math.exp(value) : value;
+		return {
+			name: POOLED,
+			effect: off(centre),
+			low: off(centre - half),
+			high: off(centre + half),
+			weight: total,
+			pooled: true
+		};
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { marker, table, noEffect } = this.options;
+		const studies = items.filter((d) => !d.pooled), summary = items.filter((d) => d.pooled);
+		const along = (d) => mid(d.name);
+		const ink = ctx.palette.color(this.options.effect);
+		const tip = (d) => ({
+			title: d.name,
+			color: ink,
+			rows: [
+				["Effect", Tally.format(d.effect)],
+				["Interval", `${Tally.format(d.low)} to ${Tally.format(d.high)}`],
+				["Weight", Tally.format(d.weight)]
+			]
+		});
+		const domain = value.domain();
+		const centred = noEffect >= Math.min(...domain) && noEffect <= Math.max(...domain);
+		const line = ctx.marks("no-effect", "line", centred ? [noEffect] : []).attr("stroke", ctx.theme.ink).attr("stroke-width", 1).attr("stroke-dasharray", "4 3");
+		settleMarks(ctx, line, {
+			x1: (d) => value(d),
+			x2: (d) => value(d),
+			y1: 0,
+			y2: ctx.plot.height
+		});
+		const whiskers = ctx.marks("whiskers", "line", studies, (d) => d.name).attr("stroke", ink).attr("stroke-width", 2);
+		settleMarks(ctx, whiskers, this.rule(along, (d) => value(d.low), (d) => value(d.high)), this.rule(along, (d) => value(d.effect), (d) => value(d.effect)), 25);
+		ctx.hover(whiskers, tip);
+		const biggest = max(studies, (d) => d.weight) ?? 1;
+		const area = scaleSqrt([0, biggest], [3.5, Math.min(9, band.bandwidth() / 2)]);
+		const half = (d) => marker === "weighted-square" ? area(d.weight) : 4.5;
+		const dots = ctx.marks("dots", "path", studies, (d) => d.name).attr("fill", ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, dots, {
+			...this.point(along, (d) => value(d.effect)),
+			d: (d) => {
+				const r = half(d);
+				if (marker === "dot") return `M${-r},0a${r},${r} 0 1,0 ${2 * r},0a${r},${r} 0 1,0 ${-2 * r},0Z`;
+				return marker === "diamond" ? symbol(symbolDiamond, 2 * (2 * r) ** 2)() : `M${-r},${-r}h${2 * r}v${2 * r}h${-2 * r}Z`;
+			}
+		});
+		ctx.hover(dots, tip);
+		const rise = Math.min(9, band.bandwidth() / 2);
+		const diamonds = ctx.marks("pooled", "path", summary, (d) => d.name).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, diamonds, { d: (d) => `M${value(d.low)},${along(d)}L${value(d.effect)},${along(d) - rise}L${value(d.high)},${along(d)}L${value(d.effect)},${along(d) + rise}Z` });
+		ctx.hover(diamonds, tip);
+		const parting = ctx.marks("parting", "line", summary, (d) => d.name).attr("stroke", ctx.theme.axis);
+		settleMarks(ctx, parting, {
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: (d) => band(d.name) - band.step() * band.paddingInner() / 2,
+			y2: (d) => band(d.name) - band.step() * band.paddingInner() / 2
+		});
+		const texts = ctx.text(ctx.marks("column", "text", table ? items : [], (d) => d.name), 10.5, "secondary").attr("text-anchor", "end").attr("font-weight", (d) => d.pooled ? 600 : 400).text((d) => `${d.effect.toFixed(2)} [${d.low.toFixed(2)}, ${d.high.toFixed(2)}]`);
+		settleMarks(ctx, texts, {
+			x: ctx.plot.width,
+			y: (d) => along(d) + 4
+		});
+	}
+};
+function rowName(cell, index) {
+	return cell === null || cell === void 0 || cell === "" ? `Row ${index + 1}` : `${cell}` === POOLED ? `${POOLED} (study)` : String(cell);
+}
+export { EffectForestPlot, ForestMarker, ForestSort };

package/dist/charts/comparison/ErrorBarChart.js

@@ -0,0 +1,134 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, Orientation, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandValueChart } from "./BandValueChart.js";
+import { ComparisonSpread, Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { group, symbol } from "d3";
+// src/charts/comparison/ErrorBarChart.ts
+/** How a series' points join up across the bands. */
+var ErrorBarLink = /* @__PURE__ */ function(ErrorBarLink) {
+	ErrorBarLink["None"] = "none";
+	ErrorBarLink["Straight"] = "straight";
+	ErrorBarLink["Curved"] = "curved";
+	return ErrorBarLink;
+}({});
+/** Means with error bars for one or more series, the plain statistical comparison without bars behind it. */
+var ErrorBarChart = class extends BandValueChart {
+	static meta = {
+		id: "comparison-error-bar",
+		name: "Error bar chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots each group mean with whiskers for its uncertainty, for one or more series over shared bands.",
+		tags: [
+			"point and whisker",
+			"means plot",
+			"confidence interval"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 56, 3).map((row, i) => ({
+			group: `Week ${Math.floor(i % 56 / 7) + 1}`,
+			series: row.series,
+			value: row.value
+		})),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			spread: [
+				ComparisonSpread.Ci95,
+				ComparisonSpread.StdError,
+				ComparisonSpread.StdDev
+			],
+			symbol: [
+				SymbolKind.Circle,
+				SymbolKind.Square,
+				SymbolKind.Diamond
+			],
+			link: [
+				"none",
+				"straight",
+				"curved"
+			],
+			dodge: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			x: "group",
+			series: "series",
+			y: "value",
+			orientation: Orientation.Vertical,
+			spread: ComparisonSpread.Ci95,
+			symbol: SymbolKind.Circle,
+			link: "none",
+			dodge: true
+		};
+	}
+	bandPadding() {
+		return .2;
+	}
+	bandLayout() {
+		const { data, x, series, y, spread } = this.options;
+		const names = [...new Set(data.map((row) => String(row[series] ?? "")))];
+		const items = [...group(data, (row) => String(row[x] ?? ""))].flatMap(([band, rows]) => Tally.group(rows, series, y).map((tally) => {
+			const [low, high] = Tally.interval(tally, spread);
+			return {
+				band,
+				series: tally.key,
+				slot: names.indexOf(tally.key),
+				tally,
+				low,
+				high
+			};
+		}));
+		return {
+			bands: [...new Set(items.map((d) => d.band))],
+			items,
+			values: items.flatMap((d) => [d.low, d.high])
+		};
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { dodge, link } = this.options;
+		const slots = new Set(items.map((d) => d.series)).size || 1;
+		const step = dodge ? band.bandwidth() / slots : 0;
+		const along = (d) => mid(d.band) + (d.slot - (slots - 1) / 2) * step;
+		const at = (d) => value(d.tally.mean);
+		const color = (d) => ctx.palette.color(d.series);
+		const tip = (d) => ({
+			title: d.band,
+			color: color(d),
+			rows: [
+				[d.series, Tally.format(d.tally.mean)],
+				["Interval", `${Tally.format(d.low)} to ${Tally.format(d.high)}`],
+				["n", d.tally.n]
+			]
+		});
+		const routes = link === "none" ? [] : [...group(items, (d) => d.series)];
+		const lines = ctx.marks("links", "path", routes, ([name]) => name).attr("fill", "none").attr("stroke-width", 2).attr("stroke", ([name]) => ctx.palette.color(name));
+		const route = this.trace(along, at, link === "curved" ? CurveKind.Monotone : CurveKind.Linear);
+		settleMarks(ctx, lines, { d: ([, points]) => route(points) });
+		const whiskers = ctx.marks("whiskers", "line", items, (d) => `${d.band}/${d.series}`).attr("stroke", color).attr("stroke-width", 2);
+		settleMarks(ctx, whiskers, this.rule(along, (d) => value(d.low), (d) => value(d.high)), this.rule(along, at, at), 6);
+		ctx.hover(whiskers, tip);
+		const half = Math.max(3, Math.min(6, step / 2 - 1 || 6));
+		const ends = items.flatMap((d) => [{
+			key: `${d.band}/${d.series}/low`,
+			d,
+			at: d.low
+		}, {
+			key: `${d.band}/${d.series}/high`,
+			d,
+			at: d.high
+		}]);
+		const caps = ctx.marks("caps", "line", ends, (e) => e.key).attr("stroke", (e) => color(e.d)).attr("stroke-width", 2);
+		settleMarks(ctx, caps, this.cross((e) => along(e.d), (e) => value(e.at), half));
+		const shape = symbol(Scales.symbol(this.options.symbol), 64)();
+		const dots = ctx.marks("points", "path", items, (d) => `${d.band}/${d.series}`).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, dots, {
+			...this.point(along, at),
+			d: shape
+		});
+		ctx.hover(dots, tip);
+	}
+};
+export { ErrorBarChart, ErrorBarLink };

package/dist/charts/comparison/FloatingBarChart.js

@@ -0,0 +1,150 @@
+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 { mean, rollup } from "d3";
+// src/charts/comparison/FloatingBarChart.ts
+var FloatShape = /* @__PURE__ */ function(FloatShape) {
+	FloatShape["Bar"] = "bar";
+	FloatShape["Arrow"] = "arrow";
+	FloatShape["Thin"] = "thin-rail";
+	return FloatShape;
+}({});
+/** A shared line to read every end against. */
+var FloatReference = /* @__PURE__ */ function(FloatReference) {
+	FloatReference["None"] = "none";
+	FloatReference["StartMean"] = "start-mean";
+	FloatReference["EndMean"] = "end-mean";
+	return FloatReference;
+}({});
+/** Each bar floats from its own start to its own end: before and after, plan and actual, opening and closing. */
+var FloatingBarChart = class extends BandValueChart {
+	static meta = {
+		id: "comparison-floating-bar",
+		name: "Floating bar chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws a bar between two values per row, so direction and size of change compare across categories.",
+		tags: [
+			"range",
+			"before after",
+			"change bar"
+		],
+		sample: (seed) => {
+			const rows = SampleData.categories(seed, 8, 2);
+			return rows.filter((row) => row.series === "Alpha").map((row) => ({
+				category: row.category,
+				start: row.value,
+				end: rows.find((d) => d.category === row.category && d.series === "Bravo").value
+			}));
+		},
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			shape: [
+				"bar",
+				"arrow",
+				"thin-rail"
+			],
+			sort: [ComparisonSort.Input, ComparisonSort.Descending],
+			reference: [
+				"none",
+				"start-mean",
+				"end-mean"
+			]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			start: "start",
+			end: "end",
+			orientation: Orientation.Vertical,
+			shape: "bar",
+			sort: ComparisonSort.Input,
+			reference: "none"
+		};
+	}
+	legendItems() {
+		return [{
+			key: "Increase",
+			color: this.palette.diverging(-.85)
+		}, {
+			key: "Decrease",
+			color: this.palette.diverging(.85)
+		}];
+	}
+	bandLayout() {
+		const { data, category, start, end, sort } = this.options;
+		const complete = data.filter((row) => Tally.num(row[start]) !== null && Tally.num(row[end]) !== null);
+		const merged = rollup(complete, (rows) => ({
+			start: mean(rows, (row) => Tally.num(row[start])) ?? 0,
+			end: mean(rows, (row) => Tally.num(row[end])) ?? 0
+		}), (row) => String(row[category] ?? ""));
+		const items = Tally.sorted([...merged].map(([name, d]) => ({
+			name,
+			...d
+		})), sort, (d) => d.end - d.start, (d) => d.name);
+		return {
+			bands: items.map((d) => d.name),
+			items,
+			values: items.flatMap((d) => [d.start, d.end])
+		};
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { shape, reference } = this.options;
+		const tone = (d) => ctx.palette.diverging(d.end >= d.start ? -.85 : .85);
+		const width = shape === "thin-rail" ? Math.min(8, band.bandwidth()) : band.bandwidth();
+		const along = (d) => mid(d.name);
+		const tip = (d) => ({
+			title: d.name,
+			color: tone(d),
+			rows: [
+				["Start", Tally.format(d.start)],
+				["End", Tally.format(d.end)],
+				["Change", Tally.format(d.end - d.start)]
+			]
+		});
+		const rects = ctx.marks("bars", "rect", shape === "arrow" ? [] : items, (d) => d.name).attr("fill", tone).attr("rx", Math.min(4, width / 2));
+		settleMarks(ctx, rects, this.span(along, width, (d) => value(d.start), (d) => value(d.end)), this.span(along, width, (d) => value(d.start), (d) => value(d.start)), 30);
+		ctx.hover(rects, tip);
+		const arrows = ctx.marks("arrows", "path", shape === "arrow" ? items : [], (d) => d.name).attr("fill", tone);
+		settleMarks(ctx, arrows, { d: (d) => this.arrow(along(d), value(d.start), value(d.end), width) });
+		ctx.hover(arrows, tip);
+		const dots = ctx.marks("ends", "circle", shape === "thin-rail" ? items : [], (d) => d.name).attr("fill", tone).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, dots, {
+			...this.spot(along, (d) => value(d.end)),
+			r: 5
+		}, { r: 0 });
+		ctx.hover(dots, tip);
+		const level = reference === "none" ? [] : [mean(items, (d) => reference === "start-mean" ? d.start : d.end)].flatMap((d) => d === void 0 ? [] : [d]);
+		const rule = ctx.marks("reference", "line", level).attr("stroke", ctx.theme.ink).attr("stroke-dasharray", "4 3");
+		settleMarks(ctx, rule, this.vertical ? {
+			x1: 0,
+			x2: ctx.plot.width,
+			y1: (d) => value(d),
+			y2: (d) => value(d)
+		} : {
+			y1: 0,
+			y2: ctx.plot.height,
+			x1: (d) => value(d),
+			x2: (d) => value(d)
+		});
+	}
+	/** Block arrow from `from` to `to` along the value axis. */
+	arrow(centre, from, to, width) {
+		const half = width / 2;
+		const neck = to - (to >= from ? 1 : -1) * Math.min(Math.abs(to - from), width * .6), stem = half * .55;
+		return `M${[
+			[centre - stem, from],
+			[centre - stem, neck],
+			[centre - half, neck],
+			[centre, to],
+			[centre + half, neck],
+			[centre + stem, neck],
+			[centre + stem, from]
+		].map(([a, v]) => this.vertical ? `${a},${v}` : `${v},${a}`).join("L")}Z`;
+	}
+};
+export { FloatReference, FloatShape, FloatingBarChart };

package/dist/charts/comparison/GaugeBarsComparison.js

@@ -0,0 +1,196 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, 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 { max, mean, rollup, symbol, symbolTriangle } from "d3";
+// src/charts/comparison/GaugeBarsComparison.ts
+/** What sits behind each value. */
+var GaugeBarTrack = /* @__PURE__ */ function(GaugeBarTrack) {
+	GaugeBarTrack["Bullet"] = "bullet";
+	GaugeBarTrack["Pill"] = "pill";
+	GaugeBarTrack["Segmented"] = "segmented";
+	return GaugeBarTrack;
+}({});
+var GaugeBarScale = /* @__PURE__ */ function(GaugeBarScale) {
+	GaugeBarScale["Absolute"] = "absolute";
+	GaugeBarScale["Percent"] = "percent-of-target";
+	return GaugeBarScale;
+}({});
+var GaugeBarMarker = /* @__PURE__ */ function(GaugeBarMarker) {
+	GaugeBarMarker["Bar"] = "bar";
+	GaugeBarMarker["Triangle"] = "triangle";
+	GaugeBarMarker["None"] = "none";
+	return GaugeBarMarker;
+}({});
+var BLOCKS = 10;
+var BANDS = [
+	1.25,
+	1,
+	.75,
+	.5
+];
+/** Actual against target for many rows at once: bullet bars, progress pills or segmented gauges. */
+var GaugeBarsComparison = class extends BandValueChart {
+	static meta = {
+		id: "comparison-gauge-bars",
+		name: "Gauge bars",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares actual values to their targets across rows, in the compact style of bullet graphs and progress bars.",
+		tags: [
+			"bullet",
+			"progress",
+			"actual vs target",
+			"kpi"
+		],
+		sample: (seed) => {
+			const rows = SampleData.categories(seed, 7, 2);
+			return rows.filter((row) => row.series === "Alpha").map((row) => ({
+				category: row.category,
+				value: row.value,
+				target: Math.round(+row.value * .7 + +rows.find((d) => d.category === row.category && d.series === "Bravo").value * .4)
+			}));
+		},
+		variants: {
+			track: [
+				"bullet",
+				"pill",
+				"segmented"
+			],
+			scale: ["absolute", "percent-of-target"],
+			marker: [
+				"bar",
+				"triangle",
+				"none"
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			sort: [ComparisonSort.Input, ComparisonSort.Descending]
+		}
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			category: "category",
+			value: "value",
+			target: "target",
+			orientation: Orientation.Horizontal,
+			track: "bullet",
+			scale: "absolute",
+			marker: "bar",
+			sort: ComparisonSort.Input
+		};
+	}
+	bandPadding() {
+		return .28;
+	}
+	get percent() {
+		return this.options.scale === "percent-of-target";
+	}
+	bandLayout() {
+		const { data, category, value, target, sort } = this.options;
+		const parsed = [...rollup(data.filter((row) => Tally.num(row[value]) !== null), (rows) => ({
+			value: mean(rows, (row) => Tally.num(row[value])) ?? 0,
+			target: mean(rows, (row) => Tally.num(row[target])) ?? null
+		}), (row) => String(row[category] ?? ""))].flatMap(([name, cell]) => {
+			if (!this.percent) return [{
+				name,
+				value: cell.value,
+				target: cell.target
+			}];
+			return cell.target ? [{
+				name,
+				value: cell.value / cell.target * 100,
+				target: 100
+			}] : [];
+		});
+		const items = Tally.sorted(parsed, sort, (d) => this.percent || d.target === null ? d.value : d.value / (d.target || 1), (d) => d.name);
+		const reach = this.options.track === "bullet" ? 1.25 : 1;
+		return {
+			bands: items.map((d) => d.name),
+			items,
+			values: [0, ...items.flatMap((d) => d.target === null ? [d.value] : [d.value, d.target * reach])]
+		};
+	}
+	blocks(items) {
+		const { track } = this.options;
+		if (track === "bullet") return items.flatMap((item) => item.target ? BANDS.map((share, level) => ({
+			key: `${item.name}/${level}`,
+			item,
+			from: 0,
+			to: item.target * share,
+			level
+		})) : []);
+		const cells = items.filter((item) => item.target && item.target > 0);
+		if (track === "pill") return cells.map((item) => ({
+			key: item.name,
+			item,
+			from: 0,
+			to: item.target,
+			level: 0
+		}));
+		return cells.flatMap((item) => Array.from({ length: BLOCKS }, (_, i) => ({
+			key: `${item.name}/${i}`,
+			item,
+			from: item.target * i / BLOCKS,
+			to: item.target * (i + 1) / BLOCKS,
+			level: i
+		})));
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { track, marker } = this.options;
+		const fill = ctx.palette.color(this.options.value);
+		const width = band.bandwidth();
+		const along = (d) => mid(d.name);
+		const bullet = track === "bullet", segmented = track === "segmented";
+		const barWidth = bullet ? width * .4 : width;
+		const gap = segmented ? 2 : 0;
+		const inset = (from, to) => {
+			const a = value(from), b = value(to), shrink = Math.min(gap, Math.abs(b - a) / 2);
+			return a < b ? [a, b - shrink] : [a, b + shrink];
+		};
+		const tip = (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [["Actual", Tally.format(d.value)], ...d.target === null ? [] : [["Target", Tally.format(d.target)]]]
+		});
+		const backs = ctx.marks("track", "rect", this.blocks(items), (d) => d.key).attr("fill", ctx.theme.grid).attr("fill-opacity", (d) => bullet ? .45 + d.level * .18 : 1).attr("rx", segmented ? 1 : bullet ? 0 : Math.min(4, width / 2));
+		settleMarks(ctx, backs, this.span((d) => along(d.item), width, (d) => inset(d.from, d.to)[0], (d) => inset(d.from, d.to)[1]));
+		const parts = segmented ? this.lit(items) : items.map((item) => ({
+			key: item.name,
+			item,
+			from: 0,
+			to: item.value,
+			level: 0
+		}));
+		const bars = ctx.marks("bars", "rect", parts, (d) => d.key).attr("fill", fill).attr("rx", segmented ? 1 : Math.min(4, barWidth / 2));
+		settleMarks(ctx, bars, this.span((d) => along(d.item), barWidth, (d) => inset(d.from, d.to)[0], (d) => inset(d.from, d.to)[1]), this.span((d) => along(d.item), barWidth, () => value(0), () => value(0)), segmented ? 4 : 30);
+		ctx.hover(bars, (d) => tip(d.item));
+		const targets = marker === "none" ? [] : items.filter((d) => d.target !== null);
+		const ticks = ctx.marks("target-bars", "line", marker === "bar" ? targets : [], (d) => d.name).attr("stroke", ctx.theme.ink).attr("stroke-width", 2);
+		settleMarks(ctx, ticks, this.cross(along, (d) => value(d.target), width * .42));
+		const triangle = symbol(symbolTriangle, 44)();
+		const offset = width / 2 + 5;
+		const carets = ctx.marks("target-carets", "path", marker === "triangle" ? targets : [], (d) => d.name).attr("fill", ctx.theme.ink);
+		settleMarks(ctx, carets, {
+			...this.vertical ? { transform: (d) => `translate(${along(d) - offset},${value(d.target)}) rotate(90)` } : { transform: (d) => `translate(${value(d.target)},${along(d) + offset}) rotate(0)` },
+			d: triangle
+		});
+	}
+	/** Whole and partial blocks earned by the value. */
+	lit(items) {
+		const size = (item) => item.target && item.target > 0 ? item.target / BLOCKS : (max(items, (d) => Math.abs(d.value)) || 1) / BLOCKS;
+		return items.flatMap((item) => {
+			const step = size(item), count = Math.min(40, Math.ceil(Math.max(0, item.value) / step));
+			return Array.from({ length: count }, (_, i) => ({
+				key: `${item.name}/${i}`,
+				item,
+				from: i * step,
+				to: Math.min(item.value, (i + 1) * step),
+				level: i
+			}));
+		});
+	}
+};
+export { GaugeBarMarker, GaugeBarScale, GaugeBarTrack, GaugeBarsComparison };