@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/distribution/StemLeaf.js

@@ -0,0 +1,249 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { LeafMark, StemLayout } from "./enums.js";
+import { ascending } from "d3";
+// src/charts/distribution/StemLeaf.ts
+var pad = 6;
+var CHAR = 6.6;
+/** Tukey's text histogram: keeps every digit readable while showing the shape, for short printed reports. */
+var StemLeaf = class extends Chart2D {
+	static meta = {
+		id: "stem-leaf",
+		name: "Stem-and-leaf plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Splits each number into a stem and a leaf digit, giving a histogram that still shows the original values.",
+		tags: [
+			"stem plot",
+			"tukey",
+			"text histogram",
+			"back to back"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 42, 2),
+		variants: {
+			layout: [StemLayout.Single, StemLayout.BackToBack],
+			split: [
+				1,
+				2,
+				5
+			],
+			leaf: [
+				LeafMark.Digit,
+				LeafMark.Dot,
+				LeafMark.Bar
+			],
+			depths: [false, true]
+		},
+		valid: ({ layout, depths }) => !(layout === StemLayout.BackToBack && depths)
+	};
+	defaults() {
+		return {
+			value: "value",
+			group: "group",
+			layout: StemLayout.Single,
+			split: 1,
+			leaf: LeafMark.Digit,
+			depths: false
+		};
+	}
+	get legendPosition() {
+		return this.options.legend ?? LegendPosition.None;
+	}
+	columns() {
+		const { data, value, group, layout } = this.options;
+		const rows = Array.isArray(data) ? data : [];
+		if (layout !== StemLayout.BackToBack) return [DistributionStats.numbers(rows, value), []];
+		const names = [...new Set(rows.map((row) => String(row[group] ?? "")))];
+		return [DistributionStats.numbers(rows.filter((row) => String(row[group] ?? "") === names[0]), value), DistributionStats.numbers(rows.filter((row) => String(row[group] ?? "") === names[1]), value)];
+	}
+	names() {
+		const { data, group } = this.options;
+		const names = [...new Set((Array.isArray(data) ? data : []).map((row) => String(row[group] ?? "")))];
+		return [names[0] ?? "", names[1] ?? ""];
+	}
+	/** One row per stem step. Negative stems stay in numeric order and print their sign. */
+	stems(left, right) {
+		const all = [...left, ...right].sort(ascending);
+		if (!all.length) return {
+			rows: [],
+			unit: 1
+		};
+		const span = all[all.length - 1] - all[0] || Math.abs(all[0]) || 1;
+		const unit = 10 ** Math.floor(Math.log10(span));
+		const leafUnit = unit / 10;
+		const parts = this.options.split;
+		/** Negative rows mirror positive ones and include a "-0" row, so "-2 | 8" always reads -28. */
+		const position = (v) => {
+			const at = Math.floor(Math.abs(v) / unit * parts);
+			return v < 0 ? -at - 1 : at;
+		};
+		const low = position(all[0]), high = position(all[all.length - 1]);
+		const rows = [];
+		for (let key = low; key <= high && rows.length < 120; key++) {
+			const stem = Math.floor((key < 0 ? -key - 1 : key) / parts);
+			rows.push({
+				key,
+				stem,
+				negative: key < 0,
+				label: `${key < 0 ? "-" : ""}${stem}`,
+				left: [],
+				right: [],
+				depth: 0
+			});
+		}
+		const digit = (v) => Math.min(9, Math.floor(Math.abs(v) % unit / leafUnit));
+		for (const v of left) rows[position(v) - low]?.left.push(digit(v));
+		for (const v of right) rows[position(v) - low]?.right.push(digit(v));
+		let running = 0;
+		const half = left.length / 2;
+		rows.forEach((row) => {
+			running += row.left.length;
+			row.depth = running <= half ? running : left.length - running + row.left.length;
+		});
+		return {
+			rows,
+			unit
+		};
+	}
+	draw(ctx) {
+		const { layout, leaf, depths } = this.options;
+		const { palette } = ctx;
+		const { width, height } = ctx.plot;
+		const mirrored = layout === StemLayout.BackToBack;
+		const [leftValues, rightValues] = this.columns();
+		const { rows, unit } = this.stems(leftValues, rightValues);
+		const [leftName, rightName] = this.names();
+		const head = mirrored ? 18 : 0;
+		const rowHeight = Math.min(22, (height - head - 16) / Math.max(1, rows.length));
+		const font = Math.max(9, Math.min(12, rowHeight * .8));
+		const stemWidth = Math.max(1, ...rows.map((r) => r.label.length)) * CHAR + 12;
+		const depthWidth = depths ? 26 : 0;
+		const center = mirrored ? width / 2 : depthWidth + stemWidth;
+		const axisLeft = mirrored ? center - stemWidth / 2 : center - pad, axisRight = mirrored ? center + stemWidth / 2 : center;
+		const room = mirrored ? width / 2 - stemWidth / 2 - pad : width - center - pad;
+		const most = Math.max(1, ...rows.map((r) => Math.max(r.left.length, r.right.length)));
+		const step = Math.min(leaf === LeafMark.Digit ? font * .8 : leaf === LeafMark.Dot ? Math.max(9, rowHeight) : 26, room / most);
+		const y = (row) => head + rows.indexOf(row) * rowHeight + rowHeight / 2;
+		const shows = rows.flatMap((row) => [...mirrored ? row.left.map((digit, index) => ({
+			key: `${row.key}/l${index}`,
+			side: -1,
+			digit,
+			row,
+			index
+		})) : row.left.map((digit, index) => ({
+			key: `${row.key}/r${index}`,
+			side: 1,
+			digit,
+			row,
+			index
+		})), ...row.right.map((digit, index) => ({
+			key: `${row.key}/r${index}`,
+			side: 1,
+			digit,
+			row,
+			index
+		}))]);
+		const seriesOf = (d) => d.side < 0 ? leftName : mirrored ? rightName : "";
+		const xOf = (d) => d.side < 0 ? axisLeft - pad - (d.index + .5) * step : axisRight + pad + (d.index + .5) * step;
+		const shades = ctx.marks("stem-row", "rect", rows, (r) => r.key).attr("fill", "transparent");
+		ctx.set(shades, {
+			x: 0,
+			y: (r) => y(r) - rowHeight / 2,
+			width,
+			height: rowHeight
+		});
+		ctx.hover(shades, (r) => ({
+			title: `Stem ${r.label}`,
+			rows: mirrored ? [[leftName, r.left.length], [rightName, r.right.length]] : [["Leaves", r.left.length], ["Values", r.left.join(" ") || "–"]]
+		}));
+		const every = Math.ceil(10 / rowHeight);
+		const labels = ctx.marks("stem-label", "text", rows.filter((_, i) => i % every === 0), (r) => r.key).text((r) => r.label).attr("text-anchor", mirrored ? "middle" : "end").attr("dominant-baseline", "central").attr("pointer-events", "none");
+		ctx.text(labels, font, "ink").attr("font-weight", 600).attr("font-variant-numeric", "tabular-nums");
+		ctx.set(labels, {
+			x: mirrored ? center : axisLeft,
+			y
+		});
+		const ruleX = mirrored ? [axisLeft, axisRight] : [axisRight];
+		const rules = ctx.marks("stem-rule", "line", rows.length ? ruleX : [], (x) => x).attr("stroke", ctx.theme.axis).attr("stroke-width", 1);
+		ctx.set(rules, {
+			x1: (x) => x,
+			x2: (x) => x,
+			y1: head,
+			y2: head + rows.length * rowHeight
+		});
+		const digits = ctx.marks("leaf-digits", "text", leaf === LeafMark.Digit ? shows : [], (d) => d.key).text((d) => d.digit).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("pointer-events", "none");
+		ctx.text(digits, Math.min(font, step * 1.5, rowHeight), "ink").attr("font-variant-numeric", "tabular-nums");
+		ctx.set(digits, {
+			x: xOf,
+			y: (d) => y(d.row)
+		});
+		const radius = Math.max(1, Math.min(4.5, step / 2 - .5, rowHeight / 2 - .5));
+		const dots = ctx.marks("leaf-dots", "circle", leaf === LeafMark.Dot ? shows : [], (d) => d.key).attr("fill", (d) => palette.color(seriesOf(d))).attr("pointer-events", "none");
+		ctx.set(dots, {
+			cx: xOf,
+			cy: (d) => y(d.row),
+			r: radius
+		}, {
+			cx: xOf,
+			cy: (d) => y(d.row),
+			r: 0
+		}, 2);
+		const bars = rows.flatMap((row) => leaf === LeafMark.Bar ? [...row.left.length ? [{
+			key: `${row.key}/left`,
+			row,
+			side: mirrored ? -1 : 1,
+			count: row.left.length
+		}] : [], ...row.right.length ? [{
+			key: `${row.key}/right`,
+			row,
+			side: 1,
+			count: row.right.length
+		}] : []] : []);
+		const seriesName = (side) => side < 0 ? leftName : mirrored ? rightName : "";
+		const barHeight = Math.max(2, rowHeight - 3);
+		const blocks = ctx.marks("leaf-bars", "rect", bars, (b) => b.key).attr("fill", (b) => palette.color(seriesName(b.side))).attr("rx", Math.min(4, barHeight / 2)).attr("pointer-events", "none");
+		const barX = (b) => b.side < 0 ? axisLeft - pad - b.count * step : axisRight + pad;
+		ctx.set(blocks, {
+			x: barX,
+			y: (b) => y(b.row) - barHeight / 2,
+			width: (b) => b.count * step,
+			height: barHeight
+		}, {
+			x: barX,
+			y: (b) => y(b.row) - barHeight / 2,
+			width: 0,
+			height: barHeight
+		}, 8);
+		const depthRows = ctx.marks("stem-depth", "text", depths ? rows.filter((_, i) => i % every === 0) : [], (r) => r.key).text((r) => r.depth).attr("text-anchor", "end").attr("dominant-baseline", "central");
+		ctx.text(depthRows, Math.min(font, 10), "muted").attr("font-variant-numeric", "tabular-nums");
+		ctx.set(depthRows, {
+			x: depthWidth - 6,
+			y
+		});
+		const fit = (text) => {
+			const most = Math.max(3, Math.floor(room / CHAR));
+			return text.length > most ? `${text.slice(0, most - 1)}…` : text;
+		};
+		const heads = mirrored ? [{
+			text: fit(leftName),
+			x: axisLeft - pad,
+			anchor: "end"
+		}, {
+			text: fit(rightName),
+			x: axisRight + pad,
+			anchor: "start"
+		}] : [];
+		const titles = ctx.marks("stem-head", "text", heads, (d) => d.anchor).text((d) => d.text).attr("text-anchor", (d) => d.anchor).attr("y", 11);
+		ctx.text(titles, 11, "secondary").attr("font-weight", 600);
+		ctx.set(titles, { x: (d) => d.x });
+		const sampleRow = rows.find((r) => r.left.length || r.right.length);
+		const leafDigit = sampleRow?.left[0] ?? sampleRow?.right[0] ?? 0;
+		const legend = sampleRow ? `Key: ${sampleRow.label} | ${leafDigit} = ${sampleRow.negative ? "-" : ""}${+((sampleRow.stem + leafDigit / 10) * unit).toPrecision(6)}` : "";
+		const note = ctx.marks("stem-key", "text", legend ? [legend] : [], () => "key").text((d) => d).attr("text-anchor", "end");
+		ctx.text(note, 10, "muted").attr("x", width).attr("y", height - 3);
+	}
+};
+export { StemLeaf };

package/dist/charts/distribution/StripPlot.js

@@ -0,0 +1,113 @@
+import { ChartFamily, DataShape, Dimension, Orientation, ScaleKind } from "../../core/enums.js";
+import { BandDistribution, readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { GroupOrder, StripJitter, StripMark, StripSummary } from "./enums.js";
+// src/charts/distribution/StripPlot.ts
+/** Raw values on one axis per group: the quickest honest look at a small or medium sample. */
+var StripPlot = class extends BandDistribution {
+	static meta = {
+		id: "strip-plot",
+		name: "Strip plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots each observation along one axis per group, optionally jittered, with a mean and its interval on top.",
+		tags: [
+			"jitter",
+			"dot",
+			"one-dimensional scatter",
+			"mean error bar"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 90, 4),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			mark: [StripMark.Dot, StripMark.Tick],
+			jitter: [StripJitter.Spread, StripJitter.None],
+			summary: [
+				StripSummary.None,
+				StripSummary.Mean,
+				StripSummary.Interval
+			],
+			scale: [ScaleKind.Linear, ScaleKind.Log],
+			order: [GroupOrder.Given, GroupOrder.Ascending]
+		},
+		valid: ({ mark, jitter }) => !(mark === StripMark.Tick && jitter === StripJitter.Spread)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			mark: StripMark.Dot,
+			jitter: StripJitter.Spread,
+			summary: StripSummary.None,
+			scale: ScaleKind.Linear,
+			padding: .26
+		};
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const { mark, jitter, summary, value } = this.options;
+		const points = samples.flatMap((sample) => sample.values.map((v, i) => ({
+			key: `${sample.name}/${i}`,
+			sample,
+			v,
+			offset: jitter === StripJitter.Spread ? DistributionStats.spread(i) * frame.half : 0
+		})));
+		const tell = (p) => ({
+			title: this.title(p.sample),
+			color: palette.color(p.sample.name),
+			rows: [[value, readable(p.v)]]
+		});
+		const place = (p) => frame.at(p.v, frame.center(p.sample.name) + p.offset);
+		const dots = ctx.marks("strip-dots", "circle", mark === StripMark.Dot ? points : [], (p) => p.key).attr("fill", (p) => palette.color(p.sample.name)).attr("fill-opacity", jitter === StripJitter.Spread ? .85 : .4).attr("stroke", theme.surface).attr("stroke-width", jitter === StripJitter.Spread ? 1 : 0);
+		ctx.set(dots, {
+			cx: (p) => place(p)[0],
+			cy: (p) => place(p)[1],
+			r: 3.5
+		}, {
+			cx: (p) => place(p)[0],
+			cy: (p) => place(p)[1],
+			r: 0
+		}, 1);
+		ctx.hover(dots, tell);
+		const span = (p) => {
+			const c = frame.center(p.sample.name), reach = frame.half * .7;
+			return frame.line(p.v, c - reach, p.v, c + reach);
+		};
+		const ticks = ctx.marks("strip-ticks", "line", mark === StripMark.Tick ? points : [], (p) => p.key).attr("stroke", (p) => palette.color(p.sample.name)).attr("stroke-opacity", .45).attr("stroke-width", 2);
+		ctx.set(ticks, {
+			x1: (p) => span(p).x1,
+			x2: (p) => span(p).x2,
+			y1: (p) => span(p).y1,
+			y2: (p) => span(p).y2
+		});
+		ctx.hover(ticks, tell);
+		const interval = summary === StripSummary.Interval;
+		const stems = ctx.marks("strip-interval", "line", interval ? samples : [], (s) => s.name).attr("stroke", theme.ink).attr("stroke-width", 2).attr("stroke-linecap", "round");
+		const reach = (s) => 1.96 * s.summary.sd / Math.sqrt(s.summary.n);
+		const stem = (s) => frame.line(s.summary.mean - reach(s), frame.center(s.name), s.summary.mean + reach(s), frame.center(s.name));
+		ctx.set(stems, {
+			x1: (s) => stem(s).x1,
+			x2: (s) => stem(s).x2,
+			y1: (s) => stem(s).y1,
+			y2: (s) => stem(s).y2
+		});
+		const bar = (s) => frame.line(s.summary.mean, frame.center(s.name) - frame.half * .75, s.summary.mean, frame.center(s.name) + frame.half * .75);
+		const means = ctx.marks("strip-mean", "line", summary === StripSummary.Mean ? samples : [], (s) => s.name).attr("stroke", theme.ink).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
+		ctx.set(means, {
+			x1: (s) => bar(s).x1,
+			x2: (s) => bar(s).x2,
+			y1: (s) => bar(s).y1,
+			y2: (s) => bar(s).y2
+		});
+		ctx.hover(means, (s) => this.summaryTip(s, ctx));
+		const centres = ctx.marks("strip-centre", "circle", interval ? samples : [], (s) => s.name).attr("fill", theme.ink).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(centres, {
+			r: 5,
+			cx: (s) => frame.at(s.summary.mean, frame.center(s.name))[0],
+			cy: (s) => frame.at(s.summary.mean, frame.center(s.name))[1]
+		});
+		ctx.hover(centres, (s) => this.summaryTip(s, ctx));
+	}
+};
+export { StripPlot };

package/dist/charts/distribution/Violin3DChart.js

@@ -0,0 +1,135 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { readable } from "./DistributionChart.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { DensityScaling, KernelKind, KernelSmoothing, Violin3DForm } from "./enums.js";
+import { scaleBand, scaleLinear } from "d3";
+import { BoxGeometry, CylinderGeometry, LatheGeometry, Mesh, MeshStandardMaterial, PlaneGeometry, TorusGeometry, Vector2 } from "three";
+// src/charts/distribution/Violin3DChart.ts
+var FLOOR = -.8;
+/** A violin turned on a lathe into a solid of revolution: for a memorable comparison of group shapes. */
+var Violin3DChart = class extends Chart3D {
+	static meta = {
+		id: "violin-3d",
+		name: "3D violin",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Revolves each group density around its axis into a solid, so distribution shapes compare as turned forms.",
+		tags: [
+			"lathe",
+			"solid of revolution",
+			"vase"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 160, 4),
+		variants: {
+			form: [
+				Violin3DForm.Round,
+				Violin3DForm.Faceted,
+				Violin3DForm.Halved
+			],
+			scaling: [
+				DensityScaling.Area,
+				DensityScaling.Count,
+				DensityScaling.Width
+			],
+			smoothing: [
+				KernelSmoothing.Balanced,
+				KernelSmoothing.Tight,
+				KernelSmoothing.Loose
+			],
+			medianRing: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			value: "value",
+			group: "group",
+			form: Violin3DForm.Round,
+			scaling: DensityScaling.Area,
+			smoothing: KernelSmoothing.Balanced,
+			medianRing: true,
+			distance: 4.8
+		};
+	}
+	build(ctx) {
+		const { form, scaling, smoothing, medianRing, value } = this.options;
+		const samples = DistributionStats.samples(Array.isArray(this.options.data) ? this.options.data : [], value, this.options.group);
+		const floor = new Mesh(new PlaneGeometry(2.1, 1.4), new MeshStandardMaterial({ color: ctx.theme.grid }));
+		floor.rotation.x = -Math.PI / 2;
+		floor.position.y = FLOOR;
+		floor.receiveShadow = true;
+		ctx.root.add(floor);
+		if (!samples.length) return;
+		const curves = samples.map((s) => DistributionStats.density(s.values, KernelKind.Gaussian, smoothing));
+		const lo = Math.min(...curves.map((c) => c[0].v)), hi = Math.max(...curves.map((c) => c[c.length - 1].v));
+		const height = scaleLinear([lo, hi > lo ? hi : lo + 1], [-.76, .85]).nice();
+		const band = scaleBand(samples.map((s) => s.name), [-.92, 1]).padding(.08);
+		const weight = (i) => scaling === DensityScaling.Count ? samples[i].summary.n : 1;
+		const peaks = curves.map((curve, i) => Math.max(...curve.map((p) => p.d)) * weight(i));
+		const tallest = Math.max(...peaks);
+		const segments = form === Violin3DForm.Faceted ? 8 : 48;
+		const sweep = form === Violin3DForm.Halved ? Math.PI : Math.PI * 2;
+		samples.forEach((sample, i) => {
+			const curve = curves[i], reach = band.bandwidth() / 2;
+			const peak = scaling === DensityScaling.Width ? peaks[i] : tallest;
+			const radius = (d) => d * weight(i) * reach / (peak || 1);
+			const profile = [
+				new Vector2(0, height(curve[0].v)),
+				...curve.map((p) => new Vector2(Math.max(5e-4, radius(p.d)), height(p.v))),
+				new Vector2(0, height(curve[curve.length - 1].v))
+			];
+			const color = ctx.color(ctx.palette.color(sample.name));
+			const body = new Mesh(new LatheGeometry(profile, segments, form === Violin3DForm.Halved ? Math.PI / 2 : 0, sweep), new MeshStandardMaterial({
+				color,
+				roughness: .42,
+				metalness: .05,
+				flatShading: form === Violin3DForm.Faceted,
+				side: 2
+			}));
+			const x = band(sample.name) + reach;
+			body.position.x = x;
+			body.castShadow = true;
+			const top = height(curve[curve.length - 1].v), spine = new Mesh(new CylinderGeometry(.006, .006, top - FLOOR, 6), new MeshStandardMaterial({ color: ctx.theme.axis }));
+			spine.position.set(x, (top + FLOOR) / 2, 0);
+			ctx.root.add(spine);
+			ctx.reveal((p) => body.scale.set(Math.max(.001, p), 1, Math.max(.001, p)), .9, i * .08);
+			ctx.root.add(body);
+			const s = sample.summary;
+			ctx.pick(body, () => ({
+				title: sample.name || value,
+				rows: [
+					["n", s.n],
+					["Median", readable(s.median)],
+					["IQR", `${readable(s.q1)} – ${readable(s.q3)}`]
+				]
+			}));
+			if (medianRing) {
+				const ring = new Mesh(new TorusGeometry(Math.max(.01, radius(DistributionStats.at(curve, s.median))), .012, 8, 48, sweep), new MeshStandardMaterial({
+					color: ctx.theme.ink,
+					roughness: .5
+				}));
+				ring.rotation.x = form === Violin3DForm.Halved ? -Math.PI / 2 : Math.PI / 2;
+				ring.position.set(x, height(s.median), 0);
+				ctx.root.add(ring);
+			}
+			if (sample.name) ctx.label(sample.name, [
+				x,
+				-.8400000000000001,
+				.72
+			], "secondary", 10);
+		});
+		height.ticks(4).forEach((tick) => {
+			const rule = new Mesh(new BoxGeometry(2.05, .004, .004), new MeshStandardMaterial({ color: ctx.theme.axis }));
+			rule.position.set(0, height(tick), -.7);
+			ctx.root.add(rule);
+			ctx.label(readable(tick), [
+				-1,
+				height(tick),
+				-.7
+			], "secondary", 10);
+		});
+	}
+};
+export { Violin3DChart };

package/dist/charts/distribution/ViolinChart.js

@@ -0,0 +1,88 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { DensityScaling, DensitySide, KernelSmoothing, ViolinInner } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+// src/charts/distribution/ViolinChart.ts
+/** Box-plot comparison with the full shape visible: use when groups may be skewed or multimodal. */
+var ViolinChart = class extends KdeBand {
+	static meta = {
+		id: "violin",
+		name: "Violin plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Mirrors a density estimate per group, showing modes and skew that a box plot hides.",
+		tags: ["kernel density", "half violin"],
+		sample: (seed) => DistributionSamples.uneven(seed, 160, 4),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			side: [DensitySide.Both, DensitySide.Half],
+			inner: [
+				ViolinInner.Box,
+				ViolinInner.None,
+				ViolinInner.Quartiles
+			],
+			scaling: [
+				DensityScaling.Area,
+				DensityScaling.Count,
+				DensityScaling.Width
+			],
+			smoothing: [KernelSmoothing.Balanced, KernelSmoothing.Tight],
+			trim: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			side: DensitySide.Both,
+			inner: ViolinInner.Box,
+			padding: .12
+		};
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette } = ctx;
+		const { side, inner } = this.options;
+		const half = side === DensitySide.Half, rise = frame.valueOnX ? -1 : 1;
+		const shapes = ctx.marks("violin-body", "path", samples, (s) => s.name).attr("fill", (s) => palette.color(s.name)).attr("stroke-linejoin", "round");
+		ctx.set(shapes, { d: (s) => this.outline(frame, s, side, 1) }, { d: (s) => this.outline(frame, s, side, 0) }, 40);
+		ctx.hover(shapes, (s) => this.summaryTip(s, ctx));
+		const core = (s) => frame.center(s.name) - (half ? (frame.half - 5) * rise : 0);
+		const boxes = ctx.marks("violin-box", "rect", inner === ViolinInner.Box ? samples : [], (s) => s.name).attr("fill", ctx.theme.surface).attr("fill-opacity", .92).attr("rx", 2).attr("pointer-events", "none");
+		ctx.set(boxes, {
+			x: (s) => frame.rect(s.summary.q1, s.summary.q3, core(s) - 3, core(s) + 3).x,
+			y: (s) => frame.rect(s.summary.q1, s.summary.q3, core(s) - 3, core(s) + 3).y,
+			width: (s) => frame.rect(s.summary.q1, s.summary.q3, core(s) - 3, core(s) + 3).width,
+			height: (s) => frame.rect(s.summary.q1, s.summary.q3, core(s) - 3, core(s) + 3).height
+		});
+		const medians = ctx.marks("violin-median", "circle", inner === ViolinInner.Box ? samples : [], (s) => s.name).attr("fill", (s) => palette.color(s.name)).attr("pointer-events", "none");
+		ctx.set(medians, {
+			r: 2.5,
+			cx: (s) => frame.at(s.summary.median, core(s))[0],
+			cy: (s) => frame.at(s.summary.median, core(s))[1]
+		});
+		const rungs = inner === ViolinInner.Quartiles ? samples.flatMap((s) => {
+			const width = this.widthOf(s), curve = this.curves.get(s.name), base = frame.center(s.name);
+			return [
+				["q1", s.summary.q1],
+				["median", s.summary.median],
+				["q3", s.summary.q3]
+			].map(([key, v]) => {
+				const r = width(DistributionStats.at(curve, v)) * frame.half;
+				return {
+					key: `${s.name}/${key}`,
+					heavy: key === "median",
+					line: half ? frame.line(v, base - rise * frame.half, v, base - rise * frame.half + rise * 2 * r) : frame.line(v, base - r, v, base + r)
+				};
+			});
+		}) : [];
+		const lines = ctx.marks("violin-quartile", "line", rungs, (r) => r.key).attr("stroke", ctx.theme.surface).attr("stroke-width", (r) => r.heavy ? 2 : 1).attr("stroke-dasharray", (r) => r.heavy ? null : "4 3").attr("pointer-events", "none");
+		ctx.set(lines, {
+			x1: (r) => r.line.x1,
+			x2: (r) => r.line.x2,
+			y1: (r) => r.line.y1,
+			y2: (r) => r.line.y2
+		});
+	}
+};
+export { ViolinChart };