@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/comparison/IntervalChart.js

@@ -0,0 +1,146 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandValueChart } from "./BandValueChart.js";
+import { ComparisonCenter, ComparisonSort, Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { area, ascending, max, quantileSorted } from "d3";
+// src/charts/comparison/IntervalChart.ts
+var IntervalStyle = /* @__PURE__ */ function(IntervalStyle) {
+	IntervalStyle["Nested"] = "nested-bars";
+	IntervalStyle["Lines"] = "point-interval";
+	IntervalStyle["HalfEye"] = "half-eye";
+	return IntervalStyle;
+}({});
+var SHARES = [
+	.5,
+	.8,
+	.95
+];
+var STEPS = 40;
+/** Nested uncertainty intervals: how sure each estimate is, at several levels at once. */
+var IntervalChart = class extends BandValueChart {
+	static meta = {
+		id: "comparison-interval",
+		name: "Interval chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows several nested quantile intervals per group, so uncertainty is compared rather than a single error bar.",
+		tags: [
+			"uncertainty",
+			"gradient interval",
+			"eye plot",
+			"credible interval"
+		],
+		sample: (seed) => SampleData.distribution(seed, 120, 5),
+		variants: {
+			style: [
+				"nested-bars",
+				"point-interval",
+				"half-eye"
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			levels: [
+				3,
+				2,
+				1
+			],
+			center: [ComparisonCenter.Median, ComparisonCenter.Mean],
+			sort: [ComparisonSort.Input, ComparisonSort.Descending]
+		}
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			group: "group",
+			value: "value",
+			orientation: Orientation.Horizontal,
+			style: "nested-bars",
+			levels: 3,
+			center: ComparisonCenter.Median,
+			sort: ComparisonSort.Input
+		};
+	}
+	bandPadding() {
+		return .12;
+	}
+	valueInset() {
+		return 7;
+	}
+	/** Gaussian kernel density across the 95% span. */
+	density(tally) {
+		const { sd, n, min, max: top, values } = tally;
+		const bandwidth = 1.06 * (sd || 1) * n ** -.2;
+		const sample = values.length > 200 ? values.filter((_, i) => i % Math.ceil(values.length / 200) === 0) : values;
+		const low = min - bandwidth, high = top + bandwidth;
+		return Array.from({ length: 41 }, (_, i) => {
+			const at = low + (high - low) * i / STEPS;
+			return [at, sample.reduce((total, v) => total + Math.exp(-.5 * ((at - v) / bandwidth) ** 2), 0)];
+		});
+	}
+	bandLayout() {
+		const { data, group, value, levels, center, sort, style } = this.options;
+		const shares = SHARES.slice(0, Math.max(1, Math.min(3, levels)));
+		const all = Tally.group(data, group, value).map((tally) => {
+			const sorted = [...tally.values].sort(ascending);
+			const spans = shares.map((share, rank) => ({
+				key: `${tally.key}/${share}`,
+				group: tally.key,
+				share,
+				rank,
+				low: quantileSorted(sorted, (1 - share) / 2) ?? 0,
+				high: quantileSorted(sorted, 1 - (1 - share) / 2) ?? 0
+			}));
+			return {
+				tally,
+				centre: Tally.center(tally, center),
+				spans,
+				density: style === "half-eye" ? this.density(tally) : []
+			};
+		});
+		const items = Tally.sorted(all, sort, (d) => d.centre, (d) => d.tally.key);
+		return {
+			bands: items.map((d) => d.tally.key),
+			items,
+			values: items.flatMap((d) => [...d.spans.flatMap((s) => [s.low, s.high]), ...d.density.map(([at]) => at)])
+		};
+	}
+	/** Density drawn off the band's interval line, on the side away from its label. */
+	slab(base, value, unit) {
+		const path = area();
+		if (this.vertical) return path.y(([at]) => value(at)).x0(base + 3).x1(([, h]) => base + 3 + h * unit);
+		return path.x(([at]) => value(at)).y0(base - 3).y1(([, h]) => base - 3 - h * unit);
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { style } = this.options;
+		const width = band.bandwidth();
+		const half = style === "half-eye";
+		const axisY = (name) => mid(name) + (half ? this.vertical ? -width * .3 : width * .3 : 0);
+		const spans = items.flatMap((d) => d.spans).sort((a, b) => b.rank - a.rank);
+		const tone = (d) => ctx.palette.sequential(.3 + .55 * (2 - d.rank) / 2);
+		const thick = (d) => style === "nested-bars" ? width * (1 - d.rank * .26) : Math.min(width * .4, 6) - d.rank * 1.6;
+		const along = (d) => axisY(d.group);
+		const tip = (d) => ({
+			title: d.group,
+			color: tone(d),
+			rows: [[`${Math.round(d.share * 100)}% interval`, `${Tally.format(d.low)} to ${Tally.format(d.high)}`]]
+		});
+		const reach = max(items, (d) => max(d.density, ([, h]) => h)) || 1;
+		const slabs = ctx.marks("slabs", "path", half ? items : [], (d) => d.tally.key).attr("fill", ctx.theme.grid);
+		settleMarks(ctx, slabs, { d: (d) => this.slab(axisY(d.tally.key), value, width * .68 / reach)(d.density) });
+		const bars = ctx.marks("spans", "rect", spans, (d) => d.key).attr("fill", tone).attr("rx", (d) => Math.min(4, thick(d) / 2));
+		settleMarks(ctx, bars, this.span(along, thick, (d) => value(d.low), (d) => value(d.high)), this.span(along, thick, (d) => value((d.low + d.high) / 2), (d) => value((d.low + d.high) / 2)), 8);
+		ctx.hover(bars, tip);
+		const onBar = style === "nested-bars";
+		const ticks = ctx.marks("centres", "circle", items, (d) => d.tally.key).attr("fill", onBar ? ctx.theme.surface : ctx.theme.ink).attr("stroke", onBar ? ctx.theme.ink : ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, ticks, {
+			...this.spot((d) => axisY(d.tally.key), (d) => value(d.centre)),
+			r: 4.5
+		}, { r: 0 }, 20);
+		ctx.hover(ticks, (d) => ({
+			title: d.tally.key,
+			rows: [["Centre", Tally.format(d.centre)], ["n", d.tally.n]]
+		}));
+	}
+};
+export { IntervalChart, IntervalStyle };

package/dist/charts/comparison/MeanLineChart.js

@@ -0,0 +1,142 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandValueChart } from "./BandValueChart.js";
+import { ComparisonCenter, ComparisonSpread, Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { mean } from "d3";
+// src/charts/comparison/MeanLineChart.ts
+/** The band drawn around the line of centres. */
+var MeanRibbon = /* @__PURE__ */ function(MeanRibbon) {
+	MeanRibbon["None"] = "none";
+	MeanRibbon["StdDev"] = "sd";
+	MeanRibbon["StdError"] = "se";
+	return MeanRibbon;
+}({});
+var GOLDEN = .618034;
+/** Group means joined by a line over the raw observations, with the overall mean for reference. */
+var MeanLineChart = class extends BandValueChart {
+	static meta = {
+		id: "comparison-mean-line",
+		name: "Mean line chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Connects the centre of each group across categories, showing how the level shifts against the overall mean.",
+		tags: [
+			"means plot",
+			"jitter",
+			"reference line",
+			"grand mean"
+		],
+		sample: (seed) => SampleData.distribution(seed, 36, 6),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			center: [ComparisonCenter.Mean, ComparisonCenter.Median],
+			ribbon: [
+				"sd",
+				"se",
+				"none"
+			],
+			raw: [true, false],
+			grand: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			legend: LegendPosition.None,
+			group: "group",
+			value: "value",
+			orientation: Orientation.Vertical,
+			center: ComparisonCenter.Mean,
+			ribbon: "sd",
+			raw: true,
+			grand: true
+		};
+	}
+	bandPadding() {
+		return .12;
+	}
+	valueInset() {
+		return 9;
+	}
+	bandLayout() {
+		const { data, group, value, center, ribbon, raw } = this.options;
+		const items = Tally.group(data, group, value).map((tally) => {
+			const centre = Tally.center(tally, center);
+			const [a, b] = ribbon === "none" ? [centre, centre] : Tally.interval(tally, ribbon === "se" ? ComparisonSpread.StdError : ComparisonSpread.StdDev);
+			const shift = centre - tally.mean;
+			return {
+				tally,
+				centre,
+				low: ribbon === "none" ? centre : a + shift,
+				high: ribbon === "none" ? centre : b + shift
+			};
+		});
+		const rawValues = raw ? items.flatMap((d) => d.tally.values) : [];
+		return {
+			bands: items.map((d) => d.tally.key),
+			items,
+			values: [...rawValues, ...items.flatMap((d) => [
+				d.low,
+				d.high,
+				d.centre
+			])]
+		};
+	}
+	plotBands(ctx, { items, band, mid, value }) {
+		const { raw, grand, ribbon } = this.options;
+		const stroke = ctx.palette.color(this.options.value);
+		const along = (d) => mid(d.tally.key);
+		const at = (d) => value(d.centre);
+		const width = band.bandwidth();
+		const tip = (d) => ({
+			title: d.tally.key,
+			color: stroke,
+			rows: [["Centre", Tally.format(d.centre)], ["n", d.tally.n]]
+		});
+		const shade = ctx.marks("ribbon", "path", ribbon === "none" || items.length < 2 ? [] : [items], (_, i) => i).attr("fill", stroke).attr("fill-opacity", .16);
+		settleMarks(ctx, shade, { d: (list) => this.ribbon(along, (d) => value(d.low), (d) => value(d.high))(list) });
+		const dots = raw ? items.flatMap((d) => d.tally.values.map((v, index) => ({
+			group: d.tally.key,
+			value: v,
+			index
+		}))) : [];
+		const offset = (d) => d.index * GOLDEN % 1 * width * .6 - width * .3;
+		const strip = ctx.marks("strip", "circle", dots, (d) => `${d.group}/${d.index}`).attr("fill", ctx.theme.inkMuted).attr("fill-opacity", .5);
+		settleMarks(ctx, strip, {
+			...this.spot((d) => mid(d.group) + offset(d), (d) => value(d.value)),
+			r: 2
+		}, { r: 0 });
+		const overall = mean(items, (d) => d.centre);
+		const level = grand && overall !== void 0 ? [overall] : [];
+		const rule = ctx.marks("grand", "line", level).attr("stroke", ctx.theme.ink).attr("stroke-width", 1).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)
+		});
+		const note = ctx.text(ctx.marks("grand-note", "text", level), 11, "ink").attr("text-anchor", "end").attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3).text((d) => `Overall ${Tally.format(d)}`);
+		settleMarks(ctx, note, this.vertical ? {
+			x: ctx.plot.width,
+			y: (d) => value(d) - 5
+		} : {
+			x: (d) => value(d) - 5,
+			y: 11
+		});
+		const path = ctx.marks("line", "path", items.length > 1 ? [items] : [], (_, i) => i).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 2);
+		settleMarks(ctx, path, { d: (list) => this.trace(along, at)(list) });
+		const marks = ctx.marks("centres", "circle", items, (d) => d.tally.key).attr("fill", stroke).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, marks, {
+			...this.spot(along, at),
+			r: 5
+		}, { r: 0 }, 30);
+		ctx.hover(marks, tip);
+	}
+};
+export { MeanLineChart, MeanRibbon };

package/dist/charts/comparison/PairedBarChart.js

@@ -0,0 +1,179 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Tally } from "./Tally.js";
+import { settleMarks } from "./settleMarks.js";
+import { max, mean, rollup, scaleBand, scaleLinear, sum } from "d3";
+// src/charts/comparison/PairedBarChart.ts
+/** Where the two sides meet. */
+var PairedLayout = /* @__PURE__ */ function(PairedLayout) {
+	PairedLayout["Butterfly"] = "butterfly";
+	PairedLayout["Tornado"] = "tornado";
+	PairedLayout["Adjacent"] = "adjacent";
+	return PairedLayout;
+}({});
+var PairedSort = /* @__PURE__ */ function(PairedSort) {
+	PairedSort["Input"] = "input";
+	PairedSort["Total"] = "total";
+	PairedSort["Gap"] = "gap";
+	return PairedSort;
+}({});
+var PairedUnit = /* @__PURE__ */ function(PairedUnit) {
+	PairedUnit["Value"] = "value";
+	PairedUnit["Share"] = "share-of-side";
+	return PairedUnit;
+}({});
+var AXIS = 20;
+/** Two populations back to back: butterfly and tornado layouts for a pair of series over shared categories. */
+var PairedBarChart = class extends Chart2D {
+	static meta = {
+		id: "comparison-paired-bar",
+		name: "Paired bar chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Mirrors two series across shared categories, the shape of a population pyramid or a tornado chart.",
+		tags: [
+			"butterfly",
+			"tornado",
+			"population pyramid",
+			"back to back"
+		],
+		sample: (seed) => SampleData.categories(seed, 9, 2),
+		variants: {
+			layout: [
+				"butterfly",
+				"tornado",
+				"adjacent"
+			],
+			sort: [
+				"input",
+				"total",
+				"gap"
+			],
+			unit: ["value", "share-of-side"],
+			mirror: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			layout: "butterfly",
+			sort: "input",
+			unit: "value",
+			mirror: false
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 16,
+			bottom: 6,
+			left: 16
+		};
+	}
+	rows(names) {
+		const { data, category, series, value, sort, unit } = this.options;
+		const clean = data.filter((row) => Tally.num(row[value]) !== null);
+		const cells = rollup(clean, (rows) => mean(rows, (row) => Math.abs(Tally.num(row[value]))) ?? 0, (row) => String(row[category] ?? ""), (row) => String(row[series] ?? ""));
+		const total = (side) => sum(cells.values(), (line) => line.get(side) ?? 0) || 1;
+		const scaleOf = unit === "share-of-side" ? names.map((name) => 100 / total(name)) : [1, 1];
+		const rows = [...cells].map(([name, line]) => ({
+			name,
+			a: (line.get(names[0]) ?? 0) * scaleOf[0],
+			b: (line.get(names[1]) ?? 0) * scaleOf[1]
+		}));
+		if (sort === "total") return rows.sort((p, q) => q.a + q.b - p.a - p.b);
+		if (sort === "gap") return rows.sort((p, q) => q.a - q.b - (p.a - p.b));
+		return rows;
+	}
+	draw(ctx) {
+		const { width, height } = ctx.plot;
+		const { data, series, pair, layout, unit, mirror } = this.options;
+		const found = [...new Set(data.map((row) => String(row[series] ?? "")))];
+		const names = pair ?? [found[0] ?? "", found[1] ?? ""];
+		const rows = this.rows(names);
+		const longest = Math.min(88, (max(rows, (d) => Tally.width(d.name)) ?? 0) + 6);
+		const top = max(rows, (d) => Math.max(d.a, d.b)) || 1;
+		const adjacent = layout === "adjacent", butterfly = layout === "butterfly";
+		const body = height - AXIS;
+		const band = scaleBand(rows.map((d) => d.name), [0, body]).padding(adjacent ? .18 : .14);
+		let left, right;
+		if (adjacent) left = right = scaleLinear([0, top], [longest + 6, width]).nice();
+		else {
+			const axis = butterfly ? width / 2 : longest + 6 + (width - longest - 6) / 2;
+			const half = butterfly ? longest / 2 + 2 : 0;
+			left = scaleLinear([0, top], [axis - half, butterfly ? 0 : longest + 6]).nice();
+			right = scaleLinear([0, top], [axis + half, width]).nice();
+		}
+		const scale = (d) => d.side === 0 ? left : right;
+		const bars = rows.flatMap((row) => [{
+			row,
+			side: 0,
+			value: row.a,
+			other: row.b
+		}, {
+			row,
+			side: 1,
+			value: row.b,
+			other: row.a
+		}]);
+		const thick = adjacent ? Math.max(1, band.bandwidth() / 2 - 1) : band.bandwidth();
+		const offset = (d) => adjacent && d.side === 1 ? thick + 2 : 0;
+		const y = (d) => band(d.row.name) + offset(d);
+		const fill = (d) => ctx.palette.color(names[d.side]);
+		const suffix = unit === "share-of-side" ? "%" : "";
+		const tip = (d) => ({
+			title: d.row.name,
+			color: fill(d),
+			rows: [[names[0], `${Tally.format(d.row.a)}${suffix}`], [names[1], `${Tally.format(d.row.b)}${suffix}`]]
+		});
+		this.axis(ctx, adjacent ? [left] : [left, right], body, suffix);
+		const rects = ctx.marks("bars", "rect", bars, (d) => `${d.row.name}/${d.side}`).attr("fill", fill).attr("rx", Math.min(4, thick / 2));
+		settleMarks(ctx, rects, {
+			x: (d) => Math.min(scale(d)(0), scale(d)(d.value)),
+			width: (d) => Math.abs(scale(d)(d.value) - scale(d)(0)),
+			y,
+			height: thick
+		}, {
+			x: (d) => scale(d)(0),
+			width: 0
+		}, 8);
+		ctx.hover(rects, tip);
+		const ticks = ctx.marks("mirror", "rect", mirror ? bars : [], (d) => `${d.row.name}/${d.side}`).attr("fill", ctx.theme.ink).attr("rx", 1);
+		settleMarks(ctx, ticks, {
+			x: (d) => scale(d)(d.other) - 1,
+			width: 2,
+			y,
+			height: thick
+		});
+		const labels = ctx.text(ctx.marks("names", "text", band.step() >= 13 ? rows : [], (d) => d.name), 11).text((d) => Tally.clip(d.name, longest)).attr("text-anchor", butterfly ? "middle" : "end");
+		settleMarks(ctx, labels, {
+			x: butterfly ? width / 2 : longest,
+			y: (d) => band(d.name) + band.bandwidth() / 2 + 4
+		});
+	}
+	axis(ctx, scales, body, suffix) {
+		const count = Math.max(2, Math.floor(ctx.plot.width / (scales.length * 70)));
+		const ticks = scales.flatMap((scale, s) => scale.ticks(count).map((tick) => ({
+			key: `${s}/${tick}`,
+			at: scale(tick),
+			tick
+		})));
+		const rules = ctx.marks("rules", "line", ticks, (d) => d.key).attr("stroke", (d) => d.tick === 0 ? ctx.theme.axis : ctx.theme.grid);
+		settleMarks(ctx, rules, {
+			x1: (d) => d.at,
+			x2: (d) => d.at,
+			y1: 0,
+			y2: body
+		});
+		const labels = ctx.text(ctx.marks("ticks", "text", ticks.filter((d, i, all) => all.findIndex((e) => Math.abs(e.at - d.at) < 22) === i), (d) => d.key), 11).attr("text-anchor", "middle").text((d) => `${d.tick.toLocaleString("en")}${suffix}`);
+		settleMarks(ctx, labels, {
+			x: (d) => d.at,
+			y: body + 14
+		});
+	}
+};
+export { PairedBarChart, PairedLayout, PairedSort, PairedUnit };

package/dist/charts/comparison/RadarLikeProfileChart.js

@@ -0,0 +1,152 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, Orientation } 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 { deviation, mean, rollup } from "d3";
+// src/charts/comparison/RadarLikeProfileChart.ts
+/** How each metric is brought onto the shared axis. */
+var ProfileScale = /* @__PURE__ */ function(ProfileScale) {
+	ProfileScale["Shared"] = "shared";
+	ProfileScale["MinMax"] = "min-max";
+	ProfileScale["ZScore"] = "z-score";
+	ProfileScale["Rank"] = "rank";
+	return ProfileScale;
+}({});
+/** Radar data unrolled onto a straight axis: every profile reads along shared metrics with an honest baseline. */
+var RadarLikeProfileChart = class extends BandValueChart {
+	static meta = {
+		id: "comparison-profile",
+		name: "Profile chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares entities across many metrics as parallel profiles, the straight-axis alternative to a radar chart.",
+		tags: [
+			"parallel profile",
+			"radar alternative",
+			"multi-metric"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 3),
+		variants: {
+			scale: [
+				"shared",
+				"min-max",
+				"z-score",
+				"rank"
+			],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			curve: [
+				CurveKind.Linear,
+				CurveKind.Monotone,
+				CurveKind.Bump
+			],
+			envelope: [false, true]
+		},
+		valid: (values) => !(values.scale === "rank" && values.envelope)
+	};
+	defaults() {
+		return {
+			metric: "category",
+			series: "series",
+			value: "value",
+			scale: "shared",
+			orientation: Orientation.Vertical,
+			curve: CurveKind.Linear,
+			envelope: false
+		};
+	}
+	bandPadding() {
+		return 0;
+	}
+	valueInset() {
+		return 9;
+	}
+	flipped() {
+		return this.options.scale === "rank";
+	}
+	tickFormat(scale) {
+		if (this.options.scale !== "rank") return super.tickFormat(scale);
+		return typeof scale.domain?.()[0] === "number" ? (tick) => Number.isInteger(+tick) ? String(tick) : "" : null;
+	}
+	/** Puts one metric's raw values on the common axis. */
+	normaliser(raw) {
+		const low = Math.min(...raw), high = Math.max(...raw);
+		const centre = mean(raw) ?? 0, sd = deviation(raw) || 1;
+		const ranked = [...raw].sort((a, b) => b - a);
+		switch (this.options.scale) {
+			case "min-max": return (value) => high > low ? (value - low) / (high - low) : .5;
+			case "z-score": return (value) => (value - centre) / sd;
+			case "rank": return (value) => ranked.indexOf(value) + 1;
+			default: return (value) => value;
+		}
+	}
+	bandLayout() {
+		const { data, metric, series, value } = this.options;
+		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[metric]), (row) => String(row[series]));
+		const bands = [...cells.keys()];
+		const names = [...new Set(clean.map((row) => String(row[series])))];
+		const scalers = new Map(bands.map((band) => [band, this.normaliser([...cells.get(band).values()])]));
+		const items = names.map((name) => ({
+			series: name,
+			points: bands.flatMap((band) => {
+				const raw = cells.get(band).get(name);
+				return raw === void 0 ? [] : [{
+					metric: band,
+					series: name,
+					raw,
+					value: scalers.get(band)(raw)
+				}];
+			})
+		}));
+		return {
+			bands,
+			items,
+			values: items.flatMap((line) => line.points.map((point) => point.value))
+		};
+	}
+	plotBands(ctx, { items, mid, value }) {
+		const { curve, envelope } = this.options;
+		const along = (d) => mid(d.metric), at = (d) => value(d.value);
+		const base = value.range()[0];
+		const hull = envelope ? this.envelope(items) : [];
+		const shade = ctx.marks("envelope", "path", hull.length > 1 ? [hull] : [], (_, i) => i).attr("fill", ctx.theme.grid);
+		settleMarks(ctx, shade, { d: (d) => this.ribbon((p) => mid(p.metric), (p) => value(p.low), (p) => value(p.high), curve)(d) });
+		const lines = ctx.marks("lines", "path", items, (d) => d.series).attr("fill", "none").attr("stroke-width", 2).attr("stroke", (d) => ctx.palette.color(d.series));
+		settleMarks(ctx, lines, { d: (d) => this.trace(along, at, curve)(d.points) }, { d: (d) => this.trace(along, () => base, curve)(d.points) });
+		ctx.hover(lines, (d) => ({
+			title: d.series,
+			color: ctx.palette.color(d.series),
+			rows: d.points.map((p) => [p.metric, Tally.format(p.raw)])
+		}));
+		const dots = ctx.marks("dots", "circle", items.flatMap((d) => d.points), (d) => `${d.series}/${d.metric}`).attr("fill", (d) => ctx.palette.color(d.series)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		settleMarks(ctx, dots, {
+			...this.spot(along, at),
+			r: 4.5
+		}, {
+			...this.spot(along, () => base),
+			r: 0
+		});
+		ctx.hover(dots, (d) => ({
+			title: d.metric,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, Tally.format(d.raw)]]
+		}));
+	}
+	envelope(items) {
+		const reach = /* @__PURE__ */ new Map();
+		for (const point of items.flatMap((d) => d.points)) {
+			const entry = reach.get(point.metric) ?? {
+				metric: point.metric,
+				low: point.value,
+				high: point.value
+			};
+			entry.low = Math.min(entry.low, point.value);
+			entry.high = Math.max(entry.high, point.value);
+			reach.set(point.metric, entry);
+		}
+		return [...reach.values()];
+	}
+};
+export { ProfileScale, RadarLikeProfileChart };