@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/distribution/BarcodePlot.js

@@ -0,0 +1,104 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { BarcodeAlign, BarcodeLength, BarcodeOverlay, GroupOrder } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+// src/charts/distribution/BarcodePlot.ts
+/** One thin line per observation, like a printed barcode: clusters and gaps show with no density assumption. */
+var BarcodePlot = class extends KdeBand {
+	static meta = {
+		id: "barcode",
+		name: "Barcode plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws a thin line per observation, so clusters and gaps appear with no binning or smoothing.",
+		tags: [
+			"rug",
+			"strip",
+			"tick plot"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 90, 4),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			length: [BarcodeLength.Constant, BarcodeLength.Density],
+			align: [BarcodeAlign.Center, BarcodeAlign.Base],
+			overlay: [
+				BarcodeOverlay.None,
+				BarcodeOverlay.Median,
+				BarcodeOverlay.Quartiles
+			],
+			order: [GroupOrder.Given, GroupOrder.Descending]
+		},
+		valid: ({ length, align }) => !(length === BarcodeLength.Constant && align === BarcodeAlign.Base)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			length: BarcodeLength.Constant,
+			align: BarcodeAlign.Center,
+			overlay: BarcodeOverlay.None,
+			trim: true,
+			padding: .3
+		};
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const { length, align, overlay, value } = this.options;
+		const scaled = length === BarcodeLength.Density, base = align === BarcodeAlign.Base;
+		const ticks = samples.flatMap((sample) => {
+			const width = this.widthOf(sample), curve = this.curves.get(sample.name);
+			return sample.values.map((v, i) => ({
+				key: `${sample.name}/${i}`,
+				sample,
+				v,
+				reach: scaled ? Math.max(.12, width(DistributionStats.at(curve, v))) : 1
+			}));
+		});
+		const span = (t) => {
+			const c = frame.center(t.sample.name);
+			if (!base) return frame.line(t.v, c - frame.half * t.reach, t.v, c + frame.half * t.reach);
+			const foot = c + frame.half * (frame.valueOnX ? 1 : -1), rise = frame.half * 2 * t.reach * (frame.valueOnX ? -1 : 1);
+			return frame.line(t.v, foot, t.v, foot + rise);
+		};
+		const lines = ctx.marks("barcode-ticks", "line", ticks, (t) => t.key).attr("stroke", (t) => palette.color(t.sample.name)).attr("stroke-width", 2).attr("stroke-opacity", .5);
+		ctx.set(lines, {
+			x1: (t) => span(t).x1,
+			x2: (t) => span(t).x2,
+			y1: (t) => span(t).y1,
+			y2: (t) => span(t).y2
+		});
+		ctx.hover(lines, (t) => ({
+			title: this.title(t.sample),
+			color: palette.color(t.sample.name),
+			rows: [[value, readable(t.v)]]
+		}));
+		const strip = (s) => {
+			const c = frame.center(s.name) + (frame.half + 5) * (frame.valueOnX ? 1 : -1);
+			return frame.rect(s.summary.q1, s.summary.q3, c - 2, c + 2);
+		};
+		const bars = ctx.marks("barcode-quartiles", "rect", overlay === BarcodeOverlay.Quartiles ? samples : [], (s) => s.name).attr("fill", theme.inkSecondary).attr("rx", 2);
+		ctx.set(bars, {
+			x: (s) => strip(s).x,
+			y: (s) => strip(s).y,
+			width: (s) => strip(s).width,
+			height: (s) => strip(s).height
+		});
+		ctx.hover(bars, (s) => this.summaryTip(s, ctx));
+		const rule = (s) => {
+			const c = frame.center(s.name);
+			return frame.line(s.summary.median, c - frame.half - 5, s.summary.median, c + frame.half + 5);
+		};
+		const medians = ctx.marks("barcode-median", "line", overlay === BarcodeOverlay.None ? [] : samples, (s) => s.name).attr("stroke", theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(medians, {
+			x1: (s) => rule(s).x1,
+			x2: (s) => rule(s).x2,
+			y1: (s) => rule(s).y1,
+			y2: (s) => rule(s).y2
+		});
+		ctx.hover(medians, (s) => this.summaryTip(s, ctx));
+	}
+};
+export { BarcodePlot };

package/dist/charts/distribution/BeanPlot.js

@@ -0,0 +1,92 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { BeanLine, DensitySide, GroupOrder, KernelSmoothing } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+// src/charts/distribution/BeanPlot.ts
+/** Kampstra's bean plot: a violin whose raw values show as short lines, with each mean marked. */
+var BeanPlot = class extends KdeBand {
+	static meta = {
+		id: "bean",
+		name: "Bean plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows a density outline filled with one line per observation, with group and grand means.",
+		tags: [
+			"violin",
+			"beanlines",
+			"kampstra"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 80, 4),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			side: [DensitySide.Both, DensitySide.Half],
+			beanlines: [
+				BeanLine.Short,
+				BeanLine.Long,
+				BeanLine.None
+			],
+			grandMean: [true, false],
+			smoothing: [KernelSmoothing.Balanced, KernelSmoothing.Tight],
+			order: [GroupOrder.Given, GroupOrder.Ascending]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			side: DensitySide.Both,
+			beanlines: BeanLine.Short,
+			grandMean: true,
+			padding: .12
+		};
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const { side, beanlines, grandMean } = this.options;
+		const half = side === DensitySide.Half;
+		const pods = ctx.marks("bean-pod", "path", samples, (s) => s.name).attr("fill", (s) => palette.color(s.name)).attr("fill-opacity", .26);
+		ctx.set(pods, { d: (s) => this.outline(frame, s, side, 1) }, { d: (s) => this.outline(frame, s, side, 0) }, 40);
+		ctx.hover(pods, (s) => this.summaryTip(s, ctx));
+		const reachAt = (s, v) => this.widthOf(s)(DistributionStats.at(this.curves.get(s.name), v)) * frame.half;
+		const span = (s, v, width) => {
+			const c = frame.center(s.name);
+			const rise = frame.valueOnX ? -1 : 1;
+			return half ? frame.line(v, c - rise * frame.half, v, c - rise * frame.half + rise * width * 2) : frame.line(v, c - width, v, c + width);
+		};
+		const beans = beanlines === BeanLine.None ? [] : samples.flatMap((sample) => sample.values.map((v, i) => ({
+			key: `${sample.name}/${i}`,
+			sample,
+			v
+		})));
+		const grain = (b) => span(b.sample, b.v, beanlines === BeanLine.Long ? reachAt(b.sample, b.v) : Math.min(reachAt(b.sample, b.v), frame.half * .28));
+		const lines = ctx.marks("bean-lines", "line", beans, (b) => b.key).attr("stroke", (b) => palette.color(b.sample.name)).attr("stroke-width", 1.5).attr("stroke-opacity", .75);
+		ctx.set(lines, {
+			x1: (b) => grain(b).x1,
+			x2: (b) => grain(b).x2,
+			y1: (b) => grain(b).y1,
+			y2: (b) => grain(b).y2
+		});
+		ctx.hover(lines, (b) => ({
+			title: this.title(b.sample),
+			color: palette.color(b.sample.name),
+			rows: [[this.options.value, readable(b.v)]]
+		}));
+		const means = ctx.marks("bean-mean", "line", samples, (s) => s.name).attr("stroke", theme.ink).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
+		const mark = (s) => span(s, s.summary.mean, frame.half * .82 / (half ? 2 : 1));
+		ctx.set(means, {
+			x1: (s) => mark(s).x1,
+			x2: (s) => mark(s).x2,
+			y1: (s) => mark(s).y1,
+			y2: (s) => mark(s).y2
+		});
+		ctx.hover(means, (s) => this.summaryTip(s, ctx));
+		const all = samples.flatMap((s) => s.values);
+		const mean = all.reduce((sum, v) => sum + v, 0) / Math.max(1, all.length), length = frame.valueOnX ? ctx.plot.height : ctx.plot.width;
+		const rule = ctx.marks("bean-grand", "line", grandMean && all.length ? [mean] : [], () => "grand").attr("stroke", theme.inkMuted).attr("stroke-width", 1).attr("stroke-dasharray", "4 4");
+		const g = frame.line(mean, 0, mean, length);
+		rule.attr("x1", g.x1).attr("x2", g.x2).attr("y1", g.y1).attr("y2", g.y2);
+	}
+};
+export { BeanPlot };

package/dist/charts/distribution/BeeswarmChart.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension, Orientation, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandDistribution, readable } from "./DistributionChart.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { GroupOrder, SwarmLanes, SwarmSide } from "./enums.js";
+import { ascending, max, scaleSqrt, symbol } from "d3";
+// src/charts/distribution/BeeswarmChart.ts
+var LARGEST = 6.5;
+/** Every observation visible, pushed apart only as far as needed: for small samples where each point matters. */
+var BeeswarmChart = class extends BandDistribution {
+	static meta = {
+		id: "beeswarm",
+		name: "Beeswarm plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shifts each point sideways just enough to avoid overlap, showing every observation and the shape they build.",
+		tags: [
+			"swarm",
+			"strip",
+			"categorical scatter",
+			"bubble"
+		],
+		sample: (seed) => SampleData.points(seed, 96, 3).map(({ group, y, size }) => ({
+			group,
+			value: y,
+			size
+		})),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			lanes: [SwarmLanes.Grouped, SwarmLanes.Shared],
+			side: [SwarmSide.Both, SwarmSide.Up],
+			mark: [
+				SymbolKind.Circle,
+				SymbolKind.Square,
+				SymbolKind.Diamond
+			],
+			size: ["", "size"],
+			order: [GroupOrder.Given, GroupOrder.Descending]
+		},
+		valid: ({ mark, size, lanes, order }) => !(size && mark !== SymbolKind.Circle) && !(lanes === SwarmLanes.Shared && order !== GroupOrder.Given)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			lanes: SwarmLanes.Grouped,
+			side: SwarmSide.Both,
+			mark: SymbolKind.Circle,
+			size: "",
+			padding: .06
+		};
+	}
+	get shared() {
+		return this.options.lanes === SwarmLanes.Shared;
+	}
+	showsLegend() {
+		return this.shared;
+	}
+	/** With shared lanes the band holds one sample while dots keep their group for colour. */
+	samples() {
+		const all = super.samples();
+		if (!this.shared || !all.length) return all;
+		const values = all.flatMap((s) => s.values).sort(ascending);
+		return [{
+			name: "",
+			values,
+			summary: DistributionStats.summary(values)
+		}];
+	}
+	rows(name) {
+		const { data, value, group, size } = this.options;
+		return (Array.isArray(data) ? data : []).filter((row) => row[value] !== null && row[value] !== "" && Number.isFinite(Number(row[value])) && (this.shared || String(row[group] ?? "") === name)).map((row) => ({
+			group: String(row[group] ?? ""),
+			v: Number(row[value]),
+			size: Number(row[size] ?? 0)
+		})).sort((a, b) => a.v - b.v);
+	}
+	/** Swarm for one lane at dot scale `fit`. */
+	swarm(frame, sample, fit) {
+		const { side, size } = this.options;
+		const members = this.rows(sample.name);
+		const positions = members.map((m) => frame.value(m.v));
+		const order = members.map((_, i) => i).sort((a, b) => positions[a] - positions[b]);
+		const area = scaleSqrt([0, max(members, (m) => m.size) || 1], [0, 1]);
+		const radii = order.map((i) => size ? Math.max(1.5, area(members[i].size) * fit * 1.4) : fit);
+		const offsets = DistributionStats.swarm(order.map((i) => positions[i]), radii, side === SwarmSide.Up ? 1 : 2);
+		return {
+			members,
+			positions,
+			order,
+			radii,
+			offsets,
+			reach: Math.max(0, ...offsets.map((o, i) => Math.abs(o) + radii[i]))
+		};
+	}
+	/** Largest shared dot scale at which every lane's swarm fits its band. */
+	fitScale(frame, samples, room) {
+		let fit = LARGEST;
+		while (fit > 1.5 && samples.some((s) => this.swarm(frame, s, fit).reach > room)) fit *= .9;
+		return fit;
+	}
+	place(frame, sample, fit, room) {
+		const { members, positions, order, radii, offsets, reach } = this.swarm(frame, sample, fit);
+		const up = this.options.side === SwarmSide.Up;
+		const squeeze = Math.min(1, room / Math.max(1, reach));
+		const base = frame.center(sample.name) + (up ? frame.half - 2 : 0);
+		return order.map((index, i) => {
+			const [x, y] = frame.px(positions[index], base + (up ? -1 : 1) * offsets[i] * squeeze);
+			const m = members[index];
+			return {
+				key: `${sample.name}/${m.group}/${index}`,
+				group: m.group,
+				v: m.v,
+				size: m.size,
+				r: radii[i],
+				x,
+				y
+			};
+		});
+	}
+	plotSamples(ctx, frame, samples) {
+		const { mark, size, value } = this.options;
+		const room = this.options.side === SwarmSide.Up ? frame.half * 2 - 4 : frame.half - 3;
+		const fit = this.fitScale(frame, samples, room);
+		const bees = samples.flatMap((s) => this.place(frame, s, fit, room));
+		const circles = mark === SymbolKind.Circle;
+		const paint = (dots) => dots.attr("fill", (b) => ctx.palette.color(b.group)).attr("stroke", ctx.theme.surface).attr("stroke-width", (b) => b.r >= 3 ? 1.5 : .75);
+		const marks = paint(ctx.marks("swarm-dots", "circle", circles ? bees : [], (b) => b.key));
+		ctx.set(marks, {
+			cx: (b) => b.x,
+			cy: (b) => b.y,
+			r: (b) => b.r
+		}, {
+			cx: (b) => b.x,
+			cy: (b) => b.y,
+			r: 0
+		}, 2);
+		const glyph = Scales.symbol(mark);
+		const others = paint(ctx.marks("swarm-symbols", "path", circles ? [] : bees, (b) => b.key));
+		ctx.set(others, {
+			d: (b) => symbol().type(glyph).size(Math.PI * b.r * b.r * 1.15)(),
+			transform: (b) => `translate(${b.x},${b.y})`
+		});
+		const tell = (b) => ({
+			title: b.group || value,
+			color: ctx.palette.color(b.group),
+			rows: [[value, readable(b.v)], ...size ? [[size, readable(b.size)]] : []]
+		});
+		ctx.hover(marks, tell);
+		ctx.hover(others, tell);
+	}
+};
+export { BeeswarmChart };

package/dist/charts/distribution/BinnedChart.js

@@ -0,0 +1,51 @@
+import { Scales } from "../../core/Scales.js";
+import { MeasureDistribution } from "./DistributionChart.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { BinRule, FrequencyScale } from "./enums.js";
+import { format, sum } from "d3";
+// src/charts/distribution/BinnedChart.ts
+/** Shares equal-width bins across groups and normalises them, for histograms and their relatives. */
+var BinnedChart = class extends MeasureDistribution {
+	defaults() {
+		return {
+			...super.defaults(),
+			bins: BinRule.FreedmanDiaconis,
+			frequency: FrequencyScale.Count
+		};
+	}
+	edges(samples) {
+		const all = samples.flatMap((s) => s.values).sort((a, b) => a - b);
+		return DistributionStats.edges(all, this.options.bins, this.options.binCount);
+	}
+	/** Bins of a sample, with height in the chosen frequency. `total` is the percent and density denominator. */
+	bins(sample, edges, total = sample.summary.n) {
+		const counts = DistributionStats.counts(sample.values, edges);
+		const { frequency } = this.options;
+		let running = 0;
+		return counts.map((count, i) => {
+			const lo = edges[i], hi = edges[i + 1];
+			running += count;
+			return {
+				lo,
+				hi,
+				count,
+				height: {
+					[FrequencyScale.Count]: count,
+					[FrequencyScale.Percent]: count / total,
+					[FrequencyScale.Density]: count / (total * (hi - lo)),
+					[FrequencyScale.Cumulative]: running / total
+				}[frequency]
+			};
+		});
+	}
+	grandTotal(samples) {
+		return sum(samples, (s) => s.summary.n);
+	}
+	measureFormat(reach) {
+		const { frequency } = this.options;
+		if (frequency === FrequencyScale.Percent || frequency === FrequencyScale.Cumulative) return format(".0%");
+		if (frequency === FrequencyScale.Density) return format(".2~r");
+		return (value) => Scales.format(value, reach);
+	}
+};
+export { BinnedChart };

package/dist/charts/distribution/BoxPlot.js

@@ -0,0 +1,186 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { BandDistribution, readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { BoxStyle, BoxWidth, WhiskerRule } from "./enums.js";
+import { max, symbol, symbolDiamond } from "d3";
+// src/charts/distribution/BoxPlot.ts
+/** The compact five-number comparison of many groups, for when shape matters less than centre and spread. */
+var BoxPlot = class extends BandDistribution {
+	static meta = {
+		id: "box-plot",
+		name: "Box plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Summarises each group by median, quartiles, whiskers and outliers so many groups compare at a glance.",
+		tags: [
+			"box and whisker",
+			"five number summary",
+			"notched",
+			"tufte",
+			"quartile"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 150, 5),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			style: [BoxStyle.Box, BoxStyle.Tufte],
+			whisker: [
+				WhiskerRule.Tukey,
+				WhiskerRule.Percentile,
+				WhiskerRule.Range
+			],
+			notch: [false, true],
+			outliers: [true, false],
+			boxWidth: [BoxWidth.Equal, BoxWidth.Count],
+			mean: [false, true]
+		},
+		valid: ({ whisker, outliers, style, notch, boxWidth }) => {
+			if (whisker === WhiskerRule.Range && !outliers) return false;
+			return style === BoxStyle.Box || !notch && boxWidth === BoxWidth.Equal;
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			whisker: WhiskerRule.Tukey,
+			style: BoxStyle.Box,
+			boxWidth: BoxWidth.Equal,
+			notch: false,
+			outliers: true,
+			mean: false,
+			padding: .34
+		};
+	}
+	boxes(frame, samples) {
+		const { whisker, boxWidth, outliers } = this.options;
+		const most = max(samples, (s) => Math.sqrt(s.summary.n)) ?? 1;
+		return samples.map((sample) => {
+			const [low, high] = DistributionStats.whiskers(sample.values, whisker), s = sample.summary;
+			return {
+				sample,
+				low,
+				high,
+				half: frame.half * (boxWidth === BoxWidth.Count ? Math.sqrt(s.n) / most : 1),
+				center: frame.center(sample.name),
+				notch: 1.58 * s.iqr / Math.sqrt(s.n),
+				points: outliers ? sample.values.filter((v) => v < low || v > high).map((v, i) => ({
+					v,
+					key: `${sample.name}/${i}`
+				})) : []
+			};
+		});
+	}
+	shape(frame, b, grow) {
+		const s = b.sample.summary;
+		const q1 = s.median + (s.q1 - s.median) * grow, q3 = s.median + (s.q3 - s.median) * grow;
+		const c = b.center, w = b.half;
+		if (!this.options.notch) return frame.path([
+			[q1, c - w],
+			[q3, c - w],
+			[q3, c + w],
+			[q1, c + w]
+		], true);
+		const n = Math.min(b.notch, s.median - s.q1, s.q3 - s.median) * grow, pinch = w * .55;
+		return frame.path([
+			[q1, c - w],
+			[s.median - n, c - w],
+			[s.median, c - pinch],
+			[s.median + n, c - w],
+			[q3, c - w],
+			[q3, c + w],
+			[s.median + n, c + w],
+			[s.median, c + pinch],
+			[s.median - n, c + w],
+			[q1, c + w]
+		], true);
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const boxes = this.boxes(frame, samples), tufte = this.options.style === BoxStyle.Tufte;
+		const stems = boxes.flatMap((b) => {
+			const s = b.sample.summary;
+			return tufte ? [{
+				b,
+				from: b.low,
+				to: s.q1,
+				key: `${b.sample.name}/low`
+			}, {
+				b,
+				from: s.q3,
+				to: b.high,
+				key: `${b.sample.name}/high`
+			}] : [{
+				b,
+				from: b.low,
+				to: b.high,
+				key: `${b.sample.name}/stem`
+			}];
+		});
+		const whiskers = ctx.marks("box-whisker", "line", stems, (d) => d.key).attr("stroke", (d) => palette.color(d.b.sample.name)).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(whiskers, {
+			x1: (d) => frame.at(d.from, d.b.center)[0],
+			y1: (d) => frame.at(d.from, d.b.center)[1],
+			x2: (d) => frame.at(d.to, d.b.center)[0],
+			y2: (d) => frame.at(d.to, d.b.center)[1]
+		});
+		const capped = tufte ? [] : boxes.flatMap((b) => [{
+			b,
+			v: b.low,
+			key: `${b.sample.name}/low`
+		}, {
+			b,
+			v: b.high,
+			key: `${b.sample.name}/high`
+		}]);
+		const caps = ctx.marks("box-cap", "line", capped, (d) => d.key).attr("stroke", (d) => palette.color(d.b.sample.name)).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		const reach = (d) => d.b.half * .45;
+		ctx.set(caps, {
+			x1: (d) => frame.at(d.v, d.b.center - reach(d))[0],
+			y1: (d) => frame.at(d.v, d.b.center - reach(d))[1],
+			x2: (d) => frame.at(d.v, d.b.center + reach(d))[0],
+			y2: (d) => frame.at(d.v, d.b.center + reach(d))[1]
+		});
+		const shapes = ctx.marks("box-body", "path", tufte ? [] : boxes, (b) => b.sample.name).attr("fill", (b) => palette.color(b.sample.name)).attr("stroke", (b) => palette.color(b.sample.name)).attr("stroke-width", 3).attr("stroke-linejoin", "round");
+		ctx.set(shapes, { d: (b) => this.shape(frame, b, 1) }, { d: (b) => this.shape(frame, b, 0) }, 30);
+		ctx.hover(shapes, (b) => this.summaryTip(b.sample, ctx));
+		const medians = ctx.marks("box-median", "line", tufte ? [] : boxes, (b) => b.sample.name).attr("stroke", (b) => palette.inkOn(palette.color(b.sample.name))).attr("stroke-width", 2).attr("pointer-events", "none");
+		const across = (b) => frame.line(b.sample.summary.median, b.center - b.half * (this.options.notch ? .5 : 1), b.sample.summary.median, b.center + b.half * (this.options.notch ? .5 : 1));
+		ctx.set(medians, {
+			x1: (b) => across(b).x1,
+			x2: (b) => across(b).x2,
+			y1: (b) => across(b).y1,
+			y2: (b) => across(b).y2
+		});
+		const centres = ctx.marks("box-tufte", "circle", tufte ? boxes : [], (b) => b.sample.name).attr("fill", (b) => palette.color(b.sample.name)).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(centres, {
+			r: 5,
+			cx: (b) => frame.at(b.sample.summary.median, b.center)[0],
+			cy: (b) => frame.at(b.sample.summary.median, b.center)[1]
+		});
+		ctx.hover(centres, (b) => this.summaryTip(b.sample, ctx));
+		const stray = boxes.flatMap((b) => b.points.map((p) => ({
+			...p,
+			b
+		})));
+		const dots = ctx.marks("box-outliers", "circle", stray, (d) => d.key).attr("fill", (d) => palette.color(d.b.sample.name)).attr("fill-opacity", .7).attr("stroke", theme.surface).attr("stroke-width", 1.5);
+		ctx.set(dots, {
+			r: 4,
+			cx: (d) => frame.at(d.v, d.b.center)[0],
+			cy: (d) => frame.at(d.v, d.b.center)[1]
+		});
+		ctx.hover(dots, (d) => ({
+			title: this.title(d.b.sample),
+			color: palette.color(d.b.sample.name),
+			rows: [["Outlier", readable(d.v)]]
+		}));
+		const diamond = symbol().type(symbolDiamond).size(46)();
+		const means = ctx.marks("box-mean", "path", this.options.mean ? boxes : [], (b) => b.sample.name).attr("fill", (b) => tufte ? theme.ink : palette.inkOn(palette.color(b.sample.name))).attr("stroke", (b) => tufte ? theme.surface : palette.color(b.sample.name)).attr("stroke-width", 1).attr("d", diamond).attr("pointer-events", "none");
+		const place = (b) => {
+			const [x, y] = frame.at(b.sample.summary.mean, tufte ? b.center + 11 : b.center);
+			return `translate(${x},${y})`;
+		};
+		ctx.set(means, { transform: place });
+	}
+};
+export { BoxPlot };

package/dist/charts/distribution/BoxenChart.js

@@ -0,0 +1,96 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { BoxenScale, GroupOrder, LetterDepth } from "./enums.js";
+import { LetterValueBase } from "./LetterValueBase.js";
+// src/charts/distribution/BoxenChart.ts
+/** The box plot for large samples: nested boxes keep showing the tails where four quartiles run out of detail. */
+var BoxenChart = class extends LetterValueBase {
+	static meta = {
+		id: "boxen",
+		name: "Boxen plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Nests a box for each successive quantile halving, revealing tail shape in samples too big for a box plot.",
+		tags: [
+			"enhanced box plot",
+			"letter value",
+			"lv plot"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 200, 4),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			depth: [
+				LetterDepth.Tukey,
+				LetterDepth.Proportion,
+				LetterDepth.Trustworthy
+			],
+			boxenScale: [
+				BoxenScale.Exponential,
+				BoxenScale.Linear,
+				BoxenScale.Area
+			],
+			outliers: [true, false],
+			order: [GroupOrder.Given, GroupOrder.Descending]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			boxenScale: BoxenScale.Exponential,
+			padding: .18
+		};
+	}
+	width(tier, half, frame) {
+		const { boxenScale } = this.options;
+		if (boxenScale === BoxenScale.Linear) return half * (1 - tier.level / tier.levels);
+		if (boxenScale === BoxenScale.Exponential) return half * tier.letter.share;
+		const pixels = Math.abs(frame.value(tier.letter.upper) - frame.value(tier.letter.lower)) || 1;
+		return Math.min(half, half * 10 * tier.letter.share / Math.sqrt(pixels));
+	}
+	plotSamples(ctx, frame, samples) {
+		const tiers = samples.flatMap((sample) => {
+			const letters = this.letters(sample);
+			return letters.slice(1).map((letter, i) => ({
+				key: `${sample.name}/${letter.letter}`,
+				sample,
+				letter,
+				level: i,
+				levels: letters.length - 1
+			}));
+		}).sort((a, b) => b.level - a.level);
+		const shape = (tier) => {
+			const wide = this.width(tier, frame.half, frame), c = frame.center(tier.sample.name);
+			return frame.rect(tier.letter.lower, tier.letter.upper, c - wide, c + wide);
+		};
+		const boxes = ctx.marks("boxen-tiers", "rect", tiers, (t) => t.key).attr("fill", (t) => ctx.palette.color(t.sample.name)).attr("fill-opacity", (t) => .32 + .68 * (1 - t.level / Math.max(1, t.levels))).attr("stroke", ctx.theme.surface).attr("stroke-width", 1).attr("rx", 2);
+		ctx.set(boxes, {
+			x: (t) => shape(t).x,
+			y: (t) => shape(t).y,
+			width: (t) => shape(t).width,
+			height: (t) => shape(t).height
+		}, {}, 6);
+		ctx.hover(boxes, (t) => this.letterTip(t.sample, t.letter, ctx));
+		const medians = ctx.marks("boxen-median", "line", samples, (s) => s.name).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("pointer-events", "none");
+		const across = (s) => {
+			const wide = frame.half * (this.options.boxenScale === BoxenScale.Exponential ? .5 : 1), c = frame.center(s.name);
+			const top = {
+				key: "",
+				sample: s,
+				letter: this.letters(s)[1] ?? this.letters(s)[0],
+				level: 0,
+				levels: 1
+			};
+			const reach = Math.min(wide, this.width(top, frame.half, frame));
+			return frame.line(s.summary.median, c - reach, s.summary.median, c + reach);
+		};
+		ctx.set(medians, {
+			x1: (s) => across(s).x1,
+			x2: (s) => across(s).x2,
+			y1: (s) => across(s).y1,
+			y2: (s) => across(s).y2
+		});
+		this.drawStrays(ctx, frame, samples);
+	}
+};
+export { BoxenChart };