@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/geomaps/CartogramDorling.js

@@ -0,0 +1,125 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { max, scaleSqrt, sum } from "d3";
+// src/charts/geomaps/CartogramDorling.ts
+var GeoCartogramMark = /* @__PURE__ */ function(GeoCartogramMark) {
+	GeoCartogramMark["Circle"] = "circle";
+	GeoCartogramMark["Square"] = "square";
+	return GeoCartogramMark;
+}({});
+/** Dorling (circles) or Demers (squares) cartogram: regions keep position, but size shows value, not land area. */
+var CartogramDorling = class extends RegionMap {
+	static meta = {
+		id: "cartogram-dorling",
+		name: "Dorling cartogram",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Replaces each region with a non-overlapping circle or square sized by value, near its true location.",
+		tags: [
+			"map",
+			"cartogram",
+			"demers",
+			"value by area"
+		],
+		sample: (seed) => GeoSamples.totals(seed),
+		variants: {
+			mark: ["circle", "square"],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Robinson
+			],
+			coverage: [
+				.3,
+				.2,
+				.42
+			],
+			ghost: [true, false],
+			labels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			group: "group",
+			mark: "circle",
+			coverage: .3,
+			ghost: true,
+			labels: true,
+			graticule: false,
+			legend: LegendPosition.Top
+		};
+	}
+	nodes(frame) {
+		const { coverage, group } = this.options;
+		const known = this.known(this.regions()).filter((region) => region.value !== 0);
+		const square = this.options.mark === "square";
+		const unit = square ? 4 : Math.PI;
+		const total = sum(known, (region) => Math.abs(region.value)) || 1;
+		const biggest = Math.sqrt(frame.width * frame.height * coverage * (max(known, (region) => Math.abs(region.value)) ?? 0) / total / unit);
+		const radius = scaleSqrt([0, max(known, (region) => Math.abs(region.value)) || 1], [0, biggest]);
+		const nodes = known.flatMap((region) => {
+			const at = frame.anchor(region.feature);
+			if (!at) return [];
+			const [x, y] = at;
+			return [{
+				...region,
+				x,
+				y,
+				homeX: x,
+				homeY: y,
+				r: radius(Math.abs(region.value)),
+				group: String(region.row[group] ?? "")
+			}];
+		});
+		this.dodge(nodes, frame, square ? 2 : 1);
+		return square ? this.separate(nodes, frame) : nodes;
+	}
+	/** Disc collision leaves square corners touching, so finish with axis-aligned separation. */
+	separate(nodes, frame) {
+		for (let pass = 0; pass < 30; pass++) for (let i = 0; i < nodes.length; i++) for (let j = i + 1; j < nodes.length; j++) {
+			const a = nodes[i], b = nodes[j], reach = a.r + b.r + 2;
+			const dx = b.x - a.x, dy = b.y - a.y, push = reach - Math.max(Math.abs(dx), Math.abs(dy));
+			if (push <= 0) continue;
+			const axis = Math.abs(dx) > Math.abs(dy) ? "x" : "y", sign = (axis === "x" ? dx : dy) < 0 ? -1 : 1;
+			a[axis] -= sign * push / 2;
+			b[axis] += sign * push / 2;
+		}
+		for (const d of nodes) {
+			d.x = Math.max(d.r, Math.min(frame.width - d.r, d.x));
+			d.y = Math.max(d.r, Math.min(frame.height - d.r, d.y));
+		}
+		return nodes;
+	}
+	drawMap(ctx, frame) {
+		const { ghost, labels, value, mark } = this.options, { theme, palette } = ctx;
+		ctx.marks("ghost", "path", ghost ? this.regions() : [], (d) => d.key).attr("d", (d) => frame.path(d.feature) ?? "").attr("fill", theme.grid).attr("fill-opacity", .6).attr("stroke", theme.surface).attr("stroke-width", this.hairline(ctx));
+		const nodes = this.nodes(frame);
+		const tint = (d) => palette.color(d.group || value);
+		const square = mark === "square";
+		const marks = ctx.marks("marks", "rect", nodes, (d) => d.key).attr("fill", tint).attr("rx", (d) => square ? Math.min(3, d.r) : d.r);
+		ctx.set(marks, {
+			x: (d) => d.x - d.r,
+			y: (d) => d.y - d.r,
+			width: (d) => d.r * 2,
+			height: (d) => d.r * 2
+		}, {
+			x: (d) => d.homeX,
+			y: (d) => d.homeY,
+			width: 0,
+			height: 0
+		}, 3);
+		ctx.hover(marks, (d) => ({
+			title: d.name,
+			color: tint(d),
+			rows: [[value, d.value]]
+		}));
+		const named = labels ? nodes.filter((d) => d.r * 2 > Math.min(d.name.length, 12) * 5 + 4) : [];
+		ctx.text(ctx.marks("labels", "text", named, (d) => d.key).attr("x", (d) => d.x).attr("y", (d) => d.y + 3).attr("text-anchor", "middle").text((d) => d.name.slice(0, Math.floor(d.r * 2 / 5)).trim()), 9).attr("fill", (d) => this.inkOn(ctx, tint(d))).attr("pointer-events", "none");
+	}
+};
+export { CartogramDorling, GeoCartogramMark };

package/dist/charts/geomaps/ChoroplethBase.js

@@ -0,0 +1,47 @@
+import { GeoClasses, GeoClassification } from "./GeoClasses.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { RegionMap } from "./RegionMap.js";
+// src/charts/geomaps/ChoroplethBase.ts
+/** Regions shaded by a rate or ratio. Subclasses declare the geography and variants. */
+var ChoroplethBase = class extends RegionMap {
+	defaults() {
+		return {
+			...super.defaults(),
+			classification: GeoClassification.Continuous,
+			bins: 5
+		};
+	}
+	/** Fill opacity of the regions. */
+	get shade() {
+		return 1;
+	}
+	/** Extra behaviour or marks on the drawn regions. */
+	finishRegions(_ctx, _frame, _shapes) {}
+	keyHeight() {
+		return GeoLegend.height;
+	}
+	classes() {
+		return new GeoClasses(this.known(this.regions()).map((region) => region.value), this.options.classification, this.options.bins);
+	}
+	tone(ctx, classes, value) {
+		const { midpoint } = this.options;
+		if (midpoint === void 0) return ctx.palette.sequential(classes.tone(value));
+		const reach = Math.max(classes.max - midpoint, midpoint - classes.min) || 1;
+		return ctx.palette.diverging((value - midpoint) / reach);
+	}
+	drawMap(ctx, frame) {
+		const classes = this.classes(), { theme } = ctx;
+		const shapes = ctx.marks("regions", "path", this.regions(), (d) => d.key).attr("fill", (d) => d.value === null ? theme.grid : this.tone(ctx, classes, classes.classed ? classes.center(classes.bin(d.value)) : d.value)).attr("stroke", theme.surface).attr("stroke-width", this.hairline(ctx));
+		this.fill(ctx, shapes, (d) => frame.path(d.feature) ?? "", this.shade);
+		ctx.hover(shapes, (d) => ({
+			title: d.name,
+			rows: [[this.options.value, d.value ?? "No data"]]
+		}));
+		this.finishRegions(ctx, frame, shapes);
+	}
+	drawKey(ctx, frame) {
+		const classes = this.classes();
+		GeoLegend.classes(ctx, frame, classes, (value) => this.tone(ctx, classes, value));
+	}
+};
+export { ChoroplethBase };

package/dist/charts/geomaps/ChoroplethMap.js

@@ -0,0 +1,49 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { ChoroplethBase } from "./ChoroplethBase.js";
+import { GeoClassification } from "./GeoClasses.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+// src/charts/geomaps/ChoroplethMap.ts
+/** Shade regions by a rate or ratio, when geography is the story and regions are comparable. */
+var ChoroplethMap = class extends ChoroplethBase {
+	static meta = {
+		id: "choropleth-map",
+		name: "Choropleth map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Shades each region by a value, classed or continuous, to show how a rate varies across space.",
+		tags: [
+			"map",
+			"thematic",
+			"filled",
+			"shaded",
+			"region"
+		],
+		sample: (seed) => GeoSamples.regions(seed),
+		variants: {
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.WinkelTripel,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.InterruptedHomolosine
+			],
+			classification: [
+				GeoClassification.Continuous,
+				GeoClassification.Quantile,
+				GeoClassification.EqualInterval,
+				GeoClassification.NaturalBreaks
+			],
+			bins: [
+				5,
+				3,
+				7
+			],
+			graticule: [true, false]
+		},
+		valid: (values) => values.classification !== GeoClassification.Continuous || values.bins === 5
+	};
+};
+export { ChoroplethMap };

package/dist/charts/geomaps/ClippedGlobeMap.js

@@ -0,0 +1,141 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoClasses } from "./GeoClasses.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoFraming, GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { drag, geoCircle, geoOrthographic, geoPath } from "d3";
+// src/charts/geomaps/ClippedGlobeMap.ts
+var GeoView = /* @__PURE__ */ function(GeoView) {
+	GeoView["Atlantic"] = "atlantic";
+	GeoView["Americas"] = "americas";
+	GeoView["Africa"] = "africa";
+	GeoView["Asia"] = "asia";
+	GeoView["Pacific"] = "pacific";
+	GeoView["Arctic"] = "arctic";
+	return GeoView;
+}({});
+var LONGITUDE = {
+	["atlantic"]: 30,
+	["americas"]: 90,
+	["africa"]: -20,
+	["asia"]: -100,
+	["pacific"]: 165,
+	["arctic"]: -10
+};
+var limbs = 0;
+/** Orthographic globe that clips the far side: for world data read one hemisphere at a time, and spun by dragging. */
+var ClippedGlobeMap = class extends RegionMap {
+	static meta = {
+		id: "clipped-globe-map",
+		name: "Clipped globe",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Shows data on an orthographic globe clipped at the horizon, with drag to rotate, keeping true global context.",
+		tags: [
+			"map",
+			"globe",
+			"orthographic",
+			"sphere",
+			"hemisphere"
+		],
+		sample: (seed) => GeoSamples.regions(seed),
+		variants: {
+			view: [
+				"atlantic",
+				"americas",
+				"africa",
+				"asia",
+				"pacific",
+				"arctic"
+			],
+			tilt: [
+				20,
+				0,
+				-25
+			],
+			horizon: [90, 60],
+			backside: [true, false]
+		},
+		valid: (values) => !(values.horizon === 60 && values.backside === true) && !(values.view === "arctic" && values.tilt !== 20)
+	};
+	limbId = `geo-limb-${++limbs}`;
+	spun = null;
+	spinning = false;
+	get animated() {
+		return super.animated && !this.spinning;
+	}
+	defaults() {
+		return {
+			...super.defaults(),
+			view: "atlantic",
+			tilt: 20,
+			horizon: 90,
+			backside: true,
+			spin: true,
+			graticuleStep: 20,
+			projection: GeoProjectionKind.Orthographic,
+			framing: GeoFraming.Sphere
+		};
+	}
+	get rotation() {
+		const { view, tilt } = this.options;
+		const [lambda, phi] = this.spun ?? [LONGITUDE[view], view === "arctic" ? -68 : -tilt];
+		return [
+			lambda,
+			phi,
+			0
+		];
+	}
+	frame(ctx) {
+		const frame = super.frame(ctx);
+		const { width, height } = frame, side = Math.min(width, height) - 4;
+		frame.projection.rotate(this.rotation).clipAngle(this.options.horizon).clipExtent(null).scale(side / 2 / Math.sin(Math.min(90, this.options.horizon) * Math.PI / 180)).translate([width / 2, height / 2]);
+		return frame;
+	}
+	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 { theme } = ctx, { backside, horizon, value, spin } = this.options, regions = this.regions();
+		const classes = new GeoClasses(this.known(regions).map((region) => region.value));
+		const far = backside ? geoPath(geoOrthographic().scale(frame.projection.scale()).translate(frame.projection.translate()).rotate(this.rotation).clipAngle(179.9)) : null;
+		ctx.marks("far-side", "path", far ? regions : [], (d) => d.key).attr("d", (d) => far?.(d.feature) ?? "").attr("fill", theme.axis).attr("fill-opacity", .45);
+		const cap = horizon < 90 ? [geoCircle().center([-this.rotation[0], -this.rotation[1]]).radius(horizon)()] : [];
+		ctx.marks("horizon", "path", cap).attr("d", (d) => frame.path(d) ?? "").attr("fill", theme.surface).attr("stroke", theme.axis).attr("stroke-width", 1);
+		const shapes = ctx.marks("regions", "path", regions, (d) => d.key).attr("fill", (d) => d.value === null ? theme.grid : ctx.palette.sequential(classes.tone(d.value))).attr("stroke", theme.surface).attr("stroke-width", this.hairline(ctx));
+		this.fill(ctx, shapes, (d) => frame.path(d.feature) ?? "");
+		ctx.hover(shapes, (d) => ({
+			title: d.name,
+			rows: [[value, d.value ?? "No data"]]
+		}));
+		this.drawLimb(ctx, frame);
+		if (spin) this.bindSpin(ctx);
+	}
+	/** A soft darkening towards the edge makes the disc read as a sphere. */
+	drawLimb(ctx, frame) {
+		const defs = ctx.group("limb-defs");
+		if (defs.select("radialGradient").empty()) defs.append("radialGradient").attr("id", this.limbId).selectAll("stop").data([[.62, 0], [1, .2]]).join("stop").attr("offset", (d) => d[0]).attr("stop-color", ctx.theme.ink).attr("stop-opacity", (d) => d[1]);
+		defs.selectAll("stop").attr("stop-color", ctx.theme.ink);
+		const [x, y] = frame.projection.translate();
+		ctx.marks("limb", "circle", [0]).attr("cx", x).attr("cy", y).attr("r", frame.projection.scale() * Math.sin(Math.min(90, this.options.horizon) * Math.PI / 180)).attr("fill", `url(#${this.limbId})`).attr("pointer-events", "none");
+	}
+	bindSpin(ctx) {
+		const behaviour = drag().on("start", () => {
+			this.spinning = true;
+		}).on("drag", (event) => {
+			const [lambda, phi] = this.rotation;
+			this.spun = [lambda + event.dx * .4, Math.max(-90, Math.min(90, phi - event.dy * .4))];
+			this.render();
+		}).on("end", () => {
+			this.spinning = false;
+		});
+		ctx.root.call(behaviour).style("touch-action", "none");
+	}
+};
+export { ClippedGlobeMap, GeoView };

package/dist/charts/geomaps/ContourMap.js

@@ -0,0 +1,97 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoClasses } from "./GeoClasses.js";
+import { GeoField, GeoInterpolation } from "./GeoField.js";
+import { GeoLegend } from "./GeoLegend.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { PointMap } from "./PointMap.js";
+// src/charts/geomaps/ContourMap.ts
+var GeoContourStyle = /* @__PURE__ */ function(GeoContourStyle) {
+	GeoContourStyle["Filled"] = "filled";
+	GeoContourStyle["Lines"] = "lines";
+	GeoContourStyle["FilledLines"] = "filled-lines";
+	return GeoContourStyle;
+}({});
+/** Isopleth map: interpolate scattered readings over the sphere and draw lines or bands of equal value. */
+var ContourMap = class extends PointMap {
+	static meta = {
+		id: "contour-map",
+		name: "Contour map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Interpolates station readings into isolines or filled bands, for continuous fields such as climate.",
+		tags: [
+			"map",
+			"isopleth",
+			"isoline",
+			"isarithmic",
+			"interpolation"
+		],
+		sample: (seed) => GeoSamples.scatter(seed, 140),
+		variants: {
+			style: [
+				"filled-lines",
+				"filled",
+				"lines"
+			],
+			interpolation: [GeoInterpolation.Kernel, GeoInterpolation.InverseDistance],
+			levels: [
+				7,
+				4,
+				11
+			],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Orthographic,
+				GeoProjectionKind.Mollweide
+			],
+			stations: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			style: "filled-lines",
+			interpolation: GeoInterpolation.Kernel,
+			levels: 7,
+			stations: false,
+			graticule: false
+		};
+	}
+	keyHeight() {
+		return GeoLegend.height;
+	}
+	drawMap(ctx, frame) {
+		this.drawGround(ctx, frame);
+		const { style, interpolation, levels, stations, value } = this.options, { theme, palette } = ctx;
+		const bands = new GeoField(this.coordinates(), {
+			interpolation,
+			bandwidth: 20
+		}).bands(3, levels);
+		const isolines = style === "filled" ? [] : bands;
+		const top = bands.at(-1)?.value ?? 1, floor = bands[0]?.value ?? 0;
+		const tint = (level) => palette.sequential(bands.length > 1 ? (level - floor) / (top - floor) : .5);
+		const filled = style !== "lines";
+		const shapes = ctx.marks("bands", "path", filled ? bands : [], (d) => d.value).attr("fill", (d) => tint(d.value));
+		this.fill(ctx, shapes, (d) => frame.path(d.geometry) ?? "", .82);
+		ctx.hover(shapes, (d) => ({
+			title: "Iso-level",
+			rows: [[value, +d.value.toFixed(1)]]
+		}));
+		const lines = ctx.marks("isolines", "path", isolines, (d) => d.value).attr("d", (d) => frame.path(d.lines) ?? "").attr("fill", "none").attr("stroke", (d) => filled ? theme.surface : tint(d.value)).attr("stroke-width", filled ? .75 : 1.5).attr("stroke-linejoin", "round");
+		ctx.drawOn(lines);
+		if (!filled) ctx.hover(lines, (d) => ({
+			title: "Iso-level",
+			rows: [[value, +d.value.toFixed(1)]]
+		}));
+		const dots = ctx.marks("stations", "circle", stations ? this.sites(frame) : [], (d) => d.key).attr("cx", (d) => d.x).attr("cy", (d) => d.y).attr("r", 2).attr("fill", theme.ink).attr("stroke", theme.surface).attr("stroke-width", 1);
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			rows: [[value, d.value]]
+		}));
+		GeoLegend.classes(ctx, frame, new GeoClasses([floor, top]), (level) => tint(level));
+	}
+};
+export { ContourMap, GeoContourStyle };

package/dist/charts/geomaps/DotDensityMap.js

@@ -0,0 +1,140 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { RegionMap } from "./RegionMap.js";
+import { geoBounds, geoContains, randomLcg, sum } from "d3";
+// src/charts/geomaps/DotDensityMap.ts
+var GeoDotPattern = /* @__PURE__ */ function(GeoDotPattern) {
+	GeoDotPattern["Random"] = "random";
+	GeoDotPattern["Even"] = "even";
+	GeoDotPattern["Lattice"] = "lattice";
+	return GeoDotPattern;
+}({});
+/** One dot per fixed amount, scattered inside each region: shows totals and texture where a choropleth hides them. */
+var DotDensityMap = class extends RegionMap {
+	static meta = {
+		id: "dot-density-map",
+		name: "Dot density map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Scatters dots inside each region, each worth a fixed amount, so density reads as concentration.",
+		tags: [
+			"map",
+			"dot",
+			"density",
+			"population",
+			"one dot per"
+		],
+		sample: (seed) => GeoSamples.totals(seed),
+		variants: {
+			pattern: [
+				"random",
+				"even",
+				"lattice"
+			],
+			budget: [1400, 700],
+			projection: [
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.Hammer
+			],
+			borders: [true, false]
+		}
+	};
+	cache = /* @__PURE__ */ new WeakMap();
+	defaults() {
+		return {
+			...super.defaults(),
+			pattern: "random",
+			budget: 1400,
+			borders: true,
+			projection: GeoProjectionKind.EqualEarth,
+			graticule: false
+		};
+	}
+	/** Sampling depends only on data, pattern and budget, so spinning or resizing reuses it. */
+	scatter(regions, unit) {
+		const { data, pattern, budget } = this.options;
+		let forData = this.cache.get(data);
+		if (!forData) this.cache.set(data, forData = /* @__PURE__ */ new Map());
+		const key = `${pattern}/${budget}`;
+		let dots = forData.get(key);
+		if (!dots) forData.set(key, dots = regions.map((region, i) => this.fillRegion(region.feature, Math.round(Math.abs(region.value) / unit), i)));
+		return dots;
+	}
+	fillRegion(feature, count, seed) {
+		if (!count) return [];
+		const [[west, south], [east, north]] = geoBounds(feature);
+		const spanX = (east < west ? east + 360 : east) - west, spanY = north - south;
+		const random = randomLcg((seed + 1) * .0137 % 1);
+		const inside = (p) => geoContains(feature, p);
+		const draw = () => {
+			for (let tries = 0; tries < 60; tries++) {
+				const p = [(west + random() * spanX + 540) % 360 - 180, south + random() * spanY];
+				if (inside(p)) return p;
+			}
+			return null;
+		};
+		if (this.options.pattern === "lattice") return this.latticeFill(feature, west, south, spanX, spanY, count);
+		const dots = [];
+		for (let i = 0; i < count; i++) {
+			const best = (this.options.pattern === "even" ? [
+				draw(),
+				draw(),
+				draw(),
+				draw(),
+				draw()
+			] : [draw()]).filter((p) => p !== null).reduce((top, p) => {
+				const gap = Math.min(Infinity, ...dots.map((dot) => Math.hypot(dot[0] - p[0], dot[1] - p[1])));
+				return gap > top.gap ? {
+					p,
+					gap
+				} : top;
+			}, {
+				p: null,
+				gap: -1
+			});
+			if (best.p) dots.push(best.p);
+		}
+		return dots;
+	}
+	latticeFill(feature, west, south, spanX, spanY, count) {
+		for (let step = Math.sqrt(spanX * spanY / Math.max(1, count)); step > .02; step *= .8) {
+			const dots = [];
+			const wide = step / Math.max(.2, Math.cos((south + spanY / 2) * Math.PI / 180));
+			for (let y = south + step / 2; y < south + spanY; y += step) for (let x = west + wide / 2; x < west + spanX; x += wide) {
+				const p = [(x + 540) % 360 - 180, y];
+				if (geoContains(feature, p)) dots.push(p);
+			}
+			if (dots.length >= count) return dots.slice(0, count);
+		}
+		return [];
+	}
+	drawMap(ctx, frame) {
+		const { theme, palette } = ctx, { value, borders, budget } = this.options, regions = this.regions();
+		ctx.marks("land", "path", borders ? regions.map((d) => d.feature) : [this.options.data], (_, i) => i).attr("d", (d) => frame.path(d) ?? "").attr("fill", theme.grid).attr("stroke", borders ? theme.surface : "none").attr("stroke-width", this.hairline(ctx));
+		const known = this.known(regions);
+		const unit = sum(known, (d) => Math.abs(d.value)) / budget || 1;
+		const fill = palette.color(value);
+		const dots = this.scatter(known, unit).flatMap((points, r) => points.flatMap((point, i) => {
+			const at = frame.locate(point[0], point[1]);
+			return at ? [{
+				key: `${known[r].key}/${i}`,
+				region: known[r],
+				x: at[0],
+				y: at[1]
+			}] : [];
+		}));
+		const marks = ctx.marks("dots", "circle", dots, (d) => d.key).attr("fill", fill).attr("cx", (d) => d.x).attr("cy", (d) => d.y);
+		ctx.set(marks, { r: 1.3 }, { r: 0 });
+		ctx.hover(marks, (d) => ({
+			title: d.region.name,
+			color: fill,
+			rows: [[value, d.region.value], ["One dot", Math.round(unit * 10) / 10]]
+		}));
+	}
+};
+export { DotDensityMap, GeoDotPattern };

package/dist/charts/geomaps/DotMap.js

@@ -0,0 +1,66 @@
+import { ChartFamily, DataShape, Dimension, LegendPosition, SymbolKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { GeoGround, PointMap } from "./PointMap.js";
+import { symbol } from "d3";
+// src/charts/geomaps/DotMap.ts
+/** Plot every event or place at its true position, for raw patterns: clusters, gaps and outliers. */
+var DotMap = class extends PointMap {
+	static meta = {
+		id: "dot-map",
+		name: "Dot map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Places one mark per record at its coordinates, showing the raw spatial pattern of events or places.",
+		tags: [
+			"map",
+			"points",
+			"scatter",
+			"locations",
+			"pin"
+		],
+		sample: (seed) => GeoSamples.scatter(seed, 420),
+		variants: {
+			ground: [GeoGround.Filled, GeoGround.Lattice],
+			symbol: [
+				SymbolKind.Circle,
+				SymbolKind.Square,
+				SymbolKind.Diamond,
+				SymbolKind.Cross
+			],
+			radius: [2.5, 4],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Mollweide,
+				GeoProjectionKind.Orthographic
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			symbol: SymbolKind.Circle,
+			radius: 2.5,
+			legend: LegendPosition.Top,
+			graticule: false
+		};
+	}
+	drawMap(ctx, frame) {
+		this.drawGround(ctx, frame);
+		const { radius, value } = this.options;
+		const shape = symbol(Scales.symbol(this.options.symbol), Math.PI * radius ** 2)() ?? "";
+		const tint = (group) => ctx.palette.color(group ?? value);
+		const dots = ctx.marks("dots", "path", this.sites(frame), (d) => d.key).attr("fill", (d) => tint(d.group)).attr("fill-opacity", .85).attr("transform", (d) => `translate(${d.x},${d.y})`);
+		ctx.set(dots, { d: shape }, { d: symbol(Scales.symbol(this.options.symbol), 0)() ?? "" }, 1);
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			color: tint(d.group),
+			rows: [[value, d.value]]
+		}));
+	}
+};
+export { DotMap };