@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/geoflows/HubSpokeMap.js

@@ -0,0 +1,208 @@
+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 { geoCircle, group, scaleLinear, sum } from "d3";
+// src/charts/geoflows/HubSpokeMap.ts
+/** How each spoke is drawn. */
+var HubSpokeShape = /* @__PURE__ */ function(HubSpokeShape) {
+	HubSpokeShape["Geodesic"] = "geodesic";
+	HubSpokeShape["Wedge"] = "wedge";
+	HubSpokeShape["Bundled"] = "bundled-tree";
+	return HubSpokeShape;
+}({});
+/** Which flows at the hub are shown. */
+var HubSpokeDirection = /* @__PURE__ */ function(HubSpokeDirection) {
+	HubSpokeDirection["Both"] = "both";
+	HubSpokeDirection["Outbound"] = "outbound";
+	HubSpokeDirection["Inbound"] = "inbound";
+	return HubSpokeDirection;
+}({});
+var RINGS_KM = [
+	2500,
+	5e3,
+	1e4,
+	15e3
+];
+var SECTOR = Math.PI / 4;
+var KM_PER_DEGREE = Math.PI * FlowGeometry.EARTH_KM / 180;
+/** Show one place's reach: every link starts or ends at the hub, and the map centres on it. */
+var HubSpokeMap = class extends GeoLinkChart {
+	static meta = {
+		id: "hub-spoke-map",
+		name: "Hub and spoke map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Centres the map on one hub and radiates its flows, as lines, wedges or a merged tree, with distance rings.",
+		tags: [
+			"hub",
+			"star",
+			"radial flows"
+		],
+		sample: (seed) => GeoFlowSample.star(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.AzimuthalEquidistant,
+				GeoFlowProjection.Orthographic,
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.Stereographic
+			],
+			shape: [
+				"geodesic",
+				"wedge",
+				"bundled-tree"
+			],
+			direction: [
+				"both",
+				"outbound",
+				"inbound"
+			],
+			rings: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			projection: GeoFlowProjection.AzimuthalEquidistant,
+			shape: "geodesic",
+			direction: "both",
+			rings: true
+		};
+	}
+	get hub() {
+		const stops = this.stops;
+		return stops.find((stop) => stop.name === this.options.hub) ?? [...stops].sort((a, b) => b.degree - a.degree)[0];
+	}
+	focus() {
+		return this.options.centre ?? this.hub?.place ?? super.focus();
+	}
+	spokes(frame, hub) {
+		const { direction } = this.options;
+		return this.links.flatMap((link) => {
+			const outbound = link.source === hub.name;
+			if (!outbound && link.target !== hub.name) return [];
+			if (direction === "outbound" && !outbound || direction === "inbound" && outbound) return [];
+			const points = this.runs(frame, FlowGeometry.geodesic(link.from, link.to, 36))[0];
+			const first = points && (outbound ? points[0] : points.at(-1)), last = points && (outbound ? points.at(-1) : points[0]);
+			return points && first && last ? [{
+				link,
+				start: first,
+				other: last,
+				points,
+				outbound
+			}] : [];
+		});
+	}
+	/** Spokes in the same compass sector share a trunk, which keeps heavy hubs legible. */
+	tree(spokes, hub, width, sides) {
+		return [...group(spokes, (spoke) => `${spoke.outbound}/${Math.floor((Math.atan2(spoke.other[1] - hub[1], spoke.other[0] - hub[0]) + Math.PI) / SECTOR)}`)].flatMap(([key, members], s) => {
+			const total = sum(members, (member) => member.link.value);
+			const heaviest = members.reduce((a, b) => b.link.value > a.link.value ? b : a);
+			const mean = (axis) => sum(members, (member) => member.other[axis] * member.link.value) / (total || 1);
+			const shift = sides ? members[0].outbound ? 2.5 : -2.5 : 0;
+			const branch = [hub[0] + (mean(0) - hub[0]) * .5 + shift, hub[1] + (mean(1) - hub[1]) * .5 + shift];
+			if (members.length < 2) return [this.twig(`${key}/0`, heaviest, heaviest.start, heaviest.other, heaviest.other, width)];
+			const trunk = {
+				key: `${key}/trunk`,
+				d: FlowGeometry.polyline([hub, branch]),
+				width: width(total),
+				link: heaviest.link,
+				fill: false
+			};
+			const bend = [branch[0] + (branch[0] - hub[0]) * .28, branch[1] + (branch[1] - hub[1]) * .28];
+			return [trunk, ...members.map((member, i) => this.twig(`${key}/${s}/${i}`, member, branch, bend, member.other, width))];
+		});
+	}
+	twig(key, spoke, from, bend, to, width) {
+		const points = Array.from({ length: 13 }, (_, i) => {
+			const t = i / 12, s = 1 - t;
+			return [s * s * from[0] + 2 * s * t * bend[0] + t * t * to[0], s * s * from[1] + 2 * s * t * bend[1] + t * t * to[1]];
+		});
+		return {
+			key,
+			d: FlowGeometry.polyline(points),
+			width: width(spoke.link.value),
+			link: spoke.link,
+			fill: false
+		};
+	}
+	strokes(spokes, hub, ctx) {
+		const { shape, direction } = this.options;
+		const top = GeoFlowChart.peakOf(spokes, (spoke) => spoke.link.value);
+		const most = Math.max(4, Math.min(ctx.plot.width, ctx.plot.height) / 38);
+		if (shape === "bundled-tree") {
+			const sectors = group(spokes, (spoke) => `${spoke.outbound}/${Math.floor((Math.atan2(spoke.other[1] - hub[1], spoke.other[0] - hub[0]) + Math.PI) / SECTOR)}`);
+			const heaviest = Math.max(...[...sectors.values()].map((rows) => sum(rows, (row) => row.link.value)), 1);
+			return this.tree(spokes, hub, scaleLinear([0, heaviest], [1.5, most * 1.4]), direction === "both");
+		}
+		const width = scaleLinear([0, top], [1.5, most]);
+		const both = direction === "both";
+		return spokes.map((spoke) => {
+			const w = width(spoke.link.value);
+			const line = both ? FlowGeometry.offset(spoke.points, w / 2 + 1) : spoke.points;
+			const trimmed = FlowGeometry.trim(line, 6, shape === "geodesic" ? 8 : 5);
+			if (shape === "wedge") return {
+				key: String(spoke.link.id),
+				d: FlowGeometry.ribbon(trimmed, (t) => w * 1.5 * (1 - t * .85)),
+				width: .75,
+				link: spoke.link,
+				fill: true
+			};
+			const end = trimmed.length - 1;
+			return {
+				key: String(spoke.link.id),
+				d: FlowGeometry.polyline(trimmed),
+				width: w,
+				link: spoke.link,
+				fill: false,
+				head: FlowGeometry.arrow(trimmed[end], trimmed[Math.max(0, end - 2)], w + 5)
+			};
+		});
+	}
+	/** Draws the rings and returns their labels, which go on top of the spokes. */
+	drawRings(ctx, frame, hub) {
+		const rings = this.options.rings ? RINGS_KM : [];
+		const circle = (km) => geoCircle().center(hub.place).radius(km / KM_PER_DEGREE).precision(3)();
+		const shapes = rings.map((km) => ({
+			km,
+			d: frame.path(circle(km)) ?? ""
+		})).filter((ring) => ring.d);
+		ctx.marks("rings", "path", shapes, (d) => d.km).attr("d", (d) => d.d).attr("fill", "none").attr("stroke", ctx.theme.axis).attr("stroke-width", 1).attr("stroke-dasharray", "2 3").attr("pointer-events", "none");
+		return shapes.flatMap(({ km }) => {
+			const at = frame.at([hub.place[0], Math.max(-89, hub.place[1] - km / KM_PER_DEGREE)]);
+			return at ? [{
+				text: `${(km / 1e3).toFixed(km % 1e3 ? 1 : 0)}k km`,
+				x: at[0],
+				y: at[1],
+				gap: 0
+			}] : [];
+		});
+	}
+	plotGeo(ctx, frame) {
+		const hub = this.hub;
+		if (!hub) return;
+		const centre = frame.at(hub.place) ?? [frame.width / 2, frame.height / 2];
+		const ringLabels = this.drawRings(ctx, frame, hub);
+		const spokes = this.spokes(frame, hub);
+		const strokes = this.strokes(spokes, centre, ctx).sort((a, b) => b.width - a.width);
+		const color = (d) => this.tint(ctx, d.link);
+		const lines = ctx.marks("spokes", "path", strokes, (d) => d.key).attr("fill", (d) => d.fill ? color(d) : "none").attr("stroke", (d) => d.fill ? ctx.theme.surface : color(d)).attr("stroke-width", (d) => d.width).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("opacity", .85);
+		ctx.set(lines, { d: (d) => d.d }, { d: (d) => d.d });
+		if (this.options.shape !== "wedge") ctx.drawOn(lines);
+		ctx.hover(lines, (d) => ({
+			title: `${d.link.source} → ${d.link.target}`,
+			color: color(d),
+			rows: [["Flow", d.link.value]]
+		}));
+		ctx.set(ctx.marks("heads", "path", strokes.filter((d) => d.head), (d) => d.key).attr("fill", color), { d: (d) => d.head });
+		const partners = new Set(spokes.flatMap((spoke) => [spoke.link.source, spoke.link.target]));
+		const stops = this.stops.filter((stop) => partners.has(stop.name) || stop === hub);
+		const radius = (stop) => stop === hub ? 7 : 4;
+		this.stopDots(ctx, frame, stops, radius);
+		this.labels(ctx, [...this.stopLabels(frame, stops, radius).slice(0, 5), ...ringLabels], "labels", 9);
+	}
+};
+export { HubSpokeDirection, HubSpokeMap, HubSpokeShape };

package/dist/charts/geoflows/IsochroneMap.js

@@ -0,0 +1,198 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoFlowFit } from "./GeoFlowChart.js";
+import { GeoFlowProjection } from "./GeoFlowFrame.js";
+import { GeoFlowSample } from "./GeoFlowSample.js";
+import { GeoPointChart } from "./GeoPointChart.js";
+import { contours, geoPath, quantile, sum, ticks } from "d3";
+// src/charts/geoflows/IsochroneMap.ts
+/** How the bands are drawn. */
+var IsochroneStyle = /* @__PURE__ */ function(IsochroneStyle) {
+	IsochroneStyle["Bands"] = "bands";
+	IsochroneStyle["Lines"] = "labelled-lines";
+	IsochroneStyle["Terraced"] = "terraced";
+	return IsochroneStyle;
+}({});
+/** How travel time is estimated between the measured places. */
+var IsochroneMethod = /* @__PURE__ */ function(IsochroneMethod) {
+	IsochroneMethod["InverseDistance"] = "inverse-distance";
+	IsochroneMethod["Nearest"] = "nearest";
+	IsochroneMethod["Distance"] = "distance-fit";
+	return IsochroneMethod;
+}({});
+/** Where the band edges fall. */
+var IsochroneBreaks = /* @__PURE__ */ function(IsochroneBreaks) {
+	IsochroneBreaks["Equal"] = "equal";
+	IsochroneBreaks["Quantile"] = "quantile";
+	return IsochroneBreaks;
+}({});
+var CELL = 6;
+var RADIANS = Math.PI / 180;
+var unit = ([lon, lat]) => [
+	Math.cos(lat * RADIANS) * Math.cos(lon * RADIANS),
+	Math.cos(lat * RADIANS) * Math.sin(lon * RADIANS),
+	Math.sin(lat * RADIANS)
+];
+var chord$1 = (a, b) => Math.max(0, 2 - 2 * (a[0] * b[0] + a[1] * b[1] + a[2] * b[2]));
+/** Show how far you can get in a given time: pass measured travel times at places and the map interpolates bands around the origin. */
+var IsochroneMap = class extends GeoPointChart {
+	static meta = {
+		id: "isochrone-map",
+		name: "Isochrone map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Interpolates travel times from one origin into bands of equal time across the map.",
+		tags: [
+			"travel time",
+			"reach",
+			"contour"
+		],
+		sample: (seed) => GeoFlowSample.travel(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.AzimuthalEquidistant,
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.Orthographic,
+				GeoFlowProjection.EqualEarth
+			],
+			style: [
+				"bands",
+				"labelled-lines",
+				"terraced"
+			],
+			method: [
+				"inverse-distance",
+				"nearest",
+				"distance-fit"
+			],
+			breaks: ["equal", "quantile"],
+			bands: [5, 10]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			fit: GeoFlowFit.World,
+			projection: GeoFlowProjection.AzimuthalEquidistant,
+			style: "bands",
+			method: "inverse-distance",
+			breaks: "equal",
+			bands: 5,
+			unit: "h"
+		};
+	}
+	get start() {
+		return this.places.reduce((best, place) => !best || place.value < best.value ? place : best, void 0);
+	}
+	get origin() {
+		return this.options.origin ?? this.start?.place;
+	}
+	focus() {
+		return this.options.centre ?? this.origin ?? super.focus();
+	}
+	/** Returns time as a function of a unit vector. */
+	estimator() {
+		const { method } = this.options;
+		const sites = this.places.map((place) => ({
+			at: unit(place.place),
+			time: place.value
+		}));
+		if (method === "nearest") return (point) => sites.reduce((best, site) => chord$1(point, site.at) < chord$1(point, best.at) ? site : best).time;
+		if (method === "distance-fit") {
+			const home = unit(this.origin);
+			const reach = (at) => 2 * Math.asin(Math.min(1, Math.sqrt(chord$1(at, home)) / 2));
+			const xs = sites.map((site) => reach(site.at)), n = sites.length;
+			const mx = sum(xs) / n, my = sum(sites, (site) => site.time) / n;
+			const slope = sum(sites, (site, i) => (xs[i] - mx) * (site.time - my)) / (sum(xs, (x) => (x - mx) ** 2) || 1);
+			return (point) => my + slope * (reach(point) - mx);
+		}
+		return (point) => {
+			let weight = 0, total = 0;
+			for (const site of sites) {
+				const d = chord$1(point, site.at), w = 1 / (d * d + 1e-5);
+				weight += w;
+				total += w * site.time;
+			}
+			return total / weight;
+		};
+	}
+	plotGeo(ctx, frame) {
+		const { style, breaks, bands, unit: word } = this.options;
+		if (!this.places.length) return;
+		const nx = Math.ceil(frame.width / CELL) + 1, ny = Math.ceil(frame.height / CELL) + 1;
+		const estimate = this.estimator();
+		const times = new Array(nx * ny);
+		let top = 0;
+		for (let y = 0; y < ny; y++) for (let x = 0; x < nx; x++) {
+			const place = frame.projection.invert?.([x * CELL, y * CELL]);
+			const time = place && Number.isFinite(place[0]) && Number.isFinite(place[1]) ? estimate(unit(place)) : NaN;
+			times[x + y * nx] = time;
+			if (time > top) top = time;
+		}
+		const known = times.filter(Number.isFinite).sort((a, b) => a - b);
+		const raw = breaks === "quantile" ? Array.from({ length: bands - 1 }, (_, i) => +(quantile(known, (i + 1) / bands) ?? 0).toFixed(1)) : ticks(0, top, bands).filter((level) => level > 0 && level < top);
+		const levels = [...new Set(raw)].sort((a, b) => b - a);
+		const flipped = times.map((time) => Number.isFinite(time) ? top - time : -1);
+		const shape = contours().size([nx, ny]).smooth(true);
+		const draw = geoPath().digits(1);
+		const scaled = levels.map((level, rank) => {
+			const contour = shape.contour(flipped, top - level);
+			const coordinates = contour.coordinates.map((polygon) => polygon.map((ring) => ring.map(([x, y]) => [(x - .5) * CELL, (y - .5) * CELL])));
+			return {
+				level,
+				rank,
+				geometry: {
+					...contour,
+					coordinates
+				},
+				d: draw({
+					type: "MultiPolygon",
+					coordinates
+				}) ?? ""
+			};
+		}).filter((band) => band.d);
+		const layer = this.clipped(ctx, "bands", frame.path({ type: "Sphere" }) ?? "");
+		const tone = (rank) => .1 + rank / Math.max(1, levels.length - 1) * .82;
+		const lined = style === "labelled-lines";
+		const shadows = style === "terraced" ? scaled.flatMap((band) => [{
+			...band,
+			key: `${band.level}/s`,
+			shadow: true
+		}, {
+			...band,
+			key: `${band.level}`,
+			shadow: false
+		}]) : scaled.map((band) => ({
+			...band,
+			key: `${band.level}`,
+			shadow: false
+		}));
+		const fills = ctx.marks("fills", "path", shadows, (d) => d.key, layer).attr("transform", (d) => d.shadow ? "translate(1.2,1.8)" : null).attr("fill", (d) => lined ? "transparent" : d.shadow ? ctx.theme.ink : ctx.palette.sequential(tone(d.rank))).attr("fill-opacity", (d) => d.shadow ? .28 : lined ? 1 : .86).attr("stroke", (d) => lined ? ctx.palette.sequential(.3 + tone(d.rank) * .7) : "none").attr("stroke-width", lined ? 2 : 0);
+		ctx.set(fills, { d: (d) => d.d }, { d: (d) => d.d });
+		ctx.hover(fills, (d) => ({
+			title: `Within ${d.level} ${word}`,
+			color: ctx.palette.sequential(tone(d.rank))
+		}));
+		this.drawCoast(ctx, frame, lined);
+		const tags = lined ? scaled.flatMap((band) => {
+			const point = (band.geometry.coordinates.flat().sort((a, b) => b.length - a.length)[0] ?? []).filter(([x, y]) => x > 30 && y > 30 && x < frame.width - 30 && y < frame.height - 30).sort((a, b) => a[1] - b[1])[0];
+			return point ? [{
+				text: `${band.level} ${word}`,
+				x: point[0],
+				y: point[1],
+				gap: 0
+			}] : [];
+		}) : [];
+		this.labels(ctx, tags, "tags", levels.length);
+		const home = this.origin ? frame.at(this.origin) : null;
+		const dot = ctx.marks("origin", "circle", home ? [home] : []).attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dot, {
+			cx: (d) => d[0],
+			cy: (d) => d[1],
+			r: 5
+		}, { r: 0 });
+		if (this.start) ctx.hover(dot, () => ({ title: this.start.name }));
+		if (!lined) this.keyRamp(ctx, `Time, ${word}`, String(levels.at(-1) ?? 0), String(levels[0] ?? 0), (t) => ctx.palette.sequential(.92 - t * .82));
+	}
+};
+export { IsochroneBreaks, IsochroneMap, IsochroneMethod, IsochroneStyle };

package/dist/charts/geoflows/MeridianMap.js

@@ -0,0 +1,161 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FlowGeometry } from "./FlowGeometry.js";
+import { GeoFlowChart, GeoFlowFit } from "./GeoFlowChart.js";
+import { GeoFlowProjection } from "./GeoFlowFrame.js";
+import { GeoFlowSample } from "./GeoFlowSample.js";
+import { GeoPointChart } from "./GeoPointChart.js";
+import { range, sum } from "d3";
+// src/charts/geoflows/MeridianMap.ts
+/** Which graticule lines carry the data. */
+var MeridianBand = /* @__PURE__ */ function(MeridianBand) {
+	MeridianBand["Meridian"] = "meridians";
+	MeridianBand["Parallel"] = "parallels";
+	return MeridianBand;
+}({});
+/** How the profile is drawn along its line. */
+var MeridianMark = /* @__PURE__ */ function(MeridianMark) {
+	MeridianMark["Ridge"] = "ridge";
+	MeridianMark["Spike"] = "spike";
+	MeridianMark["Ribbon"] = "ribbon";
+	return MeridianMark;
+}({});
+/** How places in a band combine. */
+var MeridianAggregate = /* @__PURE__ */ function(MeridianAggregate) {
+	MeridianAggregate["Sum"] = "sum";
+	MeridianAggregate["Mean"] = "mean";
+	return MeridianAggregate;
+}({});
+var SPREAD = 7;
+var ALONG = 3;
+/** Show how a measure varies with latitude or longitude: each graticule line carries a profile of what lies in its band. */
+var MeridianMap = class extends GeoPointChart {
+	static meta = {
+		id: "meridian-map",
+		name: "Meridian map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws a ridge, spike or ribbon profile along each meridian or parallel to show change with longitude or latitude.",
+		tags: [
+			"ridgeline map",
+			"parallels",
+			"latitude profile"
+		],
+		sample: (seed) => GeoFlowSample.places(seed),
+		variants: {
+			projection: [
+				GeoFlowProjection.NaturalEarth,
+				GeoFlowProjection.Equirectangular,
+				GeoFlowProjection.EqualEarth,
+				GeoFlowProjection.Orthographic
+			],
+			band: ["parallels", "meridians"],
+			mark: [
+				"ridge",
+				"spike",
+				"ribbon"
+			],
+			step: [
+				15,
+				10,
+				30
+			],
+			aggregate: ["sum", "mean"]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			fit: GeoFlowFit.World,
+			band: "parallels",
+			mark: "ridge",
+			step: 15,
+			aggregate: "sum"
+		};
+	}
+	/** Gaussian-weighted value of the band's places at each position along the line. */
+	profile(line, key) {
+		const { band, step, aggregate } = this.options;
+		const meridian = band === "meridians";
+		const across = (place) => meridian ? (place.place[0] - line + 540) % 360 - 180 : place.place[1] - line;
+		const members = this.places.filter((place) => Math.abs(across(place)) <= step / 2);
+		const readings = (meridian ? range(-78, 78.1, ALONG) : range(-180, 180.1, ALONG)).map((stop) => {
+			const near = members.map((member) => {
+				const offset = meridian ? member.place[1] - stop : (member.place[0] - stop + 540) % 360 - 180;
+				return {
+					value: Math.max(0, member.value),
+					weight: Math.exp(-(offset ** 2) / (2 * SPREAD ** 2))
+				};
+			});
+			const weight = sum(near, (d) => d.weight), total = sum(near, (d) => d.value * d.weight);
+			const level = aggregate === "mean" ? weight > .05 ? total / weight * Math.min(1, weight) : 0 : total;
+			return {
+				place: meridian ? [line, stop] : [stop, line],
+				level
+			};
+		});
+		return {
+			key,
+			line,
+			readings,
+			peak: Math.max(0, ...readings.map((d) => d.level)),
+			total: sum(members, (member) => member.value)
+		};
+	}
+	plotGeo(ctx, frame) {
+		const { band, step, mark } = this.options;
+		const meridian = band === "meridians";
+		const profiles = (meridian ? range(-180 + step, 180, step) : range(-75 + 75 % step, 75.1, step).filter((lat) => Math.abs(lat) <= 75)).map((line, i) => this.profile(line, i)).filter((profile) => profile.peak > 0).sort((a, b) => meridian ? a.line - b.line : b.line - a.line);
+		const top = GeoFlowChart.peakOf(profiles, (profile) => profile.peak);
+		const rise = frame.projection.scale() * Math.PI / 180 * step * (mark === "ribbon" ? .45 : 1.4);
+		const lift = (level) => meridian ? [level / top * rise, 0] : [0, -(level / top) * rise];
+		const shape = (profile) => this.shapes(frame, profile, lift);
+		const parts = profiles.flatMap((profile) => shape(profile).map((d, i) => ({
+			profile,
+			d,
+			key: `${profile.key}/${i}`
+		})));
+		const stroked = mark === "spike";
+		const tint = (profile) => ctx.palette.sequential(.3 + profile.peak / top * .7);
+		const layer = this.clipped(ctx, "profiles", frame.path({ type: "Sphere" }) ?? "");
+		const paths = ctx.marks("lines", "path", parts, (d) => d.key, layer).attr("fill", (d) => stroked ? "none" : tint(d.profile)).attr("fill-opacity", mark === "ridge" ? .82 : .9).attr("stroke", (d) => stroked ? tint(d.profile) : ctx.theme.surface).attr("stroke-width", stroked ? 2 : 1).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		ctx.set(paths, { d: (d) => d.d }, { d: (d) => d.d });
+		ctx.hover(paths, (d) => ({
+			title: `${Math.abs(d.profile.line)}°${meridian ? d.profile.line < 0 ? "W" : "E" : d.profile.line < 0 ? "S" : "N"}`,
+			color: tint(d.profile),
+			rows: [["Band total", Math.round(d.profile.total)]]
+		}));
+	}
+	shapes(frame, profile, lift) {
+		const { mark } = this.options;
+		const clamp = ([x, y]) => [Math.max(0, Math.min(frame.width, x)), Math.max(0, Math.min(frame.height, y))];
+		const up = (at, level, sign = 1) => {
+			const [dx, dy] = lift(level);
+			return clamp([at[0] + dx * sign, at[1] + dy * sign]);
+		};
+		const runs = [];
+		let run = [];
+		for (const reading of profile.readings) {
+			const at = frame.at(reading.place), last = run.at(-1);
+			if (!at || last && Math.hypot(at[0] - last.at[0], at[1] - last.at[1]) > frame.width / 4) {
+				if (run.length > 1) runs.push(run);
+				run = at ? [{
+					at,
+					level: reading.level
+				}] : [];
+			} else run.push({
+				at,
+				level: reading.level
+			});
+		}
+		if (run.length > 1) runs.push(run);
+		return runs.flatMap((points) => {
+			if (mark === "spike") return points.filter((_, i) => i % 3 === 0).flatMap((d) => lift(d.level)[0] || lift(d.level)[1] ? [FlowGeometry.polyline([d.at, up(d.at, d.level)])] : []);
+			const base = points.map((d) => d.at);
+			const top = points.map((d) => up(d.at, d.level));
+			const bottom = mark === "ribbon" ? points.map((d) => up(d.at, d.level, -1)) : base;
+			return [`${FlowGeometry.polyline([...top, ...[...bottom].reverse()])}Z`];
+		});
+	}
+};
+export { MeridianAggregate, MeridianBand, MeridianMap, MeridianMark };