@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/distribution/CumulativeDistribution.js

@@ -0,0 +1,122 @@
+import { ChartFamily, DataShape, Dimension, Orientation, ScaleKind } from "../../core/enums.js";
+import { MeasureDistribution, readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { CdfBand, CdfForm, CdfLine, DistributionLayout } from "./enums.js";
+import { curveLinear, curveStep, curveStepAfter, format } from "d3";
+// src/charts/distribution/CumulativeDistribution.ts
+var MOST = 320;
+/** Reads percentiles directly with no binning choice; the honest way to compare distributions, and their tails on a log axis. */
+var CumulativeDistribution = class extends MeasureDistribution {
+	static meta = {
+		id: "ecdf",
+		name: "Cumulative distribution",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots the share of observations at or below each value, with no bins, so percentiles read straight off the axis.",
+		tags: [
+			"ecdf",
+			"cdf",
+			"survival",
+			"ccdf",
+			"exceedance",
+			"quantile function"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 150, 3),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			form: [CdfForm.Cumulative, CdfForm.Survival],
+			line: [CdfLine.Step, CdfLine.Line],
+			layout: [DistributionLayout.Overlaid, DistributionLayout.Pooled],
+			band: [CdfBand.None, CdfBand.Confidence],
+			reference: [false, true],
+			dropMedian: [false, true],
+			scale: [ScaleKind.Linear, ScaleKind.Log]
+		},
+		valid: ({ band, reference, scale, dropMedian }) => !(reference && band === CdfBand.Confidence) && !(scale === ScaleKind.Log && dropMedian)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			form: CdfForm.Cumulative,
+			line: CdfLine.Step,
+			band: CdfBand.None,
+			layout: DistributionLayout.Overlaid,
+			reference: false,
+			dropMedian: false,
+			scale: ScaleKind.Linear
+		};
+	}
+	get pooled() {
+		return this.options.layout === DistributionLayout.Pooled;
+	}
+	showsLegend() {
+		return !this.pooled;
+	}
+	measureDomain() {
+		return [0, 1];
+	}
+	measureFormat() {
+		return format(".0%");
+	}
+	read(p) {
+		return this.options.form === CdfForm.Survival ? 1 - p : p;
+	}
+	steps(sample) {
+		const { values } = sample, n = values.length, gap = Math.max(1, Math.ceil(n / MOST));
+		return values.filter((_, i) => i % gap === 0 || i === n - 1).map((v) => ({
+			v,
+			p: (values.findLastIndex((x) => x <= v) + 1) / n
+		}));
+	}
+	plotSeries(ctx, frame, samples) {
+		const { line, band, reference, dropMedian } = this.options;
+		const m = frame.measure, [lo, hi] = frame.value.domain();
+		const step = line === CdfLine.Step;
+		const curve = !step ? curveLinear : frame.valueOnX ? curveStepAfter : curveStep;
+		const stepped = (sample) => [
+			{
+				v: lo,
+				p: 0
+			},
+			...this.steps(sample),
+			{
+				v: hi,
+				p: 1
+			}
+		];
+		const trace = (sample, reveal = 1) => {
+			const points = stepped(sample).map((s) => [s.v, m(this.read(s.p * reveal))]);
+			if (frame.valueOnX || !step) return frame.path(points, false, curve);
+			return frame.path(points.flatMap((p, i) => i ? [[p[0], points[i - 1][1]], p] : [p]));
+		};
+		const bandPath = (sample) => {
+			const reach = DistributionStats.dkw(sample.summary.n), points = stepped(sample);
+			const top = points.map((s) => [s.v, m(Math.min(1, this.read(s.p) + reach))]);
+			const bottom = points.map((s) => [s.v, m(Math.max(0, this.read(s.p) - reach))]).reverse();
+			return frame.path([...top, ...bottom], true);
+		};
+		const shades = ctx.marks("cdf-band", "path", band === CdfBand.Confidence ? samples : [], (s) => s.name).attr("fill", (s) => ctx.palette.color(s.name)).attr("fill-opacity", .16).attr("d", bandPath);
+		ctx.hover(shades, (s) => this.summaryTip(s, ctx));
+		const grid = Array.from({ length: 81 }, (_, i) => lo + (hi - lo) * i / 80);
+		const models = ctx.marks("cdf-reference", "path", reference ? samples : [], (s) => s.name).attr("fill", "none").attr("stroke", (s) => ctx.palette.color(s.name)).attr("stroke-width", 2).attr("stroke-opacity", .55).attr("stroke-dasharray", "2 4").attr("stroke-linecap", "round").attr("d", (s) => frame.path(grid.map((v) => [v, m(this.read(DistributionStats.normalCdf(v, s.summary.mean, s.summary.sd)))])));
+		const lines = ctx.marks("cdf-line", "path", samples, (s) => s.name).attr("fill", "none").attr("stroke", (s) => ctx.palette.color(s.name)).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("d", (s) => trace(s));
+		ctx.drawOn(lines);
+		ctx.hover(lines, (s) => this.summaryTip(s, ctx));
+		const rules = ctx.marks("cdf-median", "path", dropMedian ? samples : [], (s) => s.name).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1).attr("stroke-dasharray", "3 3").attr("d", (s) => frame.path([
+			[s.summary.median, m(0)],
+			[s.summary.median, m(.5)],
+			[lo, m(.5)]
+		]));
+		const dots = ctx.marks("cdf-median-dot", "circle", dropMedian ? samples : [], (s) => s.name).attr("fill", (s) => ctx.palette.color(s.name)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("cx", (s) => frame.at(s.summary.median, m(.5))[0]).attr("cy", (s) => frame.at(s.summary.median, m(.5))[1]).attr("r", 4.5);
+		ctx.hover(dots, (s) => ({
+			title: this.title(s),
+			color: ctx.palette.color(s.name),
+			rows: [["Median", readable(s.summary.median)]]
+		}));
+		models.lower();
+		rules.lower();
+	}
+};
+export { CumulativeDistribution };

package/dist/charts/distribution/DensityChart.js

@@ -0,0 +1,143 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { MeasureDistribution, readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { DistributionLayout, KernelKind, KernelSmoothing } from "./enums.js";
+import { format, max, sum } from "d3";
+// src/charts/distribution/DensityChart.ts
+var STEPS = 96;
+/** A smooth estimate of a distribution's shape: for comparing several continuous distributions on one axis. */
+var DensityChart = class extends MeasureDistribution {
+	static meta = {
+		id: "density",
+		name: "Density plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Estimates a smooth probability density with a kernel, overlaid, stacked or as conditional shares.",
+		tags: [
+			"kde",
+			"kernel density",
+			"conditional density"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 160, 3),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			layout: [
+				DistributionLayout.Overlaid,
+				DistributionLayout.Pooled,
+				DistributionLayout.Stacked,
+				DistributionLayout.Conditional
+			],
+			kernel: [
+				KernelKind.Gaussian,
+				KernelKind.Epanechnikov,
+				KernelKind.Uniform
+			],
+			smoothing: [
+				KernelSmoothing.Balanced,
+				KernelSmoothing.Tight,
+				KernelSmoothing.Loose
+			],
+			rug: [false, true]
+		},
+		valid: ({ rug, layout }) => !(rug && (layout === DistributionLayout.Stacked || layout === DistributionLayout.Conditional))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			kernel: KernelKind.Gaussian,
+			smoothing: KernelSmoothing.Balanced,
+			layout: DistributionLayout.Overlaid,
+			rug: false
+		};
+	}
+	get pooled() {
+		return this.options.layout === DistributionLayout.Pooled;
+	}
+	showsLegend() {
+		return !this.pooled;
+	}
+	get conditional() {
+		return this.options.layout === DistributionLayout.Conditional;
+	}
+	curves(samples) {
+		return new Map(samples.map((s) => [s, DistributionStats.density(s.values, this.options.kernel, this.options.smoothing)]));
+	}
+	valueDomain(samples) {
+		const all = [...this.curves(samples).values()].filter((c) => c.length);
+		return all.length ? [Math.min(...all.map((c) => c[0].v)), Math.max(...all.map((c) => c[c.length - 1].v))] : [0, 1];
+	}
+	/** Every group sampled on one grid, weighted by group size when stacked so areas stay honest. */
+	layers(samples) {
+		const [lo, hi] = this.valueDomain(samples);
+		const grid = Array.from({ length: 97 }, (_, i) => lo + (hi - lo) * i / STEPS);
+		const curves = this.curves(samples), total = sum(samples, (s) => s.summary.n);
+		const shares = this.options.layout === DistributionLayout.Stacked || this.conditional;
+		const raw = samples.map((s) => grid.map((v) => DistributionStats.at(curves.get(s), v) * (shares ? s.summary.n / total : 1) * (v < curves.get(s)[0].v || v > curves.get(s)[curves.get(s).length - 1].v ? 0 : 1)));
+		const totals = grid.map((_, i) => sum(raw, (row) => row[i]));
+		let floor = grid.map(() => 0);
+		return samples.map((sample, s) => {
+			const heights = raw[s].map((d, i) => this.conditional ? totals[i] > 1e-9 ? d / totals[i] : 0 : d);
+			if (!shares) return {
+				sample,
+				grid,
+				lower: grid.map(() => 0),
+				upper: heights
+			};
+			const upper = floor.map((base, i) => base + heights[i]);
+			const layer = {
+				sample,
+				grid,
+				lower: floor,
+				upper
+			};
+			floor = upper;
+			return layer;
+		});
+	}
+	measureDomain(samples) {
+		if (this.conditional) return [0, 1];
+		return [0, max(this.layers(samples), (l) => max(l.upper)) ?? 1];
+	}
+	measureFormat(reach) {
+		return this.conditional ? format(".0%") : reach < 1 ? format(".2~r") : (value) => Scales.format(value, reach);
+	}
+	plotSeries(ctx, frame, samples) {
+		const { layout, rug } = this.options;
+		const overlaid = layout === DistributionLayout.Overlaid;
+		const m = frame.measure, stacked = layout === DistributionLayout.Stacked || this.conditional;
+		const shape = (l, grow) => {
+			const top = l.grid.map((v, i) => [v, m(l.lower[i] + (l.upper[i] - l.lower[i]) * grow)]);
+			const bottom = l.grid.map((v, i) => [v, m(l.lower[i])]).reverse();
+			return frame.path([...top, ...bottom], true);
+		};
+		const layers = this.layers(samples);
+		const fills = ctx.marks("density-area", "path", layers, (l) => l.sample.name).attr("fill", (l) => ctx.palette.color(l.sample.name)).attr("fill-opacity", overlaid ? .22 : 1).attr("stroke", stacked ? ctx.theme.surface : "none").attr("stroke-width", stacked ? 2 : 0);
+		ctx.set(fills, { d: (l) => shape(l, 1) }, { d: (l) => shape(l, 0) });
+		ctx.hover(fills, (l) => this.summaryTip(l.sample, ctx));
+		const edges = ctx.marks("density-line", "path", stacked ? [] : layers, (l) => l.sample.name).attr("fill", "none").attr("stroke", (l) => ctx.palette.color(l.sample.name)).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("pointer-events", "none");
+		ctx.set(edges, { d: (l) => frame.path(l.grid.map((v, i) => [v, m(l.upper[i])])) }, { d: (l) => frame.path(l.grid.map((v) => [v, m(0)])) });
+		const length = 7, base = m(0), sign = frame.valueOnX ? -1 : 1;
+		const ticks = rug ? samples.flatMap((s) => s.values.map((v, i) => ({
+			s,
+			v,
+			key: `${s.name}/${i}`
+		}))) : [];
+		const marks = ctx.marks("density-rug", "line", ticks, (t) => t.key).attr("stroke", (t) => ctx.palette.color(t.s.name)).attr("stroke-opacity", .45).attr("stroke-width", 1);
+		const tick = (t) => frame.line(t.v, base, t.v, base + sign * length);
+		ctx.set(marks, {
+			x1: (t) => tick(t).x1,
+			x2: (t) => tick(t).x2,
+			y1: (t) => tick(t).y1,
+			y2: (t) => tick(t).y2
+		});
+		ctx.hover(marks, (t) => ({
+			title: this.title(t.s),
+			color: ctx.palette.color(t.s.name),
+			rows: [[this.options.value, readable(t.v)]]
+		}));
+	}
+};
+export { DensityChart };

package/dist/charts/distribution/DensityStrip.js

@@ -0,0 +1,124 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DensityScaling, GroupOrder, KernelSmoothing, StripeForm, StripeMarker, StripeProfile } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+// src/charts/distribution/DensityStrip.ts
+var LEVELS = 6;
+/** Jackson's density strip: darkness encodes density along a thin band, for fitting many distributions in a small space. */
+var DensityStrip = class extends KdeBand {
+	static meta = {
+		id: "density-strip",
+		name: "Density strip",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shades a thin strip by density, packing many distributions into a small space with no fuzzy interval edges.",
+		tags: [
+			"gradient plot",
+			"heat strip",
+			"jackson"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 160, 6),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			form: [StripeForm.Gradient, StripeForm.Stepped],
+			profile: [StripeProfile.Flat, StripeProfile.Tapered],
+			marker: [
+				StripeMarker.Median,
+				StripeMarker.None,
+				StripeMarker.Quartiles
+			],
+			smoothing: [
+				KernelSmoothing.Balanced,
+				KernelSmoothing.Tight,
+				KernelSmoothing.Loose
+			],
+			order: [GroupOrder.Given, GroupOrder.Ascending]
+		},
+		valid: ({ form, profile }) => form === StripeForm.Gradient || profile === StripeProfile.Flat
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			form: StripeForm.Gradient,
+			profile: StripeProfile.Flat,
+			marker: StripeMarker.Median,
+			scaling: DensityScaling.Width,
+			padding: .3
+		};
+	}
+	cells(sample) {
+		const profile = this.profile(sample), stepped = this.options.form === StripeForm.Stepped;
+		const level = (r) => stepped ? Math.ceil(r * LEVELS) / LEVELS : r;
+		const merged = [];
+		profile.slice(1).forEach((point, i) => {
+			const before = profile[i], r = level((point.r + before.r) / 2), last = merged[merged.length - 1];
+			if (stepped && last && last.r === r) last.hi = point.v;
+			else merged.push({
+				key: `${sample.name}/${i}`,
+				sample,
+				lo: before.v,
+				hi: point.v,
+				r
+			});
+		});
+		return merged;
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const { profile, marker } = this.options;
+		const tapered = profile === StripeProfile.Tapered;
+		const cells = samples.flatMap((s) => this.cells(s));
+		const body = (cell) => {
+			const c = frame.center(cell.sample.name), reach = frame.half * (tapered ? Math.max(.04, cell.r) : 1);
+			const rect = frame.rect(cell.lo, cell.hi, c - reach, c + reach);
+			return {
+				...rect,
+				width: rect.width + .5,
+				height: rect.height + .5
+			};
+		};
+		const marks = ctx.marks("strip-cells", "rect", cells, (c) => c.key).attr("fill", (c) => palette.sequential(c.r * .92));
+		ctx.set(marks, {
+			x: (c) => body(c).x,
+			y: (c) => body(c).y,
+			width: (c) => body(c).width,
+			height: (c) => body(c).height
+		});
+		ctx.hover(marks, (c) => ({
+			title: this.title(c.sample),
+			rows: [["Range", `${readable(c.lo)} – ${readable(c.hi)}`], ["Relative density", readable(c.r)]]
+		}));
+		const rules = marker === StripeMarker.None ? [] : samples.flatMap((s) => (marker === StripeMarker.Median ? [s.summary.median] : [
+			s.summary.q1,
+			s.summary.median,
+			s.summary.q3
+		]).map((v, i) => ({
+			key: `${s.name}/${i}`,
+			s,
+			v
+		})));
+		const span = (r) => {
+			const c = frame.center(r.s.name);
+			return frame.line(r.v, c - frame.half - 3, r.v, c + frame.half + 3);
+		};
+		const halo = ctx.marks("strip-halo", "line", rules, (r) => r.key).attr("stroke", theme.surface).attr("stroke-width", 4).attr("pointer-events", "none");
+		ctx.set(halo, {
+			x1: (r) => span(r).x1,
+			x2: (r) => span(r).x2,
+			y1: (r) => span(r).y1,
+			y2: (r) => span(r).y2
+		});
+		const lines = ctx.marks("strip-rule", "line", rules, (r) => r.key).attr("stroke", theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		ctx.set(lines, {
+			x1: (r) => span(r).x1,
+			x2: (r) => span(r).x2,
+			y1: (r) => span(r).y1,
+			y2: (r) => span(r).y2
+		});
+		ctx.hover(lines, (r) => this.summaryTip(r.s, ctx));
+	}
+};
+export { DensityStrip };

package/dist/charts/distribution/DistributionChart.js

@@ -0,0 +1,187 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { LegendPosition, Orientation, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { BandFrame, MeasureFrame } from "./AxisFrame.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { GroupOrder } from "./enums.js";
+import { format, scaleBand } from "d3";
+// src/charts/distribution/DistributionChart.ts
+var CHAR = 6.2;
+/** Keeps extreme dots clear of the axis labels. */
+var INSET = 8;
+var readable = format(".4~r");
+/** Hides tick labels that would collide along one axis. */
+function thinLabels(ctx, axis, gap) {
+	const ticks = ctx.root.select(`.m-axis-${axis}`).selectAll(".tick").nodes().map((node) => {
+		const numbers = /\(([-\d.e]+)[, ]+([-\d.e]+)/.exec(node.getAttribute("transform") ?? "");
+		return {
+			text: node.querySelector("text"),
+			at: +(numbers?.[axis === "x" ? 1 : 2] ?? 0)
+		};
+	}).sort((a, b) => a.at - b.at);
+	let end = -Infinity;
+	for (const { text, at } of ticks) {
+		const size = axis === "x" ? (text?.textContent?.length ?? 0) * CHAR : 11;
+		const hidden = at - size / 2 < end + gap;
+		text?.setAttribute("display", hidden ? "none" : "inline");
+		if (!hidden) end = at + size / 2;
+	}
+}
+/** Shared base: reads rows into clean samples, builds the value scale and keeps both axes tidy. */
+var DistributionChart = class extends CartesianChart {
+	/** Whether colour alone names the groups, so a legend is needed. */
+	showsLegend() {
+		return false;
+	}
+	/** Merge all rows into one sample. */
+	get pooled() {
+		return false;
+	}
+	get legendPosition() {
+		return this.options.legend ?? (this.showsLegend() ? LegendPosition.Top : LegendPosition.None);
+	}
+	samples() {
+		const { data, value, group } = this.options;
+		return DistributionStats.samples(Array.isArray(data) ? data : [], value, this.pooled ? void 0 : group);
+	}
+	title(sample) {
+		return sample.name || this.options.value;
+	}
+	continuous(domain, range, kind = ScaleKind.Linear) {
+		let [lo, hi] = domain;
+		if (!(hi > lo)) {
+			const pad = Math.abs(lo) * .1 || 1;
+			lo -= pad;
+			hi += pad;
+		}
+		const safe = kind === ScaleKind.Log && lo <= 0 ? ScaleKind.Symlog : kind;
+		const scale = Scales.continuous(safe).domain([lo, hi]).range(range);
+		return safe === ScaleKind.Log ? scale : scale.nice();
+	}
+	summaryTip(sample, ctx) {
+		const s = sample.summary;
+		return {
+			title: this.title(sample),
+			color: ctx.palette.color(sample.name),
+			rows: [
+				["n", s.n],
+				["Median", readable(s.median)],
+				["Mean", readable(s.mean)],
+				["IQR", `${readable(s.q1)} – ${readable(s.q3)}`],
+				["Range", `${readable(s.min)} – ${readable(s.max)}`]
+			]
+		};
+	}
+	tickFormat(scale) {
+		if (typeof (scale.domain?.() ?? [])[0] !== "string") return super.tickFormat(scale);
+		const room = this.valueOnX ? 13 : Math.max(6, Math.floor(scale.step() / CHAR));
+		return (value) => {
+			const text = String(value);
+			return text.length > room ? `${text.slice(0, room - 1)}…` : text;
+		};
+	}
+	/** Removes tick labels that would collide, and redraws grid lines when they belong on x. */
+	tidyAxes(ctx, x) {
+		thinLabels(ctx, "x", 8);
+		thinLabels(ctx, "y", 3);
+		const { width, height } = ctx.plot;
+		if (x) ctx.root.select(".m-grid").selectAll("line").remove();
+		const ticks = x && this.options.grid !== false ? x.ticks(Math.min(this.xTicks(), Math.floor(width / 80))) : [];
+		ctx.group("grid-x").lower();
+		ctx.marks("grid-x", "line", ticks).attr("x1", (t) => x(t)).attr("x2", (t) => x(t)).attr("y1", 0).attr("y2", height).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+	}
+};
+/** Groups along one axis, values along the other: box plots, violins, swarms and their relatives. */
+var BandDistribution = class extends DistributionChart {
+	pool = [];
+	frame;
+	valueDomain(samples) {
+		return samples.length ? [Math.min(...samples.map((s) => s.summary.min)), Math.max(...samples.map((s) => s.summary.max))] : [0, 1];
+	}
+	bandRange(length) {
+		return [0, length];
+	}
+	defaults() {
+		return {
+			value: "value",
+			group: "group",
+			orientation: Orientation.Vertical,
+			order: GroupOrder.Given,
+			padding: .22
+		};
+	}
+	get valueOnX() {
+		return this.options.orientation === Orientation.Horizontal;
+	}
+	ordered(samples) {
+		const { order } = this.options;
+		if (order === GroupOrder.Given) return samples;
+		const sign = order === GroupOrder.Ascending ? 1 : -1;
+		return [...samples].sort((a, b) => sign * (a.summary.median - b.summary.median));
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot;
+		this.pool = this.ordered(this.samples());
+		const onX = this.valueOnX;
+		const value = this.continuous(this.valueDomain(this.pool), onX ? [INSET, width - INSET] : [height - INSET, INSET], this.options.scale);
+		const band = scaleBand(this.pool.map((s) => s.name), this.bandRange(onX ? height : width)).paddingInner(this.options.padding).paddingOuter(this.options.padding / 2);
+		this.frame = new BandFrame(onX, value, band);
+		return onX ? {
+			x: value,
+			y: band
+		} : {
+			x: band,
+			y: value
+		};
+	}
+	plotMarks(ctx) {
+		this.tidyAxes(ctx, this.valueOnX ? this.frame.value : null);
+		this.plotSamples(ctx, this.frame, this.pool);
+	}
+};
+/** Value on one axis, a continuous measure on the other: histograms, densities and ECDFs. */
+var MeasureDistribution = class extends DistributionChart {
+	pool = [];
+	frame;
+	measureFormat(reach) {
+		return (value) => Scales.format(value, reach);
+	}
+	valueDomain(samples) {
+		return samples.length ? [Math.min(...samples.map((s) => s.summary.min)), Math.max(...samples.map((s) => s.summary.max))] : [0, 1];
+	}
+	defaults() {
+		return {
+			value: "value",
+			group: "group",
+			orientation: Orientation.Vertical
+		};
+	}
+	get valueOnX() {
+		return this.options.orientation === Orientation.Vertical;
+	}
+	tickFormat(scale) {
+		if (scale !== this.frame?.measure) return super.tickFormat(scale);
+		const [lo, hi] = this.frame.measure.domain(), show = this.measureFormat(Math.max(Math.abs(lo), Math.abs(hi)));
+		return (value) => show(+value);
+	}
+	scales(ctx) {
+		const { width, height } = ctx.plot;
+		this.pool = this.samples();
+		const onX = this.valueOnX;
+		const value = this.continuous(this.valueDomain(this.pool), onX ? [0, width] : [height, 0], this.options.scale);
+		const measure = this.continuous(this.measureDomain(this.pool), onX ? [height, 0] : [0, width]);
+		this.frame = new MeasureFrame(onX, value, measure);
+		return onX ? {
+			x: value,
+			y: measure
+		} : {
+			x: measure,
+			y: value
+		};
+	}
+	plotMarks(ctx) {
+		this.tidyAxes(ctx, this.valueOnX ? null : this.frame.measure);
+		this.plotSeries(ctx, this.frame, this.pool);
+	}
+};
+export { BandDistribution, DistributionChart, MeasureDistribution, readable, thinLabels };

package/dist/charts/distribution/DistributionSamples.js

@@ -0,0 +1,11 @@
+import { SampleData } from "../../data/SampleData.js";
+// src/charts/distribution/DistributionSamples.ts
+/** Reshapes `SampleData.distribution` into the unequal, unsorted groups real measurements arrive as. */
+var DistributionSamples = class {
+	static uneven(seed, perGroup = 150, groups = 4) {
+		const rows = SampleData.distribution(seed, perGroup, groups);
+		const names = [...new Set(rows.map((row) => String(row.group)))];
+		return [...names.filter((_, i) => i % 2).reverse(), ...names.filter((_, i) => !(i % 2))].flatMap((name, position) => rows.filter((row) => row.group === name).slice(0, Math.round(perGroup * (1 - position * .55 / groups))));
+	}
+};
+export { DistributionSamples };