@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/radial/RadialBarChart.js

@@ -0,0 +1,169 @@
+import { DataShape } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { PolarSort, PolarSpan, RadialBarStack } from "./radialEnums.js";
+import { max, scaleLinear } from "d3";
+// src/charts/radial/RadialBarChart.ts
+var SWEEPS = {
+	[PolarSpan.Gauge]: TAU * .75,
+	[PolarSpan.Full]: TAU,
+	[PolarSpan.Half]: Math.PI
+};
+/** Rank a handful of categories on concentric rings, where arc length carries the value. */
+var RadialBarChart = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "radial-bar",
+		name: "Radial bar chart",
+		shape: DataShape.Table,
+		description: "Bends bars into concentric rings so a short ranked list becomes a compact dial of progress-like arcs.",
+		tags: ["progress rings", "concentric bars"],
+		sample: (seed) => SampleData.categories(seed, 6, 3),
+		variants: {
+			span: [
+				PolarSpan.Gauge,
+				PolarSpan.Full,
+				PolarSpan.Half
+			],
+			sort: [
+				PolarSort.Descending,
+				PolarSort.Ascending,
+				PolarSort.Data
+			],
+			track: [true, false],
+			stack: [
+				RadialBarStack.Total,
+				RadialBarStack.Stacked,
+				RadialBarStack.Grouped
+			],
+			hole: [.28, .5]
+		},
+		valid: (values) => !(values.stack === RadialBarStack.Grouped && values.hole === .5)
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			span: PolarSpan.Gauge,
+			sort: PolarSort.Descending,
+			track: true,
+			stack: RadialBarStack.Total,
+			hole: .28
+		};
+	}
+	/** Half dials sit left of centre, which leaves the width of a label beside the 12 o'clock start. */
+	frameDisc(ctx, frame) {
+		const half = this.options.span === PolarSpan.Half;
+		const base = this.disc(ctx, frame);
+		if (!half) return base;
+		const radius = Math.min(ctx.plot.width * .56, frame.radius - 18), shift = Math.max(0, Math.min(radius * .4, ctx.plot.width / 2 - radius - 48));
+		return {
+			...base,
+			radius,
+			ctx: ctx.nest(`translate(${-shift},0)`, "dial"),
+			x0: base.x0 + shift,
+			x1: base.x1 + shift
+		};
+	}
+	drawRadial(root, frame) {
+		const { category, series, value, span, sort, track, stack, hole } = this.options;
+		const disc = this.frameDisc(root, frame), { ctx, radius } = disc;
+		const pivot = Polar.pivot(this.data, category, series, value);
+		const amount = (c, s) => Math.max(0, pivot.at(c, s) ?? 0);
+		const total = (c) => pivot.series.reduce((sum, s) => sum + amount(c, s), 0);
+		const categories = Polar.sorted(pivot.categories, total, sort);
+		const grouped = stack === RadialBarStack.Grouped;
+		const peak = (grouped ? max(pivot.values) : max(categories, total)) ?? 1;
+		const sweep = SWEEPS[span];
+		const { top, ticks } = Polar.magnitude(span === PolarSpan.Full ? peak * 1.18 : peak, 4);
+		const angle = scaleLinear([0, top], [0, sweep]);
+		const inner = radius * hole, band = (radius - inner) / Math.max(1, categories.length);
+		const ring = (i) => radius - (i + 1) * band;
+		this.spokes(disc, ticks.map((tick) => angle(tick)), inner, radius);
+		this.rimLabels(disc, ticks.filter((tick) => angle(tick) < TAU - .2).map((tick) => ({
+			key: `${tick}`,
+			angle: angle(tick),
+			text: Polar.label(tick)
+		})), "value-labels", "muted");
+		this.wedges(disc, track ? categories.map((c, i) => ({
+			key: c,
+			a0: 0,
+			a1: sweep,
+			r0: ring(i) + 1,
+			r1: ring(i) + band - 1,
+			fill: ctx.theme.grid,
+			tip: {},
+			opacity: .6
+		})) : [], {
+			name: "tracks",
+			inert: true,
+			gap: 0
+		});
+		const wedges = categories.flatMap((c, i) => {
+			if (stack === RadialBarStack.Total) {
+				const color = ctx.palette.color(value);
+				return [{
+					key: c,
+					a0: 0,
+					a1: angle(total(c)),
+					r0: ring(i) + 1,
+					r1: ring(i) + band - 1,
+					fill: color,
+					sweep: true,
+					tip: {
+						title: c,
+						color,
+						rows: [[value, total(c)]]
+					}
+				}];
+			}
+			let cursor = 0;
+			const lane = (band - 2) / pivot.series.length;
+			return pivot.series.map((s, slot) => {
+				const v = amount(c, s), color = ctx.palette.color(s);
+				const base = {
+					key: `${c}/${s}`,
+					fill: color,
+					sweep: true,
+					tip: {
+						title: c,
+						color,
+						rows: [[s, v]]
+					}
+				};
+				if (grouped) return {
+					...base,
+					a0: 0,
+					a1: angle(v),
+					r0: ring(i) + 1 + slot * lane,
+					r1: ring(i) + .5 + (slot + 1) * lane
+				};
+				const a0 = angle(cursor);
+				cursor += v;
+				return {
+					...base,
+					a0,
+					a1: angle(cursor),
+					r0: ring(i) + 1,
+					r1: ring(i) + band - 1
+				};
+			});
+		});
+		this.wedges(disc, wedges, { stagger: 16 });
+		const every = Math.ceil(11 / band);
+		const shown = categories.map((c, i) => ({
+			c,
+			i
+		})).filter(({ i }) => i % every === 0);
+		const labels = ctx.marks("names", "text", shown, (d) => d.c).attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		ctx.text(labels, band < 13 ? 10 : 11).attr("text-anchor", "end").attr("dy", ".35em").text((d) => Polar.fit(d.c, -disc.x0 - 8));
+		const at = {
+			x: -6,
+			y: (d) => -(ring(d.i) + band / 2)
+		};
+		ctx.set(labels, at, at);
+	}
+};
+export { RadialBarChart };

package/dist/charts/radial/RadialBoxPlot.js

@@ -0,0 +1,210 @@
+import { DataShape, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { PolarSort, RadialBoxMark, RadialWhisker } from "./radialEnums.js";
+import { deviation, groups, max, mean, min, quantile, range, scaleLinear } from "d3";
+// src/charts/radial/RadialBoxPlot.ts
+var STRIP_LIMIT = 48;
+var VIOLIN_STEPS = 24;
+var BOX_WIDTH = 16;
+/** Compare many distributions at once where a straight axis would run out of room. */
+var RadialBoxPlot = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "radial-boxplot",
+		name: "Radial box plot",
+		shape: DataShape.Table,
+		description: "Stands a box, violin or strip of points on each spoke, summarising the spread of many groups in a circle.",
+		tags: [
+			"circular boxplot",
+			"radial violin",
+			"distribution"
+		],
+		sample: (seed) => SampleData.distribution(seed, 90, 8),
+		variants: {
+			mark: [
+				RadialBoxMark.Box,
+				RadialBoxMark.Violin,
+				RadialBoxMark.Strip
+			],
+			whisker: [
+				RadialWhisker.Tukey,
+				RadialWhisker.Percentile,
+				RadialWhisker.MinMax
+			],
+			outliers: [true, false],
+			sort: [PolarSort.Data, PolarSort.Descending],
+			hole: [.25, .45]
+		},
+		valid: (values) => values.mark === RadialBoxMark.Strip ? values.whisker === RadialWhisker.Tukey && values.outliers === true : !(values.whisker === RadialWhisker.MinMax && values.outliers === true)
+	};
+	defaults() {
+		return {
+			group: "group",
+			value: "value",
+			mark: RadialBoxMark.Box,
+			whisker: RadialWhisker.Tukey,
+			outliers: true,
+			sort: PolarSort.Data,
+			hole: .25
+		};
+	}
+	summaries() {
+		const { data, group, value, whisker, sort } = this.options;
+		const clean = Polar.rows(data).flatMap((row) => {
+			const v = Polar.number(row[value]);
+			return v === null ? [] : [{
+				group: String(row[group] ?? "All"),
+				value: v
+			}];
+		});
+		const all = groups(clean, (d) => d.group).map(([name, rows]) => {
+			const values = rows.map((d) => d.value).sort((a, b) => a - b);
+			const q1 = quantile(values, .25), median = quantile(values, .5), q3 = quantile(values, .75), fence = (q3 - q1) * 1.5;
+			const [lowEdge, highEdge] = whisker === RadialWhisker.Tukey ? [q1 - fence, q3 + fence] : whisker === RadialWhisker.Percentile ? [quantile(values, .05), quantile(values, .95)] : [values[0], values[values.length - 1]];
+			const inside = values.filter((v) => v >= lowEdge && v <= highEdge);
+			return {
+				group: name,
+				values,
+				q1,
+				median,
+				q3,
+				low: inside[0] ?? q1,
+				high: inside[inside.length - 1] ?? q3,
+				strays: values.filter((v) => v < lowEdge || v > highEdge),
+				angle: 0
+			};
+		});
+		const ordered = Polar.sorted(all, (d) => d.median, sort);
+		return ordered.map((d, i) => ({
+			...d,
+			angle: (i + .5) / ordered.length * TAU
+		}));
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.disc(ctx, frame);
+		const { mark, outliers, hole } = this.options;
+		const summaries = this.summaries();
+		Polar.rows(this.data).forEach((row) => row[this.options.value] !== null && ctx.palette.color(String(row[this.options.group] ?? "All")));
+		const inner = disc.radius * hole;
+		const reach = Polar.scale(ScaleKind.Linear, summaries.flatMap((d) => d.values), [inner, disc.radius - 4], false);
+		this.rings(disc, Polar.ticks(reach).map((tick) => ({
+			r: reach(tick),
+			text: Polar.label(tick)
+		})));
+		this.spokes(disc, summaries.map((d) => d.angle), inner, disc.radius);
+		const turn = (d) => `rotate(${Polar.degrees(d.angle)})`;
+		const color = (d) => ctx.palette.color(d.group);
+		const tip = (d) => ({
+			title: d.group,
+			color: color(d),
+			rows: [
+				["Q3", +d.q3.toFixed(2)],
+				["Median", +d.median.toFixed(2)],
+				["Q1", +d.q1.toFixed(2)]
+			]
+		});
+		const width = Math.min(BOX_WIDTH, inner * TAU / Math.max(1, summaries.length) * .7);
+		const shown = mark === RadialBoxMark.Strip ? [] : summaries;
+		const whiskers = ctx.marks("whiskers", "rect", shown, (d) => d.group).attr("fill", (d) => color(d)).attr("fill-opacity", .7);
+		ctx.set(whiskers, {
+			transform: turn,
+			x: -1,
+			width: 2,
+			y: (d) => -reach(d.high),
+			height: (d) => reach(d.high) - reach(d.low)
+		}, {
+			transform: turn,
+			x: -1,
+			width: 2,
+			y: (d) => -reach(d.median),
+			height: 0
+		}, 20);
+		const boxes = ctx.marks("boxes", "rect", mark === RadialBoxMark.Box ? summaries : [], (d) => d.group).attr("fill", (d) => color(d)).attr("rx", 3);
+		ctx.set(boxes, {
+			transform: turn,
+			x: -width / 2,
+			width,
+			y: (d) => -reach(d.q3),
+			height: (d) => reach(d.q3) - reach(d.q1)
+		}, {
+			transform: turn,
+			x: -width / 2,
+			width,
+			y: (d) => -reach(d.median),
+			height: 0
+		}, 20);
+		ctx.hover(boxes, tip);
+		const violin = (d) => this.violin(d, reach, width);
+		const violins = ctx.marks("violins", "path", mark === RadialBoxMark.Violin ? summaries : [], (d) => d.group).attr("fill", (d) => color(d)).attr("fill-opacity", .8);
+		ctx.set(violins, {
+			transform: turn,
+			d: violin
+		}, {
+			transform: turn,
+			d: violin
+		}, 20);
+		ctx.hover(violins, tip);
+		const medians = ctx.marks("medians", "rect", summaries, (d) => d.group).attr("fill", mark === RadialBoxMark.Strip ? ctx.theme.ink : ctx.theme.surface);
+		ctx.set(medians, {
+			transform: turn,
+			x: -width / 2,
+			width,
+			y: (d) => -reach(d.median) - 1,
+			height: 2
+		}, {
+			transform: turn,
+			x: 0,
+			width: 0,
+			y: (d) => -reach(d.median) - 1,
+			height: 2
+		}, 20);
+		const dotted = mark === RadialBoxMark.Strip ? summaries.flatMap((d) => {
+			const stride = Math.ceil(d.values.length / STRIP_LIMIT);
+			return d.values.filter((_, i) => i % stride === 0).map((v, i) => ({
+				key: `${d.group}/${i}`,
+				d,
+				v,
+				shift: i * 7 % 11 / 10 - .5
+			}));
+		}) : outliers ? summaries.flatMap((d) => d.strays.map((v, i) => ({
+			key: `${d.group}/${i}`,
+			d,
+			v,
+			shift: 0
+		}))) : [];
+		const at = (p) => Polar.point(p.d.angle + p.shift * width * 1.6 / reach(p.v), reach(p.v));
+		const dots = ctx.marks("dots", "circle", dotted, (p) => p.key).attr("fill", (p) => color(p.d)).attr("fill-opacity", mark === RadialBoxMark.Strip ? .55 : .85);
+		ctx.set(dots, {
+			cx: (p) => at(p)[0],
+			cy: (p) => at(p)[1],
+			r: 4
+		}, {
+			cx: (p) => at(p)[0],
+			cy: (p) => at(p)[1],
+			r: 0
+		});
+		ctx.hover(dots, (p) => ({
+			title: p.d.group,
+			color: color(p.d),
+			rows: [["Value", p.v]]
+		}));
+		this.rimLabels(disc, summaries.map((d) => ({
+			angle: d.angle,
+			text: d.group
+		})));
+	}
+	/** Mirrored kernel density in the spoke's local frame, pointing at 12 o'clock. */
+	violin(d, reach, width) {
+		const low = min(d.values), high = max(d.values);
+		const h = Math.max(1e-6, 1.06 * (deviation(d.values) ?? 1) * d.values.length ** -.2);
+		const ys = range(25).map((i) => low + (high - low) * i / VIOLIN_STEPS);
+		const densities = ys.map((y) => mean(d.values, (v) => Math.exp(-.5 * ((y - v) / h) ** 2)) ?? 0);
+		const scale = scaleLinear([0, max(densities) || 1], [0, width * .8]);
+		const side = ys.map((y, i) => `${scale(densities[i])},${-reach(y)}`);
+		const other = ys.map((y, i) => `${-scale(densities[i])},${-reach(y)}`).reverse();
+		return `M${[...side, ...other].join("L")}Z`;
+	}
+};
+export { RadialBoxPlot };

package/dist/charts/radial/RadialColumnChart.js

@@ -0,0 +1,119 @@
+import { DataShape, ScaleKind, StackMode } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { PolarDirection, PolarSort, RadialColumnMark } from "./radialEnums.js";
+// src/charts/radial/RadialColumnChart.ts
+/** Columns of constant width stood round a ring: unlike wedges, their area does not widen with height. */
+var RadialColumnChart = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "radial-column",
+		name: "Radial column chart",
+		shape: DataShape.Table,
+		description: "Stands straight-sided columns or lollipops round a ring, keeping length honest in a polar layout.",
+		tags: ["radial lollipop", "columns"],
+		sample: (seed) => SampleData.categories(seed, 10, 2),
+		variants: {
+			mark: [RadialColumnMark.Column, RadialColumnMark.Lollipop],
+			stack: [StackMode.None, StackMode.Stacked],
+			direction: [PolarDirection.Outward, PolarDirection.Inward],
+			hole: [
+				.4,
+				.25,
+				.55
+			],
+			sort: [PolarSort.Data, PolarSort.Descending]
+		},
+		valid: (values) => !(values.mark === RadialColumnMark.Lollipop && values.stack === StackMode.Stacked)
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			mark: RadialColumnMark.Column,
+			stack: StackMode.None,
+			direction: PolarDirection.Outward,
+			hole: .4,
+			sort: PolarSort.Data
+		};
+	}
+	drawRadial(ctx, frame) {
+		const { category, series, value, mark, stack, direction, hole, sort } = this.options;
+		const disc = this.disc(ctx, frame);
+		const pivot = Polar.pivot(this.data, category, series, value);
+		const categories = Polar.sorted(pivot.categories, pivot.total, sort);
+		const inner = disc.radius * hole, stacked = stack === StackMode.Stacked, lollipop = mark === RadialColumnMark.Lollipop;
+		const groups = stacked ? 1 : pivot.series.length;
+		const sector = TAU / Math.max(1, categories.length);
+		const near = direction === PolarDirection.Outward ? inner : disc.radius * .72;
+		const pitch = near * sector * .82 / Math.max(1, groups);
+		const width = lollipop ? 2 : Math.min(26, Math.max(2, pitch - 2));
+		const columns = categories.flatMap((c, i) => {
+			let cursor = 0;
+			return pivot.series.map((s, slot) => {
+				const v = pivot.at(c, s) ?? 0;
+				const offset = stacked ? 0 : (slot - (groups - 1) / 2) * pitch / near;
+				const low = stacked ? cursor : 0;
+				cursor += Math.max(0, v);
+				return {
+					key: `${c}/${s}`,
+					category: c,
+					series: s,
+					value: v,
+					angle: (i + .5) * sector + offset,
+					low,
+					high: stacked ? cursor : v,
+					width
+				};
+			});
+		});
+		const reach = Polar.scale(ScaleKind.Linear, columns.flatMap((column) => [column.low, column.high]), direction === PolarDirection.Outward ? [inner, disc.radius - (lollipop ? 6 : 0)] : [disc.radius, inner]);
+		this.rings(disc, Polar.ticks(reach).map((tick) => ({
+			r: reach(tick),
+			text: Polar.label(tick)
+		})));
+		const span = (d) => [Math.min(reach(d.low), reach(d.high)), Math.max(reach(d.low), reach(d.high))];
+		const rects = ctx.marks("columns", "rect", columns, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series)).attr("rx", lollipop ? 1 : Math.min(3, width / 2));
+		ctx.set(rects, {
+			transform: (d) => `rotate(${Polar.degrees(d.angle)})`,
+			x: (d) => -d.width / 2,
+			width: (d) => d.width,
+			y: (d) => -span(d)[1] + (stacked ? 1 : 0),
+			height: (d) => Math.max(0, span(d)[1] - span(d)[0] - (stacked ? 2 : 0))
+		}, {
+			y: (d) => -reach(d.low),
+			height: 0,
+			transform: (d) => `rotate(${Polar.degrees(d.angle)})`,
+			x: (d) => -d.width / 2,
+			width: (d) => d.width
+		}, 10);
+		ctx.hover(rects, (d) => ({
+			title: d.category,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, d.value]]
+		}));
+		const heads = ctx.marks("heads", "circle", lollipop ? columns : [], (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series));
+		this.ringed(ctx, heads);
+		ctx.set(heads, {
+			cx: (d) => Polar.point(d.angle, reach(d.high))[0],
+			cy: (d) => Polar.point(d.angle, reach(d.high))[1],
+			r: 5
+		}, {
+			r: 0,
+			cx: (d) => Polar.point(d.angle, reach(d.low))[0],
+			cy: (d) => Polar.point(d.angle, reach(d.low))[1]
+		}, 10);
+		ctx.hover(heads, (d) => ({
+			title: d.category,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, d.value]]
+		}));
+		this.rimLabels(disc, categories.map((c, i) => ({
+			angle: (i + .5) * sector,
+			text: c
+		})));
+	}
+};
+export { RadialColumnChart };

package/dist/charts/radial/RadialDumbbell.js

@@ -0,0 +1,143 @@
+import { DataShape, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { RadialDumbbellConnector, RadialDumbbellSort } from "./radialEnums.js";
+import { max, min } from "d3";
+// src/charts/radial/RadialDumbbell.ts
+var CAPSULE = 10;
+var ARROW_ROOM = 24;
+/** Before and after, or any two states, compared round a circle of categories. */
+var RadialDumbbell = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "radial-dumbbell",
+		name: "Radial dumbbell",
+		shape: DataShape.Table,
+		description: "Joins two or more values on each spoke, so the size and direction of every gap read at a glance.",
+		tags: [
+			"connected dot",
+			"gap",
+			"before and after"
+		],
+		sample: (seed) => SampleData.categories(seed, 12, 2),
+		variants: {
+			connector: [
+				RadialDumbbellConnector.Line,
+				RadialDumbbellConnector.Capsule,
+				RadialDumbbellConnector.Arrow
+			],
+			sort: [
+				RadialDumbbellSort.Data,
+				RadialDumbbellSort.Gap,
+				RadialDumbbellSort.High
+			],
+			hole: [.3, .5],
+			scale: [ScaleKind.Linear, ScaleKind.Sqrt]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			connector: RadialDumbbellConnector.Line,
+			sort: RadialDumbbellSort.Data,
+			hole: .3,
+			scale: ScaleKind.Linear
+		};
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.disc(ctx, frame);
+		const { category, series, value, connector, sort, hole, scale } = this.options;
+		const pivot = Polar.pivot(this.data, category, series, value);
+		const present = (c) => pivot.series.flatMap((s) => {
+			const v = pivot.at(c, s);
+			return v === null ? [] : [v];
+		});
+		const spread = (c) => (max(present(c)) ?? 0) - (min(present(c)) ?? 0);
+		const rank = sort === RadialDumbbellSort.Gap ? spread : (c) => max(present(c)) ?? 0;
+		const categories = sort === RadialDumbbellSort.Data ? pivot.categories : [...pivot.categories].sort((a, b) => rank(b) - rank(a));
+		const step = TAU / Math.max(1, categories.length);
+		const inner = disc.radius * hole;
+		const reach = Polar.scale(scale, pivot.values, [inner, disc.radius - 6], false);
+		this.rings(disc, Polar.ticks(reach).map((tick) => ({
+			r: reach(tick),
+			text: Polar.label(tick)
+		})));
+		this.spokes(disc, categories.map((_, i) => (i + .5) * step), inner, disc.radius);
+		const links = categories.flatMap((category, i) => {
+			const own = present(category);
+			return own.length > 1 ? [{
+				category,
+				angle: (i + .5) * step,
+				low: min(own),
+				high: max(own),
+				first: own[0],
+				last: own[own.length - 1]
+			}] : [];
+		});
+		const wide = connector === RadialDumbbellConnector.Capsule;
+		const bars = ctx.marks("links", "rect", links, (d) => d.category).attr("fill", wide ? ctx.theme.axis : ctx.theme.inkMuted).attr("fill-opacity", wide ? .6 : 1).attr("rx", wide ? CAPSULE / 2 : 1);
+		const thick = wide ? CAPSULE : 2;
+		const turn = (d) => `rotate(${Polar.degrees(d.angle)})`;
+		ctx.set(bars, {
+			transform: turn,
+			x: -thick / 2,
+			width: thick,
+			y: (d) => -reach(d.high),
+			height: (d) => reach(d.high) - reach(d.low)
+		}, {
+			transform: turn,
+			x: -thick / 2,
+			width: thick,
+			y: (d) => -reach(d.low),
+			height: 0
+		}, 12);
+		ctx.hover(bars, (d) => ({
+			title: d.category,
+			rows: [["Gap", +(d.high - d.low).toFixed(2)]]
+		}));
+		const heads = ctx.marks("heads", "path", connector === RadialDumbbellConnector.Arrow ? links.filter((d) => reach(d.high) - reach(d.low) >= ARROW_ROOM) : [], (d) => d.category).attr("fill", ctx.theme.inkSecondary);
+		const middle = (d) => reach((d.low + d.high) / 2);
+		const head = (d) => `rotate(${Polar.degrees(d.angle)}) translate(0,${-middle(d)}) rotate(${d.last >= d.first ? 0 : 180})`;
+		ctx.set(heads, {
+			d: "M0,-5L4.5,3.5L-4.5,3.5Z",
+			transform: head
+		}, {
+			d: "M0,-5L4.5,3.5L-4.5,3.5Z",
+			transform: head
+		}, 12);
+		const ends = categories.flatMap((category, i) => pivot.series.flatMap((s) => {
+			const v = pivot.at(category, s);
+			return v === null ? [] : [{
+				key: `${category}/${s}`,
+				category,
+				series: s,
+				value: v,
+				angle: (i + .5) * step
+			}];
+		}));
+		const dots = ctx.marks("dots", "circle", ends, (d) => d.key).attr("fill", (d) => ctx.palette.color(d.series));
+		this.ringed(ctx, dots);
+		ctx.set(dots, {
+			cx: (d) => Polar.point(d.angle, reach(d.value))[0],
+			cy: (d) => Polar.point(d.angle, reach(d.value))[1],
+			r: 5.5
+		}, {
+			cx: (d) => Polar.point(d.angle, reach(d.value))[0],
+			cy: (d) => Polar.point(d.angle, reach(d.value))[1],
+			r: 0
+		}, 12);
+		ctx.hover(dots, (d) => ({
+			title: d.category,
+			color: ctx.palette.color(d.series),
+			rows: [[d.series, d.value]]
+		}));
+		this.rimLabels(disc, categories.map((c, i) => ({
+			angle: (i + .5) * step,
+			text: c
+		})));
+	}
+};
+export { RadialDumbbell };