@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/geomaps/GeoField.js

@@ -0,0 +1,111 @@
+import { blur2, contours, extent, range } from "d3";
+// src/charts/geomaps/GeoField.ts
+var GeoKernel = /* @__PURE__ */ function(GeoKernel) {
+	GeoKernel["Gaussian"] = "gaussian";
+	GeoKernel["Quartic"] = "quartic";
+	GeoKernel["Uniform"] = "uniform";
+	return GeoKernel;
+}({});
+var GeoInterpolation = /* @__PURE__ */ function(GeoInterpolation) {
+	GeoInterpolation["Kernel"] = "kernel";
+	GeoInterpolation["InverseDistance"] = "inverse-distance";
+	return GeoInterpolation;
+}({});
+var RAD = Math.PI / 180;
+var SHAPE = {
+	["gaussian"]: (u) => u > 1 ? 0 : Math.exp(-4.5 * u * u),
+	["quartic"]: (u) => u > 1 ? 0 : (1 - u * u) ** 2,
+	["uniform"]: (u) => u > 1 ? 0 : 1
+};
+var unit = (lon, lat) => {
+	const c = Math.cos(lat * RAD);
+	return [
+		c * Math.cos(lon * RAD),
+		c * Math.sin(lon * RAD),
+		Math.sin(lat * RAD)
+	];
+};
+/** A continuous surface over the sphere, estimated from scattered samples using great-circle distance. */
+var GeoField = class GeoField {
+	points;
+	at;
+	constructor(samples, { interpolation, kernel = "gaussian", bandwidth = 18 }) {
+		this.points = samples.map(({ lon, lat, value }) => ({
+			at: unit(lon, lat),
+			value
+		}));
+		this.at = interpolation === "kernel" ? this.kernel(SHAPE[kernel], bandwidth * RAD) : this.inverseDistance();
+	}
+	angle(a, b) {
+		return Math.acos(Math.min(1, a[0] * b[0] + a[1] * b[1] + a[2] * b[2]));
+	}
+	kernel(shape, reach) {
+		return (lon, lat) => {
+			const at = unit(lon, lat);
+			let total = 0;
+			for (const point of this.points) total += point.value * shape(this.angle(at, point.at) / reach);
+			return total;
+		};
+	}
+	inverseDistance() {
+		return (lon, lat) => {
+			const at = unit(lon, lat);
+			let weight = 0, total = 0;
+			for (const point of this.points) {
+				const w = 1 / Math.max(1e-4, this.angle(at, point.at)) ** 3;
+				weight += w;
+				total += w * point.value;
+			}
+			return weight ? total / weight : 0;
+		};
+	}
+	/** Iso-bands sampled every `step` degrees: spherical polygons to fill, and lines that stop at the grid edge. */
+	bands(step, thresholds) {
+		const width = Math.round(360 / step) + 1, height = Math.round(180 / step) + 1;
+		const grid = new Float64Array(width * height);
+		for (let j = 0; j < height; j++) for (let i = 0; i < width; i++) grid[i + j * width] = this.at(-180 + i * step, 90 - j * step);
+		blur2({
+			data: grid,
+			width,
+			height
+		}, 1);
+		const [low = 0, top = 1] = extent(grid);
+		const levels = range(1, thresholds + 1).map((i) => low + (top - low) * i / (thresholds + 1));
+		const place = ([x, y]) => [Math.min(180, Math.max(-180, -180 + (x - .5) * step)), Math.min(90, Math.max(-90, 90 - (y - .5) * step))];
+		const edge = ([x, y]) => x <= .5 || x >= width - .5 || y <= .5 || y >= height - .5;
+		return contours().size([width, height]).thresholds(levels)(Array.from(grid)).filter((band) => band.coordinates.length).map((band) => ({
+			value: band.value,
+			geometry: {
+				type: "MultiPolygon",
+				coordinates: band.coordinates.map((polygon) => polygon.map((ring, i) => GeoField.wind(ring.map(place), i === 0)))
+			},
+			lines: {
+				type: "MultiLineString",
+				coordinates: band.coordinates.flat().flatMap((ring) => GeoField.split(ring, edge).map((part) => part.map(place)))
+			}
+		}));
+	}
+	/** d3-geo reads ring direction on the sphere: exteriors run clockwise, holes anticlockwise. */
+	static wind(ring, exterior) {
+		let area = 0;
+		ring.forEach(([x, y], i) => {
+			const [u, v] = ring[(i + 1) % ring.length];
+			area += x * v - u * y;
+		});
+		return area > 0 === exterior ? ring.slice().reverse() : ring;
+	}
+	/** Breaks a closed ring wherever it runs along the grid boundary, which is not an iso-line. */
+	static split(ring, edge) {
+		const parts = [];
+		let part = [];
+		ring.forEach((point) => {
+			if (edge(point)) {
+				if (part.length > 1) parts.push(part);
+				part = [];
+			} else part.push(point);
+		});
+		if (part.length > 1) parts.push(part);
+		return parts;
+	}
+};
+export { GeoField, GeoInterpolation, GeoKernel };

package/dist/charts/geomaps/GeoLand.js

@@ -0,0 +1,29 @@
+import { WorldSample } from "../../data/WorldSample.js";
+import { geoBounds, geoContains } from "d3";
+// src/charts/geomaps/GeoLand.ts
+var hits = /* @__PURE__ */ new WeakMap();
+/** Shared land geometry: the bundled world outline and fast point-in-land tests. */
+var GeoLand = class {
+	static bundled = null;
+	/** Natural Earth 110m countries, shared by every map that needs a backdrop. */
+	static get world() {
+		return this.bundled ??= WorldSample.countries();
+	}
+	static boxes(collection) {
+		let boxes = hits.get(collection);
+		if (!boxes) hits.set(collection, boxes = collection.features.map((feature) => ({
+			feature,
+			box: geoBounds(feature)
+		})));
+		return boxes;
+	}
+	static boxContains([[west, south], [east, north]], lon, lat) {
+		if (lat < south || lat > north) return false;
+		return west <= east ? lon >= west && lon <= east : lon >= west || lon <= east;
+	}
+	/** The feature under a point, or undefined over water. */
+	static at(collection, lon, lat) {
+		return this.boxes(collection).find(({ feature, box }) => this.boxContains(box, lon, lat) && geoContains(feature, [lon, lat]))?.feature;
+	}
+};
+export { GeoLand };

package/dist/charts/geomaps/GeoLegend.js

@@ -0,0 +1,56 @@
+import { Scales } from "../../core/Scales.js";
+import { range, scaleLinear } from "d3";
+// src/charts/geomaps/GeoLegend.ts
+var WIDTH = 190;
+var SWATCH = 8;
+var CHAR = 6.2;
+var fmt = (value, reach) => Scales.format(value, reach);
+/** Keys drawn inside the plot, in the strip `GeoChart.keyHeight` reserves below the map. */
+var GeoLegend = class {
+	static height = 30;
+	/** A value-positioned ramp: class widths show the data's breaks, so the key differs by method. */
+	static classes(ctx, frame, classes, color, format) {
+		const width = Math.min(WIDTH, ctx.plot.width * .6), y = frame.height + 8;
+		const x = scaleLinear([classes.min, classes.max], [0, width]);
+		const reach = Math.max(Math.abs(classes.min), Math.abs(classes.max));
+		const label = format ?? ((value) => fmt(value, reach));
+		const swatches = classes.classed ? range(classes.bins).map((i) => ({
+			x: x(classes.breaks[i]),
+			w: x(classes.breaks[i + 1]) - x(classes.breaks[i]) - 1,
+			fill: color(classes.center(i))
+		})) : range(20).map((i) => {
+			const value = classes.min + (classes.max - classes.min) * (i + .5) / 20;
+			return {
+				x: width * i / 20,
+				w: width / 20,
+				fill: color(value)
+			};
+		});
+		ctx.marks("key-swatches", "rect", swatches).attr("x", (d) => d.x).attr("y", y).attr("width", (d) => Math.max(.5, d.w)).attr("height", SWATCH).attr("fill", (d) => d.fill);
+		const ticks = classes.classed ? classes.breaks : scaleLinear([classes.min, classes.max], [0, 1]).ticks(4);
+		let edge = -Infinity;
+		const shown = ticks.filter((tick, i) => {
+			const at = x(tick), half = label(tick).length * CHAR / 2;
+			if (at - half < edge && i !== ticks.length - 1) return false;
+			edge = at + half + 4;
+			return true;
+		});
+		ctx.text(ctx.marks("key-ticks", "text", shown, (d) => d).attr("x", (d) => x(d)).attr("y", y + SWATCH + 12).attr("text-anchor", "middle").text(label), 10, "muted");
+	}
+	/** Nested symbols in the map's lower left corner, sharing a baseline: real sizes, labelled by value. */
+	static nested(ctx, frame, entries, shape, { up = 1, down = 1, side = 1 } = {}) {
+		const big = Math.max(0, ...entries.map((entry) => entry.radius)) * side;
+		const base = frame.height - 2, reach = Math.max(0, ...entries.map((entry) => entry.value));
+		ctx.marks("key-sizes", "path", entries, (d) => d.value).attr("d", (d) => shape(d.radius)).attr("transform", (d) => `translate(${big + 1},${base - d.radius * down})`).attr("fill", "none").attr("stroke", ctx.theme.inkMuted).attr("stroke-width", 1);
+		let above = base + 11;
+		const rows = [...entries].reverse().map((entry) => {
+			above = Math.min(base - entry.radius * (up + down) + 4, above - 11);
+			return {
+				...entry,
+				y: above
+			};
+		});
+		ctx.text(ctx.marks("key-size-labels", "text", rows, (d) => d.value).attr("x", big * 2 + 6).attr("y", (d) => d.y).text((d) => fmt(d.value, reach)), 10, "muted");
+	}
+};
+export { GeoLegend };

package/dist/charts/geomaps/GeoProjection.js

@@ -0,0 +1,159 @@
+import { geoAlbers, geoAlbersUsa, geoAzimuthalEqualArea, geoAzimuthalEquidistant, geoConicConformal, geoConicEquidistant, geoEqualEarth, geoEquirectangular, geoGnomonic, geoGraticule, geoMercator, geoNaturalEarth1, geoOrthographic, geoStereographic } from "d3";
+import { geoAitoff, geoArmadillo, geoBerghaus, geoBertin1953, geoBonne, geoCylindricalEqualArea, geoEckert4, geoEckert6, geoHammer, geoHealpix, geoInterruptedHomolosine, geoInterruptedMollweide, geoInterruptedSinusoidal, geoKavrayskiy7, geoLoximuthal, geoMiller, geoMollweide, geoNaturalEarth2, geoPatterson, geoPeirceQuincuncial, geoPolyconic, geoPolyhedralButterfly, geoPolyhedralWaterman, geoRobinson, geoSatellite, geoSinusoidal, geoTimes, geoVanDerGrinten, geoWagner6, geoWinkel3 } from "d3-geo-projection";
+// src/charts/geomaps/GeoProjection.ts
+var GeoProjectionKind = /* @__PURE__ */ function(GeoProjectionKind) {
+	GeoProjectionKind["NaturalEarth"] = "natural-earth";
+	GeoProjectionKind["NaturalEarth2"] = "natural-earth-2";
+	GeoProjectionKind["EqualEarth"] = "equal-earth";
+	GeoProjectionKind["Robinson"] = "robinson";
+	GeoProjectionKind["WinkelTripel"] = "winkel-tripel";
+	GeoProjectionKind["Mollweide"] = "mollweide";
+	GeoProjectionKind["Hammer"] = "hammer";
+	GeoProjectionKind["Aitoff"] = "aitoff";
+	GeoProjectionKind["Eckert4"] = "eckert-4";
+	GeoProjectionKind["Eckert6"] = "eckert-6";
+	GeoProjectionKind["Wagner6"] = "wagner-6";
+	GeoProjectionKind["Kavrayskiy7"] = "kavrayskiy-7";
+	GeoProjectionKind["Patterson"] = "patterson";
+	GeoProjectionKind["Times"] = "times";
+	GeoProjectionKind["Sinusoidal"] = "sinusoidal";
+	GeoProjectionKind["Loximuthal"] = "loximuthal";
+	GeoProjectionKind["Equirectangular"] = "equirectangular";
+	GeoProjectionKind["Mercator"] = "mercator";
+	GeoProjectionKind["Miller"] = "miller";
+	GeoProjectionKind["GallPeters"] = "gall-peters";
+	GeoProjectionKind["Bertin"] = "bertin-1953";
+	GeoProjectionKind["VanDerGrinten"] = "van-der-grinten";
+	GeoProjectionKind["InterruptedHomolosine"] = "interrupted-homolosine";
+	GeoProjectionKind["InterruptedMollweide"] = "interrupted-mollweide";
+	GeoProjectionKind["InterruptedSinusoidal"] = "interrupted-sinusoidal";
+	GeoProjectionKind["Butterfly"] = "butterfly";
+	GeoProjectionKind["Waterman"] = "waterman";
+	GeoProjectionKind["Berghaus"] = "berghaus";
+	GeoProjectionKind["Healpix"] = "healpix";
+	GeoProjectionKind["Quincuncial"] = "peirce-quincuncial";
+	GeoProjectionKind["Armadillo"] = "armadillo";
+	GeoProjectionKind["Orthographic"] = "orthographic";
+	GeoProjectionKind["Stereographic"] = "stereographic";
+	GeoProjectionKind["AzimuthalEqualArea"] = "azimuthal-equal-area";
+	GeoProjectionKind["AzimuthalEquidistant"] = "azimuthal-equidistant";
+	GeoProjectionKind["Gnomonic"] = "gnomonic";
+	GeoProjectionKind["Satellite"] = "satellite";
+	GeoProjectionKind["Albers"] = "albers";
+	GeoProjectionKind["ConicConformal"] = "conic-conformal";
+	GeoProjectionKind["ConicEquidistant"] = "conic-equidistant";
+	GeoProjectionKind["Bonne"] = "bonne";
+	GeoProjectionKind["Polyconic"] = "polyconic";
+	GeoProjectionKind["AlbersUsa"] = "albers-usa";
+	return GeoProjectionKind;
+}({});
+/** What the map is fitted to. `Auto` shows the whole sphere for world-spanning data and zooms to anything smaller. */
+var GeoFraming = /* @__PURE__ */ function(GeoFraming) {
+	GeoFraming["Auto"] = "auto";
+	GeoFraming["Sphere"] = "sphere";
+	GeoFraming["Data"] = "data";
+	return GeoFraming;
+}({});
+var K = GeoProjectionKind;
+var SATELLITE = 1.7;
+var FACTORIES = {
+	[K.NaturalEarth]: geoNaturalEarth1,
+	[K.NaturalEarth2]: geoNaturalEarth2,
+	[K.EqualEarth]: geoEqualEarth,
+	[K.Robinson]: geoRobinson,
+	[K.WinkelTripel]: geoWinkel3,
+	[K.Mollweide]: geoMollweide,
+	[K.Hammer]: geoHammer,
+	[K.Aitoff]: geoAitoff,
+	[K.Eckert4]: geoEckert4,
+	[K.Eckert6]: geoEckert6,
+	[K.Wagner6]: geoWagner6,
+	[K.Kavrayskiy7]: geoKavrayskiy7,
+	[K.Patterson]: geoPatterson,
+	[K.Times]: geoTimes,
+	[K.Sinusoidal]: geoSinusoidal,
+	[K.Loximuthal]: geoLoximuthal,
+	[K.Equirectangular]: geoEquirectangular,
+	[K.Mercator]: geoMercator,
+	[K.Miller]: geoMiller,
+	[K.GallPeters]: () => geoCylindricalEqualArea().parallel(45),
+	[K.Bertin]: geoBertin1953,
+	[K.VanDerGrinten]: geoVanDerGrinten,
+	[K.InterruptedHomolosine]: geoInterruptedHomolosine,
+	[K.InterruptedMollweide]: geoInterruptedMollweide,
+	[K.InterruptedSinusoidal]: geoInterruptedSinusoidal,
+	[K.Butterfly]: geoPolyhedralButterfly,
+	[K.Waterman]: geoPolyhedralWaterman,
+	[K.Berghaus]: geoBerghaus,
+	[K.Healpix]: () => geoHealpix().lobes(2),
+	[K.Quincuncial]: geoPeirceQuincuncial,
+	[K.Armadillo]: () => geoArmadillo().parallel(20),
+	[K.Orthographic]: () => geoOrthographic().rotate([-15, -25]).clipAngle(90),
+	[K.Stereographic]: () => geoStereographic().rotate([-15, -25]).clipAngle(120),
+	[K.AzimuthalEqualArea]: () => geoAzimuthalEqualArea().rotate([-15, -25]),
+	[K.AzimuthalEquidistant]: () => geoAzimuthalEquidistant().rotate([-15, -25]),
+	[K.Gnomonic]: () => geoGnomonic().rotate([-15, -35]).clipAngle(62),
+	[K.Satellite]: () => geoSatellite().distance(SATELLITE).tilt(20).rotate([-15, -35]).clipAngle(Math.acos(1 / SATELLITE) * 180 / Math.PI - .001),
+	[K.Albers]: () => geoAlbers().rotate([-15, 0]).center([0, 0]).parallels([20, 60]),
+	[K.ConicConformal]: () => geoConicConformal().rotate([-15, 0]).center([0, 0]).parallels([30, 60]).clipAngle(120),
+	[K.ConicEquidistant]: () => geoConicEquidistant().rotate([-15, 0]).center([0, 0]).parallels([20, 60]),
+	[K.Bonne]: () => geoBonne().parallel(45),
+	[K.Polyconic]: geoPolyconic,
+	[K.AlbersUsa]: () => geoAlbersUsa()
+};
+var AZIMUTHAL = /* @__PURE__ */ new Set([
+	K.Orthographic,
+	K.Stereographic,
+	K.AzimuthalEqualArea,
+	K.AzimuthalEquidistant,
+	K.Gnomonic,
+	K.Satellite
+]);
+var CONIC = /* @__PURE__ */ new Set([
+	K.Albers,
+	K.ConicConformal,
+	K.ConicEquidistant
+]);
+var UNBOUNDED_POLES = /* @__PURE__ */ new Set([K.Mercator]);
+var LOBED = /* @__PURE__ */ new Set([
+	K.InterruptedHomolosine,
+	K.InterruptedMollweide,
+	K.InterruptedSinusoidal,
+	K.Butterfly,
+	K.Waterman,
+	K.Healpix,
+	K.Armadillo
+]);
+/** Builds, centres and fits d3 projections from `GeoProjectionKind`. */
+var GeoProjections = class GeoProjections {
+	/** Every projection that shows the whole world, for atlases and projection pickers. */
+	static world = Object.values(GeoProjectionKind).filter((kind) => kind !== K.AlbersUsa && kind !== K.ConicConformal);
+	static create(kind) {
+		return typeof kind === "string" ? FACTORIES[kind]() : kind;
+	}
+	/** True when the poles run to infinity, so the view must be clipped to a band. */
+	static unbounded(kind) {
+		return typeof kind === "string" && UNBOUNDED_POLES.has(kind);
+	}
+	/** True when polygons crossing a lobe boundary can leak: d3 fills the gap, so the map is masked to the sphere. */
+	static lobed(kind) {
+		return typeof kind === "string" && LOBED.has(kind);
+	}
+	/** Geometry to fit for a world view: the sphere, or a latitude band for unbounded projections. */
+	static outline(kind) {
+		if (this.unbounded(kind)) return geoGraticule().extent([[-180, -62], [180, 84]]).outline();
+		return { type: "Sphere" };
+	}
+	static rotate(projection, rotation) {
+		projection.rotate?.(rotation);
+	}
+	/** Centre on a lon/lat box so regional maps stay undistorted and antimeridian-safe. */
+	static center(projection, kind, [[west, south], [east, north]]) {
+		if (typeof kind !== "string" || kind === K.AlbersUsa) return;
+		const lon = (west + (east < west ? east + 360 : east)) / 2, lat = (south + north) / 2;
+		if (AZIMUTHAL.has(kind)) return GeoProjections.rotate(projection, [-lon, -lat]);
+		GeoProjections.rotate(projection, [-lon, 0]);
+		if (CONIC.has(kind)) projection.parallels([south + (north - south) / 6, north - (north - south) / 6]);
+	}
+};
+export { GeoFraming, GeoProjectionKind, GeoProjections };

package/dist/charts/geomaps/GeoSamples.js

@@ -0,0 +1,140 @@
+import { GeoAtlas } from "../../data/GeoAtlas.js";
+import { SampleData } from "../../data/SampleData.js";
+import { WorldSample } from "../../data/WorldSample.js";
+import { GeoLand } from "./GeoLand.js";
+import { geoArea, geoCentroid } from "d3";
+// src/charts/geomaps/GeoSamples.ts
+var continent = (lon, lat) => {
+	if (lon < -30) return lat > 13 ? "North America" : "South America";
+	if (lon < 60) {
+		if (lat > 36) return "Europe";
+		return lon > 36 && lat > 12 ? "Asia" : "Africa";
+	}
+	return lon > 110 && lat < -10 ? "Oceania" : "Asia";
+};
+/** Stable noise for an id, so a shape keeps its demo value between draws. */
+var jitter = (id, seed) => {
+	let hash = seed * 2654435761;
+	for (const char of id) hash = Math.imul(hash ^ char.charCodeAt(0), 16777619);
+	return (hash >>> 0) % 1e3 / 1e3;
+};
+/** Reshapes `SampleData` into spatially coherent demo data, so sample maps show real geographic pattern. */
+var GeoSamples = class GeoSamples {
+	/** Gives any shapes a smooth demo `value`, 0 to 100. */
+	static shaded(collection, seed) {
+		return {
+			...collection,
+			demo: true,
+			features: collection.features.map((feature) => {
+				const [lon, lat] = geoCentroid(feature);
+				const wave = .5 + .5 * Math.sin(lon / 7 + seed) * Math.cos(lat / 6 - seed);
+				return {
+					...feature,
+					properties: {
+						...feature.properties,
+						value: Math.round(78 * wave + 22 * jitter(String(feature.id), seed))
+					}
+				};
+			})
+		};
+	}
+	/** The 50 states and DC with demo values. */
+	static usStates(seed) {
+		const { states } = GeoAtlas;
+		return GeoSamples.shaded({
+			...states,
+			features: states.features.filter((state) => +state.id <= 56)
+		}, seed);
+	}
+	/** World regions with `value`, `other` and `group`; Antarctica has no data, as real datasets rarely do. */
+	static regions(seed) {
+		const world = WorldSample.countries(seed), noise = WorldSample.countries(seed + 7);
+		return {
+			...world,
+			features: world.features.map((feature, i) => {
+				const [lon, lat] = geoCentroid(feature);
+				const north = Math.min(1, Math.abs(lat) / 66), wave = .5 + .5 * Math.sin(lon / 38 + seed);
+				const known = feature.properties?.name !== "Antarctica";
+				return {
+					...feature,
+					properties: {
+						...feature.properties,
+						value: known ? Math.round(64 * north + 22 * wave + .14 * feature.properties.value) : null,
+						other: known ? Math.round(56 * wave + 30 * (1 - north) + .14 * noise.features[i].properties.value) : null,
+						group: known ? continent(lon, lat) : null
+					}
+				};
+			})
+		};
+	}
+	/** Regions without Antarctica, for maps that give every region equal weight. */
+	static inhabited(seed) {
+		const regions = this.regions(seed);
+		return {
+			...regions,
+			features: regions.features.filter((feature) => feature.properties?.value !== null)
+		};
+	}
+	/** `regions` as totals rather than rates: `value` grows with land area, as counts do. */
+	static totals(seed) {
+		const regions = this.regions(seed);
+		return {
+			...regions,
+			features: regions.features.map((feature) => {
+				const rate = feature.properties?.value;
+				return {
+					...feature,
+					properties: {
+						...feature.properties,
+						value: rate === null ? null : Math.max(.1, +(rate * 30 * geoArea(feature) ** .75).toFixed(1))
+					}
+				};
+			})
+		};
+	}
+	/** Twenty cities, tagged by continent. */
+	static cities(seed) {
+		return SampleData.cities(seed).map((city) => ({
+			...city,
+			group: continent(+city.lon, +city.lat)
+		}));
+	}
+	/** Points clustered around the cities and kept on land; `value` falls away from each centre. */
+	static scatter(seed, count) {
+		const cities = SampleData.cities(seed), world = GeoLand.world;
+		return SampleData.points(seed, count * 4, 3).flatMap((point, i) => {
+			const city = cities[i * 7 % cities.length];
+			const dx = (+point.x - 20 - i % 3 * 22) * 1.3, dy = (+point.y - .8 * +point.x - 10) * 1.2;
+			const lon = +city.lon + dx, lat = +city.lat + dy;
+			if (!GeoLand.at(world, lon, lat)) return [];
+			const fall = Math.exp(-Math.hypot(dx, dy) / 12);
+			return [{
+				name: `${city.name} ${i + 1}`,
+				lon: +lon.toFixed(2),
+				lat: +lat.toFixed(2),
+				value: Math.round(4 + (+city.value + +point.size) * fall),
+				group: point.group
+			}];
+		}).slice(0, count);
+	}
+	/** Long-form `{ name, lon, lat, series, value }`: one row per city and series. */
+	static cityParts(seed) {
+		const parts = SampleData.categories(seed, 12, 4);
+		return SampleData.cities(seed).flatMap((city, c) => [
+			0,
+			1,
+			2,
+			3
+		].map((s) => {
+			const part = parts[(c * 4 + s) % parts.length];
+			return {
+				name: city.name,
+				lon: city.lon,
+				lat: city.lat,
+				series: part.series,
+				value: Math.round(+part.value * +city.value / 40)
+			};
+		}));
+	}
+};
+export { GeoSamples };

package/dist/charts/geomaps/GeoViewport.js

@@ -0,0 +1,148 @@
+import { ZoomControls } from "../../core/ZoomControls.js";
+import { zoom, zoomIdentity, zoomTransform } from "d3";
+// src/charts/geomaps/GeoViewport.ts
+var SCALE_VAR = "--geo-unzoom";
+/** Marks placed by translation. Groups opt in with `data-geo-pin`, since most groups are layouts rather than symbols. */
+var PLACED = "path[transform^=\"translate(\"],circle[transform^=\"translate(\"],rect[transform^=\"translate(\"],text[transform^=\"translate(\"],use[transform^=\"translate(\"],[data-geo-pin]";
+var TRANSLATE = /^translate\(\s*(-?[\d.e+-]+)[ ,]+(-?[\d.e+-]+)?\s*\)/;
+var unpinnedParent = function() {
+	return !this.closest("clipPath") && !this.parentElement?.closest("[data-geo-pin]");
+};
+var clips = 0;
+/** Pan, zoom and fit for a map: gesture handling, on-screen controls and the transformed layer. */
+var GeoViewport = class {
+	#host;
+	#clipId = `geo-view-${++clips}`;
+	#behavior = null;
+	#root = null;
+	#view = null;
+	#bound = null;
+	#active = false;
+	#setup = null;
+	#size = "";
+	constructor(host) {
+		this.#host = host;
+	}
+	get scale() {
+		return this.transform.k;
+	}
+	get transform() {
+		const node = this.#root?.node();
+		return node ? zoomTransform(node) : zoomIdentity;
+	}
+	/** Prepares the layer marks draw into, and returns the context for it. */
+	attach(ctx, setup) {
+		if (setup.enabled !== this.#active) {
+			ctx.root.selectAll("*").remove();
+			if (!setup.enabled) ctx.root.on(".zoom", null).property("__zoom", zoomIdentity);
+			this.#bound = null;
+			this.#active = setup.enabled;
+		}
+		this.#setup = setup;
+		if (!setup.enabled) return ctx;
+		const { width, height, limits } = setup, node = ctx.root.node();
+		const size = `${width}x${height}`;
+		if (this.#size && size !== this.#size) node.__zoom = zoomIdentity;
+		this.#size = size;
+		this.#root = ctx.root;
+		const behavior = this.#behavior ??= zoom().on("start", () => {
+			if (this.#setup?.pinned && !this.#setup.semantic) this.#pin();
+		}).on("zoom", ({ transform }) => this.#moved(transform, false)).on("end", ({ transform }) => this.#moved(transform, true));
+		behavior.extent([[0, 0], [width, height]]).scaleExtent(limits.scale).translateExtent(limits.pan);
+		if (this.#bound !== node) {
+			ctx.root.call(behavior);
+			this.#bound = node;
+		}
+		ctx.marks("zoom-hit", "rect", [0]).attr("width", width).attr("height", height).attr("fill", "transparent").style("cursor", "grab");
+		ctx.marks("view-clip", "clipPath", [0]).attr("id", this.#clipId).selectAll("rect").data([0]).join("rect").attr("width", width).attr("height", height);
+		this.#view = ctx.group("view-frame").attr("clip-path", `url(#${this.#clipId})`).call((frame) => ctx.group("view", frame)).select(":scope > g.m-view");
+		return ctx.within(this.#view);
+	}
+	/** Call after drawing: readies the new marks for zooming and draws the controls on `ctx`. */
+	finish(ctx) {
+		if (!this.#active || !this.#view) return;
+		const view = this.#view, { pinned, semantic } = this.#setup;
+		view.selectAll("path,line,rect,circle,ellipse,polyline,polygon").attr("vector-effect", "non-scaling-stroke");
+		if (pinned && !semantic) this.#pin();
+		this.#apply(this.transform);
+		this.#controls(ctx);
+	}
+	/**
+	* Holds dots, symbols and labels at their drawn size while the map scales. The browser applies
+	* `scale` outside the `transform` attribute, so each mark scales about its own position.
+	*/
+	#pin() {
+		const unzoom = `var(${SCALE_VAR}, 1)`;
+		this.#view.selectAll("circle:not([transform]),text:not([transform])").filter(unpinnedParent).style("transform-box", "fill-box").style("transform-origin", "center").style("scale", unzoom);
+		this.#view.selectAll(PLACED).filter(unpinnedParent).each(function() {
+			const [, x, y] = TRANSLATE.exec(this.getAttribute("transform") ?? "") ?? [];
+			if (x === void 0) return;
+			this.style.transformOrigin = `${x}px ${y ?? 0}px`;
+			this.style.setProperty("scale", unzoom);
+		});
+	}
+	zoomIn() {
+		return this.#scaleBy(2);
+	}
+	zoomOut() {
+		return this.#scaleBy(.5);
+	}
+	reset(smooth = this.#setup?.smooth) {
+		return this.#go(zoomIdentity, smooth);
+	}
+	/** Frames a pixel box, as measured in the unzoomed map. */
+	fit([[x0, y0], [x1, y1]], smooth = this.#setup?.smooth) {
+		const setup = this.#setup;
+		if (!setup || !Number.isFinite(x0 + y0 + x1 + y1)) return Promise.resolve();
+		const { width, height, limits: { scale: [low, high] } } = setup;
+		const k = Math.max(low, Math.min(high, .88 / Math.max((x1 - x0) / width, (y1 - y0) / height)));
+		return this.#go(zoomIdentity.translate(width / 2, height / 2).scale(k).translate(-(x0 + x1) / 2, -(y0 + y1) / 2), smooth);
+	}
+	#scaleBy(factor) {
+		const { k } = this.transform, setup = this.#setup;
+		if (!setup) return Promise.resolve();
+		const { width, height, limits: { scale: [low, high] } } = setup, next = Math.max(low, Math.min(high, k * factor));
+		const [cx, cy] = this.transform.invert([width / 2, height / 2]);
+		return this.#go(zoomIdentity.translate(width / 2, height / 2).scale(next).translate(-cx, -cy), setup.smooth);
+	}
+	async #go(transform, smooth) {
+		const root = this.#root, behavior = this.#behavior;
+		if (!root || !behavior) return;
+		if (!smooth) {
+			root.call(behavior.transform, transform);
+			return;
+		}
+		await root.transition().duration(460).call(behavior.transform, transform).end().catch(() => void 0);
+	}
+	#apply({ x, y, k }) {
+		if (this.#setup?.semantic) return;
+		this.#view?.attr("transform", `translate(${x},${y}) scale(${k})`).style(SCALE_VAR, 1 / k);
+	}
+	#moved(transform, settled) {
+		this.#apply(transform);
+		this.#host.viewMoved(transform, settled);
+	}
+	#controls(ctx) {
+		ZoomControls.draw(ctx, this.#setup.width, [
+			{
+				key: "in",
+				glyph: "+",
+				label: "Zoom in",
+				run: () => void this.zoomIn()
+			},
+			{
+				key: "out",
+				glyph: "−",
+				label: "Zoom out",
+				run: () => void this.zoomOut()
+			},
+			{
+				key: "reset",
+				glyph: "⟲",
+				label: "Reset view",
+				run: () => void this.reset()
+			}
+		]);
+	}
+};
+export { GeoViewport };