@mstone6969/graph 0.0.0-stage → 0.1.0

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 };

package/dist/charts/geomaps/PrismLikeShadedMap.js

@@ -0,0 +1,168 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { GeoClasses } from "./GeoClasses.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { ascending, color, descending, geoStream, max, scaleLinear, scaleSqrt } from "d3";
+// src/charts/geomaps/PrismLikeShadedMap.ts
+/** Where the viewer stands: height rises straight up the page, or skews to one side. */
+var GeoPrismView = /* @__PURE__ */ function(GeoPrismView) {
+	GeoPrismView["Front"] = "front";
+	GeoPrismView["Left"] = "left";
+	GeoPrismView["Right"] = "right";
+	return GeoPrismView;
+}({});
+var LEAN = .45;
+/** Prism map in SVG: regions extruded by value and lit from one side, a 2.5D take for a few standout totals. */
+var PrismLikeShadedMap = class extends RegionMap {
+	static meta = {
+		id: "prism-shaded-map",
+		name: "Prism map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Extrudes each region into a shaded prism whose height shows value, giving a tactile 2.5D overview.",
+		tags: [
+			"map",
+			"prism",
+			"extrusion",
+			"2.5d",
+			"block"
+		],
+		sample: (seed) => GeoSamples.regions(seed),
+		variants: {
+			view: [
+				"right",
+				"front",
+				"left"
+			],
+			tilt: [
+				.72,
+				1,
+				.5
+			],
+			scale: [ScaleKind.Linear, ScaleKind.Sqrt],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.Miller
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			view: "right",
+			tilt: .72,
+			scale: ScaleKind.Linear,
+			reach: .075,
+			graticule: false
+		};
+	}
+	get framed() {
+		return false;
+	}
+	inset(ctx) {
+		const rise = ctx.plot.height * this.options.reach;
+		return {
+			top: rise,
+			left: rise * LEAN,
+			right: rise * LEAN
+		};
+	}
+	/** Projected, clipped rings of a feature, ready to extrude. */
+	rings(feature, frame) {
+		const rings = [];
+		let ring = [];
+		geoStream(feature, frame.projection.stream({
+			point: (x, y) => {
+				ring.push([x, y]);
+			},
+			lineStart: () => {
+				ring = [];
+			},
+			lineEnd: () => {
+				if (ring.length > 2) rings.push(ring);
+			},
+			polygonStart: () => {},
+			polygonEnd: () => {},
+			sphere: () => {}
+		}));
+		return rings;
+	}
+	polygon(rings) {
+		return rings.map((ring) => `M${ring.map(([x, y]) => `${x.toFixed(1)},${y.toFixed(1)}`).join("L")}Z`).join("");
+	}
+	walls(rings, dx, dy, lit) {
+		let d = "";
+		for (const ring of rings) ring.forEach((a, i) => {
+			const b = ring[(i + 1) % ring.length];
+			if (b[0] >= a[0] !== lit) return;
+			d += `M${a[0].toFixed(1)},${a[1].toFixed(1)}L${b[0].toFixed(1)},${b[1].toFixed(1)}L${(b[0] + dx).toFixed(1)},${(b[1] + dy).toFixed(1)}L${(a[0] + dx).toFixed(1)},${(a[1] + dy).toFixed(1)}Z`;
+		});
+		return d;
+	}
+	keyHeight() {
+		return GeoLegend.height;
+	}
+	drawKey(ctx, frame) {
+		const classes = new GeoClasses(this.known(this.regions()).map((region) => region.value));
+		GeoLegend.classes(ctx, frame, classes, (value) => ctx.palette.sequential(classes.tone(value)));
+	}
+	drawMap(ctx, frame) {
+		const { view, tilt, scale, reach, value } = this.options, { palette, theme } = ctx;
+		const known = this.known(this.regions()), classes = new GeoClasses(known.map((region) => region.value));
+		const top = max(known, (d) => Math.abs(d.value)) || 1, rise = ctx.plot.height * reach;
+		const height = (scale === ScaleKind.Sqrt ? scaleSqrt() : scaleLinear()).domain([0, top]).range([0, rise]);
+		const lean = view === "front" ? 0 : view === "left" ? -.45 : LEAN;
+		const floor = (frame.height + rise - tilt * (rise + frame.height)) / 2;
+		const squash = (rings) => rings.map((ring) => ring.map(([x, y]) => [x, floor + y * tilt]));
+		const prisms = known.flatMap((region) => {
+			const base = squash(this.rings(region.feature, frame));
+			if (!base.length) return [];
+			const h = height(Math.abs(region.value)), dx = h * lean, dy = -h;
+			const tone = palette.sequential(classes.tone(region.value));
+			const shade = color(tone), sideLit = shade.darker(.5).formatHex(), sideDark = shade.darker(1.1).formatHex();
+			const roof = this.polygon(base.map((ring) => ring.map(([x, y]) => [x + dx, y + dy])));
+			const south = Math.max(...base.flat().map(([, y]) => y));
+			return [
+				{
+					key: `${region.key}/a`,
+					region,
+					south,
+					order: 0,
+					d: this.walls(base, dx, dy, true),
+					fill: sideDark
+				},
+				{
+					key: `${region.key}/b`,
+					region,
+					south,
+					order: 1,
+					d: this.walls(base, dx, dy, false),
+					fill: sideLit
+				},
+				{
+					key: `${region.key}/c`,
+					region,
+					south,
+					order: 2,
+					d: roof,
+					fill: tone
+				}
+			];
+		}).sort((a, b) => ascending(a.south, b.south) || descending(b.order, a.order));
+		ctx.marks("plate", "path", [{ type: "Sphere" }]).attr("d", (d) => this.polygon(squash(this.rings(d, frame)))).attr("fill", theme.grid).attr("fill-opacity", .28).attr("stroke", theme.axis).attr("stroke-width", 1);
+		ctx.marks("ground", "path", this.regions().filter((d) => d.value === null), (d) => d.key).attr("d", (d) => this.polygon(squash(this.rings(d.feature, frame)))).attr("fill", theme.grid);
+		const faces = ctx.marks("faces", "path", prisms, (d) => d.key).attr("fill", (d) => d.fill);
+		this.fill(ctx, faces, (d) => d.d, 1);
+		ctx.hover(faces, (d) => ({
+			title: d.region.name,
+			color: d.fill,
+			rows: [[value, d.region.value]]
+		}));
+	}
+};
+export { GeoPrismView, PrismLikeShadedMap };

package/dist/charts/geomaps/ProportionalSymbolMap.js

@@ -0,0 +1,144 @@
+import { ChartFamily, DataShape, Dimension, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { max, scaleLinear, scaleThreshold, symbol } from "d3";
+// src/charts/geomaps/ProportionalSymbolMap.ts
+/** Proportional: area follows each value. Graduated: area steps through a few classes, for cleaner reading. */
+var GeoSizing = /* @__PURE__ */ function(GeoSizing) {
+	GeoSizing["Proportional"] = "proportional";
+	GeoSizing["Graduated"] = "graduated";
+	return GeoSizing;
+}({});
+var CLASS_LIMITS = [
+	.05,
+	.2,
+	.5
+];
+var CLASS_SIZES = [
+	.03,
+	.12,
+	.35,
+	1
+];
+/** Reach of each d3 symbol from its origin, in radii of the circle of equal area. */
+var SYMBOL_REACH = {
+	[SymbolKind.Square]: {
+		up: .89,
+		down: .89,
+		side: .89
+	},
+	[SymbolKind.Diamond]: {
+		up: 1.65,
+		down: 1.65,
+		side: .96
+	},
+	[SymbolKind.Triangle]: {
+		up: 1.56,
+		down: .78,
+		side: 1.35
+	},
+	[SymbolKind.Star]: {
+		up: 1.68,
+		down: 1.36,
+		side: 1.6
+	}
+};
+/** Encode totals, which choropleths misrepresent, with a symbol at each region whose area follows the value. */
+var ProportionalSymbolMap = class extends RegionMap {
+	static meta = {
+		id: "proportional-symbol-map",
+		name: "Proportional symbol map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Places a symbol on each region with area proportional to its value, the right form for counts and totals.",
+		tags: [
+			"map",
+			"graduated",
+			"symbol",
+			"totals"
+		],
+		sample: (seed) => GeoSamples.totals(seed),
+		variants: {
+			symbol: [
+				SymbolKind.Circle,
+				SymbolKind.Square,
+				SymbolKind.Diamond,
+				SymbolKind.Triangle,
+				SymbolKind.Star
+			],
+			sizing: ["proportional", "graduated"],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide
+			],
+			graticule: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			symbol: SymbolKind.Circle,
+			sizing: "proportional",
+			reach: .055
+		};
+	}
+	/** Square pixels per unit of value, so marks and key stay honest. */
+	area(ctx, top) {
+		const biggest = Math.PI * (Math.min(ctx.plot.width, ctx.plot.height) * this.options.reach) ** 2;
+		const linear = scaleLinear([0, top || 1], [0, biggest]);
+		if (this.options.sizing === "proportional") return (value) => linear(Math.abs(value));
+		const graded = scaleThreshold().domain(CLASS_LIMITS.map((limit) => limit * top)).range(CLASS_SIZES.map((size) => linear(size * top)));
+		return (value) => graded(Math.abs(value));
+	}
+	shape(area) {
+		return symbol(Scales.symbol(this.options.symbol), area)() ?? "";
+	}
+	drawMap(ctx, frame) {
+		const regions = this.known(this.regions());
+		const top = max(regions, (d) => Math.abs(d.value)) ?? 0;
+		const area = this.area(ctx, top), { theme } = ctx;
+		const placed = regions.flatMap((region) => {
+			const at = frame.anchor(region.feature);
+			return at ? [{
+				...region,
+				x: at[0],
+				y: at[1],
+				area: area(region.value)
+			}] : [];
+		}).sort((a, b) => b.area - a.area);
+		ctx.marks("land", "path", this.regions(), (d) => d.key).attr("d", (d) => frame.path(d.feature) ?? "").attr("fill", theme.grid).attr("stroke", theme.surface).attr("stroke-width", this.hairline(ctx));
+		const fill = ctx.palette.color(this.options.value);
+		const marks = ctx.marks("symbols", "path", placed, (d) => d.key).attr("fill", fill).attr("stroke", theme.surface).attr("stroke-width", 1).attr("transform", (d) => `translate(${d.x},${d.y})`);
+		ctx.set(marks, {
+			d: (d) => this.shape(d.area),
+			"fill-opacity": .72
+		}, {
+			d: this.shape(0),
+			"fill-opacity": 0
+		}, 2);
+		ctx.hover(marks, (d) => ({
+			title: d.name,
+			color: fill,
+			rows: [[this.options.value, d.value]]
+		}));
+		const entries = (this.options.sizing === "graduated" ? [...CLASS_SIZES.slice(1)].reverse() : [
+			1,
+			.5,
+			.15
+		]).map((share) => {
+			const value = +(top * share).toPrecision(2);
+			return {
+				value,
+				radius: Math.sqrt(area(value) / Math.PI)
+			};
+		});
+		GeoLegend.nested(ctx, frame, entries, (radius) => this.shape(Math.PI * radius * radius), SYMBOL_REACH[this.options.symbol]);
+	}
+};
+export { GeoSizing, ProportionalSymbolMap };