@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/geoflows/StormTrackMap.js

@@ -0,0 +1,223 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlowGeometry } from "./FlowGeometry.js";
+import { GeoFlowProjection } from "./GeoFlowFrame.js";
+import { GeoFlowSample } from "./GeoFlowSample.js";
+import { GeoTrackChart } from "./GeoTrackChart.js";
+import { bisectRight, geoContains, scaleLinear, scaleSqrt, symbol, symbolDiamond } from "d3";
+// src/charts/geoflows/StormTrackMap.ts
+/** How a storm's path is drawn. */
+var StormTrackMark = /* @__PURE__ */ function(StormTrackMark) {
+	StormTrackMark["Line"] = "line";
+	StormTrackMark["Dots"] = "dots";
+	StormTrackMark["Swath"] = "wind-swath";
+	StormTrackMark["Cone"] = "uncertainty-cone";
+	return StormTrackMark;
+}({});
+/** How wind speed is read. */
+var StormTrackScale = /* @__PURE__ */ function(StormTrackScale) {
+	StormTrackScale["SaffirSimpson"] = "saffir-simpson";
+	StormTrackScale["Continuous"] = "continuous";
+	return StormTrackScale;
+}({});
+var THRESHOLDS = [
+	34,
+	64,
+	83,
+	96,
+	113,
+	137
+];
+var CLASSES = [
+	"Depression",
+	"Tropical storm",
+	"Category 1",
+	"Category 2",
+	"Category 3",
+	"Category 4",
+	"Category 5"
+];
+var classOf = (knots) => bisectRight(THRESHOLDS, knots);
+var CONE_DEGREES = 6;
+/** Show where tropical cyclones went and how strong they were, with wind binned on the Saffir-Simpson scale. */
+var StormTrackMap = class extends GeoTrackChart {
+	static meta = {
+		id: "storm-track-map",
+		name: "Storm track map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Follows cyclones along their tracks, with intensity by wind speed, wind swaths, forecast cones and landfalls.",
+		tags: [
+			"hurricane",
+			"cyclone",
+			"saffir-simpson"
+		],
+		sample: (seed) => GeoFlowSample.storms(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.ConicEqualArea,
+				GeoFlowProjection.Mercator,
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.Orthographic
+			],
+			mark: [
+				"line",
+				"dots",
+				"wind-swath",
+				"uncertainty-cone"
+			],
+			scale: ["saffir-simpson", "continuous"],
+			landfall: [true, false]
+		}
+	};
+	found = null;
+	defaults() {
+		return {
+			...super.defaults(),
+			projection: GeoFlowProjection.ConicEqualArea,
+			mark: "line",
+			scale: "saffir-simpson",
+			landfall: true
+		};
+	}
+	categorical() {
+		return false;
+	}
+	get binned() {
+		return this.options.scale === "saffir-simpson";
+	}
+	shade(knots) {
+		return this.binned ? .14 + classOf(knots) / 6 * .86 : .14 + Math.min(knots, 165) / 165 * .86;
+	}
+	level(knots) {
+		return this.binned ? (classOf(knots) + 1) / 7 : Math.min(knots, 165) / 165;
+	}
+	landfalls() {
+		const tracks = this.tracks;
+		if (this.found?.tracks === tracks) return this.found.hits;
+		const land = this.land;
+		const hits = tracks.flatMap((track) => {
+			let sea = false;
+			return track.fixes.flatMap((fix) => {
+				const ashore = geoContains(land, fix.place);
+				const hit = ashore && sea;
+				sea = !ashore;
+				return hit ? [{
+					track,
+					fix
+				}] : [];
+			});
+		});
+		this.found = {
+			tracks,
+			hits
+		};
+		return hits;
+	}
+	/** Splits a track where its class changes, or per leg when wind is continuous. */
+	stretches(track) {
+		const fixes = track.fixes;
+		const parts = [];
+		fixes.slice(1).forEach((fix, i) => {
+			const from = fixes[i], last = parts.at(-1);
+			if (this.binned && last && classOf(last.wind) === classOf(from.value)) last.fixes.push(fix);
+			else parts.push({
+				key: `${track.name}/${i}`,
+				track,
+				fixes: [from, fix],
+				wind: from.value
+			});
+		});
+		return parts;
+	}
+	spline(places, frame) {
+		return this.runs(frame, places).map((run) => FlowGeometry.chaikin(run));
+	}
+	plotGeo(ctx, frame) {
+		const { mark, landfall } = this.options;
+		const { palette, theme } = ctx;
+		const parts = this.tracks.flatMap((track) => this.stretches(track));
+		const fill = (wind) => palette.sequential(this.shade(wind));
+		const hover = (d) => ({
+			title: d.track.name,
+			color: fill(d.wind),
+			rows: [["Wind", `${d.wind} kn`], ["Class", CLASSES[classOf(d.wind)]]]
+		});
+		const scaleKm = (place, degrees) => {
+			const a = frame.projection(place), b = frame.projection([place[0], Math.min(89, place[1] + degrees)]);
+			return a && b ? Math.hypot(a[0] - b[0], a[1] - b[1]) : 0;
+		};
+		const cones = mark === "uncertainty-cone" ? this.tracks.flatMap((track) => {
+			return this.spline(track.fixes.map((fix) => fix.place), frame).map((points, i) => ({
+				key: `${track.name}/${i}`,
+				track,
+				d: FlowGeometry.ribbon(points, (t) => 3 + 2 * scaleKm(track.fixes[Math.round(t * (track.fixes.length - 1))].place, CONE_DEGREES * t)),
+				wind: Math.max(...track.fixes.map((fix) => fix.value))
+			}));
+		}) : [];
+		const shapes = ctx.marks("cones", "path", cones, (d) => d.key).attr("fill", theme.inkMuted).attr("fill-opacity", .16).attr("stroke", theme.inkMuted).attr("stroke-opacity", .5).attr("stroke-width", 1);
+		ctx.set(shapes, { d: (d) => d.d }, { d: (d) => d.d });
+		ctx.hover(shapes, hover);
+		const swath = scaleLinear([0, 165], [2, Math.max(8, ctx.plot.height / 12)]);
+		const pieces = mark === "line" || mark === "uncertainty-cone" || mark === "wind-swath" ? parts.flatMap((part) => this.spline(part.fixes.map((fix) => fix.place), frame).map((points, i) => ({
+			...part,
+			key: `${part.key}/${i}`,
+			points
+		}))) : [];
+		const swathed = mark === "wind-swath";
+		const lines = ctx.marks("legs", "path", pieces, (d) => d.key).attr("fill", (d) => swathed ? fill(d.wind) : "none").attr("stroke", (d) => swathed ? "none" : fill(d.wind)).attr("stroke-width", 2.5).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		const shape = (d) => {
+			if (!swathed) return FlowGeometry.polyline(d.points);
+			const a = d.fixes[0].value, b = d.fixes.at(-1).value;
+			return FlowGeometry.ribbon(d.points, (t) => swath(a + (b - a) * t));
+		};
+		ctx.set(lines, { d: shape }, { d: shape });
+		if (!swathed) ctx.drawOn(lines);
+		ctx.hover(lines, hover);
+		const area = scaleSqrt([0, 1], [0, Math.max(7, ctx.plot.height / 30)]);
+		const fixes = mark === "dots" ? this.tracks.flatMap((track) => track.fixes.flatMap((fix, i) => {
+			const at = frame.at(fix.place);
+			return at ? [{
+				key: `${track.name}/${i}`,
+				track,
+				wind: fix.value,
+				at
+			}] : [];
+		})) : [];
+		const dots = ctx.marks("fixes", "circle", fixes, (d) => d.key).attr("fill", (d) => fill(d.wind)).attr("stroke", theme.surface).attr("stroke-width", 1);
+		ctx.set(dots, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: (d) => Math.max(3, area(this.level(d.wind)))
+		}, { r: 0 }, 2);
+		ctx.hover(dots, hover);
+		const hits = (landfall ? this.landfalls() : []).flatMap((hit, i) => {
+			const at = frame.at(hit.fix.place);
+			return at ? [{
+				key: `${hit.track.name}/${i}`,
+				hit,
+				at
+			}] : [];
+		});
+		const diamond = symbol(symbolDiamond, 90)();
+		const marks = ctx.marks("landfalls", "path", hits, (d) => d.key).attr("d", diamond).attr("fill", theme.ink).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(marks, { transform: (d) => `translate(${d.at[0].toFixed(1)},${d.at[1].toFixed(1)})` });
+		ctx.hover(marks, (d) => ({
+			title: `${d.hit.track.name} landfall`,
+			rows: [["Wind", `${d.hit.fix.value} kn`]]
+		}));
+		this.labels(ctx, this.tracks.flatMap((track) => {
+			const peak = track.fixes.reduce((a, b) => b.value > a.value ? b : a, track.fixes[0]);
+			const at = peak && frame.at(peak.place);
+			return at ? [{
+				text: track.name,
+				x: at[0],
+				y: at[1],
+				gap: 5
+			}] : [];
+		}), "labels", 6);
+		if (this.binned) this.keyRamp(ctx, "Wind class", "TD", "Cat 5", (t) => palette.sequential(.14 + t * .86));
+		else this.keyRamp(ctx, "Wind, kn", "0", "165", (t) => palette.sequential(.14 + t * .86));
+	}
+};
+export { StormTrackMap, StormTrackMark, StormTrackScale };

package/dist/charts/geoflows/TrajectoryMap.js

@@ -0,0 +1,202 @@
+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 { GeoTrackChart } from "./GeoTrackChart.js";
+import { scaleLinear } from "d3";
+// src/charts/geoflows/TrajectoryMap.ts
+/** What the shape of a track encodes beyond position. */
+var TrajectoryEncoding = /* @__PURE__ */ function(TrajectoryEncoding) {
+	TrajectoryEncoding["Line"] = "line";
+	TrajectoryEncoding["Speed"] = "speed-width";
+	TrajectoryEncoding["Pace"] = "pace-dots";
+	TrajectoryEncoding["Value"] = "value-colour";
+	return TrajectoryEncoding;
+}({});
+/** Point marks along the track. */
+var TrajectoryMarker = /* @__PURE__ */ function(TrajectoryMarker) {
+	TrajectoryMarker["Head"] = "head";
+	TrajectoryMarker["Ticks"] = "time-ticks";
+	TrajectoryMarker["None"] = "none";
+	return TrajectoryMarker;
+}({});
+/** Show how tracked objects moved through space and time: animals, vehicles, drifters, with speed or a measured value along the way. */
+var TrajectoryMap = class extends GeoTrackChart {
+	static meta = {
+		id: "trajectory-map",
+		name: "Trajectory map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Traces timestamped positions of moving objects, encoding speed or a measured value along each path.",
+		tags: [
+			"gps",
+			"tracking",
+			"movement"
+		],
+		sample: (seed) => GeoFlowSample.tracks(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.ConicEqualArea,
+				GeoFlowProjection.Mercator,
+				GeoFlowProjection.Orthographic
+			],
+			encoding: [
+				"line",
+				"speed-width",
+				"pace-dots",
+				"value-colour"
+			],
+			smooth: [true, false],
+			marker: [
+				"head",
+				"time-ticks",
+				"none"
+			]
+		},
+		valid: (v) => !(v.encoding === "pace-dots" && v.marker === "time-ticks")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			projection: GeoFlowProjection.ConicEqualArea,
+			encoding: "line",
+			smooth: true,
+			marker: "head"
+		};
+	}
+	/** Speed in km/h for dated tracks, otherwise km per unit of the time column. */
+	run(frame, track, color) {
+		const speed = (fixes, i) => {
+			const a = fixes[Math.max(0, i - 1)], b = fixes[Math.min(fixes.length - 1, i + 1)];
+			return FlowGeometry.km(a.place, b.place) / ((b.time - a.time) / (this.dated ? 36e5 : 1) || 1);
+		};
+		const speeds = track.fixes.map((_, i) => speed(track.fixes, i));
+		return this.runs(frame, track.fixes.map((fix) => fix.place)).map((points, i) => {
+			const shaped = this.options.smooth ? FlowGeometry.chaikin(points) : points;
+			const stretch = (list) => shaped.map((_, k) => list[Math.round(k / Math.max(1, shaped.length - 1) * (list.length - 1))] ?? 0);
+			return {
+				track,
+				points: shaped,
+				speeds: stretch(speeds),
+				values: stretch(track.fixes.map((fix) => fix.value)),
+				color,
+				key: `${track.name}/${i}`
+			};
+		});
+	}
+	withBounds(values) {
+		const clean = values.filter(Number.isFinite);
+		return {
+			low: clean.length ? Math.min(...clean) : 0,
+			high: clean.length ? Math.max(...clean) : 1
+		};
+	}
+	plotGeo(ctx, frame) {
+		const { encoding, marker } = this.options;
+		const runs = this.tracks.flatMap((track) => this.run(frame, track, ctx.palette.color(track.name || "Track")));
+		if (encoding === "line") this.lines(ctx, runs);
+		if (encoding === "speed-width") this.bands(ctx, runs);
+		if (encoding === "pace-dots") this.pace(ctx, runs);
+		if (encoding === "value-colour") this.values(ctx, runs);
+		const heads = marker === "head" ? runs : [];
+		const ends = ctx.marks("heads", "circle", heads, (d) => d.key).attr("fill", (d) => d.color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(ends, {
+			cx: (d) => d.points.at(-1)[0],
+			cy: (d) => d.points.at(-1)[1],
+			r: 5
+		}, { r: 0 });
+		ctx.hover(ends, (d) => ({
+			title: d.track.name,
+			color: d.color,
+			rows: [["Fixes", d.track.fixes.length]]
+		}));
+		const ticks = marker === "time-ticks" ? runs.flatMap((run) => this.ticks(run)) : [];
+		ctx.set(ctx.marks("ticks", "path", ticks, (d) => d.key).attr("fill", "none").attr("stroke", (d) => d.color).attr("stroke-width", 2).attr("stroke-linecap", "round"), { d: (d) => d.d });
+	}
+	/** Short bars across the track at equal time steps: close bars mean slow going. */
+	ticks(run) {
+		const every = Math.max(4, Math.round(run.points.length / 9));
+		return run.points.flatMap((point, i) => {
+			if (i % every || i === 0 || i === run.points.length - 1) return [];
+			const a = run.points[i - 1], b = run.points[i + 1], length = Math.hypot(b[0] - a[0], b[1] - a[1]) || 1;
+			const nx = -(b[1] - a[1]) / length * 4, ny = (b[0] - a[0]) / length * 4;
+			return [{
+				key: `${run.key}/${i}`,
+				color: run.color,
+				d: FlowGeometry.polyline([[point[0] - nx, point[1] - ny], [point[0] + nx, point[1] + ny]])
+			}];
+		});
+	}
+	lines(ctx, runs) {
+		const paths = ctx.marks("tracks", "path", runs, (d) => d.key).attr("fill", "none").attr("stroke", (d) => d.color).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+		ctx.set(paths, { d: (d) => FlowGeometry.polyline(d.points) }, { d: (d) => FlowGeometry.polyline(d.points) });
+		ctx.drawOn(paths);
+		ctx.hover(paths, (d) => ({
+			title: d.track.name,
+			color: d.color,
+			rows: [["Fixes", d.track.fixes.length]]
+		}));
+	}
+	bands(ctx, runs) {
+		const top = GeoFlowChart.peakOf(runs.flatMap((run) => run.speeds), (speed) => speed);
+		const width = scaleLinear([0, top], [1.5, Math.max(5, ctx.plot.height / 28)]);
+		const paths = ctx.marks("tracks", "path", runs, (d) => d.key).attr("fill", (d) => d.color).attr("fill-opacity", .9);
+		const shape = (d) => FlowGeometry.ribbon(d.points, (t) => width(d.speeds[Math.round(t * (d.speeds.length - 1))] ?? 0));
+		ctx.set(paths, { d: shape }, { d: shape });
+		ctx.hover(paths, (d) => ({
+			title: d.track.name,
+			color: d.color,
+			rows: [["Peak speed", Math.round(Math.max(...d.speeds) * 10) / 10]]
+		}));
+		this.keyWidths(ctx, this.dated ? "Speed, km/h" : "Speed", width, top);
+	}
+	pace(ctx, runs) {
+		const dots = runs.flatMap((run) => {
+			const every = Math.max(1, Math.round(run.points.length / run.track.fixes.length) * 2);
+			return run.points.filter((_, i) => i % every === 0).map((point, i, kept) => ({
+				key: `${run.key}/${i}`,
+				point,
+				run,
+				t: i / Math.max(1, kept.length - 1)
+			}));
+		});
+		const marks = ctx.marks("pace", "circle", dots, (d) => d.key).attr("fill", (d) => d.run.color).attr("fill-opacity", (d) => .35 + d.t * .65).attr("stroke", ctx.theme.surface).attr("stroke-width", 1);
+		ctx.set(marks, {
+			cx: (d) => d.point[0],
+			cy: (d) => d.point[1],
+			r: 4
+		}, { r: 0 }, 2);
+		ctx.hover(marks, (d) => ({
+			title: d.run.track.name,
+			color: d.run.color,
+			rows: [["Progress", `${Math.round(d.t * 100)}%`]]
+		}));
+	}
+	values(ctx, runs) {
+		const { low, high } = this.withBounds(runs.flatMap((run) => run.values));
+		const shade = scaleLinear([low, high || 1], [.25, 1]);
+		const pieces = runs.flatMap((run) => {
+			const step = Math.max(1, Math.round(run.points.length / 40));
+			return Array.from({ length: Math.ceil((run.points.length - 1) / step) }, (_, i) => ({
+				key: `${run.key}/${i}`,
+				run,
+				d: FlowGeometry.polyline(run.points.slice(i * step, (i + 1) * step + 1)),
+				value: run.values[i * step] ?? low
+			}));
+		});
+		const paths = ctx.marks("tracks", "path", pieces, (d) => d.key).attr("fill", "none").attr("stroke", (d) => ctx.palette.sequential(shade(d.value))).attr("stroke-width", 3).attr("stroke-linecap", "round");
+		ctx.set(paths, { d: (d) => d.d }, { d: (d) => d.d });
+		ctx.hover(paths, (d) => ({
+			title: d.run.track.name,
+			rows: [["Value", d.value]]
+		}));
+		this.keyRamp(ctx, "Value", low.toFixed(0), high.toFixed(0), (t) => ctx.palette.sequential(.25 + t * .75));
+	}
+	legendItems() {
+		return this.options.encoding === "value-colour" ? [] : super.legendItems();
+	}
+};
+export { TrajectoryEncoding, TrajectoryMap, TrajectoryMarker };

package/dist/charts/geoflows/VoronoiMap.js

@@ -0,0 +1,123 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlowGeometry } from "./FlowGeometry.js";
+import { GeoFlowFit } from "./GeoFlowChart.js";
+import { GeoFlowProjection } from "./GeoFlowFrame.js";
+import { GeoFlowSample } from "./GeoFlowSample.js";
+import { GeoPointChart } from "./GeoPointChart.js";
+import { SphericalVoronoi } from "./SphericalVoronoi.js";
+import { extent, scaleLinear, scaleSqrt } from "d3";
+// src/charts/geoflows/VoronoiMap.ts
+/** How catchment cells are drawn. */
+var VoronoiCellStyle = /* @__PURE__ */ function(VoronoiCellStyle) {
+	VoronoiCellStyle["Filled"] = "filled";
+	VoronoiCellStyle["Inset"] = "inset";
+	VoronoiCellStyle["Mesh"] = "mesh";
+	return VoronoiCellStyle;
+}({});
+/** How the sites are marked. */
+var VoronoiSiteMark = /* @__PURE__ */ function(VoronoiSiteMark) {
+	VoronoiSiteMark["Dots"] = "dots";
+	VoronoiSiteMark["Bubbles"] = "bubbles";
+	return VoronoiSiteMark;
+}({});
+/** Show which site is nearest to every point on Earth: service areas, catchments, nearest-airport regions. */
+var VoronoiMap = class extends GeoPointChart {
+	static meta = {
+		id: "voronoi-map",
+		name: "Voronoi map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Divides the sphere into nearest-site cells, computed on the globe, to show catchment areas.",
+		tags: [
+			"thiessen",
+			"catchment",
+			"nearest"
+		],
+		sample: (seed) => GeoFlowSample.metrics(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.Orthographic,
+				GeoFlowProjection.EqualEarth,
+				GeoFlowProjection.Mercator,
+				GeoFlowProjection.AzimuthalEqualArea
+			],
+			cell: [
+				"filled",
+				"inset",
+				"mesh"
+			],
+			site: ["dots", "bubbles"],
+			landOnly: [false, true],
+			delaunay: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			fit: GeoFlowFit.World,
+			cell: "filled",
+			site: "dots",
+			landOnly: false,
+			delaunay: false
+		};
+	}
+	plotGeo(ctx, frame) {
+		const { cell, site, landOnly, delaunay } = this.options;
+		const places = this.places, { theme, palette } = ctx;
+		const { cells, edges } = SphericalVoronoi.mesh(places.map((place) => place.place));
+		const [low = 0, high = 1] = extent(places, (place) => place.value);
+		const shade = scaleLinear([low, high === low ? low + 1 : high], [.12, .85]);
+		const layer = this.clipped(ctx, "cells", landOnly ? frame.path(this.land) ?? "" : null);
+		const mesh = cell === "mesh";
+		const shapes = cells.map(({ index, ring }) => {
+			const owner = places[index];
+			const coordinates = cell === "inset" ? SphericalVoronoi.inset(ring, owner.place, .9) : ring;
+			return {
+				owner,
+				d: frame.path({
+					type: "Polygon",
+					coordinates: [coordinates]
+				}) ?? ""
+			};
+		}).filter((shape) => shape.d);
+		const fills = ctx.marks("fills", "path", shapes, (d) => d.owner.id, layer).attr("fill", (d) => mesh ? "transparent" : palette.sequential(shade(d.owner.value))).attr("stroke", mesh ? theme.inkMuted : theme.surface).attr("stroke-width", mesh ? 1 : cell === "inset" ? 0 : 1.25).attr("fill-opacity", .9);
+		ctx.set(fills, { d: (d) => d.d }, { d: (d) => d.d });
+		ctx.hover(fills, (d) => ({
+			title: d.owner.name,
+			color: palette.sequential(shade(d.owner.value)),
+			rows: [["Value", d.owner.value]]
+		}));
+		this.drawCoast(ctx, frame, mesh);
+		const links = delaunay ? edges : [];
+		ctx.marks("delaunay", "path", links.map(([a, b]) => frame.line(FlowGeometry.geodesic(places[a].place, places[b].place, 12)))).attr("d", (d) => d).attr("fill", "none").attr("stroke", theme.ink).attr("stroke-width", .75).attr("stroke-opacity", .45).attr("pointer-events", "none").lower();
+		const area = scaleSqrt([0, Math.max(1, high)], [0, Math.min(ctx.plot.width, ctx.plot.height) / 26]);
+		const radius = (value) => site === "bubbles" ? Math.max(4, area(Math.max(0, value))) : 4;
+		const shown = places.flatMap((place) => {
+			const at = frame.at(place.place);
+			return at ? [{
+				place,
+				at
+			}] : [];
+		});
+		const dots = ctx.marks("sites", "circle", shown, (d) => d.place.id).attr("fill", theme.ink).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: (d) => radius(d.place.value)
+		}, { r: 0 }, 6);
+		ctx.hover(dots, (d) => ({
+			title: d.place.name,
+			rows: [["Value", d.place.value]]
+		}));
+		this.labels(ctx, [...shown].sort((a, b) => b.place.value - a.place.value).map((d) => ({
+			text: d.place.name,
+			x: d.at[0],
+			y: d.at[1],
+			gap: radius(d.place.value)
+		})), "labels", 5);
+		this.keyRamp(ctx, "Value", String(low), String(high), (t) => palette.sequential(.12 + t * .73));
+	}
+};
+export { VoronoiCellStyle, VoronoiMap, VoronoiSiteMark };