@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/distribution/DistributionStats.js

@@ -0,0 +1,225 @@
+import { BinRule, KernelKind, KernelSmoothing, LetterDepth, WhiskerRule } from "./enums.js";
+import { ascending, deviation, group, mean, quantileSorted } from "d3";
+// src/charts/distribution/DistributionStats.ts
+var LETTERS = "MFEDCBAZYXWVUTS";
+var STEPS = 96;
+var LIMIT = 1500;
+var SMOOTHING = {
+	[KernelSmoothing.Balanced]: 1,
+	[KernelSmoothing.Tight]: .45,
+	[KernelSmoothing.Loose]: 2
+};
+var SUPPORT = {
+	[KernelKind.Gaussian]: 2.6,
+	[KernelKind.Epanechnikov]: 1,
+	[KernelKind.Triangular]: 1,
+	[KernelKind.Uniform]: 1
+};
+var KERNELS = {
+	[KernelKind.Gaussian]: (u) => Math.exp(-.5 * u * u) / Math.sqrt(2 * Math.PI),
+	[KernelKind.Epanechnikov]: (u) => Math.abs(u) < 1 ? .75 * (1 - u * u) : 0,
+	[KernelKind.Triangular]: (u) => Math.max(0, 1 - Math.abs(u)),
+	[KernelKind.Uniform]: (u) => Math.abs(u) <= 1 ? .5 : 0
+};
+/** Pure statistics behind the distribution charts. Every method takes ascending, finite numbers. */
+var DistributionStats = class {
+	/** Finite numbers of a column, ascending; nulls, blanks and non-numbers are dropped. */
+	static numbers(rows, field) {
+		return rows.map((row) => row[field]).filter((cell) => cell !== null && cell !== void 0 && cell !== "").map(Number).filter(Number.isFinite).sort(ascending);
+	}
+	/** Rows split by `group` into clean samples; a missing group column gives one unnamed sample. */
+	static samples(rows, value, group$1) {
+		return (group$1 ? [...group(rows, (row) => String(row[group$1] ?? ""))] : [["", rows]]).map(([name, members]) => {
+			const values = this.numbers(members, value);
+			return {
+				name,
+				values,
+				summary: this.summary(values)
+			};
+		}).filter((sample) => sample.values.length);
+	}
+	static summary(values) {
+		const q1 = quantileSorted(values, .25) ?? 0, q3 = quantileSorted(values, .75) ?? 0;
+		return {
+			n: values.length,
+			min: values[0] ?? 0,
+			max: values[values.length - 1] ?? 0,
+			mean: mean(values) ?? 0,
+			sd: deviation(values) ?? 0,
+			median: quantileSorted(values, .5) ?? 0,
+			q1,
+			q3,
+			iqr: q3 - q1
+		};
+	}
+	static quantile(values, p) {
+		return quantileSorted(values, p) ?? 0;
+	}
+	/** Whisker ends for a rule; values beyond them are outliers. */
+	static whiskers(values, rule) {
+		const s = this.summary(values);
+		if (rule === WhiskerRule.Range) return [s.min, s.max];
+		if (rule === WhiskerRule.Percentile) return [this.quantile(values, .05), this.quantile(values, .95)];
+		const low = s.q1 - 1.5 * s.iqr, high = s.q3 + 1.5 * s.iqr;
+		return [values.find((v) => v >= low) ?? s.min, values.findLast((v) => v <= high) ?? s.max];
+	}
+	/** Silverman's rule of thumb, scaled by the smoothing level. Falls back gracefully for constant data. */
+	static bandwidth(values, smoothing) {
+		const s = this.summary(values);
+		const spread = Math.min(s.sd || Infinity, s.iqr / 1.34 || Infinity);
+		return (Number.isFinite(spread) ? .9 * spread * s.n ** -.2 : Math.abs(s.mean) * .1 || 1) * SMOOTHING[smoothing];
+	}
+	/** Kernel density estimate on a regular grid. Past `LIMIT` values it reads evenly spaced order statistics. */
+	static density(values, kernel, smoothing, trim = false) {
+		if (!values.length) return [];
+		const h = this.bandwidth(values, smoothing), reach = trim ? 0 : SUPPORT[kernel] * h;
+		const taken = values.length > LIMIT ? Array.from({ length: LIMIT }, (_, i) => values[Math.floor(i / LIMIT * values.length)]) : values;
+		const lo = values[0] - reach, hi = values[values.length - 1] + reach;
+		const K = KERNELS[kernel], norm = taken.length * h;
+		const span = hi - lo || h;
+		return Array.from({ length: 97 }, (_, i) => {
+			const v = lo + span * i / STEPS;
+			let d = 0;
+			for (const x of taken) d += K((v - x) / h);
+			return {
+				v,
+				d: d / norm
+			};
+		});
+	}
+	/** Density at `v`, linearly interpolated from a grid. */
+	static at(curve, v) {
+		if (!curve.length) return 0;
+		const first = curve[0], last = curve[curve.length - 1];
+		if (v <= first.v) return first.d;
+		if (v >= last.v) return last.d;
+		const position = (v - first.v) / (last.v - first.v) * (curve.length - 1), i = Math.floor(position);
+		const a = curve[i], b = curve[Math.min(i + 1, curve.length - 1)];
+		return a.d + (b.d - a.d) * (position - i);
+	}
+	/** Equal-width bin edges spanning the data, sized by a named rule, or by an explicit bin count. */
+	static edges(values, rule, count) {
+		if (!values.length) return [0, 1];
+		const s = this.summary(values), span = s.max - s.min;
+		if (!span) return [s.min - .5, s.max + .5];
+		const width = {
+			[BinRule.FreedmanDiaconis]: 2 * s.iqr / Math.cbrt(s.n),
+			[BinRule.Scott]: 3.49 * s.sd / Math.cbrt(s.n),
+			[BinRule.Sturges]: span / (Math.log2(s.n) + 1),
+			[BinRule.SquareRoot]: span / Math.sqrt(s.n)
+		}[rule];
+		const bins = Math.max(1, Math.min(200, count ?? (Math.ceil(span / (width || span)) || 1)));
+		return Array.from({ length: bins + 1 }, (_, i) => s.min + span * i / bins);
+	}
+	/** Count of values per bin; the last bin includes its upper edge. */
+	static counts(values, edges) {
+		const counts = new Array(edges.length - 1).fill(0);
+		let bin = 0;
+		for (const v of values) {
+			while (bin < counts.length - 1 && v >= edges[bin + 1]) bin++;
+			if (v >= edges[0] && v <= edges[edges.length - 1]) counts[bin]++;
+		}
+		return counts;
+	}
+	/** Hofmann's letter values, median outwards, with the depth rule choosing how far to go. */
+	static letterValues(values, rule) {
+		const n = values.length;
+		if (!n) return [];
+		const log = Math.floor(Math.log2(n));
+		const levels = Math.max(2, {
+			[LetterDepth.Tukey]: log - 3,
+			[LetterDepth.Proportion]: log - Math.floor(Math.log2(Math.max(2, n * .02))),
+			[LetterDepth.Trustworthy]: log - 2 + 1
+		}[rule]);
+		const read = (depth) => (values[Math.floor(depth) - 1] + values[Math.ceil(depth) - 1]) / 2;
+		const out = [];
+		let depth = (n + 1) / 2;
+		for (let level = 0; level < levels && depth >= 1; level++) {
+			const lower = read(depth), upper = values[n - Math.floor(depth)] / 2 + values[n - Math.ceil(depth)] / 2;
+			out.push({
+				letter: LETTERS[level] ?? "·",
+				lower,
+				upper,
+				share: .5 ** level
+			});
+			depth = (Math.floor(depth) + 1) / 2;
+		}
+		return out;
+	}
+	/** `count` evenly spaced quantiles: the dots of a quantile dotplot. */
+	static quantileDots(values, count) {
+		return Array.from({ length: count }, (_, i) => this.quantile(values, (i + .5) / count));
+	}
+	/**
+	* Beeswarm offsets. Points arrive sorted by position, and each takes the free offset nearest
+	* the centre line, so no two circles touch. `sides` limits it to one side of the line.
+	*/
+	static swarm(positions, radii, sides = 2) {
+		const offsets = [];
+		let start = 0;
+		const widest = Math.max(0, ...radii) * 2;
+		positions.forEach((position, i) => {
+			while (start < i && position - positions[start] > widest) start++;
+			const blocked = [];
+			for (let j = start; j < i; j++) {
+				const gap = radii[i] + radii[j] + 1, along = position - positions[j];
+				if (Math.abs(along) < gap) {
+					const clear = Math.sqrt(gap * gap - along * along);
+					blocked.push([offsets[j] - clear, offsets[j] + clear]);
+				}
+			}
+			const candidates = [0, ...blocked.flat()].filter((c) => (sides === 1 ? c >= 0 : true) && !blocked.some(([a, b]) => c > a + 1e-6 && c < b - 1e-6));
+			offsets.push(candidates.reduce((best, c) => Math.abs(c) < Math.abs(best) ? c : best, Infinity));
+		});
+		return offsets;
+	}
+	/** Groups sorted pixel positions into stacks of dots `size` wide: Wilkinson's sweep, or a fixed grid. */
+	static piles(positions, size, sweep) {
+		const piles = [];
+		let i = 0;
+		while (i < positions.length) {
+			const first = positions[i];
+			const limit = sweep ? first + size : (Math.floor(first / size) + 1) * size;
+			const members = [];
+			while (i < positions.length && positions[i] < limit) members.push(i++);
+			const center = sweep ? (first + positions[members[members.length - 1]]) / 2 : limit - size / 2;
+			piles.push({
+				center,
+				members
+			});
+		}
+		return piles;
+	}
+	/** Largest dot size whose tallest pile fits `room`, capped at `largest` px. */
+	static fitPiles(positions, room, sweep, largest = 16) {
+		let size = largest;
+		let piles = this.piles(positions, size, sweep);
+		while (size > 2 && Math.max(...piles.map((pile) => pile.members.length)) * size > room) {
+			size *= .94;
+			piles = this.piles(positions, size, sweep);
+		}
+		return {
+			size,
+			piles
+		};
+	}
+	/** Spreads an index through -1..1 evenly; unlike random jitter it never clumps and never changes between renders. */
+	static spread(index) {
+		return index * .6180339887 % 1 * 2 - 1;
+	}
+	/** Normal density with the sample's mean and deviation. */
+	static normal(v, mean, sd) {
+		return sd ? Math.exp(-.5 * ((v - mean) / sd) ** 2) / (sd * Math.sqrt(2 * Math.PI)) : 0;
+	}
+	/** Normal cumulative probability (Zelen and Severo approximation). */
+	static normalCdf(v, mean, sd) {
+		const z = sd ? (v - mean) / sd : 0, t = 1 / (1 + .2316419 * Math.abs(z));
+		const tail = Math.exp(-.5 * z * z) / Math.sqrt(2 * Math.PI) * t * (.31938153 + t * (-.356563782 + t * (1.781477937 + t * (-1.821255978 + t * 1.330274429))));
+		return z >= 0 ? 1 - tail : tail;
+	}
+	/** Half-width of the 95% Dvoretzky–Kiefer–Wolfowitz band around an ECDF of `n` points. */
+	static dkw(n) {
+		return Math.sqrt(Math.log(40) / (2 * Math.max(1, n)));
+	}
+};
+export { DistributionStats };

package/dist/charts/distribution/DotStackBase.js

@@ -0,0 +1,65 @@
+import { BandDistribution } from "./DistributionChart.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { DotBinning, DotStackDirection } from "./enums.js";
+import { symbol, symbolSquare } from "d3";
+// src/charts/distribution/DotStackBase.ts
+/** Stacks dots in pixel space, so the dots fit their band whatever the data or size. */
+var DotStackBase = class extends BandDistribution {
+	defaults() {
+		return {
+			...super.defaults(),
+			binning: DotBinning.Wilkinson,
+			stack: DotStackDirection.Up,
+			squares: false,
+			padding: .1
+		};
+	}
+	/** Lay out sorted values of one band. `color` picks each dot's fill by its index in `values`. */
+	stackDots(frame, sample, values, color) {
+		const { stack, binning } = this.options;
+		const center = stack === DotStackDirection.Center;
+		const positions = values.map((v) => frame.value(v));
+		const flipped = positions.length > 1 && positions[0] > positions[1];
+		const ordered = flipped ? [...positions].reverse() : positions;
+		const room = frame.half * 2;
+		const { size, piles } = DistributionStats.fitPiles(ordered, room, binning === DotBinning.Wilkinson);
+		const up = (stack === DotStackDirection.Down ? 1 : -1) * (frame.valueOnX ? 1 : -1);
+		const foot = frame.center(sample.name) + (center ? 0 : -up * frame.half);
+		return piles.flatMap((pile) => pile.members.map((member, level) => {
+			const lift = center ? (level - (pile.members.length - 1) / 2) * size : (level + .5) * size;
+			const index = flipped ? positions.length - 1 - member : member;
+			const [x, y] = frame.px(pile.center, foot + up * lift);
+			return {
+				key: `${sample.name}/${index}`,
+				x,
+				y,
+				size,
+				color: color(index),
+				datum: values[index],
+				sample
+			};
+		}));
+	}
+	drawDots(ctx, dots, tell) {
+		const squares = this.options.squares;
+		const fit = (dot) => Math.max(.5, dot.size - 1.5);
+		const circles = ctx.marks("stack-circles", "circle", squares ? [] : dots, (d) => d.key).attr("fill", (d) => d.color);
+		ctx.set(circles, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: (d) => fit(d) / 2
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		}, 1);
+		ctx.hover(circles, tell);
+		const boxes = ctx.marks("stack-squares", "path", squares ? dots : [], (d) => d.key).attr("fill", (d) => d.color);
+		ctx.set(boxes, {
+			d: (d) => symbol().type(symbolSquare).size(fit(d) ** 2)(),
+			transform: (d) => `translate(${d.x},${d.y})`
+		});
+		ctx.hover(boxes, tell);
+	}
+};
+export { DotStackBase };

package/dist/charts/distribution/Dotplot.js

@@ -0,0 +1,77 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DotBinning, DotLayout, DotStackDirection, GroupOrder } from "./enums.js";
+import { DotStackBase } from "./DotStackBase.js";
+import { ascending } from "d3";
+// src/charts/distribution/Dotplot.ts
+/** Wilkinson's dot-density plot: a histogram whose bars are the observations themselves. Best below a few hundred values. */
+var Dotplot = class extends DotStackBase {
+	static meta = {
+		id: "dotplot",
+		name: "Wilkinson dotplot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks one dot per observation into piles, keeping counts literal while showing the shape of a histogram.",
+		tags: [
+			"dot density",
+			"wilkinson",
+			"histodot",
+			"unit histogram"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 50, 3),
+		variants: {
+			layout: [
+				DotLayout.Pooled,
+				DotLayout.Coloured,
+				DotLayout.Lanes
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			binning: [DotBinning.Wilkinson, DotBinning.Histodot],
+			stack: [
+				DotStackDirection.Up,
+				DotStackDirection.Center,
+				DotStackDirection.Down
+			],
+			squares: [false, true],
+			order: [GroupOrder.Given, GroupOrder.Ascending]
+		},
+		valid: ({ layout, order, stack }) => (layout === DotLayout.Lanes || order === GroupOrder.Given) && !(stack === DotStackDirection.Down && layout === DotLayout.Coloured)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			layout: DotLayout.Pooled
+		};
+	}
+	get lanes() {
+		return this.options.layout === DotLayout.Lanes;
+	}
+	get pooled() {
+		return !this.lanes;
+	}
+	showsLegend() {
+		return this.options.layout === DotLayout.Coloured;
+	}
+	owners() {
+		const { data, value, group } = this.options;
+		return (Array.isArray(data) ? data : []).filter((row) => row[value] !== null && row[value] !== "").map((row) => ({
+			v: Number(row[value] ?? NaN),
+			group: String(row[group] ?? "")
+		})).filter((row) => Number.isFinite(row.v)).sort((a, b) => ascending(a.v, b.v) || ascending(a.group, b.group));
+	}
+	plotSamples(ctx, frame, samples) {
+		const { layout, value } = this.options;
+		const owners = this.owners();
+		const tint = layout === DotLayout.Coloured;
+		const dots = samples.flatMap((sample) => this.stackDots(frame, sample, sample.values, (i) => ctx.palette.color(tint ? owners[i]?.group ?? "" : sample.name)));
+		this.drawDots(ctx, dots, (dot) => ({
+			title: this.title(dot.sample),
+			color: dot.color,
+			rows: [[value, readable(dot.datum)]]
+		}));
+	}
+};
+export { Dotplot };

package/dist/charts/distribution/FrequencyPolygon.js

@@ -0,0 +1,132 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { BinnedChart } from "./BinnedChart.js";
+import { readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { BinRule, DistributionLayout, FrequencyScale } from "./enums.js";
+import { curveMonotoneY, max } from "d3";
+// src/charts/distribution/FrequencyPolygon.ts
+/** A histogram drawn as a line through bin midpoints; compares several distributions without bars colliding. */
+var FrequencyPolygon = class extends BinnedChart {
+	static meta = {
+		id: "frequency-polygon",
+		name: "Frequency polygon",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Joins bin midpoints with a line, closing at zero, to overlay distributions more cleanly than bars can.",
+		tags: ["histogram line", "ogive"],
+		sample: (seed) => DistributionSamples.uneven(seed, 180, 3),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			layout: [DistributionLayout.Overlaid, DistributionLayout.Pooled],
+			bins: [BinRule.FreedmanDiaconis, BinRule.Sturges],
+			frequency: [
+				FrequencyScale.Count,
+				FrequencyScale.Percent,
+				FrequencyScale.Cumulative
+			],
+			curve: [
+				CurveKind.Linear,
+				CurveKind.Monotone,
+				CurveKind.Basis
+			],
+			filled: [false, true],
+			markers: [true, false]
+		},
+		valid: ({ curve, markers, filled, frequency }) => {
+			if (curve === CurveKind.Linear) return true;
+			if (frequency === FrequencyScale.Percent) return false;
+			return curve === CurveKind.Monotone ? markers === filled : !markers && !filled;
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			layout: DistributionLayout.Overlaid,
+			curve: CurveKind.Linear,
+			filled: false,
+			markers: true
+		};
+	}
+	get pooled() {
+		return this.options.layout === DistributionLayout.Pooled;
+	}
+	showsLegend() {
+		return !this.pooled;
+	}
+	vertices(sample, edges) {
+		const bins = this.bins(sample, edges);
+		const width = edges[1] - edges[0];
+		const inner = bins.map((bin, i) => ({
+			sample,
+			bin,
+			v: (bin.lo + bin.hi) / 2,
+			height: bin.height,
+			key: `${sample.name}/${i}`
+		}));
+		if (this.options.frequency === FrequencyScale.Cumulative) return inner;
+		const close = (v, key) => ({
+			sample,
+			bin: {
+				lo: v,
+				hi: v,
+				count: 0,
+				height: 0
+			},
+			v,
+			height: 0,
+			key: `${sample.name}/${key}`
+		});
+		return [
+			close(edges[0] - width / 2, "start"),
+			...inner,
+			close(edges[edges.length - 1] + width / 2, "end")
+		];
+	}
+	closure(samples) {
+		if (this.options.frequency === FrequencyScale.Cumulative) return 0;
+		const edges = this.edges(samples);
+		return (edges[1] - edges[0]) / 2;
+	}
+	valueDomain(samples) {
+		const [lo, hi] = super.valueDomain(samples), pad = this.closure(samples);
+		return [lo - pad, hi + pad];
+	}
+	measureDomain(samples) {
+		const edges = this.edges(samples);
+		return [0, max(samples, (s) => max(this.bins(s, edges), (b) => b.height)) ?? 1];
+	}
+	plotSeries(ctx, frame, samples) {
+		const { curve, filled, markers } = this.options;
+		const edges = this.edges(samples), m = frame.measure;
+		const series = samples.map((sample) => ({
+			sample,
+			vertices: this.vertices(sample, edges)
+		}));
+		const factory = curve === CurveKind.Monotone && !frame.valueOnX ? curveMonotoneY : Scales.curve(curve);
+		const trace = (vertices, scale = 1) => frame.path(vertices.map((p) => [p.v, m(p.height * scale)]), false, factory);
+		const areas = ctx.marks("poly-area", "path", filled ? series : [], (s) => s.sample.name).attr("fill", (s) => ctx.palette.color(s.sample.name)).attr("fill-opacity", .18).attr("d", (s) => `${trace(s.vertices)}L${frame.at(s.vertices[s.vertices.length - 1].v, m(0)).join(",")}L${frame.at(s.vertices[0].v, m(0)).join(",")}Z`);
+		ctx.hover(areas, (s) => this.summaryTip(s.sample, ctx));
+		const lines = ctx.marks("poly-line", "path", series, (s) => s.sample.name).attr("fill", "none").attr("stroke", (s) => ctx.palette.color(s.sample.name)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(lines, { d: (s) => trace(s.vertices) }, { d: (s) => trace(s.vertices, 0) });
+		ctx.hover(lines, (s) => this.summaryTip(s.sample, ctx));
+		const points = series.flatMap((s) => s.vertices.filter((p) => p.bin.lo !== p.bin.hi && (frame.valueOnX || p.height > 0)));
+		const dots = ctx.marks("poly-dots", "circle", markers ? points : [], (p) => p.key).attr("fill", (p) => ctx.palette.color(p.sample.name)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			r: 4,
+			cx: (p) => frame.at(p.v, m(p.height))[0],
+			cy: (p) => frame.at(p.v, m(p.height))[1]
+		}, {
+			r: 0,
+			cx: (p) => frame.at(p.v, m(p.height))[0],
+			cy: (p) => frame.at(p.v, m(p.height))[1]
+		});
+		ctx.hover(dots, (p) => ({
+			title: `${readable(p.bin.lo)} – ${readable(p.bin.hi)}`,
+			color: ctx.palette.color(p.sample.name),
+			rows: [[p.sample.name || "Count", p.bin.count]]
+		}));
+	}
+};
+export { FrequencyPolygon };

package/dist/charts/distribution/HalfEyePlot.js

@@ -0,0 +1,133 @@
+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 { DensityScaling, IntervalSet, KernelSmoothing, PointEstimate, SlabForm } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+import { maxIndex } from "d3";
+// src/charts/distribution/HalfEyePlot.ts
+var LEVELS = {
+	[IntervalSet.Standard]: [.95, .66],
+	[IntervalSet.Wide]: [
+		.95,
+		.8,
+		.5
+	]
+};
+/** A posterior or forecast summary: a density slab above a point and nested intervals. */
+var HalfEyePlot = class extends KdeBand {
+	static meta = {
+		id: "half-eye",
+		name: "Half-eye plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Combines a density slab with a point estimate and nested intervals, the standard view of uncertainty.",
+		tags: [
+			"eye plot",
+			"point interval",
+			"ccdf bar",
+			"posterior",
+			"uncertainty",
+			"ggdist"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 200, 4),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			form: [
+				SlabForm.Half,
+				SlabForm.Eye,
+				SlabForm.Interval,
+				SlabForm.Survival
+			],
+			point: [
+				PointEstimate.Median,
+				PointEstimate.Mean,
+				PointEstimate.Mode
+			],
+			intervals: [IntervalSet.Standard, IntervalSet.Wide],
+			smoothing: [KernelSmoothing.Balanced, KernelSmoothing.Tight],
+			scaling: [DensityScaling.Area, DensityScaling.Width]
+		},
+		valid: ({ form, smoothing, scaling }) => {
+			if (form === SlabForm.Interval) return smoothing === KernelSmoothing.Balanced && scaling === DensityScaling.Area;
+			return form !== SlabForm.Survival || scaling === DensityScaling.Area;
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			form: SlabForm.Half,
+			point: PointEstimate.Median,
+			intervals: IntervalSet.Standard,
+			padding: .1
+		};
+	}
+	estimate(sample) {
+		const { point } = this.options;
+		if (point === PointEstimate.Median) return sample.summary.median;
+		if (point === PointEstimate.Mean) return sample.summary.mean;
+		const curve = this.curves.get(sample.name) ?? [];
+		return curve[maxIndex(curve, (p) => p.d)]?.v ?? sample.summary.median;
+	}
+	/** Slab offset from the interval line, per grid point. */
+	slabPath(frame, sample, base, sign, room, grow) {
+		const { form } = this.options;
+		if (form === SlabForm.Interval) return "";
+		const width = this.widthOf(sample), curve = this.curves.get(sample.name) ?? [];
+		let mass = 1;
+		const total = curve.reduce((sum, p) => sum + p.d, 0) || 1;
+		const reach = curve.map((p) => {
+			if (form !== SlabForm.Survival) return width(p.d);
+			const at = mass;
+			mass -= p.d / total;
+			return at;
+		});
+		const top = curve.map((p, i) => [p.v, base + sign * reach[i] * room * grow]);
+		const low = form === SlabForm.Eye ? curve.map((p, i) => [p.v, base - sign * reach[i] * room * grow]) : curve.map((p) => [p.v, base]);
+		return frame.path([...top, ...low.reverse()], true);
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const { form, intervals } = this.options;
+		const eye = form === SlabForm.Eye, bare = form === SlabForm.Interval;
+		const sign = frame.valueOnX ? -1 : 1;
+		const line = (s) => frame.center(s.name) + (eye || bare ? 0 : -sign * frame.half * .82);
+		const room = frame.half * (eye ? .95 : 1.75);
+		const slabs = ctx.marks("eye-slab", "path", bare ? [] : samples, (s) => s.name).attr("fill", (s) => palette.color(s.name)).attr("fill-opacity", .32);
+		ctx.set(slabs, { d: (s) => this.slabPath(frame, s, line(s), sign, room, 1) }, { d: (s) => this.slabPath(frame, s, line(s), sign, room, 0) }, 50);
+		ctx.hover(slabs, (s) => this.summaryTip(s, ctx));
+		const levels = LEVELS[intervals];
+		const spans = samples.flatMap((sample) => levels.map((level, rank) => ({
+			key: `${sample.name}/${level}`,
+			sample,
+			level,
+			rank,
+			low: DistributionStats.quantile(sample.values, (1 - level) / 2),
+			high: DistributionStats.quantile(sample.values, (1 + level) / 2)
+		})));
+		const stroke = (i) => 1.5 + i.rank * 2;
+		const bars = ctx.marks("eye-interval", "line", spans, (i) => i.key).attr("stroke", (i) => palette.color(i.sample.name)).attr("stroke-width", stroke).attr("stroke-linecap", "round");
+		const rule = (i) => frame.line(i.low, line(i.sample), i.high, line(i.sample));
+		ctx.set(bars, {
+			x1: (i) => rule(i).x1,
+			x2: (i) => rule(i).x2,
+			y1: (i) => rule(i).y1,
+			y2: (i) => rule(i).y2
+		});
+		ctx.hover(bars, (i) => ({
+			title: this.title(i.sample),
+			color: palette.color(i.sample.name),
+			rows: [[`${i.level * 100}% interval`, `${readable(i.low)} – ${readable(i.high)}`]]
+		}));
+		const dots = ctx.marks("eye-point", "circle", samples, (s) => s.name).attr("fill", (s) => palette.color(s.name)).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			r: 5.5,
+			cx: (s) => frame.at(this.estimate(s), line(s))[0],
+			cy: (s) => frame.at(this.estimate(s), line(s))[1]
+		});
+		ctx.hover(dots, (s) => this.summaryTip(s, ctx));
+	}
+};
+export { HalfEyePlot };