@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/comparison/SpanChart.js

@@ -0,0 +1,118 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandValueChart } from "./BandValueChart.js";
+import { ComparisonSort, ComparisonSpread, Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+// src/charts/comparison/SpanChart.ts
+/** What marks the centre of a span. */
+var SpanMarker = /* @__PURE__ */ function(SpanMarker) {
+	SpanMarker["None"] = "none";
+	SpanMarker["Median"] = "median";
+	SpanMarker["Mean"] = "mean";
+	return SpanMarker;
+}({});
+/** How far each group reaches: a bar from low to high, derived from raw observations. */
+var SpanChart = class extends BandValueChart {
+	static meta = {
+		id: "comparison-span",
+		name: "Span chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows the low-to-high reach of each group as a floating bar, for comparing ranges rather than totals.",
+		tags: [
+			"range bar",
+			"difference chart",
+			"min max"
+		],
+		sample: (seed) => SampleData.distribution(seed, 60, 6),
+		variants: {
+			statistic: [
+				ComparisonSpread.Range,
+				ComparisonSpread.Iqr,
+				ComparisonSpread.Decile
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			sort: [ComparisonSort.Input, ComparisonSort.Descending],
+			marker: [
+				"median",
+				"mean",
+				"none"
+			],
+			ends: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			group: "group",
+			value: "value",
+			orientation: Orientation.Horizontal,
+			statistic: ComparisonSpread.Range,
+			sort: ComparisonSort.Input,
+			marker: "median",
+			ends: false
+		};
+	}
+	bandLayout() {
+		const { data, group, value, statistic, sort, ends } = this.options;
+		const all = Tally.group(data, group, value).map((tally) => {
+			const [low, high] = Tally.interval(tally, statistic);
+			return {
+				tally,
+				low,
+				high
+			};
+		});
+		const items = Tally.sorted(all, sort, (d) => d.high - d.low, (d) => d.tally.key);
+		const reach = items.flatMap((d) => [d.low, d.high]);
+		const lo = Math.min(...reach), hi = Math.max(...reach), pad = ends && items.length ? (hi - lo) * .09 : 0;
+		return {
+			bands: items.map((d) => d.tally.key),
+			items,
+			values: items.length ? [lo - pad, hi + pad] : []
+		};
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { marker, ends } = this.options;
+		const fill = ctx.palette.color(this.options.value);
+		const width = band.bandwidth();
+		const along = (d) => mid(d.tally.key);
+		const centre = (d) => marker === "mean" ? d.tally.mean : d.tally.median;
+		const tip = (d) => ({
+			title: d.tally.key,
+			color: fill,
+			rows: [
+				["Low", Tally.format(d.low)],
+				["High", Tally.format(d.high)],
+				["Span", Tally.format(d.high - d.low)]
+			]
+		});
+		const bars = ctx.marks("bars", "rect", items, (d) => d.tally.key).attr("fill", fill).attr("rx", Math.min(4, width / 2));
+		settleMarks(ctx, bars, this.span(along, width, (d) => value(d.low), (d) => value(d.high)), this.span(along, width, (d) => value(centre(d)), (d) => value(centre(d))), 30);
+		ctx.hover(bars, tip);
+		const ticks = ctx.marks("centres", "line", marker === "none" ? [] : items, (d) => d.tally.key).attr("stroke", ctx.palette.inkOn(fill)).attr("stroke-width", 2);
+		settleMarks(ctx, ticks, this.cross(along, (d) => value(centre(d)), width / 2 - 1));
+		const labels = ends ? items.flatMap((d) => [{
+			key: `${d.tally.key}/low`,
+			d,
+			at: d.low,
+			sign: this.vertical ? 1 : -1
+		}, {
+			key: `${d.tally.key}/high`,
+			d,
+			at: d.high,
+			sign: this.vertical ? -1 : 1
+		}]) : [];
+		const shift = (d) => d.sign * (this.vertical ? d.sign > 0 ? 13 : 5 : 5);
+		const texts = ctx.text(ctx.marks("ends", "text", labels, (d) => d.key)).text((d) => Tally.format(Math.round(d.at))).attr("text-anchor", (d) => this.vertical ? "middle" : d.sign > 0 ? "start" : "end");
+		settleMarks(ctx, texts, this.vertical ? {
+			x: (d) => along(d.d),
+			y: (d) => value(d.at) + shift(d)
+		} : {
+			y: (d) => along(d.d) + 4,
+			x: (d) => value(d.at) + shift(d)
+		});
+	}
+};
+export { SpanChart, SpanMarker };

package/dist/charts/comparison/TableLensChart.js

@@ -0,0 +1,203 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { max, mean, min, rollup, scaleLinear, sum } from "d3";
+// src/charts/comparison/TableLensChart.ts
+var LensSort = /* @__PURE__ */ function(LensSort) {
+	LensSort["Input"] = "input";
+	LensSort["FirstColumn"] = "first-column";
+	LensSort["Total"] = "total";
+	LensSort["Name"] = "name";
+	return LensSort;
+}({});
+/** Whether each column keeps its own scale or all columns share one. */
+var LensScale = /* @__PURE__ */ function(LensScale) {
+	LensScale["Column"] = "per-column";
+	LensScale["Shared"] = "shared";
+	return LensScale;
+}({});
+var LensMark = /* @__PURE__ */ function(LensMark) {
+	LensMark["Bar"] = "bar";
+	LensMark["Dot"] = "dot";
+	LensMark["Tick"] = "tick";
+	return LensMark;
+}({});
+/** What a cell's mark grows from. */
+var LensBaseline = /* @__PURE__ */ function(LensBaseline) {
+	LensBaseline["Zero"] = "zero";
+	LensBaseline["Mean"] = "mean";
+	return LensBaseline;
+}({});
+var HEADER = 18;
+/** A table turned into bars: scan a whole dataset in one view, sort by any column and zoom into a row. */
+var TableLensChart = class extends Chart2D {
+	static meta = {
+		id: "comparison-table-lens",
+		name: "Table lens",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows every row and column of a table as small graphical cells, sorted to expose patterns between columns.",
+		tags: [
+			"table",
+			"heat table",
+			"fisheye",
+			"inline bars"
+		],
+		sample: (seed) => SampleData.categories(seed, 12, 4),
+		variants: {
+			sort: [
+				"first-column",
+				"total",
+				"name",
+				"input"
+			],
+			mark: [
+				"bar",
+				"dot",
+				"tick"
+			],
+			scale: ["per-column", "shared"],
+			baseline: ["zero", "mean"],
+			focus: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			row: "category",
+			column: "series",
+			value: "value",
+			sort: "first-column",
+			scale: "per-column",
+			mark: "bar",
+			baseline: "zero",
+			focus: false
+		};
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 16,
+			bottom: 10,
+			left: 16
+		};
+	}
+	ordered(cells, first) {
+		const names = [...cells.keys()];
+		const { sort } = this.options;
+		if (sort === "input") return names;
+		if (sort === "name") return names.sort((a, b) => a.localeCompare(b));
+		const score = (name) => sort === "total" ? sum(cells.get(name).values()) : cells.get(name).get(first ?? "") ?? -Infinity;
+		return names.sort((a, b) => score(b) - score(a));
+	}
+	lanes(ctx, columns, labelWidth, all, byColumn) {
+		const { scale, baseline } = this.options;
+		const gap = 12;
+		const width = Math.max(8, (ctx.plot.width - labelWidth - gap * columns.length) / Math.max(1, columns.length));
+		return columns.map((name, i) => {
+			const values = scale === "shared" ? all : byColumn.get(name);
+			const base = baseline === "mean" ? mean(values) ?? 0 : 0;
+			const low = Math.min(min(values) ?? 0, base), high = Math.max(max(values) ?? 1, base);
+			const x = labelWidth + gap + i * (width + gap);
+			return {
+				name,
+				x,
+				width,
+				base,
+				scale: scaleLinear([low, high > low ? high : low + 1], [x, x + width])
+			};
+		});
+	}
+	lines(ctx, names) {
+		const { focus, focusRow } = this.options;
+		const lens = focus ? Math.min(names.length - 1, Math.max(0, focusRow ?? Math.floor(names.length / 3))) : -1;
+		const weight = (i) => lens < 0 ? 1 : i === lens ? 3.4 : Math.abs(i - lens) === 1 ? 1.5 : 1;
+		const unit = (ctx.plot.height - HEADER) / (sum(names, (_, i) => weight(i)) || 1);
+		let y = HEADER;
+		return names.map((name, i) => {
+			const height = weight(i) * unit, line = {
+				name,
+				y,
+				height,
+				focused: i === lens
+			};
+			y += height;
+			return line;
+		});
+	}
+	draw(ctx) {
+		const { data, row, column, value, mark } = this.options;
+		const clean = data.filter((d) => Tally.num(d[value]) !== null);
+		const cells = rollup(clean, (rows) => mean(rows, (d) => Tally.num(d[value])) ?? 0, (d) => String(d[row]), (d) => String(d[column]));
+		const columns = [...new Set(clean.map((d) => String(d[column])))];
+		const byColumn = new Map(columns.map((name) => [name, [...cells.values()].flatMap((line) => line.get(name) ?? [])]));
+		const names = this.ordered(cells, columns[0]);
+		const labelWidth = Math.min(90, (max(names, (name) => Tally.width(name)) ?? 0) + 4);
+		const lanes = this.lanes(ctx, columns, labelWidth, [...byColumn.values()].flat(), byColumn);
+		const lines = this.lines(ctx, names);
+		const marks = lines.flatMap((line) => lanes.flatMap((lane) => {
+			const cell = cells.get(line.name).get(lane.name);
+			return cell === void 0 ? [] : [{
+				row: line,
+				lane,
+				value: cell
+			}];
+		}));
+		ctx.text(ctx.marks("heads", "text", lanes, (d) => d.name), 11, "ink").attr("font-weight", 600).attr("x", (d) => d.x).attr("y", 11).text((d) => Tally.clip(d.name, d.width));
+		const rules = ctx.marks("bases", "line", lanes, (d) => d.name).attr("stroke", ctx.theme.axis);
+		settleMarks(ctx, rules, {
+			x1: (d) => d.scale(d.base),
+			x2: (d) => d.scale(d.base),
+			y1: HEADER,
+			y2: ctx.plot.height
+		});
+		const shown = lines.filter((line) => line.height >= 11);
+		const labels = ctx.text(ctx.marks("names", "text", shown, (d) => d.name), 11).attr("font-weight", (d) => d.focused ? 600 : 400).attr("fill", (d) => d.focused ? ctx.theme.ink : ctx.theme.inkSecondary).text((d) => Tally.clip(d.name, labelWidth));
+		settleMarks(ctx, labels, {
+			x: 0,
+			y: (d) => d.y + d.height / 2 + 4
+		});
+		const fill = (d) => ctx.palette.color(d.lane.name);
+		const tip = (d) => ({
+			title: d.row.name,
+			color: fill(d),
+			rows: [[d.lane.name, Tally.format(d.value)]]
+		});
+		const thick = (d) => Math.max(1, d.row.height - 2);
+		const start = (d) => d.lane.scale(Math.min(d.value, d.lane.base)), length = (d) => Math.abs(d.lane.scale(d.value) - d.lane.scale(d.lane.base));
+		const shapes = mark === "dot" ? [] : marks;
+		const rects = ctx.marks("cells", "rect", shapes, (d) => `${d.row.name}/${d.lane.name}`).attr("fill", fill).attr("rx", mark === "bar" ? 2 : 1);
+		settleMarks(ctx, rects, mark === "bar" ? {
+			x: start,
+			width: length,
+			y: (d) => d.row.y + 1,
+			height: thick
+		} : {
+			x: (d) => d.lane.scale(d.value) - 1,
+			width: 2,
+			y: (d) => d.row.y + 1,
+			height: thick
+		}, {
+			width: mark === "bar" ? 0 : 2,
+			x: (d) => d.lane.scale(d.lane.base)
+		}, 2);
+		ctx.hover(rects, tip);
+		const dots = ctx.marks("dots", "circle", mark === "dot" ? marks : [], (d) => `${d.row.name}/${d.lane.name}`).attr("fill", fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+		settleMarks(ctx, dots, {
+			cx: (d) => d.lane.scale(d.value),
+			cy: (d) => d.row.y + d.row.height / 2,
+			r: (d) => Math.max(2, Math.min(4.5, d.row.height / 2 - 1))
+		}, { r: 0 }, 2);
+		ctx.hover(dots, tip);
+		const printed = marks.filter((d) => d.row.focused);
+		const texts = ctx.text(ctx.marks("values", "text", printed, (d) => d.lane.name), 11, "ink").attr("font-weight", 600).text((d) => Tally.format(d.value)).attr("text-anchor", "end").attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		settleMarks(ctx, texts, {
+			x: (d) => d.lane.x + d.lane.width,
+			y: (d) => d.row.y + d.row.height / 2 + 4
+		});
+	}
+};
+export { LensBaseline, LensMark, LensScale, LensSort, TableLensChart };

package/dist/charts/comparison/Tally.js

@@ -0,0 +1,129 @@
+import { ascending, deviation, group, mean, median, quantileSorted } from "d3";
+// src/charts/comparison/Tally.ts
+/** Which summary of a group of observations draws an interval. */
+var ComparisonSpread = /* @__PURE__ */ function(ComparisonSpread) {
+	ComparisonSpread["StdDev"] = "sd";
+	ComparisonSpread["StdError"] = "se";
+	ComparisonSpread["Ci95"] = "ci95";
+	ComparisonSpread["Iqr"] = "iqr";
+	ComparisonSpread["Range"] = "range";
+	ComparisonSpread["Decile"] = "p10-p90";
+	return ComparisonSpread;
+}({});
+/** Order of the bands along the category axis. */
+var ComparisonSort = /* @__PURE__ */ function(ComparisonSort) {
+	ComparisonSort["Input"] = "input";
+	ComparisonSort["Descending"] = "descending";
+	ComparisonSort["Ascending"] = "ascending";
+	ComparisonSort["Name"] = "name";
+	return ComparisonSort;
+}({});
+/** Where a central value comes from. */
+var ComparisonCenter = /* @__PURE__ */ function(ComparisonCenter) {
+	ComparisonCenter["Mean"] = "mean";
+	ComparisonCenter["Median"] = "median";
+	return ComparisonCenter;
+}({});
+var SMALL_T = [
+	12.706,
+	4.303,
+	3.182,
+	2.776
+];
+var CHAR = 6.2;
+/** Two-sided 97.5% Student t, by table then Cornish-Fisher. */
+function tCritical(df) {
+	if (df < 1) return 0;
+	const small = SMALL_T[df - 1];
+	if (small) return small;
+	const z = 1.96;
+	return z + (z ** 3 + z) / (4 * df) + (5 * z ** 5 + 16 * z ** 3 + 3 * z) / (96 * df * df);
+}
+/** Reads, groups and summarises rows for the comparison charts, tolerating missing values. */
+var Tally = class Tally {
+	/** A finite number, or null for anything missing or non-numeric. */
+	static num(cell) {
+		if (cell === null || cell === void 0 || cell === "") return null;
+		const value = +cell;
+		return Number.isFinite(value) ? value : null;
+	}
+	static values(rows, field) {
+		return rows.flatMap((row) => {
+			const value = Tally.num(row[field]);
+			return value === null ? [] : [value];
+		});
+	}
+	static of(key, values) {
+		const sorted = [...values].sort(ascending);
+		const n = sorted.length, sd = n > 1 ? deviation(sorted) : 0;
+		const at = (p) => quantileSorted(sorted, p) ?? 0;
+		return {
+			key,
+			values,
+			n,
+			mean: mean(sorted) ?? 0,
+			median: median(sorted) ?? 0,
+			sd,
+			se: n ? sd / Math.sqrt(n) : 0,
+			min: sorted[0] ?? 0,
+			max: sorted[n - 1] ?? 0,
+			q1: at(.25),
+			q3: at(.75),
+			p10: at(.1),
+			p90: at(.9)
+		};
+	}
+	/** One summary per distinct key, in first-seen order; keys with no numeric value are dropped. */
+	static group(rows, key, field) {
+		return [...group(rows, (row) => String(row[key] ?? ""))].map(([name, members]) => Tally.of(name, Tally.values(members, field))).filter((tally) => tally.n > 0);
+	}
+	static center(tally, kind) {
+		return kind === "median" ? tally.median : tally.mean;
+	}
+	/** The `[low, high]` interval; distribution-free spreads are returned as quantiles, others around the mean. */
+	static interval(tally, spread) {
+		switch (spread) {
+			case "iqr": return [tally.q1, tally.q3];
+			case "range": return [tally.min, tally.max];
+			case "p10-p90": return [tally.p10, tally.p90];
+			case "sd": return [tally.mean - tally.sd, tally.mean + tally.sd];
+			case "se": return [tally.mean - tally.se, tally.mean + tally.se];
+			default: {
+				const half = tCritical(tally.n - 1) * tally.se;
+				return [tally.mean - half, tally.mean + half];
+			}
+		}
+	}
+	static sorted(items, sort, value, name) {
+		const list = [...items];
+		if (sort === "descending") return list.sort((a, b) => value(b) - value(a));
+		if (sort === "ascending") return list.sort((a, b) => value(a) - value(b));
+		if (sort === "name") return list.sort((a, b) => name(a).localeCompare(name(b)));
+		return list;
+	}
+	static format(value) {
+		return value.toLocaleString("en", { maximumFractionDigits: Math.abs(value) < 10 ? 2 : 1 });
+	}
+	static width(text, size = 11) {
+		return text.length * CHAR * size / 11;
+	}
+	/** Fits text to `px`, ending in an ellipsis when cut. */
+	static clip(text, px, size = 11) {
+		if (Tally.width(text, size) <= px) return text;
+		const keep = Math.floor(px * 11 / (CHAR * size)) - 1;
+		return keep < 2 ? "" : `${text.slice(0, keep)}…`;
+	}
+	/**
+	* Label placement along one line: keeps every k-th label when `gap` per label cannot fit `[low, high]`,
+	* then spreads the kept ones so none overlap. Returns `[index, position]` pairs.
+	*/
+	static spread(wanted, gap, low, high) {
+		const order = wanted.map((at, index) => [index, at]).sort((a, b) => a[1] - b[1]);
+		const every = Math.max(1, Math.ceil(order.length * gap / Math.max(1, high - low)));
+		const kept = order.filter((_, i) => i % every === 0);
+		for (let i = 0; i < kept.length; i++) kept[i][1] = Math.max(kept[i][1], i ? kept[i - 1][1] + gap : low);
+		for (let i = kept.length - 1; i >= 0; i--) kept[i][1] = Math.min(kept[i][1], i < kept.length - 1 ? kept[i + 1][1] - gap : high);
+		return kept;
+	}
+};
+export { ComparisonCenter, ComparisonSort, ComparisonSpread, Tally };

package/dist/charts/comparison/TrellisChart.js

@@ -0,0 +1,158 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PanelChart, PanelFlow } from "./PanelChart.js";
+import { Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { area, group, line, max, mean, min, scaleLinear, scaleUtc, utcFormat } from "d3";
+// src/charts/comparison/TrellisChart.ts
+var TrellisMark = /* @__PURE__ */ function(TrellisMark) {
+	TrellisMark["Line"] = "line";
+	TrellisMark["Area"] = "area";
+	TrellisMark["Dots"] = "dots";
+	return TrellisMark;
+}({});
+var DAY = utcFormat("%b %-d");
+/** Cleveland's trellis: one panel per group on common axes, with the other groups as faint context. */
+var TrellisChart = class extends PanelChart {
+	static meta = {
+		id: "comparison-trellis",
+		name: "Trellis chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Repeats an x-y panel per group on shared axes, untangling many series that would overlap in one plot.",
+		tags: [
+			"lattice",
+			"facet grid",
+			"small multiples",
+			"spaghetti alternative"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 48, 6).map((row) => ({
+			series: row.series,
+			date: row.date,
+			value: row.value
+		})),
+		variants: {
+			mark: [
+				"line",
+				"area",
+				"dots"
+			],
+			fit: [false, true],
+			context: [true, false],
+			freeScale: [false, true],
+			flow: [
+				PanelFlow.Auto,
+				PanelFlow.Row,
+				PanelFlow.Column
+			]
+		},
+		valid: (values) => !(values.context && values.freeScale)
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			facet: "series",
+			x: "date",
+			y: "value",
+			mark: "line",
+			fit: false,
+			context: true,
+			freeScale: false,
+			flow: PanelFlow.Auto
+		};
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 16,
+			bottom: 8,
+			left: 16
+		};
+	}
+	points() {
+		const { data, facet, x, y } = this.options;
+		return data.flatMap((row) => {
+			const cell = row[x], time = cell instanceof Date, at = Tally.num(cell), value = Tally.num(row[y]);
+			return at === null || value === null ? [] : [{
+				facet: String(row[facet] ?? ""),
+				x: at,
+				y: value,
+				time
+			}];
+		}).sort((a, b) => a.x - b.x);
+	}
+	trend(points) {
+		const mx = mean(points, (d) => d.x) ?? 0, my = mean(points, (d) => d.y) ?? 0;
+		let top = 0, bottom = 0;
+		for (const d of points) {
+			top += (d.x - mx) * (d.y - my);
+			bottom += (d.x - mx) ** 2;
+		}
+		const slope = bottom ? top / bottom : 0;
+		return [points[0], points[points.length - 1]].map((d) => ({
+			...d,
+			y: my + slope * (d.x - mx)
+		}));
+	}
+	draw(ctx) {
+		const { mark, fit, context, freeScale } = this.options;
+		const points = this.points();
+		const groups = group(points, (d) => d.facet);
+		const low = min(points, (d) => d.x) ?? 0, high = max(points, (d) => d.x) ?? 1;
+		const span = [low, high > low ? high : low + 1];
+		const floor = (list) => mark === "area" ? Math.min(0, min(list, (d) => d.y) ?? 0) : min(list, (d) => d.y) ?? 0;
+		const reach = Tally.width(Math.round(max(points, (d) => Math.abs(d.y)) ?? 0).toLocaleString("en")) + 8;
+		const panels = this.panels(ctx, [...groups.keys()], {
+			left: reach,
+			bottom: 16,
+			gapX: freeScale ? reach + 6 : 12
+		});
+		const time = points[0]?.time ?? false;
+		this.eachPanel(ctx, panels, (panel, parent) => {
+			const own = groups.get(panel.key);
+			const basis = freeScale ? own : points;
+			const top = max(basis, (d) => d.y) ?? 1, bottom = floor(basis);
+			const y = scaleLinear([bottom, top > bottom ? top : bottom + 1], [panel.height, 0]).nice();
+			const x = time ? scaleUtc().domain(span).range([0, panel.width]) : scaleLinear(span, [0, panel.width]);
+			const px = (d) => x(d.x), py = (d) => y(d.y);
+			const color = ctx.palette.color(panel.key);
+			const draw = line().x(px).y(py);
+			const tip = (d) => ({
+				title: panel.key,
+				color,
+				rows: [[time ? new Date(d.x).toISOString().slice(0, 10) : Tally.format(d.x), Tally.format(d.y)]]
+			});
+			this.panelGrid(ctx, parent, panel, y, "y", freeScale || panel.left);
+			this.xLabels(ctx, parent, panel, x, time);
+			const others = context ? [...groups].filter(([key]) => key !== panel.key) : [];
+			const ghosts = ctx.marks("ghosts", "path", others, ([key]) => key, parent).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+			settleMarks(ctx, ghosts, { d: ([, list]) => draw(list) });
+			const shade = ctx.marks("area", "path", mark === "area" ? [own] : [], (_, i) => i, parent).attr("fill", color).attr("fill-opacity", .28);
+			settleMarks(ctx, shade, { d: (list) => area().x(px).y0(y(Math.max(0, y.domain()[0]))).y1(py)(list) });
+			const path = ctx.marks("line", "path", mark === "dots" ? [] : [own], (_, i) => i, parent).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2);
+			settleMarks(ctx, path, { d: (list) => draw(list) }, { d: (list) => line().x(px).y(panel.height)(list) });
+			ctx.hover(path, () => ({
+				title: panel.key,
+				color,
+				rows: [["Latest", Tally.format(own[own.length - 1].y)], ["Points", own.length]]
+			}));
+			const dots = ctx.marks("dots", "circle", mark === "dots" ? own : own.slice(-1), (d) => d.x, parent).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", mark === "dots" ? 1 : 2);
+			settleMarks(ctx, dots, {
+				cx: px,
+				cy: py,
+				r: mark === "dots" ? 2.5 : 4
+			}, { r: 0 });
+			ctx.hover(dots, tip);
+			const trend = ctx.marks("trend", "path", fit ? [this.trend(own)] : [], (_, i) => i, parent).attr("fill", "none").attr("stroke", ctx.theme.ink).attr("stroke-width", 2).attr("stroke-dasharray", "5 3");
+			settleMarks(ctx, trend, { d: (list) => draw(list) });
+		});
+	}
+	/** x labels for the bottom row, spaced by the panel's width and kept off its corners. */
+	xLabels(ctx, parent, panel, x, time) {
+		const ticks = x.ticks(Math.max(2, Math.floor(panel.width / 64)));
+		const shown = panel.bottom ? ticks.filter((tick) => x(tick) > 16 && x(tick) < panel.width - 16) : [];
+		ctx.text(ctx.marks("x-ticks", "text", shown, (tick) => +tick, parent), 10, "muted").attr("text-anchor", "middle").attr("x", (tick) => x(tick)).attr("y", panel.height + 12).text((tick) => time ? DAY(/* @__PURE__ */ new Date(+tick)) : Tally.format(+tick));
+	}
+};
+export { TrellisChart, TrellisMark };

package/dist/charts/comparison/index.js

@@ -0,0 +1,43 @@
+import { ComparisonCenter, ComparisonSort, ComparisonSpread, Tally } from "./Tally.js";
+import { BandValueChart } from "./BandValueChart.js";
+import { BarMeanChart, BarMeanRaw } from "./BarMeanChart.js";
+import { CycleAggregate, CycleChart, CycleMark, CycleReference, CycleUnit } from "./CycleChart.js";
+import { DeviationChart, DeviationMark, DeviationReference, DeviationUnit } from "./DeviationChart.js";
+import { ErrorBarChart, ErrorBarLink } from "./ErrorBarChart.js";
+import { EffectForestPlot, ForestMarker, ForestSort } from "./EffectForestPlot.js";
+import { FloatReference, FloatShape, FloatingBarChart } from "./FloatingBarChart.js";
+import { GaugeBarMarker, GaugeBarScale, GaugeBarTrack, GaugeBarsComparison } from "./GaugeBarsComparison.js";
+import { IntervalChart, IntervalStyle } from "./IntervalChart.js";
+import { MeanLineChart, MeanRibbon } from "./MeanLineChart.js";
+import { PairedBarChart, PairedLayout, PairedSort, PairedUnit } from "./PairedBarChart.js";
+import { ProfileScale, RadarLikeProfileChart } from "./RadarLikeProfileChart.js";
+import { RangeDotChart, RangeDotLink } from "./RangeDotChart.js";
+import { RankedDotChart, RankedLeader } from "./RankedDotChart.js";
+import { RankedSlopeLabels, RankedSlopePosition, RankedSlopeSpan, SlopeGraphRanked } from "./SlopeGraphRanked.js";
+import { PanelChart, PanelFlow } from "./PanelChart.js";
+import { BarFacet, SmallMultipleBars } from "./SmallMultipleBars.js";
+import { SpanChart, SpanMarker } from "./SpanChart.js";
+import { LensBaseline, LensMark, LensScale, LensSort, TableLensChart } from "./TableLensChart.js";
+import { TrellisChart, TrellisMark } from "./TrellisChart.js";
+// src/charts/comparison/index.ts
+var comparisonCatalog = [
+	RadarLikeProfileChart,
+	TableLensChart,
+	SlopeGraphRanked,
+	BarMeanChart,
+	ErrorBarChart,
+	EffectForestPlot,
+	GaugeBarsComparison,
+	SpanChart,
+	FloatingBarChart,
+	DeviationChart,
+	RangeDotChart,
+	PairedBarChart,
+	SmallMultipleBars,
+	CycleChart,
+	TrellisChart,
+	MeanLineChart,
+	IntervalChart,
+	RankedDotChart
+];
+export { BandValueChart, BarFacet, BarMeanChart, BarMeanRaw, ComparisonCenter, ComparisonSort, ComparisonSpread, CycleAggregate, CycleChart, CycleMark, CycleReference, CycleUnit, DeviationChart, DeviationMark, DeviationReference, DeviationUnit, EffectForestPlot, ErrorBarChart, ErrorBarLink, FloatReference, FloatShape, FloatingBarChart, ForestMarker, ForestSort, GaugeBarMarker, GaugeBarScale, GaugeBarTrack, GaugeBarsComparison, IntervalChart, IntervalStyle, LensBaseline, LensMark, LensScale, LensSort, MeanLineChart, MeanRibbon, PairedBarChart, PairedLayout, PairedSort, PairedUnit, PanelChart, PanelFlow, ProfileScale, RadarLikeProfileChart, RangeDotChart, RangeDotLink, RankedDotChart, RankedLeader, RankedSlopeLabels, RankedSlopePosition, RankedSlopeSpan, SlopeGraphRanked, SmallMultipleBars, SpanChart, SpanMarker, TableLensChart, Tally, TrellisChart, TrellisMark, comparisonCatalog };

package/dist/charts/comparison/settleMarks.js

@@ -0,0 +1,9 @@
+// src/charts/comparison/settleMarks.ts
+/** `ctx.set` where new marks start in their final place, overridden by `from`, so nothing flies in from the origin. */
+function settleMarks(ctx, selection, final, from = {}, stagger = 0) {
+	return ctx.set(selection, final, {
+		...final,
+		...from
+	}, stagger);
+}
+export { settleMarks };