@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/geoflows/RouteMap.js

@@ -0,0 +1,203 @@
+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 { curveCatmullRom, line } from "d3";
+// src/charts/geoflows/RouteMap.ts
+/** How two consecutive stops are joined. */
+var RouteMapPath = /* @__PURE__ */ function(RouteMapPath) {
+	RouteMapPath["Geodesic"] = "geodesic";
+	RouteMapPath["Rhumb"] = "rhumb";
+	RouteMapPath["Straight"] = "straight";
+	RouteMapPath["Smooth"] = "smooth";
+	return RouteMapPath;
+}({});
+/** Which order the stops are visited in. */
+var RouteMapOrder = /* @__PURE__ */ function(RouteMapOrder) {
+	RouteMapOrder["Given"] = "given";
+	RouteMapOrder["Shortest"] = "shortest";
+	RouteMapOrder["Loop"] = "loop";
+	return RouteMapOrder;
+}({});
+/** How stops are marked. */
+var RouteMapStops = /* @__PURE__ */ function(RouteMapStops) {
+	RouteMapStops["Dots"] = "dots";
+	RouteMapStops["Numbered"] = "numbered";
+	RouteMapStops["None"] = "none";
+	return RouteMapStops;
+}({});
+/** Nearest-neighbour tour improved by 2-opt; the first stop stays first. */
+function shortest(fixes) {
+	const rest = [...fixes.slice(1)], tour = fixes.slice(0, 1);
+	while (rest.length) {
+		const here = tour.at(-1);
+		rest.sort((a, b) => FlowGeometry.km(here.place, b.place) - FlowGeometry.km(here.place, a.place));
+		tour.push(rest.pop());
+	}
+	const span = (a, b) => FlowGeometry.km(a.place, b.place);
+	for (let i = 1; i < tour.length - 2; i++) for (let j = i + 1; j < tour.length - 1; j++) if (span(tour[i - 1], tour[j]) + span(tour[i], tour[j + 1]) < span(tour[i - 1], tour[i]) + span(tour[j], tour[j + 1])) tour.splice(i, j - i + 1, ...tour.slice(i, j + 1).reverse());
+	return tour;
+}
+/** Show services that call at stops in sequence, such as shipping lines or itineraries, with direction along each leg. */
+var RouteMap = class extends GeoTrackChart {
+	static meta = {
+		id: "route-map",
+		name: "Route map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Traces multi-stop routes in visiting order, with stops, direction marks and an optional shortest tour.",
+		tags: [
+			"itinerary",
+			"shipping",
+			"tour"
+		],
+		sample: (seed) => GeoFlowSample.routes(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.Mercator,
+				GeoFlowProjection.Orthographic
+			],
+			path: [
+				"geodesic",
+				"rhumb",
+				"straight",
+				"smooth"
+			],
+			order: [
+				"given",
+				"shortest",
+				"loop"
+			],
+			stops: [
+				"dots",
+				"numbered",
+				"none"
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			track: "route",
+			time: "order",
+			stop: "stop",
+			path: "geodesic",
+			order: "given",
+			stops: "dots"
+		};
+	}
+	sequence(track) {
+		const { order } = this.options;
+		if (order === "shortest") return shortest(track.fixes);
+		return order === "loop" && track.fixes.length > 2 ? [...track.fixes, track.fixes[0]] : track.fixes;
+	}
+	legs(frame, track) {
+		const { path } = this.options;
+		const fixes = this.sequence(track);
+		return fixes.slice(1).map((to, i) => {
+			const from = fixes[i];
+			const line = path === "rhumb" ? FlowGeometry.rhumb(from.place, to.place, 24) : FlowGeometry.geodesic(from.place, to.place, 24);
+			const runs = this.runs(frame, line), a = frame.at(from.place), b = frame.at(to.place);
+			const seamless = a && b && runs.length === 1;
+			const points = (path === "straight" || path === "smooth") && seamless ? FlowGeometry.straight(a, b) : runs[0] ?? [];
+			return {
+				key: `${track.name}/${i}`,
+				track,
+				from,
+				to,
+				line,
+				points
+			};
+		});
+	}
+	/** One curve through consecutive joined stops; a break in the chain starts a new curve. */
+	smoothed(legs) {
+		const chains = [];
+		for (const leg of legs) {
+			if (leg.points.length < 2) continue;
+			const chain = chains.at(-1), start = leg.points[0], end = leg.points.at(-1);
+			if (chain && chain.at(-1)[0] === start[0] && chain.at(-1)[1] === start[1]) chain.push(end);
+			else chains.push([start, end]);
+		}
+		const curve = line().curve(curveCatmullRom.alpha(.5)).digits(1);
+		return chains.map((chain) => curve(chain) ?? "");
+	}
+	plotGeo(ctx, frame) {
+		const { path, stops, stop } = this.options;
+		const routes = this.tracks.map((track) => ({
+			track,
+			color: ctx.palette.color(track.name || "Route"),
+			legs: this.legs(frame, track)
+		}));
+		const lines = routes.flatMap(({ track, color, legs }) => path === "smooth" ? this.smoothed(legs).map((d, i) => ({
+			key: `${track.name}/${i}`,
+			track,
+			color,
+			d
+		})) : legs.map((leg) => ({
+			key: leg.key,
+			track,
+			color,
+			d: path === "straight" ? FlowGeometry.polyline(leg.points) : frame.line(leg.line)
+		}))).filter((line) => line.d);
+		const paths = ctx.marks("routes", "path", lines, (d) => d.key).attr("fill", "none").attr("stroke", (d) => d.color).attr("stroke-width", 2.5).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		ctx.set(paths, { d: (d) => d.d }, { d: (d) => d.d });
+		ctx.drawOn(paths);
+		ctx.hover(paths, (d) => ({
+			title: d.track.name,
+			color: d.color,
+			rows: [["Stops", d.track.fixes.length]]
+		}));
+		const chevrons = routes.flatMap(({ color, legs }) => path === "smooth" ? [] : legs.flatMap((leg) => {
+			const mid = Math.floor(leg.points.length / 2);
+			return leg.points.length > 2 && Math.hypot(leg.points[0][0] - leg.points.at(-1)[0], leg.points[0][1] - leg.points.at(-1)[1]) > 30 ? [{
+				key: leg.key,
+				color,
+				d: FlowGeometry.arrow(leg.points[mid], leg.points[mid - 1], 8)
+			}] : [];
+		}));
+		ctx.set(ctx.marks("chevrons", "path", chevrons, (d) => d.key).attr("fill", (d) => d.color), { d: (d) => d.d });
+		const visited = stops === "none" ? [] : routes.flatMap(({ track, color }) => this.sequence(track).slice(0, track.fixes.length).flatMap((fix, i) => {
+			const at = frame.at(fix.place);
+			return at ? [{
+				key: `${track.name}/${i}`,
+				fix,
+				at,
+				i,
+				color,
+				track
+			}] : [];
+		}));
+		const numbered = stops === "numbered";
+		const dots = ctx.marks("stops", "circle", visited, (d) => d.key).attr("fill", (d) => numbered ? d.color : ctx.theme.surface).attr("stroke", (d) => numbered ? ctx.theme.surface : d.color).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: numbered ? 8 : 4
+		}, { r: 0 }, 8);
+		ctx.hover(dots, (d) => ({
+			title: String(d.fix.row[stop] ?? ""),
+			color: d.color,
+			rows: [["Route", d.track.name], ["Stop", d.i + 1]]
+		}));
+		const seats = [];
+		const numbers = (numbered ? visited : []).filter(({ at }) => {
+			if (seats.some(([x, y]) => Math.abs(x - at[0]) < 13 && Math.abs(y - at[1]) < 12)) return false;
+			seats.push([at[0], at[1]]);
+			return true;
+		});
+		ctx.marks("numbers", "text", numbers, (d) => d.key).attr("x", (d) => d.at[0]).attr("y", (d) => d.at[1] + 3.5).attr("text-anchor", "middle").attr("font-size", 9.5).attr("font-weight", 600).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => ctx.palette.inkOn(d.color)).attr("pointer-events", "none").text((d) => d.i + 1);
+		this.labels(ctx, stops !== "none" ? [] : routes.flatMap(({ track, legs }) => {
+			const at = legs[0] && frame.at(legs[0].from.place);
+			return at ? [{
+				text: track.name,
+				x: at[0],
+				y: at[1]
+			}] : [];
+		}));
+	}
+};
+export { RouteMap, RouteMapOrder, RouteMapPath, RouteMapStops };

package/dist/charts/geoflows/SmallMultipleMaps.js

@@ -0,0 +1,143 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoFlowChart } from "./GeoFlowChart.js";
+import { GeoFlowProjection } from "./GeoFlowFrame.js";
+import { GeoFlowSample } from "./GeoFlowSample.js";
+import { GeoPointChart } from "./GeoPointChart.js";
+import { scaleSqrt } from "d3";
+// src/charts/geoflows/SmallMultipleMaps.ts
+/** What stands on each place in a panel. */
+var SmallMultipleMark = /* @__PURE__ */ function(SmallMultipleMark) {
+	SmallMultipleMark["Bubble"] = "bubble";
+	SmallMultipleMark["Spike"] = "spike";
+	SmallMultipleMark["Square"] = "square";
+	return SmallMultipleMark;
+}({});
+/** Whether panels share one size scale. */
+var SmallMultipleScale = /* @__PURE__ */ function(SmallMultipleScale) {
+	SmallMultipleScale["Shared"] = "shared";
+	SmallMultipleScale["Independent"] = "independent";
+	return SmallMultipleScale;
+}({});
+var GAP = 10;
+var CAPTION = 15;
+var ASPECT = 1.9;
+/** Compare one measure across periods or groups, with one small map for each so geography stays in register. */
+var SmallMultipleMaps = class extends GeoPointChart {
+	static meta = {
+		id: "small-multiple-maps",
+		name: "Small multiple maps",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Repeats one map for each period or group, on a shared scale, so change over time reads panel to panel.",
+		tags: [
+			"facets",
+			"trellis",
+			"panels"
+		],
+		sample: (seed) => GeoFlowSample.panels(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.EqualEarth,
+				GeoFlowProjection.Orthographic
+			],
+			mark: [
+				"bubble",
+				"spike",
+				"square"
+			],
+			scale: ["shared", "independent"],
+			columns: [
+				0,
+				2,
+				4
+			],
+			ghost: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			facet: "period",
+			mark: "bubble",
+			scale: "shared",
+			columns: 0,
+			ghost: false
+		};
+	}
+	panels() {
+		const { facet } = this.options;
+		const panels = /* @__PURE__ */ new Map();
+		for (const place of this.places) {
+			const name = String(place.row[facet] ?? "");
+			panels.set(name, [...panels.get(name) ?? [], place]);
+		}
+		return [...panels].map(([name, places]) => ({
+			name,
+			places
+		}));
+	}
+	layout(count, width, height) {
+		const size = (columns) => {
+			const rows = Math.ceil(count / columns);
+			const cellWidth = (width - GAP * (columns - 1)) / columns, cellHeight = (height - 25 * rows) / rows;
+			return {
+				columns,
+				cellWidth,
+				cellHeight,
+				score: Math.min(cellWidth, cellHeight * ASPECT)
+			};
+		};
+		if (this.options.columns) return size(Math.min(this.options.columns, count));
+		return Array.from({ length: count }, (_, i) => size(i + 1)).reduce((best, next) => next.score > best.score ? next : best);
+	}
+	mark(place, at, radius) {
+		const size = Math.max(.5, radius(Math.max(0, place.value))), [x, y] = at;
+		const { mark } = this.options;
+		if (mark === "spike") return `M${(x - 2.5).toFixed(1)},${y.toFixed(1)}L${x.toFixed(1)},${(y - size * 3.2).toFixed(1)}L${(x + 2.5).toFixed(1)},${y.toFixed(1)}Z`;
+		if (mark === "square") return `M${(x - size * .886).toFixed(1)},${(y - size * .886).toFixed(1)}h${(size * 1.772).toFixed(1)}v${(size * 1.772).toFixed(1)}h${(-size * 1.772).toFixed(1)}Z`;
+		return `M${(x - size).toFixed(1)},${y.toFixed(1)}a${size.toFixed(1)},${size.toFixed(1)} 0 1 0 ${(size * 2).toFixed(1)},0a${size.toFixed(1)},${size.toFixed(1)} 0 1 0 ${(-size * 2).toFixed(1)},0Z`;
+	}
+	layoutKey() {
+		return `${super.layoutKey()}|${this.panels().length}`;
+	}
+	compose(ctx) {
+		const panels = this.panels();
+		if (!panels.length) return super.compose(ctx);
+		const { columns, cellWidth, cellHeight } = this.layout(panels.length, ctx.plot.width, ctx.plot.height);
+		const frame = this.frame(cellWidth, cellHeight);
+		const top = GeoFlowChart.peakOf(this.places, (place) => place.value);
+		const reach = Math.max(3, Math.min(cellWidth, cellHeight) / 11);
+		const first = panels[0];
+		panels.forEach((panel, i) => {
+			const x = i % columns * (cellWidth + GAP), y = Math.floor(i / columns) * (cellHeight + GAP + CAPTION);
+			const scale = this.options.scale === "independent" ? GeoFlowChart.peakOf(panel.places, (place) => place.value) : top;
+			const radius = scaleSqrt([0, scale], [0, reach]);
+			const cell = ctx.nest(`translate(${x.toFixed(1)},${(y + CAPTION).toFixed(1)})`, `panel-${i}`);
+			this.drawBasemap(cell, frame, false);
+			this.plotPanel(cell, frame, panel.places, this.options.ghost && i ? first.places : [], radius);
+			ctx.text(ctx.marks(`caption-${i}`, "text", [panel.name]).attr("x", x).attr("y", y + 11).attr("font-weight", 600).text((d) => d), 11, "ink");
+		});
+	}
+	plotPanel(ctx, frame, places, ghosts, radius) {
+		const located = (list) => list.flatMap((place) => {
+			const at = frame.at(place.place);
+			return at ? [{
+				place,
+				at,
+				d: this.mark(place, at, radius)
+			}] : [];
+		});
+		const color = ctx.palette.color("Value");
+		ctx.marks("ghosts", "path", located(ghosts), (d) => d.place.name).attr("d", (d) => d.d).attr("fill", "none").attr("stroke", ctx.theme.inkMuted).attr("stroke-width", 1).attr("pointer-events", "none");
+		const marks = ctx.marks("values", "path", located(places).sort((a, b) => b.place.value - a.place.value), (d) => d.place.name).attr("fill", color).attr("fill-opacity", .78).attr("stroke", ctx.theme.surface).attr("stroke-width", 1);
+		ctx.set(marks, { d: (d) => d.d }, { d: (d) => d.d });
+		ctx.hover(marks, (d) => ({
+			title: d.place.name,
+			color,
+			rows: [[String(d.place.row[this.options.facet] ?? ""), d.place.value]]
+		}));
+	}
+};
+export { SmallMultipleMaps, SmallMultipleMark, SmallMultipleScale };

package/dist/charts/geoflows/SphericalVoronoi.js

@@ -0,0 +1,125 @@
+import { Delaunay, geoArea, geoInterpolate } from "d3";
+// src/charts/geoflows/SphericalVoronoi.ts
+var RADIANS = Math.PI / 180;
+var toXyz = ([lon, lat]) => {
+	const c = Math.cos(lat * RADIANS);
+	return [
+		c * Math.cos(lon * RADIANS),
+		c * Math.sin(lon * RADIANS),
+		Math.sin(lat * RADIANS)
+	];
+};
+var toLonLat = ([x, y, z]) => [Math.atan2(y, x) / RADIANS, Math.asin(Math.max(-1, Math.min(1, z))) / RADIANS];
+var dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+var cross = (a, b) => [
+	a[1] * b[2] - a[2] * b[1],
+	a[2] * b[0] - a[0] * b[2],
+	a[0] * b[1] - a[1] * b[0]
+];
+var minus = (a, b) => [
+	a[0] - b[0],
+	a[1] - b[1],
+	a[2] - b[2]
+];
+var unit = (a) => {
+	const length = Math.hypot(...a) || 1;
+	return [
+		a[0] / length,
+		a[1] / length,
+		a[2] / length
+	];
+};
+/** Delaunay triangulation and Voronoi cells on the sphere, so cells stay correct across the map seam. */
+var SphericalVoronoi = class {
+	/** Needs four distinct sites; returns nothing for fewer. Stereographic projection from the first site turns this into a planar Delaunay. */
+	static mesh(sites) {
+		if (sites.length < 4) return {
+			cells: [],
+			edges: []
+		};
+		const xyz = sites.map(toXyz);
+		const pole = xyz[0];
+		const u = unit(cross(pole, Math.abs(pole[2]) < .9 ? [
+			0,
+			0,
+			1
+		] : [
+			1,
+			0,
+			0
+		])), v = cross(pole, u);
+		const flat = xyz.slice(1).map((p) => {
+			const lift = Math.max(1e-9, 1 - dot(p, pole));
+			return [dot(p, u) / lift, dot(p, v) / lift];
+		});
+		const planar = Delaunay.from(flat);
+		const triangles = [];
+		for (let i = 0; i < planar.triangles.length; i += 3) triangles.push([
+			planar.triangles[i] + 1,
+			planar.triangles[i + 1] + 1,
+			planar.triangles[i + 2] + 1
+		]);
+		const hull = planar.hull;
+		hull.forEach((point, i) => triangles.push([
+			0,
+			point + 1,
+			hull[(i + 1) % hull.length] + 1
+		]));
+		if (!planar.triangles.length) return {
+			cells: [],
+			edges: []
+		};
+		const corners = sites.map(() => []);
+		const edges = /* @__PURE__ */ new Set();
+		for (const [a, b, c] of triangles) {
+			const pa = xyz[a], pb = xyz[b], pc = xyz[c];
+			let centre = unit(cross(minus(pb, pa), minus(pc, pa)));
+			const rim = dot(centre, pa);
+			if (xyz.some((p) => dot(centre, p) > rim + 1e-9)) centre = [
+				-centre[0],
+				-centre[1],
+				-centre[2]
+			];
+			for (const site of [
+				a,
+				b,
+				c
+			]) corners[site].push(centre);
+			for (const [m, n] of [
+				[a, b],
+				[b, c],
+				[c, a]
+			]) edges.add(m < n ? `${m}/${n}` : `${n}/${m}`);
+		}
+		return {
+			cells: corners.flatMap((list, index) => {
+				if (list.length < 3) return [];
+				const site = xyz[index], east = unit(cross([
+					0,
+					0,
+					1
+				], site)), north = cross(site, Math.hypot(...east) ? east : [
+					1,
+					0,
+					0
+				]);
+				const spin = (p) => Math.atan2(dot(p, north), dot(p, east));
+				const ring = [...list].sort((a, b) => spin(b) - spin(a)).map(toLonLat);
+				const closed = [...ring, ring[0]];
+				return [{
+					index,
+					ring: geoArea({
+						type: "Polygon",
+						coordinates: [closed]
+					}) <= 2 * Math.PI ? closed : closed.reverse()
+				}];
+			}),
+			edges: [...edges].map((edge) => edge.split("/").map(Number))
+		};
+	}
+	/** The same cell pulled towards its site, leaving a gap around it. */
+	static inset(ring, site, amount) {
+		return ring.map((corner) => geoInterpolate(site, corner)(amount));
+	}
+};
+export { SphericalVoronoi };

package/dist/charts/geoflows/SpiderMap.js

@@ -0,0 +1,184 @@
+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 { geoCentroid, geoDistance, polygonHull, scaleSqrt } from "d3";
+// src/charts/geoflows/SpiderMap.ts
+/** How hubs are chosen from the places. */
+var SpiderHubPick = /* @__PURE__ */ function(SpiderHubPick) {
+	SpiderHubPick["Largest"] = "largest";
+	SpiderHubPick["Spread"] = "farthest-first";
+	SpiderHubPick["Clustered"] = "k-means";
+	return SpiderHubPick;
+}({});
+/** How a place joins its hub. */
+var SpiderLine = /* @__PURE__ */ function(SpiderLine) {
+	SpiderLine["Straight"] = "straight";
+	SpiderLine["Geodesic"] = "geodesic";
+	SpiderLine["Arc"] = "arc";
+	return SpiderLine;
+}({});
+var near = (places, from) => places.reduce((best, place) => geoDistance(place.place, from.place) < geoDistance(best.place, from.place) ? place : best);
+/** Show which centre serves each place: desire lines from every customer to its nearest depot. */
+var SpiderMap = class extends GeoPointChart {
+	static meta = {
+		id: "spider-map",
+		name: "Spider map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws a desire line from every place to its nearest hub, revealing catchments and where coverage runs thin.",
+		tags: [
+			"desire lines",
+			"catchment",
+			"nearest depot"
+		],
+		sample: (seed) => GeoFlowSample.places(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.Orthographic,
+				GeoFlowProjection.Mercator,
+				GeoFlowProjection.AzimuthalEqualArea
+			],
+			pick: [
+				"largest",
+				"farthest-first",
+				"k-means"
+			],
+			line: [
+				"straight",
+				"geodesic",
+				"arc"
+			],
+			hulls: [false, true],
+			hubs: [
+				6,
+				4,
+				8
+			]
+		},
+		valid: (v) => v.hubs === 6 || !v.hulls
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			fit: GeoFlowFit.World,
+			pick: "largest",
+			line: "straight",
+			hulls: false,
+			hubs: 6
+		};
+	}
+	categorical() {
+		return false;
+	}
+	spread(count) {
+		const places = [...this.places].sort((a, b) => b.value - a.value);
+		const hubs = places.slice(0, 1);
+		while (hubs.length < Math.min(count, places.length)) {
+			const distance = (place) => Math.min(...hubs.map((hub) => geoDistance(place.place, hub.place)));
+			hubs.push(places.reduce((best, place) => distance(place) > distance(best) ? place : best));
+		}
+		return hubs;
+	}
+	hubs() {
+		const { pick, hubs: count } = this.options;
+		if (pick === "largest") return [...this.places].sort((a, b) => b.value - a.value).slice(0, count);
+		let hubs = this.spread(count);
+		if (pick === "farthest-first") return hubs;
+		for (let round = 0; round < 8; round++) {
+			const members = new Map(hubs.map((hub) => [hub, []]));
+			for (const place of this.places) members.get(near(hubs, place)).push(place);
+			hubs = [...members].map(([hub, rows]) => {
+				if (!rows.length) return hub;
+				const centre = geoCentroid({
+					type: "MultiPoint",
+					coordinates: rows.map((row) => row.place)
+				});
+				return near(rows, {
+					...hub,
+					place: centre
+				});
+			});
+		}
+		return hubs;
+	}
+	shape(frame, leg) {
+		const { line } = this.options;
+		if (line === "geodesic") return frame.line(FlowGeometry.geodesic(leg.hub.place, leg.place.place, 16));
+		const a = frame.at(leg.hub.place), b = frame.at(leg.place.place);
+		if (!a || !b || this.runs(frame, FlowGeometry.geodesic(leg.hub.place, leg.place.place, 16)).length !== 1) return "";
+		return FlowGeometry.polyline(line === "arc" ? FlowGeometry.arc(a, b, .14, 14) : [a, b]);
+	}
+	plotGeo(ctx, frame) {
+		const hubs = this.hubs();
+		const legs = hubs.length ? this.places.filter((place) => !hubs.includes(place)).map((place) => ({
+			hub: near(hubs, place),
+			place
+		})) : [];
+		const color = (hub) => ctx.palette.color(hub.name);
+		const hulls = !this.options.hulls ? [] : hubs.flatMap((hub) => {
+			const points = legs.filter((leg) => leg.hub === hub).flatMap((leg) => frame.at(leg.place.place) ?? []).reduce((all, value, i, list) => i % 2 ? [...all, [list[i - 1], value]] : all, []);
+			const hull = points.length >= 3 ? polygonHull(points) : null;
+			return hull ? [{
+				hub,
+				d: `${FlowGeometry.polyline(hull)}Z`
+			}] : [];
+		});
+		ctx.set(ctx.marks("hulls", "path", hulls, (d) => d.hub.id).attr("fill", (d) => color(d.hub)).attr("fill-opacity", .14).attr("stroke", (d) => color(d.hub)).attr("stroke-width", 8).attr("stroke-opacity", .14).attr("stroke-linejoin", "round"), { d: (d) => d.d });
+		const drawn = legs.map((leg) => ({
+			leg,
+			d: this.shape(frame, leg)
+		})).filter((item) => item.d);
+		const lines = ctx.marks("legs", "path", drawn, (d) => d.leg.place.id).attr("fill", "none").attr("stroke", (d) => color(d.leg.hub)).attr("stroke-width", 2).attr("stroke-opacity", .55);
+		ctx.set(lines, { d: (d) => d.d }, { d: (d) => d.d });
+		ctx.hover(lines, (d) => ({
+			title: d.leg.place.name,
+			color: color(d.leg.hub),
+			rows: [["Hub", d.leg.hub.name], ["Distance", `${Math.round(FlowGeometry.km(d.leg.hub.place, d.leg.place.place)).toLocaleString("en")} km`]]
+		}));
+		const ends = legs.flatMap((leg) => {
+			const at = frame.at(leg.place.place);
+			return at ? [{
+				leg,
+				at
+			}] : [];
+		});
+		const tips = ctx.marks("ends", "circle", ends, (d) => d.leg.place.id).attr("fill", (d) => color(d.leg.hub));
+		ctx.set(tips, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: 3
+		}, { r: 0 });
+		const scale = scaleSqrt([0, Math.max(1, ...hubs.map((hub) => hub.value))], [0, 8]);
+		const area = (value) => Math.max(4, scale(value));
+		const centres = hubs.flatMap((hub) => {
+			const at = frame.at(hub.place);
+			return at ? [{
+				hub,
+				at
+			}] : [];
+		});
+		const dots = ctx.marks("hubs", "circle", centres, (d) => d.hub.id).attr("fill", (d) => color(d.hub)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.at[0],
+			cy: (d) => d.at[1],
+			r: (d) => area(Math.max(0, d.hub.value))
+		}, { r: 0 });
+		ctx.hover(dots, (d) => ({
+			title: d.hub.name,
+			color: color(d.hub),
+			rows: [["Serves", legs.filter((leg) => leg.hub === d.hub).length]]
+		}));
+		this.labels(ctx, centres.map((d) => ({
+			text: d.hub.name,
+			x: d.at[0],
+			y: d.at[1],
+			gap: area(Math.max(0, d.hub.value))
+		})), "labels", 8);
+	}
+};
+export { SpiderHubPick, SpiderLine, SpiderMap };