@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/distribution/RaincloudChart.js

@@ -0,0 +1,136 @@
+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 { GroupOrder, KernelSmoothing, RainStyle } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+// src/charts/distribution/RaincloudChart.ts
+/** Density, summary and raw data together: the fullest view of a distribution when there is room for it. */
+var RaincloudChart = class extends KdeBand {
+	static meta = {
+		id: "raincloud",
+		name: "Raincloud plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Pairs a half density cloud with a compact box and the raw observations falling below it.",
+		tags: [
+			"half violin",
+			"rain",
+			"strip"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 70, 3),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			rain: [
+				RainStyle.Jitter,
+				RainStyle.Swarm,
+				RainStyle.Strip
+			],
+			box: [true, false],
+			flipped: [false, true],
+			smoothing: [
+				KernelSmoothing.Balanced,
+				KernelSmoothing.Tight,
+				KernelSmoothing.Loose
+			],
+			order: [GroupOrder.Given, GroupOrder.Descending]
+		},
+		valid: ({ order, flipped }) => order === GroupOrder.Given || !flipped
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			rain: RainStyle.Jitter,
+			box: true,
+			flipped: false,
+			padding: .1
+		};
+	}
+	drops(frame, sample, height, radius) {
+		const { rain } = this.options, { values, name } = sample;
+		if (rain === RainStyle.Swarm) {
+			const px = values.map((v) => frame.value(v));
+			const [order, sorted] = [px.map((_, i) => i).sort((a, b) => px[a] - px[b]), [...px].sort((a, b) => a - b)];
+			const offsets = DistributionStats.swarm(sorted, sorted.map(() => radius), 1), most = Math.max(height - radius * 2, ...offsets);
+			return order.map((index, i) => ({
+				key: `${name}/${index}`,
+				sample,
+				v: values[index],
+				offset: offsets[i] * (height - radius * 2) / most + radius
+			}));
+		}
+		return values.map((v, i) => ({
+			key: `${name}/${i}`,
+			sample,
+			v,
+			offset: rain === RainStyle.Strip ? height / 2 : (DistributionStats.spread(i) + 1) / 2 * (height - radius * 2) + radius
+		}));
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const { box, flipped } = this.options;
+		const sign = (flipped ? -1 : 1) * (frame.valueOnX ? -1 : 1);
+		const cloudHalf = frame.half * .56;
+		const spine = (s) => frame.center(s.name) + sign * frame.half * .1;
+		const cloudPath = (s, grow) => {
+			const profile = this.profile(s), base = spine(s);
+			const top = profile.map(({ v, r }) => [v, base + sign * r * grow * cloudHalf * 1.55]);
+			return frame.path([...top, ...profile.map(({ v }) => [v, base]).reverse()], true);
+		};
+		const clouds = ctx.marks("rain-cloud", "path", samples, (s) => s.name).attr("fill", (s) => palette.color(s.name)).attr("stroke-linejoin", "round");
+		ctx.set(clouds, { d: (s) => cloudPath(s, 1) }, { d: (s) => cloudPath(s, 0) }, 60);
+		ctx.hover(clouds, (s) => this.summaryTip(s, ctx));
+		const rainTop = (s) => spine(s) - sign * (box ? 12 : 4);
+		const height = Math.max(8, frame.half * .75 - (box ? 10 : 2));
+		const radius = Math.max(2, Math.min(3.5, height / 7));
+		const drops = samples.flatMap((s) => this.drops(frame, s, height, radius));
+		const place = (d) => frame.at(d.v, rainTop(d.sample) - sign * d.offset);
+		const dots = ctx.marks("rain-drops", "circle", drops, (d) => d.key).attr("fill", (d) => palette.color(d.sample.name)).attr("fill-opacity", .7).attr("stroke", theme.surface).attr("stroke-width", .75);
+		ctx.set(dots, {
+			cx: (d) => place(d)[0],
+			cy: (d) => place(d)[1],
+			r: radius
+		}, {
+			cx: (d) => frame.at(d.v, spine(d.sample))[0],
+			cy: (d) => frame.at(d.v, spine(d.sample))[1],
+			r: 0
+		}, 1);
+		ctx.hover(dots, (d) => ({
+			title: this.title(d.sample),
+			color: palette.color(d.sample.name),
+			rows: [[this.options.value, readable(d.v)]]
+		}));
+		const rail = (s) => spine(s) - sign * 6;
+		const stems = ctx.marks("rain-stem", "line", box ? samples : [], (s) => s.name).attr("stroke", theme.inkSecondary).attr("stroke-width", 1.5);
+		const whisk = (s) => {
+			const [low, high] = [s.summary.q1 - 1.5 * s.summary.iqr, s.summary.q3 + 1.5 * s.summary.iqr];
+			return frame.line(Math.max(low, s.summary.min), rail(s), Math.min(high, s.summary.max), rail(s));
+		};
+		ctx.set(stems, {
+			x1: (s) => whisk(s).x1,
+			x2: (s) => whisk(s).x2,
+			y1: (s) => whisk(s).y1,
+			y2: (s) => whisk(s).y2
+		});
+		const bodyOf = (s) => frame.rect(s.summary.q1, s.summary.q3, rail(s) - 4, rail(s) + 4);
+		const boxes = ctx.marks("rain-box", "rect", box ? samples : [], (s) => s.name).attr("fill", theme.inkSecondary).attr("rx", 2);
+		ctx.set(boxes, {
+			x: (s) => bodyOf(s).x,
+			y: (s) => bodyOf(s).y,
+			width: (s) => bodyOf(s).width,
+			height: (s) => bodyOf(s).height
+		});
+		ctx.hover(boxes, (s) => this.summaryTip(s, ctx));
+		const medians = ctx.marks("rain-median", "line", box ? samples : [], (s) => s.name).attr("stroke", theme.surface).attr("stroke-width", 2).attr("pointer-events", "none");
+		const mid = (s) => frame.line(s.summary.median, rail(s) - 4, s.summary.median, rail(s) + 4);
+		ctx.set(medians, {
+			x1: (s) => mid(s).x1,
+			x2: (s) => mid(s).x2,
+			y1: (s) => mid(s).y1,
+			y2: (s) => mid(s).y2
+		});
+	}
+};
+export { RaincloudChart };

package/dist/charts/distribution/RidgeSlabs3DChart.js

@@ -0,0 +1,169 @@
+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 { GroupOrder, KernelKind, KernelSmoothing, Ridge3DForm, RidgeScaling } from "./enums.js";
+import { max, scaleLinear } from "d3";
+import { BufferAttribute, BufferGeometry, DoubleSide, ExtrudeGeometry, Mesh, MeshStandardMaterial, PlaneGeometry, Shape } from "three";
+// src/charts/distribution/RidgeSlabs3DChart.ts
+var STEPS = 72;
+var FLOOR = -.7;
+var RISE = 1.1;
+/** Density curves stood up in depth: slabs, thin blades or one lofted terrain, for a shift across ordered groups. */
+var RidgeSlabs3DChart = class extends Chart3D {
+	static meta = {
+		id: "distribution-ridgeline-3d",
+		name: "3D ridgeline",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Extrudes each group density into depth, or lofts them into a terrain, to show a shift across ordered groups.",
+		tags: [
+			"joyplot",
+			"density surface",
+			"distribution terrain"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 140, 6),
+		variants: {
+			form: [
+				Ridge3DForm.Slabs,
+				Ridge3DForm.Blades,
+				Ridge3DForm.Terrain
+			],
+			smoothing: [
+				KernelSmoothing.Balanced,
+				KernelSmoothing.Tight,
+				KernelSmoothing.Loose
+			],
+			order: [GroupOrder.Given, GroupOrder.Ascending],
+			ridgeScaling: [RidgeScaling.Shared, RidgeScaling.Row]
+		}
+	};
+	defaults() {
+		return {
+			value: "value",
+			group: "group",
+			form: Ridge3DForm.Slabs,
+			smoothing: KernelSmoothing.Balanced,
+			order: GroupOrder.Given,
+			ridgeScaling: RidgeScaling.Shared,
+			distance: 5,
+			elevation: 32
+		};
+	}
+	ordered() {
+		const samples = DistributionStats.samples(Array.isArray(this.options.data) ? this.options.data : [], this.options.value, this.options.group);
+		return this.options.order === GroupOrder.Ascending ? samples.sort((a, b) => a.summary.median - b.summary.median) : samples;
+	}
+	build(ctx) {
+		const { form, smoothing, ridgeScaling } = this.options;
+		const samples = this.ordered();
+		const floor = new Mesh(new PlaneGeometry(2.1, 2.1), 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 value = scaleLinear([lo, hi || lo + 1], [-1, .74]).nice();
+		const grid = Array.from({ length: 73 }, (_, i) => value.domain()[0] + (value.domain()[1] - value.domain()[0]) * i / STEPS);
+		const inside = (curve, v) => v < curve[0].v || v > curve[curve.length - 1].v ? 0 : DistributionStats.at(curve, v);
+		const raw = curves.map((curve) => grid.map((v) => inside(curve, v)));
+		const shared = max(raw.flat()) || 1;
+		const heights = raw.map((row) => {
+			const top = ridgeScaling === RidgeScaling.Row ? max(row) || 1 : shared;
+			return row.map((d) => d / top * RISE);
+		});
+		const depth = (i) => samples.length > 1 ? -.9 + 1.8 * i / (samples.length - 1) : 0;
+		const pitch = samples.length > 1 ? 1.8 / (samples.length - 1) : .8;
+		if (form === Ridge3DForm.Terrain) this.terrain(ctx, samples, heights, grid.map((v) => value(v)), depth);
+		else samples.forEach((sample, i) => {
+			const outline = new Shape();
+			outline.moveTo(value(grid[0]), 0);
+			grid.forEach((v, g) => outline.lineTo(value(v), Math.max(.002, heights[i][g])));
+			outline.lineTo(value(grid[STEPS]), 0);
+			const thick = form === Ridge3DForm.Blades ? Math.min(.05, pitch * .25) : pitch * .82;
+			const geometry = new ExtrudeGeometry(outline, {
+				depth: thick,
+				bevelEnabled: false,
+				curveSegments: 1
+			});
+			geometry.translate(0, 0, depth(i) - thick / 2);
+			const mesh = new Mesh(geometry, new MeshStandardMaterial({
+				color: ctx.color(ctx.palette.color(sample.name)),
+				roughness: .6
+			}));
+			mesh.position.y = FLOOR;
+			mesh.castShadow = mesh.receiveShadow = true;
+			ctx.reveal((p) => mesh.scale.set(1, Math.max(.001, p), 1), .9, i * .06);
+			ctx.root.add(mesh);
+			ctx.pick(mesh, () => this.tell(sample));
+		});
+		for (const tick of value.ticks(5)) ctx.label(readable(tick), [
+			value(tick),
+			-.75,
+			1
+		], "secondary", 10);
+		samples.forEach((sample, i) => {
+			if (sample.name) ctx.label(sample.name, [
+				.86,
+				FLOOR,
+				depth(i)
+			], "secondary", 10);
+		});
+	}
+	tell(sample) {
+		const s = sample.summary;
+		return {
+			title: sample.name || this.options.value,
+			rows: [
+				["n", s.n],
+				["Median", readable(s.median)],
+				["Mean", readable(s.mean)]
+			]
+		};
+	}
+	terrain(ctx, samples, heights, xs, depth) {
+		const across = xs.length, rows = samples.length;
+		const positions = new Float32Array(across * rows * 3), colors = new Float32Array(across * rows * 3);
+		const indices = [];
+		samples.forEach((_, r) => xs.forEach((x, c) => {
+			const y = heights[r][c], at = (r * across + c) * 3, tone = ctx.color(ctx.palette.sequential(.15 + .85 * y / RISE));
+			positions.set([
+				x,
+				y,
+				depth(r)
+			], at);
+			colors.set([
+				tone.r,
+				tone.g,
+				tone.b
+			], at);
+			if (r < rows - 1 && c < across - 1) {
+				const a = r * across + c, b = a + 1, d = a + across, e = d + 1;
+				indices.push(a, d, b, b, d, e);
+			}
+		}));
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new BufferAttribute(positions, 3));
+		geometry.setAttribute("color", new BufferAttribute(colors, 3));
+		geometry.setIndex(indices);
+		geometry.computeVertexNormals();
+		const mesh = new Mesh(geometry, new MeshStandardMaterial({
+			vertexColors: true,
+			roughness: .7,
+			side: DoubleSide
+		}));
+		mesh.position.y = -.692;
+		mesh.castShadow = mesh.receiveShadow = true;
+		ctx.reveal((p) => mesh.scale.set(1, Math.max(.001, p), 1));
+		ctx.root.add(mesh);
+		ctx.pick(mesh, () => ({
+			title: this.meta.name,
+			rows: [["Groups", rows]]
+		}));
+	}
+};
+export { RidgeSlabs3DChart };

package/dist/charts/distribution/RidgelineChart.js

@@ -0,0 +1,154 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { DistributionSamples } from "./DistributionSamples.js";
+import { DistributionStats } from "./DistributionStats.js";
+import { BinRule, GroupOrder, KernelSmoothing, RidgeMarker, RidgeMode, RidgeScaling } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+import { ascending, descending, max, rgb } from "d3";
+// src/charts/distribution/RidgelineChart.ts
+/** Many distributions stacked as overlapping hills: shows a slow shift across ordered groups, such as months. */
+var RidgelineChart = class extends KdeBand {
+	static meta = {
+		id: "ridgeline",
+		name: "Ridgeline plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks partially overlapping density curves, so a shift across many ordered groups reads as one landscape.",
+		tags: [
+			"joyplot",
+			"joy plot",
+			"overlapping density"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 140, 7),
+		variants: {
+			overlap: [
+				1,
+				.4,
+				2
+			],
+			mode: [RidgeMode.Density, RidgeMode.Histogram],
+			order: [GroupOrder.Given, GroupOrder.Ascending],
+			marker: [
+				RidgeMarker.None,
+				RidgeMarker.Median,
+				RidgeMarker.Quartiles,
+				RidgeMarker.Rug
+			],
+			ridgeScaling: [RidgeScaling.Shared, RidgeScaling.Row],
+			smoothing: [
+				KernelSmoothing.Balanced,
+				KernelSmoothing.Tight,
+				KernelSmoothing.Loose
+			]
+		},
+		valid: ({ mode, smoothing, ridgeScaling }) => smoothing === KernelSmoothing.Balanced || mode === RidgeMode.Density && ridgeScaling === RidgeScaling.Shared
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			overlap: 1,
+			mode: RidgeMode.Density,
+			marker: RidgeMarker.None,
+			ridgeScaling: RidgeScaling.Shared,
+			padding: 0
+		};
+	}
+	/** Reserves the height of the top ridge above the first row. */
+	bandRange(length) {
+		const rows = Math.max(1, this.samples().length);
+		return [length * this.options.overlap / (rows + this.options.overlap), length];
+	}
+	ridges(frame, samples) {
+		const { mode, ridgeScaling, overlap } = this.options;
+		const lift = frame.band.bandwidth() * (1 + overlap) - 3;
+		const hist = mode === RidgeMode.Histogram;
+		const edges = DistributionStats.edges(samples.flatMap((s) => s.values).sort(ascending), BinRule.SquareRoot);
+		const heights = samples.map((s) => hist ? this.steps(s, edges) : (this.curves.get(s.name) ?? []).map((p) => [p.v, p.d]));
+		const shared = max(heights.flat(), (p) => p[1]) ?? 1;
+		const ranks = [...samples].sort((a, b) => descending(a.summary.median, b.summary.median));
+		return samples.map((sample, i) => {
+			const own = heights[i], top = (ridgeScaling === RidgeScaling.Row ? max(own, (p) => p[1]) : shared) || 1;
+			const base = (frame.band(sample.name) ?? 0) + frame.band.bandwidth();
+			return {
+				sample,
+				rank: ranks.indexOf(sample),
+				line: own.map(([v, d]) => [v, base - d / top * lift])
+			};
+		});
+	}
+	steps(sample, edges) {
+		const counts = DistributionStats.counts(sample.values, edges), width = edges[1] - edges[0];
+		return [
+			[edges[0], 0],
+			...counts.flatMap((count, i) => [[edges[i], count / (sample.summary.n * width)], [edges[i + 1], count / (sample.summary.n * width)]]),
+			[edges[edges.length - 1], 0]
+		];
+	}
+	tint(ctx, ridge, count) {
+		return ctx.palette.sequential(.2 + .8 * (count - 1 - ridge.rank) / Math.max(1, count - 1));
+	}
+	plotSamples(ctx, frame, samples) {
+		const { marker } = this.options;
+		const ridges = this.ridges(frame, samples);
+		ctx.root.select(".m-axis-y").selectAll("text").attr("dy", frame.band.bandwidth() / 2 - 3);
+		const closed = (ridge, grow) => {
+			const base = (frame.band(ridge.sample.name) ?? 0) + frame.band.bandwidth();
+			const points = ridge.line.map(([v, c]) => [v, base + (c - base) * grow]);
+			return frame.path([
+				...points,
+				[points[points.length - 1][0], base],
+				[points[0][0], base]
+			], true);
+		};
+		const hills = ctx.marks("ridge-hill", "path", ridges, (r) => r.sample.name).attr("fill", (r) => this.tint(ctx, r, ridges.length)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(hills, { d: (r) => closed(r, 1) }, { d: (r) => closed(r, 0) }, 50);
+		ctx.hover(hills, (r) => {
+			return {
+				...this.summaryTip(r.sample, ctx),
+				color: this.tint(ctx, r, ridges.length)
+			};
+		});
+		const heightAt = (ridge, v) => {
+			const curve = ridge.line;
+			const i = curve.findIndex((p) => p[0] >= v);
+			return curve[Math.max(0, i)]?.[1] ?? 0;
+		};
+		const rules = ridges.flatMap((r) => {
+			const s = r.sample.summary, base = (frame.band(r.sample.name) ?? 0) + frame.band.bandwidth();
+			return (marker === RidgeMarker.Median ? [s.median] : marker === RidgeMarker.Quartiles ? [
+				s.q1,
+				s.median,
+				s.q3
+			] : []).map((v, i) => ({
+				key: `${r.sample.name}/${i}`,
+				ridge: r,
+				g: frame.line(v, base, v, heightAt(r, v))
+			}));
+		});
+		const lines = ctx.marks("ridge-rule", "line", rules, (r) => r.key).attr("stroke", (r) => ctx.palette.inkOn(rgb(this.tint(ctx, r.ridge, ridges.length)).formatHex())).attr("stroke-width", 1.5).attr("pointer-events", "none");
+		ctx.set(lines, {
+			x1: (r) => r.g.x1,
+			x2: (r) => r.g.x2,
+			y1: (r) => r.g.y1,
+			y2: (r) => r.g.y2
+		});
+		const rug = marker === RidgeMarker.Rug ? ridges.flatMap((r) => r.sample.values.map((v, i) => ({
+			v,
+			r,
+			key: `${r.sample.name}/${i}`
+		}))) : [];
+		const ticks = ctx.marks("ridge-rug", "line", rug, (t) => t.key).attr("stroke", ctx.theme.ink).attr("stroke-opacity", .35).attr("stroke-width", 1).attr("pointer-events", "none");
+		const span = (t) => {
+			const base = (frame.band(t.r.sample.name) ?? 0) + frame.band.bandwidth();
+			return frame.line(t.v, base - 4, t.v, base);
+		};
+		ctx.set(ticks, {
+			x1: (t) => span(t).x1,
+			x2: (t) => span(t).x2,
+			y1: (t) => span(t).y1,
+			y2: (t) => span(t).y2
+		});
+	}
+};
+export { RidgelineChart };

package/dist/charts/distribution/SinaPlot.js

@@ -0,0 +1,106 @@
+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, DensitySide, KernelSmoothing, SinaOverlay, SinaSpread } from "./enums.js";
+import { KdeBand } from "./KdeBand.js";
+// src/charts/distribution/SinaPlot.ts
+/** Jitter shaped by density, so raw points themselves trace a violin; for mid-sized samples. */
+var SinaPlot = class extends KdeBand {
+	static meta = {
+		id: "sina",
+		name: "Sina plot",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Jitters each point within the local density width, so raw observations form the violin outline themselves.",
+		tags: [
+			"jitter",
+			"strip",
+			"violin points"
+		],
+		sample: (seed) => DistributionSamples.uneven(seed, 110, 4),
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			spread: [SinaSpread.Uniform, SinaSpread.Alternating],
+			overlay: [
+				SinaOverlay.None,
+				SinaOverlay.Violin,
+				SinaOverlay.Box,
+				SinaOverlay.Median
+			],
+			scaling: [
+				DensityScaling.Area,
+				DensityScaling.Count,
+				DensityScaling.Width
+			],
+			smoothing: [KernelSmoothing.Balanced, KernelSmoothing.Tight]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			spread: SinaSpread.Uniform,
+			overlay: SinaOverlay.None,
+			trim: true,
+			padding: .1
+		};
+	}
+	grains(frame, sample) {
+		const width = this.widthOf(sample), curve = this.curves.get(sample.name);
+		return sample.values.map((v, i) => {
+			const room = width(DistributionStats.at(curve, v)) * frame.half;
+			const position = this.options.spread === SinaSpread.Uniform ? DistributionStats.spread(i) : (i % 2 ? 1 : -1) * (i % 8 + 1) / 8;
+			return {
+				key: `${sample.name}/${i}`,
+				sample,
+				v,
+				offset: position * room
+			};
+		});
+	}
+	plotSamples(ctx, frame, samples) {
+		const { palette, theme } = ctx;
+		const { overlay } = this.options;
+		const shapes = ctx.marks("sina-violin", "path", overlay === SinaOverlay.Violin ? samples : [], (s) => s.name).attr("fill", (s) => palette.color(s.name)).attr("fill-opacity", .16).attr("d", (s) => this.outline(frame, s, DensitySide.Both, 1.04));
+		ctx.hover(shapes, (s) => this.summaryTip(s, ctx));
+		const grains = samples.flatMap((s) => this.grains(frame, s));
+		const total = grains.length;
+		const radius = Math.max(1.75, Math.min(3.5, Math.sqrt(ctx.plot.width * ctx.plot.height / Math.max(1, total)) / 4.5));
+		const place = (g) => frame.at(g.v, frame.center(g.sample.name) + g.offset);
+		const dots = this.ring(ctx.marks("sina-dots", "circle", grains, (g) => g.key), radius).attr("fill", (g) => palette.color(g.sample.name));
+		ctx.set(dots, {
+			cx: (g) => place(g)[0],
+			cy: (g) => place(g)[1],
+			r: radius
+		}, {
+			cx: (g) => frame.at(g.v, frame.center(g.sample.name))[0],
+			cy: (g) => frame.at(g.v, frame.center(g.sample.name))[1],
+			r: 0
+		}, 1);
+		ctx.hover(dots, (g) => ({
+			title: this.title(g.sample),
+			color: palette.color(g.sample.name),
+			rows: [[this.options.value, readable(g.v)]]
+		}));
+		const boxed = overlay === SinaOverlay.Box;
+		const bars = ctx.marks("sina-box", "rect", boxed ? samples : [], (s) => s.name).attr("fill", "none").attr("stroke", theme.ink).attr("stroke-width", 2).attr("rx", 3);
+		const body = (s) => frame.rect(s.summary.q1, s.summary.q3, frame.center(s.name) - frame.half * .3, frame.center(s.name) + frame.half * .3);
+		ctx.set(bars, {
+			x: (s) => body(s).x,
+			y: (s) => body(s).y,
+			width: (s) => body(s).width,
+			height: (s) => body(s).height
+		});
+		const span = (s) => frame.line(s.summary.median, frame.center(s.name) - frame.half * (boxed ? .3 : .7), s.summary.median, frame.center(s.name) + frame.half * (boxed ? .3 : .7));
+		const medians = ctx.marks("sina-median", "line", boxed || overlay === SinaOverlay.Median ? samples : [], (s) => s.name).attr("stroke", theme.ink).attr("stroke-width", 2.5).attr("stroke-linecap", "round");
+		ctx.set(medians, {
+			x1: (s) => span(s).x1,
+			x2: (s) => span(s).x2,
+			y1: (s) => span(s).y1,
+			y2: (s) => span(s).y2
+		});
+		ctx.hover(medians, (s) => this.summaryTip(s, ctx));
+	}
+};
+export { SinaPlot };