@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/geoflows/MigrationMap.js

@@ -0,0 +1,228 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlowGeometry } from "./FlowGeometry.js";
+import { GeoFlowChart } from "./GeoFlowChart.js";
+import { GeoFlowProjection } from "./GeoFlowFrame.js";
+import { GeoFlowSample } from "./GeoFlowSample.js";
+import { GeoLinkChart } from "./GeoLinkChart.js";
+import { scaleLinear, scaleSqrt } from "d3";
+// src/charts/geoflows/MigrationMap.ts
+/** Which movements are drawn. */
+var MigrationMode = /* @__PURE__ */ function(MigrationMode) {
+	MigrationMode["Net"] = "net";
+	MigrationMode["Gross"] = "gross";
+	MigrationMode["Inflow"] = "top-inflow";
+	MigrationMode["Outflow"] = "top-outflow";
+	return MigrationMode;
+}({});
+/** How a movement is drawn. */
+var MigrationMark = /* @__PURE__ */ function(MigrationMark) {
+	MigrationMark["Arc"] = "arc";
+	MigrationMark["Ribbon"] = "ribbon";
+	return MigrationMark;
+}({});
+/** How a place shows its balance. */
+var MigrationNode = /* @__PURE__ */ function(MigrationNode) {
+	MigrationNode["Bubble"] = "bubble";
+	MigrationNode["Split"] = "split";
+	MigrationNode["Bar"] = "bar";
+	return MigrationNode;
+}({});
+/** Show who gains and who loses from two-way movement: net flows, or both directions side by side, with each place's balance. */
+var MigrationMap = class extends GeoLinkChart {
+	static meta = {
+		id: "migration-map",
+		name: "Migration map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Compares two-way movement between places, showing net or gross flows and the balance each place ends up with.",
+		tags: [
+			"net flow",
+			"in and out",
+			"balance"
+		],
+		sample: (seed) => GeoFlowSample.flows(seed, 34, GeoFlowSample.spaced),
+		variants: {
+			projection: [
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.EqualEarth,
+				GeoFlowProjection.Orthographic,
+				GeoFlowProjection.AzimuthalEqualArea
+			],
+			mode: [
+				"net",
+				"gross",
+				"top-inflow",
+				"top-outflow"
+			],
+			mark: ["arc", "ribbon"],
+			node: [
+				"bubble",
+				"split",
+				"bar"
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			mode: "net",
+			mark: "arc",
+			node: "bubble"
+		};
+	}
+	balance(stop) {
+		return stop.inflow - stop.outflow;
+	}
+	moves(frame) {
+		const { mode } = this.options;
+		const stops = [...this.stops].sort((a, b) => this.balance(b) - this.balance(a));
+		const place = (link, flip = false) => {
+			const a = frame.at(flip ? link.to : link.from), b = frame.at(flip ? link.from : link.to);
+			return a && b ? {
+				a,
+				b
+			} : null;
+		};
+		if (mode === "net") {
+			const pairs = /* @__PURE__ */ new Map();
+			for (const link of this.links) {
+				const forward = link.source < link.target, key = forward ? `${link.source}/${link.target}` : `${link.target}/${link.source}`;
+				const pair = pairs.get(key) ?? {
+					link: forward ? link : {
+						...link,
+						source: link.target,
+						target: link.source,
+						from: link.to,
+						to: link.from
+					},
+					net: 0
+				};
+				pair.net += forward ? link.value : -link.value;
+				pairs.set(key, pair);
+			}
+			return [...pairs].flatMap(([key, { link, net }]) => {
+				const ends = place(link, net < 0);
+				return net && ends ? [{
+					key,
+					source: net < 0 ? link.target : link.source,
+					target: net < 0 ? link.source : link.target,
+					...ends,
+					value: Math.abs(net),
+					series: link.series
+				}] : [];
+			});
+		}
+		const gainer = stops[0]?.name, loser = stops.at(-1)?.name;
+		return (mode === "gross" ? this.links : this.links.filter((link) => mode === "top-inflow" ? link.target === gainer : link.source === loser)).flatMap((link) => {
+			const ends = place(link);
+			return ends ? [{
+				key: String(link.id),
+				source: link.source,
+				target: link.target,
+				...ends,
+				value: link.value,
+				series: link.series
+			}] : [];
+		});
+	}
+	plotGeo(ctx, frame) {
+		const { mark } = this.options;
+		const moves = this.moves(frame).sort((a, b) => b.value - a.value);
+		const top = GeoFlowChart.peakOf(moves, (move) => move.value);
+		const most = Math.max(4, Math.min(ctx.plot.width, ctx.plot.height) / (mark === "ribbon" ? 18 : 30));
+		const width = scaleLinear([0, top], [1.5, most]);
+		const color = (d) => ctx.palette.color(d.series || "Flow");
+		const ribbon = mark === "ribbon";
+		const drawn = moves.map((move) => {
+			const w = width(move.value), line = FlowGeometry.trim(FlowGeometry.arc(move.a, move.b, .2), 5, ribbon ? 5 : 9);
+			const end = line.length - 1;
+			return {
+				move,
+				w,
+				d: ribbon ? FlowGeometry.ribbon(line, (t) => w * (1 - t * .85)) : FlowGeometry.polyline(line),
+				head: FlowGeometry.arrow(line[end], line[Math.max(0, end - 2)], w + 6)
+			};
+		});
+		const paths = ctx.marks("moves", "path", drawn, (d) => d.move.key).attr("fill", (d) => ribbon ? color(d.move) : "none").attr("stroke", (d) => ribbon ? ctx.theme.surface : color(d.move)).attr("stroke-width", (d) => ribbon ? .75 : d.w).attr("stroke-linecap", "round").attr("opacity", .82);
+		ctx.set(paths, { d: (d) => d.d }, { d: (d) => d.d });
+		if (!ribbon) ctx.drawOn(paths);
+		ctx.hover(paths, (d) => ({
+			title: `${d.move.source} → ${d.move.target}`,
+			color: color(d.move),
+			rows: [["Moved", d.move.value]]
+		}));
+		ctx.set(ctx.marks("heads", "path", ribbon ? [] : drawn, (d) => d.move.key).attr("fill", (d) => color(d.move)), { d: (d) => d.head });
+		this.drawNodes(ctx, frame);
+	}
+	drawNodes(ctx, frame) {
+		const { node } = this.options;
+		const stops = this.stops.flatMap((stop) => {
+			const at = frame.at(stop.place);
+			return at ? [{
+				stop,
+				at,
+				net: this.balance(stop)
+			}] : [];
+		});
+		const netTop = GeoFlowChart.peakOf(stops, (d) => d.net), grossTop = GeoFlowChart.peakOf(stops, (d) => Math.max(d.stop.inflow, d.stop.outflow));
+		const reach = Math.max(9, Math.min(ctx.plot.width, ctx.plot.height) / 18);
+		const area = scaleSqrt([0, netTop], [0, reach]), gross = scaleSqrt([0, grossTop], [0, reach]);
+		const barTop = Math.max(14, ctx.plot.height / 9);
+		const tint = (net) => ctx.palette.diverging(net / netTop * .95);
+		const circles = ctx.marks("balance", "circle", node === "bubble" ? stops : [], (d) => d.stop.name).attr("fill", (d) => tint(d.net)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(circles, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: (d) => Math.max(4, area(Math.abs(d.net)))
+		}, { r: 0 });
+		ctx.hover(circles, (d) => ({
+			title: d.stop.name,
+			color: tint(d.net),
+			rows: [
+				["In", d.stop.inflow],
+				["Out", d.stop.outflow],
+				["Net", d.net]
+			]
+		}));
+		const half = (r, side, [x, y]) => `M${x},${y - r}A${r},${r} 0 0 ${side > 0 ? 1 : 0} ${x},${y + r}Z`;
+		const halves = node === "split" ? stops.flatMap((d) => [{
+			key: `${d.stop.name}/in`,
+			d,
+			shape: half(Math.max(3, gross(d.stop.inflow)), -1, d.at),
+			net: netTop
+		}, {
+			key: `${d.stop.name}/out`,
+			d,
+			shape: half(Math.max(3, gross(d.stop.outflow)), 1, d.at),
+			net: -netTop
+		}]) : [];
+		const parts = ctx.marks("halves", "path", halves, (d) => d.key).attr("fill", (d) => tint(d.net)).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(parts, { d: (d) => d.shape });
+		ctx.hover(parts, (d) => ({
+			title: d.d.stop.name,
+			rows: [["In", d.d.stop.inflow], ["Out", d.d.stop.outflow]]
+		}));
+		const bars = ctx.marks("bars", "rect", node === "bar" ? stops : [], (d) => d.stop.name).attr("fill", (d) => tint(d.net)).attr("rx", 2).attr("stroke", ctx.theme.surface).attr("stroke-width", 1);
+		const length = (d) => Math.max(2, Math.abs(d.net) / netTop * barTop);
+		ctx.set(bars, {
+			x: (d) => d.at[0] - 4,
+			width: 8,
+			y: (d) => d.net >= 0 ? d.at[1] - length(d) : d.at[1],
+			height: length
+		}, { height: 0 });
+		ctx.hover(bars, (d) => ({
+			title: d.stop.name,
+			color: tint(d.net),
+			rows: [["Net", d.net]]
+		}));
+		this.labels(ctx, [...stops].sort((a, b) => Math.abs(b.net) - Math.abs(a.net)).map((d) => ({
+			text: d.stop.name,
+			x: d.at[0],
+			y: d.at[1],
+			gap: node === "bar" ? 6 : Math.max(4, area(Math.abs(d.net)))
+		})), "labels", 6);
+		this.keyRamp(ctx, "Net balance", `−${Math.round(netTop)}`, `+${Math.round(netTop)}`, (t) => ctx.palette.diverging(t * 2 - 1));
+	}
+};
+export { MigrationMap, MigrationMark, MigrationMode, MigrationNode };

package/dist/charts/geoflows/MinardFlowMap.js

@@ -0,0 +1,158 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlowGeometry } from "./FlowGeometry.js";
+import { GeoFlowChart, reading } from "./GeoFlowChart.js";
+import { GeoFlowProjection } from "./GeoFlowFrame.js";
+import { GeoFlowSample } from "./GeoFlowSample.js";
+import { GeoTrackChart } from "./GeoTrackChart.js";
+import { extent, line, scaleLinear } from "d3";
+// src/charts/geoflows/MinardFlowMap.ts
+/** Where the band sits relative to the route. */
+var MinardAlign = /* @__PURE__ */ function(MinardAlign) {
+	MinardAlign["Side"] = "side-of-route";
+	MinardAlign["Centred"] = "centred";
+	return MinardAlign;
+}({});
+/** How width changes between fixes. */
+var MinardJoin = /* @__PURE__ */ function(MinardJoin) {
+	MinardJoin["Smooth"] = "smooth";
+	MinardJoin["Stepped"] = "stepped";
+	return MinardJoin;
+}({});
+/** Tell one quantity's story along a route, as Minard did for Napoleon's army: width is the size remaining at each point. */
+var MinardFlowMap = class extends GeoTrackChart {
+	static meta = {
+		id: "minard-flow-map",
+		name: "Minard flow map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Follows a quantity along a route with band width showing how much remains, plus a linked strip for a second measure.",
+		tags: [
+			"napoleon",
+			"narrative flow",
+			"attrition"
+		],
+		sample: (seed) => GeoFlowSample.campaign(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.ConicEqualArea,
+				GeoFlowProjection.Mercator,
+				GeoFlowProjection.NaturalEarth
+			],
+			align: ["side-of-route", "centred"],
+			join: ["smooth", "stepped"],
+			panel: [true, false],
+			counts: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			projection: GeoFlowProjection.ConicEqualArea,
+			track: "phase",
+			time: "order",
+			align: "side-of-route",
+			join: "smooth",
+			panel: true,
+			counts: true,
+			companion: "temperature",
+			companionUnit: "°C"
+		};
+	}
+	layoutKey() {
+		return `${super.layoutKey()}|${this.strip}`;
+	}
+	get keyOnTop() {
+		return true;
+	}
+	get strip() {
+		return !!this.options.panel && this.tracks.some((track) => track.fixes.some((fix) => Number.isFinite(reading(fix.row[this.options.companion]))));
+	}
+	frame(width, height) {
+		return super.frame(width, this.strip ? height * .74 : height);
+	}
+	nodes(frame, track) {
+		return track.fixes.flatMap((fix) => {
+			const at = frame.at(fix.place);
+			return at ? [{
+				x: at[0],
+				y: at[1],
+				value: fix.value,
+				temperature: reading(fix.row[this.options.companion])
+			}] : [];
+		});
+	}
+	band(nodes, width) {
+		const { align, join } = this.options;
+		const side = align === "side-of-route";
+		const points = nodes.map((node) => [node.x, node.y]);
+		const shifted = (line, w) => side ? line.map((point, i) => FlowGeometry.offset(line, w(i) / 2 + 1)[i]) : [...line];
+		if (join === "stepped") return nodes.slice(0, -1).map((node, i) => {
+			const w = width(node.value), line = FlowGeometry.straight(points[i], points[i + 1], 2);
+			return FlowGeometry.ribbon(side ? FlowGeometry.offset(line, w / 2 + 1) : line, () => w);
+		});
+		const spots = FlowGeometry.chaikin(points, 3);
+		const at = (t) => {
+			const place = t * (nodes.length - 1), i = Math.min(nodes.length - 2, Math.floor(place));
+			return nodes[i].value + (nodes[i + 1].value - nodes[i].value) * (place - i);
+		};
+		return [FlowGeometry.ribbon(shifted(spots, (i) => width(at(i / (spots.length - 1)))), (t) => width(at(t)))];
+	}
+	plotGeo(ctx, frame) {
+		const { counts } = this.options;
+		const tracks = this.tracks.map((track) => ({
+			track,
+			nodes: this.nodes(frame, track),
+			color: ctx.palette.color(track.name || "Route")
+		})).filter((item) => item.nodes.length > 1);
+		const top = GeoFlowChart.peakOf(tracks.flatMap((item) => item.nodes), (node) => node.value);
+		const width = scaleLinear([0, top], [1.5, Math.max(10, frame.height / 6)]);
+		const parts = tracks.flatMap((item) => this.band(item.nodes, width).map((d, i) => ({
+			...item,
+			d,
+			key: `${item.track.name}/${i}`
+		})));
+		const bands = ctx.marks("bands", "path", parts, (d) => d.key).attr("fill", (d) => d.color).attr("fill-opacity", .9).attr("stroke", ctx.theme.surface).attr("stroke-width", .75);
+		ctx.set(bands, { d: (d) => d.d }, { d: (d) => d.d }, 30);
+		ctx.hover(bands, (d) => ({
+			title: d.track.name,
+			color: d.color,
+			rows: [["Start", d.nodes[0].value], ["End", d.nodes.at(-1).value]]
+		}));
+		this.labels(ctx, !counts ? [] : tracks.flatMap((item) => [item.nodes[0], item.nodes.at(-1)].map((node) => ({
+			text: node.value.toLocaleString("en"),
+			x: node.x,
+			y: node.y,
+			gap: 6
+		}))), "labels", 4);
+		this.keyWidths(ctx, "Size", width, top);
+		if (this.strip && tracks.length) this.drawStrip(ctx, frame, tracks.at(-1).nodes);
+	}
+	/** The companion measure, drawn straight below the map so each value lines up with where it happened. */
+	drawStrip(ctx, frame, nodes) {
+		const { companionUnit } = this.options;
+		const known = nodes.filter((node) => Number.isFinite(node.temperature));
+		const top = frame.height + 14, bottom = ctx.plot.height - 8;
+		const [low = 0, high = 1] = extent(known, (node) => node.temperature);
+		const y = scaleLinear([low, high === low ? low + 1 : high], [bottom, top]);
+		const drops = known.map((node) => FlowGeometry.polyline([[node.x, node.y], [node.x, y(node.temperature)]]));
+		ctx.marks("drops", "path", drops).attr("d", (d) => d).attr("stroke", ctx.theme.axis).attr("stroke-width", 1).attr("fill", "none").attr("stroke-dasharray", "1 3").attr("pointer-events", "none");
+		const trace = line().x((node) => node.x).y((node) => y(node.temperature)).digits(1);
+		const line$1 = ctx.marks("strip", "path", [trace(known) ?? ""]).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(line$1, { d: (d) => d }, { d: (d) => d });
+		ctx.drawOn(line$1);
+		const dots = ctx.marks("strip-dots", "circle", known).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => y(d.temperature),
+			r: 4
+		}, { r: 0 });
+		ctx.hover(dots, (d) => ({
+			title: `${d.temperature}${companionUnit}`,
+			rows: [["Remaining", d.value]]
+		}));
+		const ends = [known[0], known.at(-1)].filter((node) => !!node);
+		ctx.text(ctx.marks("strip-text", "text", ends).attr("x", (d) => d.x).attr("y", (d) => y(d.temperature) - 7).attr("text-anchor", (d, i) => i ? "start" : "end").text((d) => `${d.temperature}${companionUnit}`), 10.5);
+	}
+};
+export { MinardAlign, MinardFlowMap, MinardJoin };

package/dist/charts/geoflows/RingMap.js

@@ -0,0 +1,173 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoFlowFit, reading } from "./GeoFlowChart.js";
+import { GeoFlowFrame, GeoFlowProjection } from "./GeoFlowFrame.js";
+import { GeoFlowSample } from "./GeoFlowSample.js";
+import { GeoPointChart } from "./GeoPointChart.js";
+import { arc, ascending, extent, scaleLinear } from "d3";
+// src/charts/geoflows/RingMap.ts
+/** Order of the places around the rings. */
+var RingMapOrder = /* @__PURE__ */ function(RingMapOrder) {
+	RingMapOrder["Bearing"] = "bearing";
+	RingMapOrder["Value"] = "value";
+	RingMapOrder["Region"] = "region";
+	return RingMapOrder;
+}({});
+/** How a value fills its slot on a ring. */
+var RingMapSector = /* @__PURE__ */ function(RingMapSector) {
+	RingMapSector["Heat"] = "heat";
+	RingMapSector["Bar"] = "radial-bar";
+	return RingMapSector;
+}({});
+var TAU = Math.PI * 2;
+/** Show several measures for each place without covering the map: the data sits in rings around it, joined by leader lines. */
+var RingMap = class extends GeoPointChart {
+	static meta = {
+		id: "ring-map",
+		name: "Ring map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Wraps rings of per-place measures around a circular map, leaving the geography clear in the centre.",
+		tags: [
+			"circular",
+			"multivariate",
+			"small area"
+		],
+		sample: (seed) => GeoFlowSample.metrics(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.AzimuthalEqualArea,
+				GeoFlowProjection.Orthographic,
+				GeoFlowProjection.AzimuthalEquidistant,
+				GeoFlowProjection.Stereographic
+			],
+			rings: [
+				3,
+				2,
+				1
+			],
+			order: [
+				"bearing",
+				"value",
+				"region"
+			],
+			sector: ["heat", "radial-bar"],
+			leaders: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			fit: GeoFlowFit.World,
+			projection: GeoFlowProjection.AzimuthalEqualArea,
+			metrics: [
+				"value",
+				"growth",
+				"density"
+			],
+			rings: 3,
+			order: "bearing",
+			sector: "heat",
+			leaders: true
+		};
+	}
+	slots(frame) {
+		const { order } = this.options;
+		const [cx, cy] = frame.projection.translate();
+		const bearing = (place) => {
+			const at = frame.projection(place.place);
+			return at ? (Math.atan2(at[0] - cx, cy - at[1]) + TAU) % TAU : 0;
+		};
+		const places = [...this.places].sort((a, b) => {
+			if (order === "value") return b.value - a.value;
+			if (order === "region") return ascending(a.series, b.series) || bearing(a) - bearing(b);
+			return bearing(a) - bearing(b);
+		});
+		const width = TAU / (places.length || 1);
+		return places.map((place, i) => ({
+			place,
+			start: i * width,
+			end: (i + 1) * width,
+			mid: (i + .5) * width
+		}));
+	}
+	compose(ctx) {
+		const { width, height } = ctx.plot;
+		const { rings, metrics } = this.options;
+		const count = Math.min(rings, metrics.length);
+		const outer = Math.min(width, height) / 2 - 2;
+		const band = Math.max(9, outer * .13);
+		const disc = Math.max(20, outer - count * (band + 2) - 8);
+		const cx = width / 2, cy = height / 2;
+		const frame = new GeoFlowFrame(this.options.projection, disc * 2, disc * 2, this.focus(), null);
+		const globe = ctx.nest(`translate(${(cx - disc).toFixed(1)},${(cy - disc).toFixed(1)})`, "globe");
+		this.drawBasemap(globe, frame);
+		const slots = this.slots(frame);
+		const inner = disc + 8;
+		const centre = ctx.nest(`translate(${cx.toFixed(1)},${cy.toFixed(1)})`, "rings");
+		metrics.slice(0, count).forEach((metric, ring) => this.drawRing(centre, slots, metric, ring, inner + ring * (band + 2), band));
+		const located = slots.flatMap((slot) => {
+			const at = frame.at(slot.place.place);
+			return at ? [{
+				slot,
+				at: [at[0] - disc, at[1] - disc]
+			}] : [];
+		});
+		const tie = (d) => {
+			const edge = inner - 1;
+			return `M${d.at[0].toFixed(1)},${d.at[1].toFixed(1)}L${(Math.sin(d.slot.mid) * edge).toFixed(1)},${(-Math.cos(d.slot.mid) * edge).toFixed(1)}`;
+		};
+		centre.marks("leaders", "path", this.options.leaders ? located : [], (d) => d.slot.place.id).attr("d", tie).attr("fill", "none").attr("stroke", ctx.theme.inkMuted).attr("stroke-width", .75).attr("pointer-events", "none");
+		const dots = centre.marks("places", "circle", located, (d) => d.slot.place.id).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 1.5);
+		ctx.set(dots, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: 4
+		}, { r: 0 }, 6);
+		ctx.hover(dots, (d) => ({
+			title: d.slot.place.name,
+			rows: this.rowsOf(d.slot.place)
+		}));
+		const caption = width >= 300 ? ["Inner to outer", ...metrics.slice(0, count)] : [];
+		this.names(centre, slots, inner + count * (band + 2) + 3, cx, cy, caption.length * 12 + 2);
+		ctx.text(ctx.marks("caption", "text", caption).attr("x", 0).attr("y", (_, i) => height - 3 - (caption.length - 1 - i) * 12).text((d) => d), 10, "muted");
+	}
+	rowsOf(place) {
+		return this.options.metrics.slice(0, this.options.rings).map((metric) => [metric, reading(place.row[metric]) || 0]);
+	}
+	drawRing(ctx, slots, metric, ring, radius, band) {
+		const value = (slot) => reading(slot.place.row[metric]);
+		const [low = 0, high = 1] = extent(slots, value);
+		const shade = scaleLinear([low, high === low ? low + 1 : high], [.15, 1]);
+		const bars = this.options.sector === "radial-bar";
+		const length = scaleLinear([Math.min(0, low), Math.max(high, 1)], [0, band]).clamp(true);
+		const gap = 1 / radius;
+		const shape = arc().innerRadius(radius).padAngle(0).cornerRadius(bars ? 1 : 0).outerRadius((slot) => radius + (bars ? Math.max(1, length(value(slot) || 0)) : band)).startAngle((slot) => slot.start + gap).endAngle((slot) => slot.end - gap);
+		const sectors = ctx.marks(`ring-${ring}`, "path", slots, (d) => d.place.id).attr("fill", (d) => Number.isFinite(value(d)) ? ctx.palette.sequential(bars ? .7 : shade(value(d))) : ctx.theme.grid);
+		ctx.set(sectors, { d: (d) => shape(d) ?? "" }, { d: (d) => shape(d) ?? "" }, 4);
+		ctx.hover(sectors, (d) => ({
+			title: d.place.name,
+			color: ctx.palette.sequential(shade(value(d) || 0)),
+			rows: this.rowsOf(d.place)
+		}));
+	}
+	/** Horizontal names beside the rings where the plot has room, skipping any that would collide. */
+	names(ctx, slots, radius, cx, cy, captionHeight) {
+		const lastY = {
+			start: -Infinity,
+			end: -Infinity
+		};
+		const candidates = slots.map((slot) => ({
+			slot,
+			x: Math.sin(slot.mid) * radius,
+			y: -Math.cos(slot.mid) * radius + 3.5,
+			anchor: Math.sin(slot.mid) >= 0 ? "start" : "end"
+		})).filter((d) => Math.abs(d.x) + d.slot.place.name.length * 6.2 < cx && Math.abs(d.y) + 8 < cy).filter((d) => !(d.anchor === "end" && d.y > cy - captionHeight - 8 && cx + d.x - d.slot.place.name.length * 6.2 < 90)).sort((a, b) => a.y - b.y).filter((d) => {
+			if (d.y - lastY[d.anchor] < 13) return false;
+			lastY[d.anchor] = d.y;
+			return true;
+		});
+		ctx.text(ctx.marks("names", "text", candidates, (d) => d.slot.place.id).attr("x", (d) => d.x).attr("y", (d) => d.y).attr("text-anchor", (d) => d.anchor).text((d) => d.slot.place.name), 10.5);
+	}
+};
+export { RingMap, RingMapOrder, RingMapSector };