@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/geomaps/RoomLabelFit.js

@@ -0,0 +1,200 @@
+import { FrameworkText } from "../frameworks/FrameworkText.js";
+import { polygonCentroid } from "d3";
+// src/charts/geomaps/RoomLabelFit.ts
+var RoomLabelMode = /* @__PURE__ */ function(RoomLabelMode) {
+	RoomLabelMode["Name"] = "name";
+	RoomLabelMode["NameValue"] = "name-value";
+	RoomLabelMode["None"] = "none";
+	return RoomLabelMode;
+}({});
+var CHAR = 6.2;
+var LINE = 13;
+var PAD = 3;
+var NUDGE = 14;
+var SHORTEST = 3;
+var MAX_CELLS = 4096;
+/** Where to look when something sits on the anchor: outward along each axis, nearest first. */
+var OFFSETS = [[0, 0], ...[
+	1,
+	2,
+	3
+].flatMap((step) => [
+	[0, -step * NUDGE],
+	[0, step * NUDGE],
+	[-step * NUDGE, 0],
+	[step * NUDGE, 0]
+])];
+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;
+/** Even-odd test across a polygon's rings, so holes count as outside. */
+var inside = (x, y, rings) => {
+	let hit = false;
+	for (const ring of rings) for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+		const [ax, ay] = ring[i], [bx, by] = ring[j];
+		if (ay > y !== by > y && x < (bx - ax) * (y - ay) / (by - ay) + ax) hit = !hit;
+	}
+	return hit;
+};
+var segmentDistance2 = (x, y, [ax, ay], [bx, by]) => {
+	const dx = bx - ax, dy = by - ay, length = dx * dx + dy * dy;
+	const t = length ? Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / length)) : 0;
+	return (x - ax - t * dx) ** 2 + (y - ay - t * dy) ** 2;
+};
+/** Distance to the nearest edge: positive inside the polygon, negative outside. */
+var signedDistance = (x, y, rings) => {
+	let nearest = Infinity;
+	for (const ring of rings) for (let i = 1; i < ring.length; i++) nearest = Math.min(nearest, segmentDistance2(x, y, ring[i - 1], ring[i]));
+	return (inside(x, y, rings) ? 1 : -1) * Math.sqrt(nearest);
+};
+/** Liang–Barsky: whether any of a segment lies in the box. */
+var crosses = ([ax, ay], [bx, by], { x, y, w, h }) => {
+	const dx = bx - ax, dy = by - ay;
+	let low = 0, high = 1;
+	for (const [p, q] of [
+		[-dx, ax - x],
+		[dx, x + w - ax],
+		[-dy, ay - y],
+		[dy, y + h - ay]
+	]) {
+		if (p === 0) {
+			if (q < 0) return false;
+			continue;
+		}
+		const t = q / p;
+		if (p < 0) low = Math.max(low, t);
+		else high = Math.min(high, t);
+		if (low > high) return false;
+	}
+	return true;
+};
+var encloses = (rings, box) => inside(box.x + box.w / 2, box.y + box.h / 2, rings) && !rings.some((ring) => ring.some((corner, i) => i > 0 && crosses(ring[i - 1], corner, box)));
+/** Breaks a name at the space nearest its middle. */
+var wrapped = (name) => {
+	const spaces = [...name.matchAll(/ /g)].map((match) => match.index);
+	if (!spaces.length) return null;
+	const middle = name.length / 2;
+	const at = spaces.reduce((best, space) => Math.abs(space - middle) < Math.abs(best - middle) ? space : best);
+	return [name.slice(0, at), name.slice(at + 1)];
+};
+/**
+* Fits a label inside a room polygon at its pole of inaccessibility, found by the quadtree search of
+* Agafonkin's polylabel (2016) after Garcia-Castellanos and Lombardo (2007). Text is wider than it is
+* tall, so the search runs with y stretched by the text's aspect ratio and finds the widest ellipse of
+* that shape, which suits a wide label in an L-shaped room better than the largest circle does.
+*/
+var RoomLabelFit = class {
+	static #cell(x, y, half, rings) {
+		const distance = signedDistance(x, y, rings);
+		return {
+			x,
+			y,
+			half,
+			distance,
+			reach: distance + half * Math.SQRT2
+		};
+	}
+	static #search(rings) {
+		const outer = rings[0], xs = outer.map(([x]) => x), ys = outer.map(([, y]) => y);
+		const x0 = Math.min(...xs), y0 = Math.min(...ys), x1 = Math.max(...xs), y1 = Math.max(...ys);
+		const size = Math.min(x1 - x0, y1 - y0), half = size / 2;
+		const middle = this.#cell((x0 + x1) / 2, (y0 + y1) / 2, 0, rings);
+		if (!size) return middle;
+		const queue = [];
+		for (let x = x0; x < x1; x += size) for (let y = y0; y < y1; y += size) queue.push(this.#cell(x + half, y + half, half, rings));
+		const [cx, cy] = polygonCentroid(outer);
+		const centroid = Number.isFinite(cx + cy) ? this.#cell(cx, cy, 0, rings) : middle;
+		let best = centroid.distance > middle.distance ? centroid : middle;
+		const precision = size / 64;
+		for (let spent = 0; queue.length && spent < MAX_CELLS; spent++) {
+			const top = queue.reduce((most, cell, i) => cell.reach > queue[most].reach ? i : most, 0);
+			const cell = queue.splice(top, 1)[0];
+			if (cell.distance > best.distance) best = cell;
+			if (cell.reach - best.distance <= precision) continue;
+			const next = cell.half / 2;
+			for (const [dx, dy] of [
+				[-1, -1],
+				[1, -1],
+				[-1, 1],
+				[1, 1]
+			]) queue.push(this.#cell(cell.x + dx * next, cell.y + dy * next, next, rings));
+		}
+		return best;
+	}
+	/** The point deepest inside the room, for text `aspect` times as wide as it is tall. */
+	static pole(parts, aspect = 1) {
+		const best = parts.map((rings) => this.#search(rings.map((ring) => ring.map(([x, y]) => [x, y * aspect])))).reduce((most, cell) => cell.distance > most.distance ? cell : most);
+		return [best.x, best.y / aspect];
+	}
+	static #cached(room, aspect) {
+		const key = aspect.toFixed(2);
+		let pole = room.poles.get(key);
+		if (!pole) room.poles.set(key, pole = this.pole(room.parts, aspect));
+		return pole;
+	}
+	/** What to try, best first: everything on one line, then wrapped, then turned, then shortened. */
+	static #tries(name, detail) {
+		const broken = wrapped(name);
+		const tries = [{
+			lines: detail ? [name, detail] : [name],
+			rotated: false
+		}];
+		if (broken) tries.push({
+			lines: detail ? [...broken, detail] : broken,
+			rotated: false
+		});
+		if (detail) tries.push({
+			lines: [name],
+			rotated: false
+		});
+		if (detail && broken) tries.push({
+			lines: broken,
+			rotated: false
+		});
+		tries.push({
+			lines: [name],
+			rotated: true
+		});
+		for (let length = name.length - 1; length >= SHORTEST; length--) tries.push({
+			lines: [`${name.slice(0, length).trimEnd()}…`],
+			rotated: false
+		});
+		return tries;
+	}
+	/** The label's lines in pixels, slid into view for a room the viewport cuts, or nothing when no form of the text fits. */
+	static place({ room, detail, place, width, height, blocked }) {
+		const parts = room.parts.map((rings) => rings.map((ring) => ring.map(place)));
+		const corners = parts.flat(2);
+		const roomWidth = Math.min(width, Math.max(...corners.map(([x]) => x)) - Math.min(...corners.map(([x]) => x)));
+		const roomHeight = Math.min(height, Math.max(...corners.map(([, y]) => y)) - Math.min(...corners.map(([, y]) => y)));
+		for (const { lines, rotated } of this.#tries(room.name, detail)) {
+			const long = Math.max(...lines.map((line) => Math.max(line.length * CHAR, FrameworkText.width(line, 11)))) + 6, deep = lines.length * LINE + PAD;
+			const w = rotated ? deep : long, h = rotated ? long : deep;
+			if (w > roomWidth || h > roomHeight) continue;
+			const pole = place(this.#cached(room, w / h));
+			const cx = Math.max(w / 2, Math.min(width - w / 2, pole[0])), cy = Math.max(h / 2, Math.min(height - h / 2, pole[1]));
+			for (const [dx, dy] of OFFSETS) {
+				const box = {
+					x: cx + dx - w / 2,
+					y: cy + dy - h / 2,
+					w,
+					h
+				};
+				if (box.x < 0 || box.y < 0 || box.x + w > width || box.y + h > height) continue;
+				if (blocked.some((other) => overlaps(box, other)) || !parts.some((rings) => encloses(rings, box))) continue;
+				blocked.push(box);
+				return lines.map((text, i) => {
+					const shift = (i - (lines.length - 1) / 2) * LINE;
+					return {
+						key: `${room.key}/${i}`,
+						text,
+						rotated,
+						strong: i === 0,
+						x: rotated ? cx + dx + shift + 4 : cx + dx,
+						y: rotated ? cy + dy : cy + dy + shift + 4
+					};
+				});
+			}
+		}
+		return [];
+	}
+};
+export { RoomLabelFit, RoomLabelMode };

package/dist/charts/geomaps/SlippyPointMap.js

@@ -0,0 +1,128 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PointMap } from "./PointMap.js";
+import { SlippyView } from "./SlippyView.js";
+import { descending, max, scaleSqrt } from "d3";
+// src/charts/geomaps/SlippyPointMap.ts
+/** How each place is marked. */
+var SlippyMarker = /* @__PURE__ */ function(SlippyMarker) {
+	SlippyMarker["Dot"] = "dot";
+	SlippyMarker["Bubble"] = "bubble";
+	SlippyMarker["Labelled"] = "labelled";
+	return SlippyMarker;
+}({});
+var DOT = 5;
+var LARGEST = 26;
+var CHAR = 6.2;
+var LINE = 14;
+var CONTROLS_WIDTH = 32;
+/** Places on a pannable web map. Marks redraw from the projection at each zoom, so they stay sharp and correctly placed. */
+var SlippyPointMap = class extends PointMap {
+	static meta = {
+		id: "slippy-point-map",
+		name: "Web map with points",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Plots places on a draggable Web Mercator map, over raster tiles or built-in vector land.",
+		tags: [
+			"map",
+			"slippy",
+			"tiles",
+			"web map",
+			"openstreetmap",
+			"basemap",
+			"pan",
+			"zoom",
+			"locator"
+		],
+		sample: (seed) => SampleData.cities(seed),
+		variants: {
+			marker: [
+				"dot",
+				"bubble",
+				"labelled"
+			],
+			scaleBar: [true, false],
+			graticule: [false, true]
+		}
+	};
+	#view = new SlippyView();
+	defaults() {
+		return {
+			...super.defaults(),
+			zoom: true,
+			graticule: false,
+			marker: "dot",
+			scaleBar: true
+		};
+	}
+	get framed() {
+		return false;
+	}
+	get semanticZoom() {
+		return true;
+	}
+	get animated() {
+		return !this.#view.moving && super.animated;
+	}
+	frame(ctx) {
+		const { width, height } = ctx.plot;
+		const view = this.#view.view(width, height, this.target(), this.viewport.transform);
+		return this.frameOf(this.#view.projection(width, height, view), width, height);
+	}
+	viewLimits({ width, height }) {
+		return this.#view.limits(width, height, this.options.tiles?.maxZoom ?? 19);
+	}
+	viewMoved(transform, settled) {
+		this.#view.moving = !settled;
+		this.render();
+		super.viewMoved(transform, settled);
+	}
+	drawBackdrop(ctx, { width, height }) {
+		this.#view.drawTiles(ctx, width, height, this.#view.view(width, height, this.target(), this.viewport.transform), this.options.tiles);
+	}
+	drawMap(ctx, frame) {
+		const { marker, tiles } = this.options;
+		if (!tiles) this.drawGround(ctx, frame);
+		const sites = this.sites(frame);
+		const radius = scaleSqrt().domain([0, max(sites, (site) => site.value) || 1]).range([3, LARGEST]);
+		const size = (value) => marker === "bubble" ? radius(value) : DOT;
+		const dots = ctx.marks("sites", "circle", sites, (d) => d.key).attr("fill", ctx.palette.sequential(.75)).attr("fill-opacity", marker === "bubble" ? .72 : 1).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: (d) => size(d.value)
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		});
+		ctx.hover(dots, (d) => ({
+			title: d.name,
+			rows: [[this.options.value, d.value]]
+		}));
+		const labels = marker === "labelled" ? this.clearLabels(sites, frame) : [];
+		this.halo(ctx, ctx.text(ctx.marks("names", "text", labels, (d) => d.key), 11, "ink")).attr("x", (d) => d.x + DOT + 4).attr("y", (d) => d.y + 4).attr("pointer-events", "none").text((d) => d.name);
+	}
+	/** Largest places first; a label that would touch one already placed, or leave the map, is dropped. */
+	clearLabels(sites, { width, height }) {
+		const taken = [];
+		return [...sites].sort((a, b) => descending(a.value, b.value)).filter(({ x, y, name }) => {
+			const box = [
+				x + DOT + 2,
+				y - LINE / 2,
+				x + DOT + 6 + name.length * CHAR,
+				y + LINE / 2
+			];
+			const fits = box[2] <= width - CONTROLS_WIDTH && box[3] <= height && !taken.some(([x0, y0, x1, y1]) => box[0] < x1 && box[2] > x0 && box[1] < y1 && box[3] > y0);
+			if (fits) taken.push(box);
+			return fits;
+		});
+	}
+	drawKey(ctx, { width, height, projection }) {
+		const view = this.#view.view(width, height, this.target(), this.viewport.transform);
+		this.#view.drawNotes(ctx, width, height, view, this.options.tiles, !!this.options.scaleBar, projection);
+	}
+};
+export { SlippyMarker, SlippyPointMap };

package/dist/charts/geomaps/SlippyRegionMap.js

@@ -0,0 +1,86 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { ChoroplethBase } from "./ChoroplethBase.js";
+import { GeoClassification } from "./GeoClasses.js";
+import { GeoLand } from "./GeoLand.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { SlippyView } from "./SlippyView.js";
+// src/charts/geomaps/SlippyRegionMap.ts
+/** A choropleth laid over a pannable web map, for regions that need street-level context. */
+var SlippyRegionMap = class extends ChoroplethBase {
+	static meta = {
+		id: "slippy-region-map",
+		name: "Web map with regions",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Lays shaded regions over a draggable Web Mercator map, keeping the places beneath them readable.",
+		tags: [
+			"map",
+			"slippy",
+			"tiles",
+			"web map",
+			"openstreetmap",
+			"overlay",
+			"choropleth",
+			"pan",
+			"zoom"
+		],
+		sample: (seed) => GeoSamples.usStates(seed),
+		variants: {
+			classification: [
+				GeoClassification.Continuous,
+				GeoClassification.Quantile,
+				GeoClassification.NaturalBreaks
+			],
+			scaleBar: [true, false],
+			graticule: [false, true]
+		}
+	};
+	#view = new SlippyView();
+	defaults() {
+		return {
+			...super.defaults(),
+			zoom: true,
+			graticule: false,
+			scaleBar: true,
+			opacity: .68
+		};
+	}
+	get framed() {
+		return false;
+	}
+	get semanticZoom() {
+		return true;
+	}
+	get shade() {
+		return this.options.opacity;
+	}
+	get animated() {
+		return !this.#view.moving && super.animated;
+	}
+	frame(ctx) {
+		const { width, height } = ctx.plot, plotHeight = Math.max(40, height - this.keyHeight());
+		const view = this.#view.view(width, plotHeight, this.target(), this.viewport.transform);
+		return this.frameOf(this.#view.projection(width, plotHeight, view), width, plotHeight);
+	}
+	viewLimits({ width, height }) {
+		return this.#view.limits(width, height, this.options.tiles?.maxZoom ?? 19);
+	}
+	viewMoved(transform, settled) {
+		this.#view.moving = !settled;
+		this.render();
+		super.viewMoved(transform, settled);
+	}
+	drawBackdrop(ctx, { width, height, path }) {
+		const { tiles } = this.options;
+		this.#view.drawTiles(ctx, width, height, this.#view.view(width, height, this.target(), this.viewport.transform), tiles);
+		ctx.marks("land", "path", tiles ? [] : [GeoLand.world]).attr("d", (d) => path(d) ?? "").attr("fill", ctx.theme.grid).attr("stroke", ctx.theme.surface);
+	}
+	drawKey(ctx, frame) {
+		super.drawKey(ctx, frame);
+		const { width, height, projection } = frame;
+		const view = this.#view.view(width, height, this.target(), this.viewport.transform);
+		this.#view.drawNotes(ctx, width, height, view, this.options.tiles, !!this.options.scaleBar, projection);
+	}
+};
+export { SlippyRegionMap };

package/dist/charts/geomaps/SlippyView.js

@@ -0,0 +1,134 @@
+import { geoBounds, geoMercator } from "d3";
+// src/charts/geomaps/SlippyView.ts
+/** The public OpenStreetMap server. Read its usage policy before sending it production traffic. */
+var OPEN_STREET_MAP = {
+	url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+	attribution: "© OpenStreetMap contributors",
+	maxZoom: 19
+};
+var TAU = Math.PI * 2;
+var TILE = 256;
+var PADDING = 28;
+var START_ZOOM = 10;
+var NICE = [
+	1,
+	2,
+	5
+];
+var EARTH_METRES = 40075016.686;
+/** Web-Mercator view shared by tiled maps: fits the data once, then follows the zoom transform. */
+var SlippyView = class SlippyView {
+	#base = null;
+	#key = "";
+	moving = false;
+	/** The tiles covering a view, in draw order. `k` is the pixel width of the whole world. */
+	static tiles(width, height, { k, x, y }, source) {
+		const top = source.maxZoom ?? 19;
+		const z = Math.max(0, Math.min(top, Math.round(Math.log2(k / TILE))));
+		const count = 2 ** z, size = k / count, left = x - k / 2, up = y - k / 2;
+		const firstRow = Math.max(0, Math.floor(-up / size)), lastRow = Math.min(count - 1, Math.ceil((height - up) / size) - 1);
+		const firstCol = Math.floor(-left / size), lastCol = Math.ceil((width - left) / size) - 1;
+		const tiles = [];
+		for (let row = firstRow; row <= lastRow; row++) for (let col = firstCol; col <= lastCol; col++) {
+			const wrapped = (col % count + count) % count;
+			tiles.push({
+				key: `${z}/${col}/${row}`,
+				url: SlippyView.address(source, z, wrapped, row),
+				x: left + col * size,
+				y: up + row * size,
+				size
+			});
+		}
+		return tiles;
+	}
+	static address({ url }, z, x, y) {
+		if (typeof url === "function") return url(z, x, y);
+		return url.replace("{z}", `${z}`).replace("{x}", `${x}`).replace("{y}", `${y}`);
+	}
+	#fit(width, height, target) {
+		const projection = geoMercator();
+		projection.fitExtent([[PADDING, PADDING], [width - PADDING, height - PADDING]], target ? SlippyView.fittable(target) : {
+			type: "MultiPoint",
+			coordinates: [[-170, -58], [180, 78]]
+		});
+		const k = projection.scale() * TAU, [x, y] = projection.translate();
+		if (Number.isFinite(k) && Number.isFinite(x) && Number.isFinite(y)) {
+			if (k <= TILE * 2 ** START_ZOOM * 8) return {
+				k,
+				x,
+				y
+			};
+		}
+		return this.#around(width, height, target);
+	}
+	/** Mercator cannot show a shape across the antimeridian as one piece, so fit the side holding most of it. */
+	static fittable(target) {
+		const [[west, south], [east, north]] = geoBounds(target);
+		if (!(west > east)) return target;
+		return {
+			type: "MultiPoint",
+			coordinates: 180 - west > east + 180 ? [[west, south], [180, north]] : [[-180, south], [east, north]]
+		};
+	}
+	/** A target too small to fit, such as one point: centre on it at a street-free zoom. */
+	#around(width, height, target) {
+		const k = TILE * 2 ** START_ZOOM;
+		const at = geoMercator().scale(k / TAU).translate([0, 0])([...this.#first(target)]) ?? [0, 0];
+		return {
+			k,
+			x: width / 2 - at[0],
+			y: height / 2 - at[1]
+		};
+	}
+	#first(target) {
+		const coordinates = target?.coordinates?.[0];
+		return Array.isArray(coordinates) && typeof coordinates[0] === "number" ? coordinates : [0, 0];
+	}
+	view(width, height, target, { k, x, y }) {
+		const key = `${width}x${height}|${JSON.stringify(target).length}`;
+		if (!this.#base || key !== this.#key) this.#base = this.#fit(width, height, target);
+		this.#key = key;
+		const base = this.#base;
+		return {
+			k: base.k * k,
+			x: x + base.x * k,
+			y: y + base.y * k
+		};
+	}
+	projection(width, height, { k, x, y }) {
+		return geoMercator().scale(k / TAU).translate([x, y]).clipExtent([[0, 0], [width, height]]);
+	}
+	/** Stops at the edge of the world, and never smaller than the frame. */
+	limits(width, height, maxTileZoom) {
+		const { k, x, y } = this.#base;
+		return {
+			scale: [Math.min(1, Math.max(width, height) / k), Math.max(1, TILE * 2 ** (maxTileZoom + 2) / k)],
+			pan: [[x - k / 2, y - k / 2], [x + k / 2, y + k / 2]]
+		};
+	}
+	drawTiles(ctx, width, height, view, source) {
+		const tiles = source ? SlippyView.tiles(width, height, view, source) : [];
+		ctx.marks("tiles", "image", tiles, (d) => d.key).attr("href", (d) => d.url).attr("preserveAspectRatio", "none").attr("x", (d) => d.x).attr("y", (d) => d.y).attr("width", (d) => d.size + .5).attr("height", (d) => d.size + .5);
+	}
+	/** Scale bar at the map's centre latitude, and the source credit. */
+	drawNotes(ctx, width, height, view, source, scaleBar, projection) {
+		const halo = (labels) => labels.attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		const credit = ctx.marks("credit", "text", source ? [source.attribution] : []);
+		halo(ctx.text(credit, 10, "secondary")).attr("x", width - 4).attr("y", height - 5).attr("text-anchor", "end").text((d) => d);
+		const lat = projection.invert?.([width / 2, height / 2])?.[1];
+		const metres = Number.isFinite(lat) ? EARTH_METRES * Math.cos(lat * Math.PI / 180) / view.k : NaN;
+		const bar = scaleBar && Number.isFinite(metres) && metres > 0 ? [SlippyView.bar(metres, width)] : [];
+		ctx.marks("scale-bar", "rect", bar).attr("x", 6).attr("y", height - 10).attr("height", 3).attr("rx", 1.5).attr("width", (d) => d.px).attr("fill", ctx.theme.ink);
+		halo(ctx.text(ctx.marks("scale-label", "text", bar), 10, "ink")).attr("x", 6).attr("y", height - 15).text((d) => d.label);
+	}
+	/** The longest round distance that fits in a fifth of the width. */
+	static bar(metresPerPixel, width) {
+		const reach = metresPerPixel * width / 5, power = 10 ** Math.floor(Math.log10(reach));
+		const metres = NICE.map((step) => step * power).filter((value) => value <= reach).at(-1) ?? power;
+		return {
+			px: metres / metresPerPixel,
+			label: metres >= 1e3 ? `${metres / 1e3} km` : `${metres} m`
+		};
+	}
+};
+export { OPEN_STREET_MAP, SlippyView };

package/dist/charts/geomaps/SpikeMap.js

@@ -0,0 +1,103 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { GeoProjectionKind } from "./GeoProjection.js";
+import { GeoSamples } from "./GeoSamples.js";
+import { PointMap } from "./PointMap.js";
+import { ascending, max, scaleLinear } from "d3";
+// src/charts/geomaps/SpikeMap.ts
+var GeoSpikeShape = /* @__PURE__ */ function(GeoSpikeShape) {
+	GeoSpikeShape["Triangle"] = "triangle";
+	GeoSpikeShape["Peak"] = "peak";
+	GeoSpikeShape["Needle"] = "needle";
+	return GeoSpikeShape;
+}({});
+var GeoSpikeLean = /* @__PURE__ */ function(GeoSpikeLean) {
+	GeoSpikeLean["Upright"] = "upright";
+	GeoSpikeLean["Radial"] = "radial";
+	return GeoSpikeLean;
+}({});
+/** Tall thin spikes stand in for bubbles when values are dense: height compares well and marks barely collide. */
+var SpikeMap = class extends PointMap {
+	static meta = {
+		id: "spike-map",
+		name: "Spike map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Two,
+		shape: DataShape.Geo,
+		description: "Raises a spike at each location with height proportional to value, keeping dense data readable.",
+		tags: [
+			"map",
+			"spike",
+			"peak",
+			"height",
+			"dense"
+		],
+		sample: (seed) => GeoSamples.scatter(seed, 260),
+		variants: {
+			spike: [
+				"triangle",
+				"peak",
+				"needle"
+			],
+			lean: ["upright", "radial"],
+			breadth: [6, 11],
+			projection: [
+				GeoProjectionKind.NaturalEarth,
+				GeoProjectionKind.Robinson,
+				GeoProjectionKind.EqualEarth,
+				GeoProjectionKind.Orthographic,
+				GeoProjectionKind.AzimuthalEqualArea
+			]
+		},
+		valid: (values) => (values.spike !== "needle" || values.breadth === 6) && (values.lean !== "radial" || values.projection === GeoProjectionKind.Orthographic || values.projection === GeoProjectionKind.AzimuthalEqualArea)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			spike: "triangle",
+			lean: "upright",
+			breadth: 6,
+			reach: .15,
+			graticule: false
+		};
+	}
+	tallest(ctx) {
+		return ctx.plot.height * this.options.reach;
+	}
+	inset(ctx) {
+		const tall = this.tallest(ctx);
+		return this.options.lean === "radial" ? {
+			top: tall,
+			right: tall,
+			bottom: tall,
+			left: tall
+		} : { top: tall };
+	}
+	shape(height) {
+		const half = this.options.breadth / 2, h = -height.toFixed(2);
+		switch (this.options.spike) {
+			case "needle": return `M0,0V${h}`;
+			case "peak": return `M${-half},0C${-half / 4},0 ${-half / 8},${h * .55} 0,${h}C${half / 8},${h * .55} ${half / 4},0 ${half},0Z`;
+			default: return `M${-half},0L0,${h}L${half},0Z`;
+		}
+	}
+	drawMap(ctx, frame) {
+		this.drawGround(ctx, frame);
+		const { value, spike, lean } = this.options, sites = this.sites(frame).sort((a, b) => ascending(a.y, b.y));
+		const top = max(sites, (d) => Math.abs(d.value)) ?? 0, height = scaleLinear([0, top || 1], [0, this.tallest(ctx)]);
+		const tint = ctx.palette.color(value), needle = spike === "needle";
+		const [cx, cy] = frame.path.centroid({ type: "Sphere" });
+		const angle = (x, y) => lean === "radial" ? Math.atan2(y - cy, x - cx) * 180 / Math.PI + 90 : 0;
+		const marks = ctx.marks("spikes", "path", sites, (d) => d.key).attr("fill", needle ? "none" : tint).attr("fill-opacity", .28).attr("stroke", tint).attr("stroke-width", needle ? 1.5 : 1).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("transform", (d) => `translate(${d.x},${d.y}) rotate(${angle(d.x, d.y)})`);
+		ctx.set(marks, { d: (d) => this.shape(height(Math.abs(d.value))) }, { d: this.shape(0) }, 2);
+		ctx.hover(marks, (d) => ({
+			title: d.name,
+			color: tint,
+			rows: [[value, d.value]]
+		}));
+		const reference = top ? [+(top * .6).toPrecision(1)] : [];
+		ctx.marks("key-spike", "path", reference).attr("d", (d) => this.shape(height(d))).attr("fill", needle ? "none" : tint).attr("fill-opacity", .28).attr("stroke", tint).attr("transform", `translate(${this.options.breadth / 2 + 2},${frame.height - 3})`).attr("stroke-width", 1);
+		ctx.text(ctx.marks("key-spike-label", "text", reference).attr("x", this.options.breadth + 7).attr("y", frame.height - 4).text((d) => Scales.format(d, top)), 10, "muted");
+	}
+};
+export { GeoSpikeLean, GeoSpikeShape, SpikeMap };