@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/radial/PolarBase.js

@@ -0,0 +1,227 @@
+import { ChartFamily, Dimension } from "../../core/enums.js";
+import { RadialChart } from "../../core/RadialChart.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarSpan } from "./radialEnums.js";
+import { arc, easeCubicOut } from "d3";
+// src/charts/radial/PolarBase.ts
+var RIM = 18;
+var CHAR = 6.2;
+var LINE = 13;
+var PLACED = "__wedge";
+var mix = (from, to, t) => from + (to - from) * t;
+var polarMeta = {
+	family: ChartFamily.Radial,
+	dimension: Dimension.Two
+};
+/** Everything polar charts share: discs, grid, rim labels and wedge drawing. */
+var PolarBase = class extends RadialChart {
+	plotMargin() {
+		return {
+			top: 6,
+			right: 14,
+			bottom: 10,
+			left: 14
+		};
+	}
+	legendItems() {
+		const items = super.legendItems();
+		return items.length <= 8 ? items : [...items.slice(0, 8), {
+			key: "Other",
+			color: this.theme.inkMuted
+		}];
+	}
+	draw(ctx) {
+		super.draw(ctx);
+		ctx.root.selectAll("g.m-ring-labels").raise();
+		ctx.root.selectAll("g.m-hits").raise();
+	}
+	disc(ctx, frame, rim = RIM) {
+		const { width, height } = ctx.plot;
+		return {
+			ctx,
+			radius: Math.max(8, frame.radius - rim),
+			x0: -width / 2,
+			x1: width / 2,
+			y0: -height / 2,
+			y1: height / 2
+		};
+	}
+	/** A disc fitted to `span`: the half disc sits on the bottom edge and grows to use the height. */
+	dial(ctx, frame, span) {
+		const { width, height } = ctx.plot;
+		const half = span === PolarSpan.Half;
+		const shift = half ? height / 2 - 16 : 0;
+		const radius = half ? Math.min(width / 2 - RIM - 24, height - RIM - 18) : frame.radius - RIM;
+		return {
+			ctx: ctx.nest(`translate(0,${shift})`, "dial"),
+			radius: Math.max(8, radius),
+			x0: -width / 2,
+			x1: width / 2,
+			y0: -height / 2 - shift,
+			y1: height / 2 - shift
+		};
+	}
+	/** Small multiples: lays out `count` discs in the grid that gives each the largest radius. */
+	facets(ctx, frame, count, draw, titled = count > 1) {
+		const { width, height } = ctx.plot;
+		const cells = Math.max(1, count);
+		const title = titled ? 16 : 0;
+		let columns = 1, best = 0;
+		for (let c = 1; c <= cells; c++) {
+			const rows = Math.ceil(cells / c), r = Math.min(width / c, height / rows - title);
+			if (r > best) {
+				best = r;
+				columns = c;
+			}
+		}
+		const rows = Math.ceil(cells / columns), w = width / columns, h = height / rows;
+		ctx.root.selectAll(":scope > g").filter(function() {
+			const match = /m-facet-(\d+)/.exec(this.getAttribute("class") ?? "");
+			return !!match && +match[1] >= cells;
+		}).remove();
+		for (let i = 0; i < cells; i++) {
+			const cx = (i % columns + .5) * w - width / 2, cy = (Math.floor(i / columns) + .5) * h - height / 2 + title / 2;
+			const radius = Math.max(8, Math.min(w, h - title) / 2 - RIM);
+			draw({
+				ctx: ctx.nest(`translate(${cx},${cy})`, `facet-${i}`),
+				radius,
+				x0: -w / 2,
+				x1: w / 2,
+				y0: -(h - title) / 2,
+				y1: (h - title) / 2
+			}, i);
+		}
+	}
+	facetTitle(disc, text) {
+		const title = disc.ctx.marks("facet-title", "text", [Polar.fit(text, disc.x1 - disc.x0)], (d) => d);
+		disc.ctx.text(title, 12, "ink").attr("font-weight", 600).attr("text-anchor", "middle").attr("y", Math.max(disc.y0 - 4, -disc.radius - 32)).text((d) => d);
+	}
+	/** Concentric guides, as circles, polygons or arcs, with optional value labels on the first spoke. */
+	rings(disc, ticks, { sweep, polygon, labels = true } = {}) {
+		const { ctx } = disc;
+		const shape = (r) => polygon ? Polar.polygon(r, polygon) : sweep ? Polar.arc(r, sweep[0], sweep[1]) : Polar.circle(r);
+		const rings = ctx.marks("rings", "path", ticks, (d) => d.text).attr("fill", "none").attr("stroke", ctx.theme.grid);
+		ctx.set(rings, { d: (d) => shape(d.r) }, { d: (d) => shape(d.r) });
+		if (!labels) return;
+		const start = sweep ? sweep[0] : 0;
+		const placed = ticks.filter((tick, i) => !i || Math.abs(tick.r - ticks[i - 1].r) >= LINE);
+		const text = ctx.marks("ring-labels", "text", placed, (d) => d.text).attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		ctx.text(text, 10, "muted").attr("dx", 3).attr("dy", 10).text((d) => d.text);
+		const at = {
+			x: (d) => Polar.point(start, d.r)[0],
+			y: (d) => Polar.point(start, d.r)[1]
+		};
+		ctx.set(text, at, at);
+	}
+	spokes(disc, angles, r0, r1) {
+		const { ctx } = disc;
+		const spokes = ctx.marks("spokes", "line", [...new Set(angles)], (d) => d).attr("stroke", ctx.theme.grid);
+		const at = {
+			x1: (d) => Polar.point(d, r0)[0],
+			y1: (d) => Polar.point(d, r0)[1],
+			x2: (d) => Polar.point(d, r1)[0],
+			y2: (d) => Polar.point(d, r1)[1]
+		};
+		ctx.set(spokes, at, at);
+	}
+	/** Horizontal labels around the disc: truncated to the room left, dropped when they would collide. */
+	rimLabels(disc, labels, name = "rim-labels", tone = "secondary") {
+		const taken = [];
+		const placed = labels.flatMap(({ key, angle, text, radius }) => {
+			const [x, y] = Polar.point(angle, radius ?? disc.radius + 10);
+			const side = Math.abs(Math.sin(angle)) < .2 ? 0 : Math.sign(Math.sin(angle));
+			const room = side ? (side > 0 ? disc.x1 - x : x - disc.x0) - 2 : 2 * Math.min(disc.x1 - x, x - disc.x0);
+			const fitted = Polar.fit(text, room);
+			if (!fitted) return [];
+			const width = fitted.length * CHAR;
+			const left = side > 0 ? x : side < 0 ? x - width : x - width / 2;
+			const box = [
+				left - 2,
+				y - LINE / 2,
+				left + width + 2,
+				y + LINE / 2
+			];
+			if (box[1] < disc.y0 || box[3] > disc.y1 || taken.some((t) => box[0] < t[2] && box[2] > t[0] && box[1] < t[3] && box[3] > t[1])) return [];
+			taken.push(box);
+			return [{
+				key: key ?? text,
+				x,
+				y,
+				text: fitted,
+				anchor: side > 0 ? "start" : side < 0 ? "end" : "middle"
+			}];
+		});
+		const { ctx } = disc;
+		const text = ctx.marks(name, "text", placed, (d) => d.key).attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		ctx.text(text, 11, tone).attr("text-anchor", (d) => d.anchor).attr("dy", ".35em").text((d) => d.text);
+		const at = {
+			x: (d) => d.x,
+			y: (d) => d.y
+		};
+		ctx.set(text, at, at);
+	}
+	/** Labels that read along their spoke, flipped on the left half so they are never upside down. */
+	radialLabels(disc, labels, radius, room) {
+		const stride = Math.ceil(labels.length * LINE / (TAU * radius));
+		const placed = labels.filter((_, i) => i % stride === 0).flatMap(({ key, angle, text }) => {
+			const fitted = Polar.fit(text, room);
+			if (!fitted) return [];
+			const turn = (angle % TAU + TAU) % TAU, left = turn > Math.PI, degrees = Polar.degrees(turn) - 90;
+			return [{
+				key: key ?? text,
+				text: fitted,
+				left,
+				transform: left ? `rotate(${degrees + 180}) translate(${-radius},0)` : `rotate(${degrees}) translate(${radius},0)`
+			}];
+		});
+		const { ctx } = disc;
+		const text = ctx.marks("radial-labels", "text", placed, (d) => d.key);
+		ctx.text(text, 11).attr("text-anchor", (d) => d.left ? "end" : "start").attr("dy", ".35em").text((d) => d.text);
+		const at = { transform: (d) => d.transform };
+		ctx.set(text, at, at);
+	}
+	/**
+	* Annular sectors with rounded data-ends and a constant 2px gap. Grow outward, or along the arc when `sweep` is set.
+	* Tweens the sector's angles and radii: interpolating the path text, as `ctx.set` would, corrupts SVG arc flags.
+	*/
+	wedges(disc, items, { name = "wedges", corner = 3, gap = 2, stagger = 8, inert = false } = {}) {
+		const { ctx } = disc;
+		const shape = arc().innerRadius((d) => d.r0).outerRadius((d) => Math.max(d.r0, d.r1)).startAngle((d) => d.a0).endAngle((d) => d.a1).cornerRadius((d) => Math.max(0, Math.min(corner, (d.r1 - d.r0) / 2.5))).padAngle((d) => gap / Math.max(1, d.r1)).padRadius((d) => Math.max(1, d.r1));
+		const marks = ctx.marks(name, "path", items, (d) => d.key).attr("fill", (d) => d.fill).attr("fill-opacity", (d) => d.opacity ?? null).attr("stroke", (d) => d.ring ? ctx.theme.surface : null).attr("stroke-width", (d) => d.ring ? 1.5 : null);
+		if (this.animated) {
+			const delay = Math.min(stagger, 600 / Math.max(1, items.length));
+			marks.transition().duration(650).ease(easeCubicOut).delay((_, i) => i * delay).attrTween("d", function(d) {
+				const held = this;
+				const from = held[PLACED] ?? (d.sweep ? {
+					...d,
+					a1: d.a0
+				} : {
+					...d,
+					r1: d.r0
+				});
+				held[PLACED] = d;
+				return (t) => shape({
+					...d,
+					a0: mix(from.a0, d.a0, t),
+					a1: mix(from.a1, d.a1, t),
+					r0: mix(from.r0, d.r0, t),
+					r1: mix(from.r1, d.r1, t)
+				});
+			});
+		} else marks.attr("d", (d) => shape(d));
+		if (inert) marks.attr("pointer-events", "none");
+		else ctx.hover(marks, (d) => d.tip);
+	}
+	/** Invisible sectors on top of the marks: a polar crosshair that reports everything at one angle. */
+	hits(disc, items) {
+		const { ctx } = disc;
+		const shape = arc().innerRadius((d) => d.r0).outerRadius((d) => d.r1).startAngle((d) => d.a0).endAngle((d) => d.a1);
+		const marks = ctx.marks("hits", "path", items, (d) => d.key).attr("fill", "transparent").attr("d", (d) => shape(d));
+		ctx.hover(marks, (d) => d.tip);
+	}
+	/** A dot with the 2px surface ring every point mark carries. */
+	ringed(ctx, marks) {
+		marks.attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+	}
+};
+export { PolarBase, polarMeta };

package/dist/charts/radial/PolarScatter.js

@@ -0,0 +1,146 @@
+import { DataShape, ScaleKind, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar, TAU } from "./Polar.js";
+import { PolarBase, polarMeta } from "./PolarBase.js";
+import { PolarOverlay } from "./radialEnums.js";
+import { mean, polygonHull, range, rollups, scaleLinear, symbol } from "d3";
+// src/charts/radial/PolarScatter.ts
+var BASE_AREA = 64;
+var MAX_SHARE = .11;
+/** Points given by a direction and a distance: bearings, phases, or any angle against a magnitude. */
+var PolarScatter = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "polar-scatter",
+		name: "Polar scatter plot",
+		shape: DataShape.Table,
+		description: "Places points by angle and distance from a centre, revealing directional clusters and their spread.",
+		tags: [
+			"polar plot",
+			"bearing",
+			"bubble"
+		],
+		sample: (seed) => SampleData.points(seed, 120, 3).map((row) => ({
+			...row,
+			angle: +((row.x * 5 + 40) % 360).toFixed(1),
+			radius: row.y
+		})),
+		variants: {
+			symbol: [
+				SymbolKind.Circle,
+				SymbolKind.Diamond,
+				SymbolKind.Triangle
+			],
+			bubble: [false, true],
+			scale: [
+				ScaleKind.Linear,
+				ScaleKind.Sqrt,
+				ScaleKind.Log
+			],
+			overlay: [
+				PolarOverlay.None,
+				PolarOverlay.Centroids,
+				PolarOverlay.Hull
+			]
+		}
+	};
+	defaults() {
+		return {
+			angle: "angle",
+			radius: "radius",
+			size: "size",
+			group: "group",
+			symbol: SymbolKind.Circle,
+			bubble: false,
+			scale: ScaleKind.Linear,
+			overlay: PolarOverlay.None
+		};
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.disc(ctx, frame);
+		const { data, angle, radius, size, group, scale, bubble, overlay } = this.options;
+		const raw = Polar.rows(data).flatMap((row) => {
+			const a = Polar.number(row[angle]), r = Polar.number(row[radius]);
+			return a === null || r === null ? [] : [{
+				a,
+				r,
+				s: Polar.number(row[size]),
+				group: String(row[group] ?? "All")
+			}];
+		});
+		const reach = Polar.scale(scale, raw.map((d) => d.r), [0, disc.radius * (bubble ? .89 : .97)]);
+		const dots = raw.map(({ a, r, s, group: name }) => ({
+			angle: a * TAU / 360,
+			degrees: a,
+			radius: r,
+			size: s,
+			group: name,
+			at: Polar.point(a * TAU / 360, reach(r))
+		}));
+		this.rings(disc, Polar.ticks(reach).filter((tick) => reach(tick) > 0).map((tick) => ({
+			r: reach(tick),
+			text: Polar.label(tick)
+		})));
+		const bearings = range(0, 360, 45);
+		this.spokes(disc, bearings.map((d) => d * TAU / 360), 0, disc.radius);
+		this.rimLabels(disc, bearings.map((d) => ({
+			angle: d * TAU / 360,
+			text: `${d}°`
+		})), "rim-labels", "muted");
+		const clusters = rollups(dots, (own) => own, (d) => d.group);
+		this.overlays(ctx, overlay, clusters);
+		const top = Math.max(1, ...dots.map((d) => d.size ?? 0));
+		const areaOf = scaleLinear([0, top], [24, Math.PI * (disc.radius * MAX_SHARE) ** 2]);
+		const glyph = (area) => symbol(Scales.symbol(this.options.symbol), area)();
+		const area = (d) => bubble ? areaOf(Math.max(0, d.size ?? 0)) : BASE_AREA;
+		const marks = ctx.marks("points", "path", dots, (_, i) => i).attr("fill", (d) => ctx.palette.color(d.group)).attr("fill-opacity", bubble ? .72 : .9);
+		this.ringed(ctx, marks);
+		const at = (d) => `translate(${d.at[0]},${d.at[1]})`;
+		ctx.set(marks, {
+			d: (d) => glyph(area(d)),
+			transform: at
+		}, {
+			d: (d) => glyph(1),
+			transform: at
+		}, 3);
+		ctx.hover(marks, (d) => ({
+			title: d.group,
+			color: ctx.palette.color(d.group),
+			rows: [
+				["Angle", `${d.degrees}°`],
+				[radius, d.radius],
+				...bubble && d.size !== null ? [[size, d.size]] : []
+			]
+		}));
+	}
+	overlays(ctx, overlay, clusters) {
+		const hulls = overlay === PolarOverlay.Hull ? clusters.flatMap(([group, own]) => {
+			const hull = polygonHull(own.map((d) => d.at));
+			return hull ? [{
+				group,
+				d: `M${hull.join("L")}Z`
+			}] : [];
+		}) : [];
+		const shells = ctx.marks("hulls", "path", hulls, (d) => d.group).attr("fill", (d) => ctx.palette.color(d.group)).attr("fill-opacity", .14).attr("stroke", (d) => ctx.palette.color(d.group)).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(shells, { d: (d) => d.d }, { d: (d) => d.d });
+		const rays = overlay === PolarOverlay.Centroids ? clusters.flatMap(([group, own]) => {
+			const center = [mean(own, (d) => d.at[0]) ?? 0, mean(own, (d) => d.at[1]) ?? 0];
+			return own.map((d, i) => ({
+				key: `${group}/${i}`,
+				group,
+				from: center,
+				to: d.at
+			}));
+		}) : [];
+		const lines = ctx.marks("rays", "line", rays, (d) => d.key).attr("stroke", (d) => ctx.palette.color(d.group)).attr("stroke-opacity", .4);
+		const ends = {
+			x1: (d) => d.from[0],
+			y1: (d) => d.from[1],
+			x2: (d) => d.to[0],
+			y2: (d) => d.to[1]
+		};
+		ctx.set(lines, ends, ends);
+	}
+};
+export { PolarScatter };

package/dist/charts/radial/RadarChart.js

@@ -0,0 +1,145 @@
+import { CurveKind, 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 { RadarGrid, RadarLayout, RadarScaling } from "./radialEnums.js";
+import { areaRadial, lineRadial, max } from "d3";
+// src/charts/radial/RadarChart.ts
+var KINDS = {
+	[RadarScaling.Linear]: ScaleKind.Linear,
+	[RadarScaling.Sqrt]: ScaleKind.Sqrt,
+	[RadarScaling.Log]: ScaleKind.Log,
+	[RadarScaling.PerAxis]: ScaleKind.Linear
+};
+/** Compare several entities across the same set of measures: profiles, skills, product attributes. */
+var RadarChart = class extends PolarBase {
+	static meta = {
+		...polarMeta,
+		id: "radar",
+		name: "Radar chart",
+		shape: DataShape.Table,
+		description: "Plots several measures on spokes from one centre, to compare the profile of each entity.",
+		tags: [
+			"spider",
+			"web",
+			"star"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 3),
+		variants: {
+			grid: [RadarGrid.Polygon, RadarGrid.Circle],
+			curve: [CurveKind.Linear, CurveKind.CatmullRom],
+			filled: [true, false],
+			markers: [true, false],
+			scaling: [
+				RadarScaling.Linear,
+				RadarScaling.Sqrt,
+				RadarScaling.Log,
+				RadarScaling.PerAxis
+			],
+			layout: [RadarLayout.Overlay, RadarLayout.Facets]
+		}
+	};
+	defaults() {
+		return {
+			category: "category",
+			series: "series",
+			value: "value",
+			grid: RadarGrid.Polygon,
+			curve: CurveKind.Linear,
+			filled: true,
+			markers: true,
+			scaling: RadarScaling.Linear,
+			layout: RadarLayout.Overlay
+		};
+	}
+	drawRadial(ctx, frame) {
+		const { category, series, value, layout } = this.options;
+		const pivot = Polar.pivot(this.data, category, series, value);
+		const faceted = layout === RadarLayout.Facets;
+		this.facets(ctx, frame, faceted ? pivot.series.length : 1, (disc, i) => {
+			this.web(disc, pivot, faceted ? pivot.series.slice(i, i + 1) : pivot.series);
+			if (faceted && pivot.series[i]) this.facetTitle(disc, pivot.series[i]);
+		}, faceted);
+	}
+	web(disc, pivot, names) {
+		const { ctx, radius } = disc;
+		const { grid, curve, filled, markers, scaling } = this.options;
+		const spokes = pivot.categories.map((_, i) => i / Math.max(1, pivot.categories.length) * TAU);
+		const perAxis = scaling === RadarScaling.PerAxis;
+		const scale = Polar.scale(KINDS[scaling], pivot.values, [0, radius]);
+		const place = (category, v) => {
+			if (v === null) return 0;
+			if (!perAxis) return scale(v);
+			const top = max(pivot.series, (s) => pivot.at(category, s) ?? 0) || 1;
+			return Math.max(0, v / top * radius);
+		};
+		const ticks = perAxis ? [
+			.25,
+			.5,
+			.75,
+			1
+		].map((t) => ({
+			r: t * radius,
+			text: `${t * 100}%`
+		})) : Polar.ticks(scale).filter((tick) => scale(tick) > 0).map((tick) => ({
+			r: scale(tick),
+			text: Polar.label(tick)
+		}));
+		this.rings(disc, ticks, grid === RadarGrid.Polygon && spokes.length > 2 ? { polygon: spokes } : {});
+		this.spokes(disc, spokes, 0, radius);
+		const shapes = names.map((name) => ({
+			name,
+			color: ctx.palette.color(name),
+			vertices: pivot.categories.map((category, i) => {
+				const v = pivot.at(category, name);
+				return {
+					series: name,
+					category,
+					angle: spokes[i],
+					r: place(category, v),
+					value: v
+				};
+			})
+		}));
+		const factory = Polar.curve(curve, true);
+		const outline = lineRadial().angle((d) => d.angle).radius((d) => d.r).curve(factory);
+		const flat = lineRadial().angle((d) => d.angle).radius(0).curve(factory);
+		const area = areaRadial().angle((d) => d.angle).innerRadius(0).outerRadius((d) => d.r).curve(factory);
+		const areaFlat = areaRadial().angle((d) => d.angle).innerRadius(0).outerRadius(0).curve(factory);
+		const fills = ctx.marks("areas", "path", filled ? shapes : [], (d) => d.name).attr("fill", (d) => d.color).attr("fill-opacity", .16);
+		ctx.set(fills, { d: (d) => area(d.vertices) }, { d: (d) => areaFlat(d.vertices) });
+		const lines = ctx.marks("lines", "path", shapes, (d) => d.name).attr("fill", "none").attr("stroke", (d) => d.color).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(lines, { d: (d) => outline(d.vertices) }, { d: (d) => flat(d.vertices) });
+		const dots = ctx.marks("dots", "circle", markers ? shapes.flatMap((shape) => shape.vertices) : [], (d) => `${d.series}/${d.category}`).attr("fill", (d) => ctx.palette.color(d.series));
+		this.ringed(ctx, dots);
+		ctx.set(dots, {
+			cx: (d) => Polar.point(d.angle, d.r)[0],
+			cy: (d) => Polar.point(d.angle, d.r)[1],
+			r: 5
+		}, {
+			cx: 0,
+			cy: 0,
+			r: 0
+		});
+		this.rimLabels(disc, pivot.categories.map((category, i) => ({
+			angle: spokes[i],
+			text: category
+		})));
+		const half = Math.PI / Math.max(1, spokes.length);
+		this.hits(disc, pivot.categories.map((category, i) => ({
+			key: category,
+			a0: spokes[i] - half,
+			a1: spokes[i] + half,
+			r0: 0,
+			r1: radius,
+			tip: {
+				title: category,
+				rows: names.flatMap((name) => {
+					const v = pivot.at(category, name);
+					return v === null ? [] : [[name, v]];
+				})
+			}
+		})));
+	}
+};
+export { RadarChart };

package/dist/charts/radial/RadialAreaChart.js

@@ -0,0 +1,103 @@
+import { CurveKind, DataShape } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Polar } from "./Polar.js";
+import { polarMeta } from "./PolarBase.js";
+import { PolarLayout, RadialBaseline } from "./radialEnums.js";
+import { TemporalPolar } from "./TemporalPolar.js";
+import { areaRadial, lineRadial, max, mean, min } from "d3";
+// src/charts/radial/RadialAreaChart.ts
+/** A filled periodic series: emphasise volume, departure from the mean, or the envelope of several series. */
+var RadialAreaChart = class extends TemporalPolar {
+	static meta = {
+		...polarMeta,
+		id: "radial-area",
+		name: "Radial area chart",
+		shape: DataShape.Table,
+		description: "Fills between a periodic series and a hole, mean ring or second series to stress volume or departure.",
+		tags: ["polar area", "range band"],
+		sample: (seed) => SampleData.timeSeries(seed, 90, 3),
+		variants: {
+			baseline: [
+				RadialBaseline.Hole,
+				RadialBaseline.Mean,
+				RadialBaseline.Range
+			],
+			curve: [
+				CurveKind.CatmullRom,
+				CurveKind.Linear,
+				CurveKind.Cardinal,
+				CurveKind.Basis
+			],
+			hole: [.2, .4],
+			layout: [PolarLayout.Overlay, PolarLayout.Concentric]
+		},
+		valid: (values) => !(values.baseline === RadialBaseline.Range && values.layout === PolarLayout.Concentric)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			baseline: RadialBaseline.Hole,
+			curve: CurveKind.CatmullRom,
+			hole: .2,
+			layout: PolarLayout.Overlay
+		};
+	}
+	drawRadial(ctx, frame) {
+		const disc = this.disc(ctx, frame);
+		const { baseline, curve, hole, layout } = this.options;
+		const line = this.timeline();
+		const inner = disc.radius * hole, factory = Polar.curve(curve);
+		const lanes = this.lanes(line.tracks, inner, disc.radius, layout, baseline === RadialBaseline.Hole);
+		if (layout === PolarLayout.Overlay && lanes[0]) {
+			const { radius } = lanes[0];
+			this.rings(disc, Polar.ticks(radius).map((tick) => ({
+				r: radius(tick),
+				text: Polar.label(tick)
+			})));
+		} else this.rings(disc, lanes.map((lane) => ({
+			r: lane.inner,
+			text: lane.track.name
+		})), { labels: false });
+		this.timeAxis(disc, line, inner, disc.radius);
+		if (baseline === RadialBaseline.Range) this.envelope(ctx, lanes, line.times, line.angle);
+		else {
+			const floor = (lane) => baseline === RadialBaseline.Hole ? lane.inner : lane.radius(mean(lane.track.points, (d) => d.value) ?? 0);
+			const shape = (lane, flat) => areaRadial().defined((d) => d.value !== null).angle((d) => line.angle(d.t)).innerRadius(floor(lane)).outerRadius((d) => flat ? floor(lane) : lane.radius(d.value)).curve(factory)(lane.track.points);
+			const areas = ctx.marks("areas", "path", lanes, (d) => d.track.name).attr("fill", (d) => ctx.palette.color(d.track.name)).attr("fill-opacity", layout === PolarLayout.Overlay ? .3 : .75);
+			ctx.set(areas, { d: (d) => shape(d, false) }, { d: (d) => shape(d, true) });
+			const crest = (lane) => lineRadial().defined((d) => d.value !== null).angle((d) => line.angle(d.t)).radius((d) => lane.radius(d.value)).curve(factory)(lane.track.points);
+			const lines = ctx.marks("crests", "path", lanes, (d) => d.track.name).attr("fill", "none").attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke", (d) => ctx.palette.color(d.track.name));
+			ctx.set(lines, { d: crest }, { d: crest });
+			ctx.drawOn(lines);
+		}
+		this.laneLabels(disc, lanes);
+		this.timeHits(disc, line, inner, disc.radius);
+	}
+	/** The band between the lowest and highest series at each date. */
+	envelope(ctx, lanes, times, angle) {
+		const { curve } = this.options;
+		const radius = lanes[0]?.radius;
+		if (!radius) return;
+		const bands = times.flatMap((t) => {
+			const values = lanes.flatMap((lane) => {
+				const v = lane.track.points.find((point) => point.t === t)?.value;
+				return v === null || v === void 0 ? [] : [v];
+			});
+			return values.length ? [{
+				t,
+				low: min(values),
+				high: max(values)
+			}] : [];
+		});
+		const factory = Polar.curve(curve);
+		const shape = areaRadial().angle((d) => angle(d.t)).innerRadius((d) => radius(d.low)).outerRadius((d) => radius(d.high)).curve(factory);
+		const flat = areaRadial().angle((d) => angle(d.t)).innerRadius((d) => radius(d.low)).outerRadius((d) => radius(d.low)).curve(factory);
+		const color = ctx.palette.color("Range");
+		const band = ctx.marks("band", "path", [bands], () => "band").attr("fill", color).attr("fill-opacity", .32);
+		ctx.set(band, { d: (d) => shape(d) }, { d: (d) => flat(d) });
+		const edge = (side) => lineRadial().angle((d) => angle(d.t)).radius((d) => radius(d[side])).curve(factory)(bands);
+		const edges = ctx.marks("edges", "path", ["low", "high"], (d) => d).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2);
+		ctx.set(edges, { d: edge }, { d: edge });
+	}
+};
+export { RadialAreaChart };