@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/geomaps/LabelledMap.js

@@ -0,0 +1,247 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { PointMap } from "./PointMap.js";
+import { descending } from "d3";
+// src/charts/geomaps/LabelledMap.ts
+/** Fixed sets the label to the right; Best tries eight positions; Leader pulls labels clear on a thin line. */
+var GeoLabelPlacement = /* @__PURE__ */ function(GeoLabelPlacement) {
+	GeoLabelPlacement["Best"] = "best";
+	GeoLabelPlacement["Fixed"] = "fixed";
+	GeoLabelPlacement["Leader"] = "leader";
+	return GeoLabelPlacement;
+}({});
+var GeoLabelSubject = /* @__PURE__ */ function(GeoLabelSubject) {
+	GeoLabelSubject["Places"] = "places";
+	GeoLabelSubject["Regions"] = "regions";
+	GeoLabelSubject["Both"] = "both";
+	return GeoLabelSubject;
+}({});
+var CHAR = 6.2;
+var LINE = 13;
+var overlaps = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+/** Reference map with collision-free labels, ranked by importance: orient readers before showing data. */
+var LabelledMap = class extends PointMap {
+	static meta = {
+		id: "labelled-map",
+		name: "Labelled reference map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Names places and regions with greedy, collision-free label placement ranked by value, for orientation.",
+		tags: [
+			"map",
+			"reference",
+			"labels",
+			"atlas",
+			"annotation"
+		],
+		sample: (seed) => GeoSamples.cities(seed),
+		variants: {
+			placement: [
+				"best",
+				"fixed",
+				"leader"
+			],
+			subject: [
+				"places",
+				"regions",
+				"both"
+			],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Bertin
+			]
+		},
+		valid: (values) => values.subject !== "regions" || values.placement === "best"
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			placement: "best",
+			subject: "places",
+			graticule: true
+		};
+	}
+	candidates(dot) {
+		const { placement } = this.options, gap = dot + 3;
+		if (placement === "fixed") return [[
+			gap,
+			4,
+			"start"
+		]];
+		if (placement === "leader") {
+			const far = gap + 16;
+			return [
+				[
+					far,
+					-far * .6,
+					"start"
+				],
+				[
+					-far,
+					-far * .6,
+					"end"
+				],
+				[
+					far,
+					far * .8,
+					"start"
+				],
+				[
+					-far,
+					far * .8,
+					"end"
+				],
+				[
+					far * 1.5,
+					4,
+					"start"
+				],
+				[
+					-far * 1.5,
+					4,
+					"end"
+				]
+			];
+		}
+		return [
+			[
+				gap,
+				4,
+				"start"
+			],
+			[
+				-gap,
+				4,
+				"end"
+			],
+			[
+				0,
+				-gap,
+				"middle"
+			],
+			[
+				0,
+				gap + 9,
+				"middle"
+			],
+			[
+				gap - 1,
+				-gap + 1,
+				"start"
+			],
+			[
+				1 - gap,
+				-gap + 1,
+				"end"
+			],
+			[
+				gap - 1,
+				gap + 7,
+				"start"
+			],
+			[
+				1 - gap,
+				gap + 7,
+				"end"
+			]
+		];
+	}
+	placeLabels(frame, sites, dot) {
+		const { subject, placement } = this.options;
+		const blocked = sites.map((d) => ({
+			x: d.x - dot,
+			y: d.y - dot,
+			w: dot * 2,
+			h: dot * 2
+		}));
+		const labels = [];
+		const fits = (box) => box.x >= 0 && box.y >= 0 && box.x + box.w <= frame.width && box.y + box.h <= frame.height && !blocked.some((other) => overlaps({
+			...box,
+			x: box.x - 3,
+			w: box.w + 6
+		}, other));
+		const boxOf = (x, y, width, anchor) => ({
+			x: anchor === "start" ? x : anchor === "end" ? x - width : x - width / 2,
+			y: y - LINE + 3,
+			w: width,
+			h: LINE
+		});
+		if (subject !== "regions") for (const site of [...sites].sort((a, b) => descending(a.value, b.value))) {
+			const width = site.name.length * CHAR;
+			for (const [dx, dy, anchor] of this.candidates(dot)) {
+				const textX = site.x + dx, textY = site.y + dy, box = boxOf(textX, textY, width, anchor);
+				if (!fits(box)) continue;
+				blocked.push(box);
+				labels.push({
+					...box,
+					key: `p${site.key}`,
+					text: site.name,
+					anchor,
+					textX,
+					textY,
+					tone: "ink",
+					from: placement === "leader" ? [site.x, site.y] : void 0
+				});
+				break;
+			}
+		}
+		if (subject !== "places") {
+			const regions = this.land.features.map((feature) => ({
+				feature,
+				area: frame.path.area(feature),
+				name: String(feature.properties?.name ?? ""),
+				bounds: frame.path.bounds(feature)
+			})).sort((a, b) => descending(a.area, b.area));
+			for (const { feature, name, bounds } of regions) {
+				const at = frame.anchor(feature), width = name.length * CHAR;
+				if (!at || !name || width > (bounds[1][0] - bounds[0][0]) * 1.35) continue;
+				const box = boxOf(at[0], at[1] + 4, width, "middle");
+				if (!fits(box)) continue;
+				blocked.push(box);
+				labels.push({
+					...box,
+					key: `r${name}`,
+					text: name,
+					anchor: "middle",
+					textX: at[0],
+					textY: at[1] + 4,
+					tone: "secondary"
+				});
+			}
+		}
+		return labels;
+	}
+	drawMap(ctx, frame) {
+		const { subject, value } = this.options, { theme } = ctx, dot = 4;
+		const lands = ctx.marks("land", "path", this.land.features, (d, i) => String(d.id ?? i)).attr("fill", theme.grid).attr("stroke", theme.surface).attr("stroke-width", this.hairline(ctx));
+		this.fill(ctx, lands, (d) => frame.path(d) ?? "");
+		ctx.hover(lands, (d) => ({ title: String(d.properties?.name ?? "") }));
+		const sites = subject === "regions" ? [] : this.sites(frame);
+		const labels = this.placeLabels(frame, sites, dot);
+		ctx.marks("leaders", "line", labels.filter((d) => d.from), (d) => d.key).attr("x1", (d) => d.from[0]).attr("y1", (d) => d.from[1]).attr("x2", (d) => d.textX).attr("y2", (d) => d.textY - 4).attr("stroke", theme.inkMuted).attr("stroke-width", 1);
+		const fill = ctx.palette.color(value);
+		const dots = ctx.marks("places", "circle", sites, (d) => d.key).attr("fill", fill).attr("stroke", theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: dot
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		}, 10);
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [[value, d.value]]
+		}));
+		const text = ctx.marks("labels", "text", labels, (d) => d.key).attr("x", (d) => d.textX).attr("y", (d) => d.textY).attr("text-anchor", (d) => d.anchor).attr("pointer-events", "none").text((d) => d.text);
+		this.halo(ctx, ctx.text(text, 11).attr("fill", (d) => d.tone === "ink" ? theme.ink : theme.inkSecondary));
+	}
+};
+export { GeoLabelPlacement, GeoLabelSubject, LabelledMap };

package/dist/charts/geomaps/NonContiguousCartogram.js

@@ -0,0 +1,75 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { descending, quantile } from "d3";
+// src/charts/geomaps/NonContiguousCartogram.ts
+/** Olson's cartogram: each region shrinks in place until its area shows its value, keeping its true shape. */
+var NonContiguousCartogram = class extends RegionMap {
+	static meta = {
+		id: "non-contiguous-cartogram",
+		name: "Non-contiguous cartogram",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Scales each region about its centre so drawn area matches value, keeping shapes recognisable.",
+		tags: [
+			"map",
+			"cartogram",
+			"olson",
+			"value by area"
+		],
+		sample: (seed) => GeoSamples.totals(seed),
+		variants: {
+			reference: [
+				.9,
+				1,
+				.7
+			],
+			ghost: [true, false],
+			projection: [
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Robinson
+			],
+			graticule: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			reference: .9,
+			ghost: true,
+			projection: GeoProjectionKind.EqualEarth
+		};
+	}
+	drawMap(ctx, frame) {
+		const { theme, palette } = ctx, { ghost, reference, value } = this.options;
+		const regions = this.known(this.regions()).flatMap((region) => {
+			const area = frame.path.area(region.feature), at = frame.anchor(region.feature);
+			return at && area > 0 ? [{
+				...region,
+				area,
+				density: Math.abs(region.value) / area,
+				x: at[0],
+				y: at[1]
+			}] : [];
+		});
+		const full = quantile(regions.map((d) => d.density).sort((a, b) => a - b), reference) || 1;
+		const placed = regions.map((d) => ({
+			...d,
+			scale: Math.min(1, Math.sqrt(d.density / full))
+		})).sort((a, b) => descending(a.area, b.area));
+		ctx.marks("ghost", "path", ghost ? placed : [], (d) => d.key).attr("d", (d) => frame.path(d.feature) ?? "").attr("fill", "none").attr("stroke", theme.axis).attr("stroke-width", .5);
+		const fill = palette.color(value);
+		const shapes = ctx.marks("regions", "path", placed, (d) => d.key).attr("fill", fill).attr("d", (d) => frame.path(d.feature) ?? "");
+		ctx.set(shapes, { transform: (d) => `translate(${d.x},${d.y}) scale(${d.scale}) translate(${-d.x},${-d.y})` }, { transform: (d) => `translate(${d.x},${d.y}) scale(0) translate(${-d.x},${-d.y})` }, 2);
+		ctx.hover(shapes, (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [[value, d.value], ["Scale", `${Math.round(d.scale * 100)}%`]]
+		}));
+	}
+};
+export { NonContiguousCartogram };

package/dist/charts/geomaps/PieChartMap.js

@@ -0,0 +1,144 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { PointMap } from "./PointMap.js";
+import { arc, descending, group, max, pie, scaleBand, scaleLinear, scaleSqrt, sum } from "d3";
+// src/charts/geomaps/PieChartMap.ts
+var GeoGlyph = /* @__PURE__ */ function(GeoGlyph) {
+	GeoGlyph["Pie"] = "pie";
+	GeoGlyph["Donut"] = "donut";
+	GeoGlyph["Bars"] = "bars";
+	return GeoGlyph;
+}({});
+var GeoGlyphSize = /* @__PURE__ */ function(GeoGlyphSize) {
+	GeoGlyphSize["Total"] = "total";
+	GeoGlyphSize["Fixed"] = "fixed";
+	return GeoGlyphSize;
+}({});
+/** Small composition charts anchored to places: use when the split matters as much as the location. */
+var PieChartMap = class extends PointMap {
+	static meta = {
+		id: "pie-chart-map",
+		name: "Diagram map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Anchors a small pie, donut or bar glyph at each place, to compare composition across geography.",
+		tags: [
+			"map",
+			"pie",
+			"donut",
+			"glyph",
+			"cartodiagram",
+			"composition"
+		],
+		sample: (seed) => GeoSamples.cityParts(seed),
+		variants: {
+			glyph: [
+				"pie",
+				"donut",
+				"bars"
+			],
+			sizing: ["total", "fixed"],
+			dodged: [true, false],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			series: "series",
+			glyph: "pie",
+			sizing: "total",
+			dodged: true,
+			legend: LegendPosition.Top,
+			graticule: false
+		};
+	}
+	glyphs(ctx, frame) {
+		const { name, sizing, dodged } = this.options;
+		const biggest = Math.min(ctx.plot.width, ctx.plot.height) * .075;
+		const rows = this.sites(frame);
+		const groups = [...group(rows, (d) => d.name)].map(([key, members]) => ({
+			key,
+			members,
+			total: sum(members, (d) => Math.abs(d.value))
+		}));
+		const radius = scaleSqrt([0, max(groups, (d) => d.total) || 1], [0, biggest]);
+		const glyphs = groups.map(({ key, members, total }) => {
+			const { x, y } = members[0];
+			return {
+				key,
+				name: String(members[0].row[name] ?? key),
+				total,
+				x,
+				y,
+				homeX: x,
+				homeY: y,
+				r: sizing === "fixed" ? biggest * .7 : Math.max(4, radius(total)),
+				rows: members.map((d) => d.row)
+			};
+		}).sort((a, b) => descending(a.r, b.r));
+		return dodged ? this.dodge(glyphs, frame, 1.5) : glyphs;
+	}
+	drawMap(ctx, frame) {
+		this.drawGround(ctx, frame);
+		const { glyph, series, value } = this.options, { theme, palette } = ctx;
+		const glyphs = this.glyphs(ctx, frame);
+		const moved = glyphs.filter((d) => Math.hypot(d.x - d.homeX, d.y - d.homeY) > d.r * .4);
+		ctx.marks("leaders", "line", moved, (d) => d.key).attr("x1", (d) => d.homeX).attr("y1", (d) => d.homeY).attr("x2", (d) => d.x).attr("y2", (d) => d.y).attr("stroke", theme.inkMuted).attr("stroke-width", 1);
+		const key = (row) => String(row[series]);
+		const parts = glyph === "bars" ? [] : glyphs.flatMap((d) => {
+			const slices = pie().sort(null).value((row) => Math.abs(+row[value]))(d.rows);
+			const shape = arc().innerRadius(glyph === "donut" ? d.r * .55 : 0).outerRadius(d.r).padAngle(.04);
+			return slices.map((slice) => ({
+				id: `${d.key}/${key(slice.data)}`,
+				glyph: d,
+				row: slice.data,
+				d: shape(slice) ?? ""
+			}));
+		});
+		const wedges = ctx.marks("wedges", "path", parts, (d) => d.id).attr("fill", (d) => palette.color(key(d.row))).attr("transform", (d) => `translate(${d.glyph.x},${d.glyph.y})`);
+		this.fill(ctx, wedges, (d) => d.d, 1, 1);
+		ctx.hover(wedges, (d) => ({
+			title: d.glyph.name,
+			color: palette.color(key(d.row)),
+			rows: [[key(d.row), +d.row[value]], ["Total", d.glyph.total]]
+		}));
+		const bars = glyph !== "bars" ? [] : glyphs.flatMap((d) => {
+			const x = scaleBand(d.rows.map(key), [d.x - d.r, d.x + d.r]).padding(.12);
+			const top = max(d.rows, (row) => Math.abs(+row[value])) || 1, y = scaleLinear([0, top], [0, d.r * 2]);
+			return d.rows.map((row) => ({
+				id: `${d.key}/${key(row)}`,
+				glyph: d,
+				row,
+				x: x(key(row)),
+				w: x.bandwidth(),
+				h: y(Math.abs(+row[value]))
+			}));
+		});
+		const rects = ctx.marks("bars", "rect", bars, (d) => d.id).attr("fill", (d) => palette.color(key(d.row))).attr("rx", 1);
+		ctx.set(rects, {
+			x: (d) => d.x,
+			width: (d) => d.w,
+			y: (d) => d.glyph.y + d.glyph.r - d.h,
+			height: (d) => d.h
+		}, {
+			x: (d) => d.x,
+			width: (d) => d.w,
+			y: (d) => d.glyph.y + d.glyph.r,
+			height: 0
+		}, 1);
+		ctx.hover(rects, (d) => ({
+			title: d.glyph.name,
+			color: palette.color(key(d.row)),
+			rows: [[key(d.row), +d.row[value]], ["Total", d.glyph.total]]
+		}));
+	}
+};
+export { GeoGlyph, GeoGlyphSize, PieChartMap };

package/dist/charts/geomaps/PointDensityMap.js

@@ -0,0 +1,109 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { PointMap } from "./PointMap.js";
+import { contourDensity, geoPath, group, max, scaleSqrt } from "d3";
+import { hexbin } from "d3-hexbin";
+// src/charts/geomaps/PointDensityMap.ts
+var GeoBinning = /* @__PURE__ */ function(GeoBinning) {
+	GeoBinning["Hexagon"] = "hexagon";
+	GeoBinning["Square"] = "square";
+	GeoBinning["Contour"] = "contour";
+	return GeoBinning;
+}({});
+/** Shade full cells, or also scale each cell so its area follows its count. */
+var GeoBinEncoding = /* @__PURE__ */ function(GeoBinEncoding) {
+	GeoBinEncoding["Tone"] = "tone";
+	GeoBinEncoding["Area"] = "area";
+	return GeoBinEncoding;
+}({});
+/** Too many points to draw one by one? Count them into cells or density bands and read the concentration. */
+var PointDensityMap = class extends PointMap {
+	static meta = {
+		id: "point-density-map",
+		name: "Point density map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Bins dense point data into hexagons, squares or kernel contours to reveal where records concentrate.",
+		tags: [
+			"map",
+			"hexbin",
+			"density",
+			"kde",
+			"aggregation"
+		],
+		sample: (seed) => GeoSamples.scatter(seed, 900),
+		variants: {
+			binning: [
+				"hexagon",
+				"square",
+				"contour"
+			],
+			encoding: ["tone", "area"],
+			cell: [7, 12],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide
+			],
+			landMask: [false, true]
+		},
+		valid: (values) => values.binning !== "contour" || values.encoding === "tone"
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			binning: "hexagon",
+			encoding: "tone",
+			cell: 7,
+			landMask: false,
+			graticule: false
+		};
+	}
+	bins(sites, frame) {
+		const { binning, cell } = this.options, size = cell * 2;
+		const summarise = (key, x, y, members) => ({
+			key,
+			x,
+			y,
+			count: members.length,
+			total: members.reduce((sum, d) => sum + d.value, 0),
+			sites: members
+		});
+		if (binning === "hexagon") return hexbin().x((d) => d.x).y((d) => d.y).radius(cell).extent([[0, 0], [frame.width, frame.height]])(sites).map((bin) => summarise(`${bin.x},${bin.y}`, bin.x, bin.y, bin));
+		return [...group(sites, (d) => `${Math.floor(d.x / size)},${Math.floor(d.y / size)}`)].map(([key, members]) => {
+			const [u, v] = key.split(",").map(Number);
+			return summarise(key, (u + .5) * size, (v + .5) * size, members);
+		});
+	}
+	cellPath(radius) {
+		if (this.options.binning === "square") return `M${-radius},${-radius}h${radius * 2}v${radius * 2}h${-radius * 2}Z`;
+		return hexbin().hexagon(radius);
+	}
+	drawMap(ctx, frame) {
+		this.drawGround(ctx, frame);
+		const sites = this.sites(frame), { binning, cell, encoding, landMask, value } = this.options;
+		const clip = landMask ? this.clip(ctx, frame.path(this.land) ?? "") : null;
+		const layer = ctx.group("density").attr("clip-path", clip);
+		const contour = binning === "contour";
+		const bands = contour ? contourDensity().x((d) => d.x).y((d) => d.y).size([frame.width, frame.height]).bandwidth(cell * 1.1).thresholds(8)(sites) : [];
+		const top = max(bands, (d) => d.value) || 1, flat = geoPath();
+		const shapes = ctx.marks("bands", "path", bands, (d) => d.value, layer).attr("fill", (d) => ctx.palette.sequential(d.value / top));
+		this.fill(ctx, shapes, (d) => flat(d) ?? "", .85);
+		ctx.hover(shapes, (d) => ({
+			title: "Density band",
+			rows: [["Points per px²", d.value.toFixed(3)]]
+		}));
+		const bins = contour ? [] : this.bins(sites, frame), peak = max(bins, (d) => d.count) || 1;
+		const area = encoding === "area", scale = scaleSqrt([0, peak], [0, cell - .5]);
+		const radius = (d) => area ? scale(d.count) : cell - .5;
+		const cells = ctx.marks("cells", "path", bins, (d) => d.key, layer).attr("fill", (d) => ctx.palette.sequential(.15 + .85 * d.count / peak)).attr("transform", (d) => `translate(${d.x},${d.y})`);
+		ctx.set(cells, { d: (d) => this.cellPath(radius(d)) }, { d: this.cellPath(.01) }, 1);
+		ctx.hover(cells, (d) => ({
+			title: `${d.count} points`,
+			rows: [[`Total ${value}`, d.total]]
+		}));
+	}
+};
+export { GeoBinEncoding, GeoBinning, PointDensityMap };

package/dist/charts/geomaps/PointMap.js

@@ -0,0 +1,93 @@
+import { GeoChart } from "./GeoChart.js";
+import { GeoLand } from "./GeoLand.js";
+import { path } from "d3";
+// src/charts/geomaps/PointMap.ts
+/** How the land behind the marks is drawn. */
+var GeoGround = /* @__PURE__ */ function(GeoGround) {
+	GeoGround["Filled"] = "filled";
+	GeoGround["Outline"] = "outline";
+	GeoGround["Lattice"] = "lattice";
+	return GeoGround;
+}({});
+/** Maps whose data is a table of coordinates, drawn over a land backdrop. */
+var PointMap = class extends GeoChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			lon: "lon",
+			lat: "lat",
+			value: "value",
+			name: "name",
+			group: "group",
+			ground: "filled"
+		};
+	}
+	/** Rows with usable coordinates, on the sphere, whether or not this view shows them. */
+	coordinates() {
+		const { data, lon, lat, value, name, group } = this.options;
+		return (data ?? []).flatMap((row, i) => {
+			const longitude = +row[lon], latitude = +row[lat];
+			if (row[lon] === null || row[lat] === null || !Number.isFinite(longitude) || !Number.isFinite(latitude)) return [];
+			const raw = +row[value];
+			const label = row[name] ?? `Point ${i + 1}`;
+			return [{
+				key: `${i}`,
+				row,
+				lon: longitude,
+				lat: latitude,
+				value: Number.isFinite(raw) ? raw : 0,
+				name: String(label),
+				group: row[group] == null ? null : String(row[group])
+			}];
+		});
+	}
+	/** Coordinates that land inside the current view, in pixels. */
+	sites(frame) {
+		return this.coordinates().flatMap((site) => {
+			const at = frame.locate(site.lon, site.lat);
+			return at ? [{
+				...site,
+				x: at[0],
+				y: at[1]
+			}] : [];
+		});
+	}
+	target() {
+		const points = this.coordinates();
+		return points.length ? {
+			type: "MultiPoint",
+			coordinates: points.map(({ lon, lat }) => [lon, lat])
+		} : null;
+	}
+	get land() {
+		return this.options.basemap ?? GeoLand.world;
+	}
+	/** Draws the land backdrop in the chosen style. Call first in `drawMap`. */
+	drawGround(ctx, frame) {
+		const { ground } = this.options;
+		const { theme } = ctx;
+		const outlines = ground === "lattice" ? [] : [this.land];
+		ctx.marks("land", "path", outlines).attr("d", (d) => frame.path(d) ?? "").attr("fill", ground === "filled" ? theme.grid : "none").attr("stroke", ground === "filled" ? theme.surface : theme.axis).attr("stroke-width", this.hairline(ctx));
+		const dots = ground === "lattice" ? [this.lattice(frame)] : [];
+		const step = this.latticeStep(frame);
+		ctx.marks("lattice", "path", dots).attr("d", (d) => d).attr("fill", "none").attr("stroke", theme.axis).attr("stroke-width", step * .5).attr("stroke-linecap", "round");
+	}
+	latticeStep(frame) {
+		return Math.max(4, Math.round(frame.width / 96));
+	}
+	/** Land as a screen-aligned dot grid: one short path holds every dot. */
+	lattice(frame) {
+		const step = this.latticeStep(frame), invert = frame.projection.invert, dots = path();
+		for (let y = step / 2; y < frame.height; y += step) for (let x = step / 2; x < frame.width; x += step) {
+			const at = invert?.([x, y]);
+			if (!at || !Number.isFinite(at[0]) || !Number.isFinite(at[1])) continue;
+			const back = frame.locate(at[0], at[1]);
+			if (!back || Math.hypot(back[0] - x, back[1] - y) > 1) continue;
+			if (!GeoLand.at(this.land, at[0], at[1])) continue;
+			dots.moveTo(x, y);
+			dots.lineTo(x, y);
+		}
+		return dots.toString();
+	}
+};
+export { GeoGround, PointMap };