@niekes/charts-3d 0.6.0 → 0.7.0

package/dist/index.js

@@ -2,10 +2,10 @@
 import * as React from "react";
 import { extent, nice, range, ticks } from "d3-array";
 import { axes3D, box, camera3D, cubes3D, gridPlanes3D, normal, points3D, polygons3D, sort } from "d3-3d";
-import { KeyboardIcon } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { geoArea, geoOrthographic, geoPath } from "d3-geo";
 // lib/utils.ts
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
@@ -30,7 +30,11 @@ const ZOOM_CURSOR = 400;
 const SHORTCUTS = {
 	dragRotate: {
 		label: "Rotate",
-		hint: ["Mod", "Drag"]
+		gesture: ["Mod", "Drag"]
+	},
+	touchOrbit: {
+		label: "Rotate",
+		gesture: ["Two-finger drag"]
 	},
 	rotateLeft: {
 		label: "Rotate",
@@ -54,7 +58,7 @@ const SHORTCUTS = {
 	},
 	dragPan: {
 		label: "Pan",
-		hint: ["Alt", "Drag"]
+		gesture: ["Alt", "Drag"]
 	},
 	panLeft: {
 		label: "Pan",
@@ -100,7 +104,11 @@ const SHORTCUTS = {
 	},
 	wheelZoom: {
 		label: "Zoom",
-		hint: ["Mod", "Scroll"]
+		gesture: ["Mod", "Scroll"]
+	},
+	pinchZoom: {
+		label: "Zoom",
+		gesture: ["Pinch"]
 	},
 	reset: {
 		label: "Reset",
@@ -109,7 +117,7 @@ const SHORTCUTS = {
 	},
 	doubleClickReset: {
 		label: "Reset",
-		hint: ["Double-click"]
+		gesture: ["Double-click"]
 	},
 	help: {
 		label: "Keyboard shortcuts",
@@ -128,6 +136,8 @@ const mac = () => /mac/i.test(globalThis.navigator?.userAgentData?.platform ?? g
 const modLabel = () => mac() ? "⌘" : "Ctrl";
 /** The label of the Alt key: ⌥ on a Mac, Alt elsewhere. */
 const altLabel = () => mac() ? "⌥" : "Alt";
+/** The platform never changes, so its store has nothing to tell. */
+const never = () => () => {};
 /** Whether the platform modifier - ⌘ on a Mac, Ctrl elsewhere - is held in `e`. */
 const platformMod = (e) => mac() ? e.metaKey : e.ctrlKey;
 /** Whether `value` lies between the ends `lo` and `hi`. */
@@ -184,7 +194,7 @@ function shortcutsOf(keymap) {
 			...SHORTCUTS[action],
 			...Array.isArray(own) ? { keys: own } : own || {}
 		};
-		const on = own !== false && (shortcut.hint !== void 0 || keys.length > 0);
+		const on = own !== false && (shortcut.gesture !== void 0 || keys.length > 0);
 		return {
 			...shortcut,
 			action,
@@ -193,19 +203,24 @@ function shortcutsOf(keymap) {
 		};
 	});
 }
+/** The keys or the gesture of a shortcut as the panel writes them, with the modifiers of the reader's platform. */
+const partsOf = ({ keys, gesture }) => (gesture ?? split(keys[0])).map((k) => k === "Mod" ? modLabel() : k === "Alt" ? altLabel() : KBD[k] ?? k);
 /**
 * The rows of the shortcut panel: the actions by label, the keys of a row in
 * groups of the same modifiers, left of its gestures, each a group of its own.
 */
 function rowsOf(shortcuts) {
 	const rows = /* @__PURE__ */ new Map();
-	for (const { label, keys, hint } of shortcuts) {
-		const parts = (hint ?? split(keys[0])).map((k) => k === "Mod" ? modLabel() : k === "Alt" ? altLabel() : KBD[k] ?? k);
+	for (const { label, keys, gesture } of shortcuts) {
+		const parts = partsOf({
+			keys,
+			gesture
+		});
 		const row = rows.get(label) ?? {
 			keys: /* @__PURE__ */ new Map(),
 			gestures: []
 		};
-		if (hint) row.gestures.push(parts);
+		if (gesture) row.gestures.push(parts);
 		else {
 			const group = parts.slice(0, -1).join("+");
 			const known = row.keys.get(group);
@@ -221,8 +236,8 @@ function rowsOf(shortcuts) {
 }
 /**
 * What a keymap does: the actions that are on, the step of each key, the help
-* keys and the rows of the panel. Without the `panel`, the help keys have
-* nothing to open and are off.
+* keys, the rows of the panel and the hint of a gesture. Without the `panel`,
+* the help keys have nothing to open and are off.
 */
 function keymapOf(keymap, panel) {
 	const all = shortcutsOf(keymap);
@@ -233,7 +248,14 @@ function keymapOf(keymap, panel) {
 		help: on.find((s) => s.action === "help")?.keys ?? [],
 		label: all.find((s) => s.action === "help").label,
 		aria: on.flatMap((s) => s.keys.map(aria)).join(" "),
-		rows: panel ? rowsOf(on) : []
+		rows: panel ? rowsOf(on) : [],
+		hint: (action) => {
+			const shortcut = on.find((s) => s.action === action);
+			return shortcut && {
+				label: shortcut.label,
+				gesture: partsOf(shortcut)
+			};
+		}
 	};
 }
 function ChartContainer3D({ id, config, defaultView = {
@@ -241,15 +263,16 @@ function ChartContainer3D({ id, config, defaultView = {
 	tilt: Math.PI / 6
 }, width = 640, height = 400, animationDuration, legend = false, renderer: requested = "svg", shortcuts = true, keymap = {}, gizmo = "bottom-left", tooltip = "top-right", className, children, "aria-label": ariaLabel, ...props }) {
 	const chartId = chartIdOf(id, React.useId());
-	const { scene, renderer, canvas, repaint, hover, hide, leave, tip, focus } = useScene(requested, width, height, tooltip);
+	const { scene, place, renderer, canvas, repaint, hover, hide, leave, tip, focus } = useScene(requested, width, height, tooltip);
 	const keys = keymapOf(keymap, shortcuts);
-	const { view, handlers } = useOrbit(defaultView, width, keys, hide, hover);
+	const { view, handlers, hint } = useOrbit(defaultView, width, keys, hide, hover);
 	const camera = useCamera(view, width, height);
 	const context = React.useMemo(() => ({
 		config,
 		camera,
 		renderer,
 		scene,
+		place,
 		repaint,
 		focus,
 		animationDuration
@@ -257,6 +280,7 @@ function ChartContainer3D({ id, config, defaultView = {
 		config,
 		camera,
 		renderer,
+		place,
 		repaint,
 		focus,
 		animationDuration
@@ -274,10 +298,10 @@ function ChartContainer3D({ id, config, defaultView = {
 			/* @__PURE__ */ jsxs("div", {
 				className: "relative rounded-lg has-focus-visible:ring-[3px] has-focus-visible:ring-ring/50",
 				children: [
-					/* @__PURE__ */ jsx("svg", {
+					/* @__PURE__ */ jsx(ChartSvg3D, {
 						viewBox: `0 0 ${width} ${height}`,
-						role: "img",
-						...keymapProps(keys, ariaLabel),
+						keys,
+						label: ariaLabel,
 						onPointerLeave: leave,
 						...handlers,
 						children: /* @__PURE__ */ jsx(Chart3DContext.Provider, {
@@ -295,7 +319,8 @@ function ChartContainer3D({ id, config, defaultView = {
 						camera,
 						corner: gizmo
 					}),
-					/* @__PURE__ */ jsx(ChartTooltip3D, { tip })
+					/* @__PURE__ */ jsx(ChartTooltip3D, { tip }),
+					/* @__PURE__ */ jsx(ChartHint3D, { ...hint })
 				]
 			}),
 			/* @__PURE__ */ jsx(ChartShortcuts3D, { ...keys }),
@@ -308,38 +333,71 @@ function chartIdOf(id, uniqueId) {
 	return `chart-${id || uniqueId.replace(/:/g, "")}`;
 }
 /**
-* What the svg says about its keymap: a label that names the drag and the
+* The svg of the chart, saying what `keys` do. The server knows no platform
+* and says Ctrl; the store renders once more after hydration, with the
+* modifier of the reader. The panel reads the platform directly: it opens on
+* the client only.
+*/
+function ChartSvg3D({ keys, label, viewBox, ...props }) {
+	const mod = React.useSyncExternalStore(never, modLabel, () => "Ctrl");
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox,
+		role: "img",
+		...keymapProps(keys, mod, label),
+		...props
+	});
+}
+/**
+* What the svg says about its keymap: a label that names the `mod` drag and the
 * help key if they are on, the keys, the focus only if a key does something
-* and the grab cursor only if a drag does; without one, a touch scrolls the page.
+* and, if a drag or two fingers do, `touch-pan-y`: a vertical swipe scrolls
+* the page and every other touch reaches the chart.
 */
-function keymapProps(keys, label) {
-	const drag = keys.on("dragRotate") || keys.on("dragPan");
+function keymapProps(keys, mod, label) {
+	const drag = [
+		"dragRotate",
+		"dragPan",
+		"touchOrbit",
+		"pinchZoom"
+	].some(keys.on);
 	const help = keys.help[0];
 	const said = [
 		"3D chart.",
-		keys.on("dragRotate") && `${modLabel()} and drag to rotate it.`,
+		keys.on("dragRotate") && `${mod} and drag to rotate it.`,
 		help && `Press ${aria(help)} for all shortcuts.`
 	];
 	return {
 		"aria-label": label ?? said.filter(Boolean).join(" "),
 		"aria-keyshortcuts": keys.aria || void 0,
 		tabIndex: keys.aria ? 0 : void 0,
-		className: cn("block h-auto w-full outline-hidden select-none mask-x-from-96% mask-y-from-96%", drag && "touch-none")
+		className: cn("block h-auto w-full outline-hidden select-none mask-x-from-96% mask-y-from-96%", drag && "touch-pan-y")
 	};
 }
+const PRECEDING = 2;
 /**
 * The marks of the chart and what reads them: the renderer that draws them,
-* the canvas it paints them on and the hover that shows their tooltips.
+* the canvas it paints them on and the hover that shows their tooltips. The
+* scene holds the marks of every `Marks3D` in the container, each set placed
+* by `place`, in the order of the sets in the document - the order SVG paints
+* them in - so a set that mounts later but sits earlier lies under the others
+* on every renderer.
 */
 function useScene(requested, width, height, placement) {
 	const scene = React.useRef([]);
+	const sets = React.useRef(/* @__PURE__ */ new Map());
+	const place = React.useCallback((id, set) => {
+		if (set) sets.current.set(id, set);
+		else sets.current.delete(id);
+		scene.current = [...sets.current.values()].sort((a, b) => a.node.compareDocumentPosition(b.node) & PRECEDING ? 1 : -1).flatMap((s) => s.marks);
+	}, []);
 	const tip = useTip(placement);
 	const focus = useFocus();
 	const renderer = useRenderer(requested);
-	const { canvas, repaint } = useCanvas(scene, width, height, renderer);
+	const { canvas, repaint } = useCanvas(scene, width);
 	const { hover, hide, leave } = useHover(scene, width, height, tip, focus);
 	return {
 		scene,
+		place,
 		renderer,
 		canvas,
 		repaint,
@@ -421,7 +479,14 @@ const ZERO = {
 	x: 0,
 	y: 0
 };
-/** `view` moved by one step. The tilt stops at the zenith and the nadir, the zoom at 1/4 and 8. */
+/**
+* `view` moved by one step. The tilt stops at the zenith and the nadir, the
+* zoom at 1/4 and 8, and a turn is divided by the zoom: zoomed in, a drag
+* moves the picture under the pointer as far as zoomed out, and a key turns
+* it as far on screen. A zoom keeps the point `at` where it is, by the zoom
+* after its limits, so the chart stands still at them; without `at` that
+* point is the origin of the chart, and the pan stays.
+*/
 function moved(view, move, initial) {
 	if (move.reset) return initial;
 	const step = {
@@ -438,14 +503,18 @@ function moved(view, move, initial) {
 		x: 0,
 		y: 0
 	};
+	const from = view.zoom ?? 1;
+	const zoom = clamp(.25, 8, from * step.zoom);
+	const k = zoom / from;
+	const at = move.at ?? pan;
 	return {
 		...view,
-		yaw: view.yaw + step.yaw,
-		tilt: clamp(-Math.PI / 2, Math.PI / 2, view.tilt + step.tilt),
-		zoom: clamp(.25, 8, (view.zoom ?? 1) * step.zoom),
+		yaw: view.yaw + step.yaw / from,
+		tilt: clamp(-Math.PI / 2, Math.PI / 2, view.tilt + step.tilt / from),
+		zoom,
 		pan: {
-			x: pan.x + step.pan.x,
-			y: pan.y + step.pan.y
+			x: at.x - (at.x - pan.x) * k + step.pan.x,
+			y: at.y - (at.y - pan.y) * k + step.pan.y
 		}
 	};
 }
@@ -463,11 +532,17 @@ function animates() {
 * that is new starts at `enter`, or where it ends; a key that is gone glides
 * back to `enter`, the mirror of its entering - without one it stands where
 * it is - and leaves when the glide is done. Without time, or with reduced
-* motion, the numbers jump.
+* motion, the numbers jump. At rest it hands back the record of its target,
+* no copy, so no frame rebuilds it: read it, never write to it.
 */
 function useTween(values, enter) {
 	const { animationDuration: duration = 600 } = useChart3D();
-	const key = JSON.stringify(values);
+	const last = React.useRef(null);
+	if (last.current?.values !== values) last.current = {
+		values,
+		key: JSON.stringify(values)
+	};
+	const key = last.current.key;
 	const [tween, setTween] = React.useState({
 		key,
 		from: values,
@@ -487,7 +562,7 @@ function useTween(values, enter) {
 		let frame = 0;
 		const step = (now) => {
 			start ??= now;
-			const t = Math.min(1, (now - start) / duration);
+			const t = duration > 0 ? Math.min(1, (now - start) / duration) : 1;
 			setTween((tw) => ({
 				...tw,
 				t
@@ -499,13 +574,19 @@ function useTween(values, enter) {
 	}, [tween.key, duration]);
 	return shown;
 }
-/** The numbers of `tween` on screen: `from` eased into `to`, a new key from `enter` or where it ends, a gone one gliding back to `enter` until the glide is done. */
+/**
+* The numbers of `tween` on screen: `from` eased into `to`, a new key from
+* `enter` or where it ends, a gone one gliding back to `enter` until the
+* glide is done. At rest, as while the camera turns, they are the target
+* itself: nothing to build.
+*/
 function tweenNumbers({ from, to, t }, enter) {
+	if (t >= 1) return to;
 	const s = t * t * (3 - 2 * t);
-	const gone = t >= 1 ? [] : Object.entries(from).filter(([k]) => !(k in to));
+	const gone = Object.entries(from).filter(([k]) => !(k in to));
 	return Object.fromEntries([...Object.entries(to).map(([k, end]) => {
 		const start = from[k] ?? enter ?? end;
-		return [k, t >= 1 ? end : start + (end - start) * s];
+		return [k, start + (end - start) * s];
 	}), ...gone.map(([k, start]) => [k, start + ((enter ?? start) - start) * s])]);
 }
 /**
@@ -640,16 +721,19 @@ function between(from, to, k) {
 /**
 * The view of the camera, and the handlers that move it, as far as `keys`
 * has them on: a drag turns it, or pans it while Alt is held, the keys step
-* it, Ctrl or ⌘ with the wheel zooms it and a double click resets it.
+* it, Ctrl or ⌘ with the wheel zooms it and a double click resets it - a
+* drag following the pointer at once, a key and a double click gliding.
 * `data-orbiting` among them is true while the camera turns. `onDragStart`
-* runs when a press becomes a drag, `onHover` on a move without one.
+* runs when a press becomes a drag, `onHover` on a move without one - but
+* under two fingers, where the tooltip would jump from one to the other, it
+* goes, as in a drag.
 */
 function useOrbit(defaultView, width, keys, onDragStart, onHover) {
 	const { view, jump, glide } = useGlide(defaultView);
 	const [orbiting, setOrbiting] = React.useState(false);
 	const held = useModsHeld();
 	const drag = React.useRef(null);
-	const ref = useWheelZoom(jump, keys.on("wheelZoom"));
+	const { ref, touching, hint } = useGestures(jump, keys, width, setOrbiting);
 	const move = (step) => jump((v) => moved(v, step, defaultView));
 	const step = (step) => glide((v) => moved(v, step, defaultView));
 	const keyHandlers = useKeys(keys, step, setOrbiting);
@@ -662,6 +746,7 @@ function useOrbit(defaultView, width, keys, onDragStart, onHover) {
 		handlers: {
 			ref,
 			onPointerDown: (e) => {
+				if (e.pointerType === "touch") return onHover(e);
 				const pans = keys.on("dragPan") && e.altKey;
 				if (pans || keys.on("dragRotate") && platformMod(e)) drag.current = {
 					x: e.clientX,
@@ -672,7 +757,7 @@ function useOrbit(defaultView, width, keys, onDragStart, onHover) {
 			},
 			onPointerMove: (e) => {
 				const d = drag.current;
-				if (!d) return onHover(e);
+				if (!d) return touching.current ? onDragStart() : onHover(e);
 				if (d.rotate ? !platformMod(e) : !e.altKey) return release();
 				const dx = e.clientX - d.x;
 				const dy = e.clientY - d.y;
@@ -704,7 +789,8 @@ function useOrbit(defaultView, width, keys, onDragStart, onHover) {
 			"data-orbiting": orbiting,
 			"data-mod": keys.on("dragRotate") && held.mod ? true : void 0,
 			"data-alt": keys.on("dragPan") && held.alt ? true : void 0
-		}
+		},
+		hint
 	};
 }
 /**
@@ -757,22 +843,203 @@ function useKeys(keys, move, setOrbiting) {
 		onKeyUp
 	};
 }
+/** A ref for the svg that hands it to the listeners of the wheel, of two fingers and of a missed drag. */
+function useGestures(jump, keys, width, setOrbiting) {
+	const wheel = useWheelZoom(jump, keys.on("wheelZoom"), width);
+	const touch = useTouch(jump, keys, width, setOrbiting);
+	const missed = useMissedDrag(keys);
+	return {
+		ref: React.useCallback((svg) => {
+			const off = [
+				wheel(svg),
+				touch.ref(svg),
+				missed.ref(svg)
+			];
+			return () => off.forEach((f) => f?.());
+		}, [
+			wheel,
+			touch.ref,
+			missed.ref
+		]),
+		touching: touch.touching,
+		hint: missed.hint
+	};
+}
+const MISS_DISTANCE = 8;
+const HINT = 1500;
+const HINT_FADE = 200;
+/**
+* A ref for the svg that watches for a drag that turns nothing - the mouse
+* without a modifier, or one finger sideways, `MISS_DISTANCE` or further -
+* and the hint that names what would have turned the chart: the gesture of
+* `dragRotate` or `touchOrbit`, none where `keys` has it off. The hint stays
+* `HINT` after the lift, fades for `HINT_FADE` and then says nothing.
+*/
+function useMissedDrag(keys) {
+	const [missed, setMissed] = React.useState();
+	const [open, setOpen] = React.useState(false);
+	const [mouse, finger, pan] = [
+		keys.on("dragRotate"),
+		keys.on("touchOrbit"),
+		keys.on("dragPan")
+	];
+	return {
+		ref: React.useCallback((svg) => {
+			if (!svg) return;
+			let press = null;
+			let timer;
+			const down = (e) => {
+				const touch = e.pointerType === "touch";
+				press = (touch ? finger && e.isPrimary : mouse && !platformMod(e) && !(pan && e.altKey)) && e.button === 0 ? {
+					x: e.clientX,
+					y: e.clientY,
+					touch
+				} : null;
+			};
+			const move = (e) => {
+				const [dx, dy] = press ? [e.clientX - press.x, e.clientY - press.y] : [0, 0];
+				if (!press || Math.hypot(dx, dy) < MISS_DISTANCE) return;
+				if (!press.touch || Math.abs(dx) > Math.abs(dy)) {
+					clearTimeout(timer);
+					setMissed(press.touch ? "touchOrbit" : "dragRotate");
+					setOpen(true);
+				}
+				press = null;
+			};
+			const up = () => {
+				press = null;
+				clearTimeout(timer);
+				timer = setTimeout(() => {
+					setOpen(false);
+					timer = setTimeout(() => setMissed(void 0), HINT_FADE);
+				}, HINT);
+			};
+			const listeners = {
+				pointerdown: down,
+				pointermove: move,
+				pointerup: up,
+				pointercancel: up,
+				pointerleave: up
+			};
+			for (const [type, f] of Object.entries(listeners)) svg.addEventListener(type, f);
+			return () => {
+				clearTimeout(timer);
+				for (const [type, f] of Object.entries(listeners)) svg.removeEventListener(type, f);
+			};
+		}, [
+			mouse,
+			finger,
+			pan
+		]),
+		hint: {
+			shown: missed && keys.hint(missed),
+			open
+		}
+	};
+}
+/** The point (`x`, `y`) of the client in the units of the view box of `svg`, `width` wide, from its middle. */
+function inViewBox(svg, width, x, y) {
+	const box = svg.getBoundingClientRect();
+	const k = width / box.width;
+	return {
+		x: (x - box.left - box.width / 2) * k,
+		y: (y - box.top - box.height / 2) * k
+	};
+}
+const pinchOf = (a, b) => ({
+	x: (a.clientX + b.clientX) / 2,
+	y: (a.clientY + b.clientY) / 2,
+	d: Math.hypot(b.clientX - a.clientX, b.clientY - a.clientY)
+});
 /**
-* A ref for the svg that zooms the view with the platform modifier and the
-* wheel, if `on`. Ctrl and the wheel zooms on a Mac too, because a trackpad
+* The step of the camera from the fingers `last` to `now`: the move of the
+* point between them turns it, if `orbit`, as far as a drag of the mouse, and
+* the change of their distance zooms it, if `zoom`. Two fingers on one pixel
+* have no distance to zoom from.
+*/
+function pinchStep(last, now, orbit, zoom) {
+	const [dx, dy] = orbit ? [now.x - last.x, now.y - last.y] : [0, 0];
+	return {
+		yaw: dx * DRAG,
+		tilt: dy * DRAG,
+		zoom: zoom ? now.d / Math.max(last.d, 1) : 1
+	};
+}
+/**
+* A ref for the svg that turns the camera with two fingers on it and zooms it
+* with their pinch, as far as `keys` has them on: the move of the point
+* between them turns, the change of their distance zooms to that point, both
+* at once. One finger is left to the browser, which scrolls the page with it
+* (ADR-0001), and so is a touch it has begun to scroll. The listeners are the
+* core's own: only one that is not passive keeps the browser from scrolling
+* under two fingers. `touching` is true while two fingers hold the chart.
+*/
+function useTouch(jump, keys, width, setOrbiting) {
+	const orbit = keys.on("touchOrbit");
+	const zoom = keys.on("pinchZoom");
+	const touching = React.useRef(false);
+	return {
+		ref: React.useCallback((svg) => {
+			if (!svg || !(orbit || zoom)) return;
+			let last = null;
+			const onTouch = (e) => {
+				if (e.targetTouches.length !== 2 || !e.cancelable) {
+					if (last) setOrbiting(false);
+					touching.current = false;
+					last = null;
+					return;
+				}
+				e.preventDefault();
+				touching.current = true;
+				const now = pinchOf(e.targetTouches[0], e.targetTouches[1]);
+				if (last) {
+					const step = {
+						...pinchStep(last, now, orbit, zoom),
+						at: inViewBox(svg, width, now.x, now.y)
+					};
+					jump((v) => moved(v, step, v));
+					setOrbiting(Boolean(step.yaw || step.tilt));
+				}
+				last = now;
+			};
+			const events = [
+				"touchstart",
+				"touchmove",
+				"touchend",
+				"touchcancel"
+			];
+			for (const type of events) svg.addEventListener(type, onTouch, { passive: false });
+			return () => events.forEach((type) => svg.removeEventListener(type, onTouch));
+		}, [
+			jump,
+			orbit,
+			zoom,
+			width,
+			setOrbiting
+		]),
+		touching
+	};
+}
+/**
+* A ref for the svg that zooms the view to the cursor with the platform
+* modifier and the wheel, if `on`. Ctrl and the wheel zooms on a Mac too, because a trackpad
 * pinch arrives that way, indistinguishable from the keys. The wheel alone
 * still scrolls the page. While the wheel zooms, the svg says so in
 * `data-zoom` - `"in"` or `"out"`, the direction of its cursor - until
 * `ZOOM_CURSOR` after the last tick.
 */
-function useWheelZoom(jump, on) {
+function useWheelZoom(jump, on, width) {
 	return React.useCallback((svg) => {
 		if (!on || !svg) return;
 		let timer;
 		const onWheel = (e) => {
 			if (!platformMod(e) && !e.ctrlKey) return;
 			e.preventDefault();
-			jump((v) => moved(v, { zoom: 2 ** (-e.deltaY / 200) }, v));
+			const at = inViewBox(svg, width, e.clientX, e.clientY);
+			jump((v) => moved(v, {
+				zoom: 2 ** (-e.deltaY / 200),
+				at
+			}, v));
 			svg.dataset.zoom = e.deltaY < 0 ? "in" : "out";
 			clearTimeout(timer);
 			timer = setTimeout(() => delete svg.dataset.zoom, ZOOM_CURSOR);
@@ -782,28 +1049,43 @@ function useWheelZoom(jump, on) {
 			clearTimeout(timer);
 			svg.removeEventListener("wheel", onWheel);
 		};
-	}, [jump, on]);
+	}, [
+		jump,
+		on,
+		width
+	]);
 }
 /**
 * The tooltip of the mark under the pointer, the one painted last, and the
 * focus on its groups. The highlight follows the mark: `hover` sets the
-* tooltip only when the pointer moves onto another mark, and the focus only
-* when the groups change, so a move within a mark does not render the chart
-* again; off the mark and when the pointer leaves the chart, `leave` drops
-* both. While a drag turns the chart under the captured pointer, `hide`
-* drops the tooltip and keeps the focus, so a flow does not flash away and
-* can be followed from every side.
+* tooltip only when the pointer moves onto another mark, or onto new data
+* under the same one, and the focus only when the groups change, so a move
+* within a mark of a chart at rest does not render it again; off the mark and
+* when the pointer leaves the chart, `leave` drops both. A finger lifting
+* leaves the chart too: what it tapped stays until a tap elsewhere, on the
+* chart or off it. While a drag turns the chart under the captured pointer,
+* `hide` drops the tooltip and keeps the focus, so a flow does not flash away
+* and can be followed from every side.
 */
 function useHover(scene, width, height, tip, focus) {
 	const hovered = React.useRef(void 0);
+	const svg = React.useRef(null);
+	const { set } = tip;
+	useTapElsewhere(svg, React.useCallback(() => {
+		hovered.current = void 0;
+		focus.set(void 0);
+		set(null);
+	}, [focus, set]));
 	const show = (mark) => {
 		focus.set(mark?.groups);
-		if (mark?.key === hovered.current?.key) return;
+		if (mark?.tooltip === hovered.current?.tooltip) return;
 		hovered.current = mark;
-		tip.set(mark?.tooltip ?? null);
+		const tooltip = mark?.tooltip;
+		tip.set((typeof tooltip === "function" ? tooltip() : tooltip) ?? null);
 	};
 	return {
 		hover: (e) => {
+			svg.current = e.currentTarget;
 			const rect = e.currentTarget.getBoundingClientRect();
 			const x = e.clientX - rect.left;
 			const y = e.clientY - rect.top;
@@ -822,9 +1104,21 @@ function useHover(scene, width, height, tip, focus) {
 			hovered.current = void 0;
 			tip.set(null);
 		},
-		leave: () => show(void 0)
+		leave: (e) => {
+			if (e.pointerType !== "touch" || !hovered.current) show(void 0);
+		}
 	};
 }
+/** Calls `clear` when a finger taps anywhere but `svg`: on the page, or on another chart. */
+function useTapElsewhere(svg, clear) {
+	React.useEffect(() => {
+		const tap = (e) => {
+			if (e.pointerType === "touch" && !svg.current?.contains(e.target)) clear();
+		};
+		document.addEventListener("pointerdown", tap);
+		return () => document.removeEventListener("pointerdown", tap);
+	}, [svg, clear]);
+}
 /** A store for the groups in focus, which tells its listeners only when the groups change. */
 function useFocus() {
 	const [focus] = React.useState(() => {
@@ -845,7 +1139,7 @@ function useFocus() {
 	});
 	return focus;
 }
-/** Whether an item shares a group with the focus: the hover highlights those items with an edge. */
+/** Whether an item shares a group with the focus: the hover lights those items. */
 function useLit(items) {
 	const { focus } = useChart3D();
 	const groups = React.useSyncExternalStore(focus.subscribe, focus.get, focus.get);
@@ -870,13 +1164,12 @@ function inside(polygon, at) {
 }
 /**
 * The renderer the chart draws with: SVG on the server and in the first
-* render on the client, then the requested one if the browser has it, with
-* "webgl" falling back to "canvas" and "canvas" to SVG.
+* render on the client, then a canvas if the browser has one, for "canvas"
+* and "webgl" alike.
 */
 function useRenderer(requested) {
 	const [renderer, setRenderer] = React.useState("svg");
 	React.useEffect(() => {
-		if (requested === "webgl" && document.createElement("canvas").getContext("webgl")) return setRenderer("webgl");
 		const canvas = requested !== "svg" && document.createElement("canvas").getContext("2d");
 		setRenderer(canvas ? "canvas" : "svg");
 	}, [requested]);
@@ -885,36 +1178,16 @@ function useRenderer(requested) {
 /**
 * A ref for the canvas of the marks, and the repaint that paints them: on new
 * marks, when the canvas changes its size and when the theme changes. A color
-* resolves on the canvas itself, inside the chart, so the `--color-*` apply;
-* webgl takes the resolved color as bytes from a 1×1 canvas.
+* resolves on the canvas itself, inside the chart, so the `--color-*` apply.
 */
-function useCanvas(scene, width, height, renderer) {
+function useCanvas(scene, width) {
 	const element = React.useRef(null);
 	const colors = React.useRef(/* @__PURE__ */ new Map());
-	const bytes = React.useRef(/* @__PURE__ */ new Map());
-	const pixel = React.useRef(null);
 	const repaint = React.useCallback(() => {
 		const canvas = element.current;
 		if (!canvas) return;
-		const resolve = (css) => {
-			let color = colors.current.get(css);
-			if (color === void 0) {
-				canvas.style.color = css;
-				color = getComputedStyle(canvas).color;
-				colors.current.set(css, color);
-			}
-			return color;
-		};
-		if (renderer === "webgl") {
-			pixel.current ??= onePixel();
-			paintGL(canvas, scene.current, width, height, (css) => colorBytes(resolve(css), pixel.current, bytes.current));
-		} else paint(canvas, scene.current, width, resolve);
-	}, [
-		scene,
-		width,
-		height,
-		renderer
-	]);
+		paint(canvas, scene.current, width, (css) => resolved(canvas, css, colors.current));
+	}, [scene, width]);
 	return {
 		canvas: React.useCallback((node) => {
 			element.current = node;
@@ -923,7 +1196,6 @@ function useCanvas(scene, width, height, renderer) {
 			resize.observe(node);
 			const theme = new MutationObserver(() => {
 				colors.current.clear();
-				bytes.current.clear();
 				repaint();
 			});
 			theme.observe(document.documentElement, { attributeFilter: ["class", "style"] });
@@ -936,163 +1208,78 @@ function useCanvas(scene, width, height, renderer) {
 		repaint
 	};
 }
+/**
+* The color that `css` resolves to on `canvas`, inside the chart, as the sRGB
+* the canvas paints it in, cached per color: the canvas parses `fillStyle`
+* at every mark, and an `rgb()` four times faster than the `oklch()` the
+* theme resolves to.
+*/
+function resolved(canvas, css, cache) {
+	let color = cache.get(css);
+	if (color === void 0) {
+		canvas.style.color = css;
+		color = srgb(getComputedStyle(canvas).color);
+		cache.set(css, color);
+	}
+	return color;
+}
+let pixel = null;
+/** `color` as the `rgb()` a canvas paints it in, read back from a pixel. */
+function srgb(color) {
+	pixel ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+	pixel.clearRect(0, 0, 1, 1);
+	pixel.fillStyle = color;
+	pixel.fillRect(0, 0, 1, 1);
+	const [r, g, b, a] = pixel.getImageData(0, 0, 1, 1).data;
+	return `rgb(${r} ${g} ${b} / ${+(a / 255).toFixed(3)})`;
+}
+/**
+* Sizes `canvas` to its pixels on screen, or, where it has that size, clears
+* it: setting the size throws its buffer away and makes a new one, every frame.
+*/
+function fitCanvas(canvas, ctx) {
+	const width = Math.round(canvas.clientWidth * devicePixelRatio);
+	const height = Math.round(canvas.clientHeight * devicePixelRatio);
+	if (canvas.width !== width || canvas.height !== height) {
+		canvas.width = width;
+		canvas.height = height;
+		return;
+	}
+	ctx.setTransform(1, 0, 0, 1, 0, 0);
+	ctx.clearRect(0, 0, width, height);
+}
 /** Paints `marks` on `canvas`, from the view box of `width` to the pixels of the canvas. */
 function paint(canvas, marks, width, color) {
-	canvas.width = Math.round(canvas.clientWidth * devicePixelRatio);
-	canvas.height = Math.round(canvas.clientHeight * devicePixelRatio);
 	const ctx = canvas.getContext("2d");
+	fitCanvas(canvas, ctx);
 	const scale = canvas.width / width;
 	ctx.setTransform(scale, 0, 0, scale, 0, 0);
 	ctx.lineJoin = "round";
-	for (const { points, r, fill, stroke } of marks) {
-		ctx.beginPath();
-		if (r === void 0) {
-			for (const p of points) ctx.lineTo(p.x, p.y);
-			ctx.closePath();
-		} else ctx.arc(points[0].x, points[0].y, r, 0, 2 * Math.PI);
-		ctx.fillStyle = color(fill);
+	for (const mark of marks) {
+		const { r, fill, stroke } = mark;
+		trace(ctx, mark);
+		const filled = color(fill);
+		ctx.fillStyle = filled;
 		ctx.fill();
 		const outline = r === void 0 ? stroke ?? fill : stroke;
 		if (!outline) continue;
-		ctx.strokeStyle = color(outline);
+		ctx.strokeStyle = outline === fill ? filled : color(outline);
 		ctx.lineWidth = r === void 0 ? .5 : 1;
 		ctx.stroke();
 	}
 }
-/** A 1×1 canvas whose 2D context resolves a color to bytes, for the webgl renderer. */
-function onePixel() {
-	const canvas = document.createElement("canvas");
-	canvas.width = 1;
-	canvas.height = 1;
-	return canvas.getContext("2d");
-}
-/** The resolved `color` as bytes, drawn on the 1×1 `pixel` and read back, cached per color. */
-function colorBytes(color, pixel, cache) {
-	let rgba = cache.get(color);
-	if (rgba === void 0) {
-		pixel.clearRect(0, 0, 1, 1);
-		pixel.fillStyle = color;
-		pixel.fillRect(0, 0, 1, 1);
-		rgba = [...pixel.getImageData(0, 0, 1, 1).data];
-		cache.set(color, rgba);
-	}
-	return rgba;
-}
-/**
-* Paints `marks` on a webgl `canvas`, from the view box of `width`×`height` to
-* the pixels of the canvas: a polygon ear by ear, a fan of 12 segments per
-* circle, in paint order and without a depth test, the color of each as bytes.
-*/
-function paintGL(canvas, marks, width, height, color) {
-	canvas.width = Math.round(canvas.clientWidth * devicePixelRatio);
-	canvas.height = Math.round(canvas.clientHeight * devicePixelRatio);
-	const gl = canvas.getContext("webgl");
-	gl.viewport(0, 0, canvas.width, canvas.height);
-	gl.disable(gl.DEPTH_TEST);
-	gl.enable(gl.BLEND);
-	gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-	const program = programOf(gl);
-	gl.useProgram(program);
-	gl.uniform2f(gl.getUniformLocation(program, "u_res"), 2 / width, 2 / height);
-	const where = gl.getAttribLocation(program, "a_pos");
-	gl.enableVertexAttribArray(where);
-	gl.bindBuffer(gl.ARRAY_BUFFER, bufferOf(gl));
-	gl.vertexAttribPointer(where, 2, gl.FLOAT, false, 0, 0);
-	const tint = (css) => {
-		const [r, g, b, a] = color(css);
-		gl.uniform4f(gl.getUniformLocation(program, "u_color"), r / 255, g / 255, b / 255, a / 255);
-	};
-	const draw = (mode, points) => {
-		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(points.flatMap((p) => [p.x, p.y])), gl.DYNAMIC_DRAW);
-		gl.drawArrays(mode, 0, points.length);
-	};
-	const [, widest] = gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE) ?? [1, 1];
-	gl.lineWidth(Math.min(1.5 * devicePixelRatio, widest));
-	for (const mark of marks) {
-		tint(mark.fill);
-		draw(gl.TRIANGLES, trianglesOf(mark));
-		if (mark.stroke) {
-			tint(mark.stroke);
-			draw(gl.LINE_LOOP, outlineOf(mark));
-		}
-	}
-}
-/** The 12 points of the circle around `c` of radius `r`. */
-const ringOf = (c, r) => Array.from({ length: 12 }, (_, i) => ({
-	x: c.x + r * Math.cos(i / 12 * 2 * Math.PI),
-	y: c.y + r * Math.sin(i / 12 * 2 * Math.PI)
-}));
-/** The triangles of `mark` as view-box points: its polygon ear by ear, a fan of 12 segments per circle. */
-function trianglesOf(mark) {
-	const { points, r } = mark;
-	if (r === void 0) return earsOf(points);
-	const ring = ringOf(points[0], r);
-	return ring.flatMap((p, i) => [
-		points[0],
-		p,
-		ring[(i + 1) % 12]
-	]);
+/** Traces the outline of `mark` as the path of `ctx`: its polygon, or its circle. */
+function trace(ctx, { points, r }) {
+	ctx.beginPath();
+	if (r === void 0) {
+		for (const p of points) ctx.lineTo(p.x, p.y);
+		ctx.closePath();
+	} else ctx.arc(points[0].x, points[0].y, r, 0, 2 * Math.PI);
 }
 /** Twice the signed area of the triangle `a`, `b`, `c`: its sign tells which way it turns, 0 on a line. */
 const turn = (a, b, c) => (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
-/**
-* The triangles of a polygon, cut off ear by ear, so a concave one - the
-* front of a ribbon - fills as on the canvas, where a fan would spill over
-* its dents. An ear is a corner that turns the way of the polygon, or not at
-* all, with no other corner inside it; a simple polygon always has one. One
-* that crosses itself may have none, and then loses its first corner.
-*/
-function earsOf(points) {
-	const left = [...points];
-	const way = Math.sign(left.reduce((sum, p, i) => sum + turn(left[0], p, left[i + 1] ?? p), 0));
-	const triangles = [];
-	while (left.length > 3) {
-		const corner = (i) => [
-			left.at(i - 1),
-			left[i],
-			left[(i + 1) % left.length]
-		];
-		const ear = left.findIndex((_, i) => {
-			const [a, b, c] = corner(i);
-			if (way * turn(a, b, c) < 0) return false;
-			return !left.some((p) => way * turn(a, b, p) > 0 && way * turn(b, c, p) > 0 && way * turn(c, a, p) > 0);
-		});
-		const i = Math.max(0, ear);
-		triangles.push(...corner(i));
-		left.splice(i, 1);
-	}
-	return [...triangles, ...left];
-}
-/** The outline of `mark` as view-box points: its polygon, or the ring of its circle. */
-const outlineOf = (mark) => mark.r === void 0 ? mark.points : ringOf(mark.points[0], mark.r);
-const programs = /* @__PURE__ */ new WeakMap();
-const buffers = /* @__PURE__ */ new WeakMap();
-/** The paint program of `gl`, compiled once: view-box points in, clip space out, one color per draw. */
-function programOf(gl) {
-	let program = programs.get(gl);
-	if (!program) {
-		program = gl.createProgram();
-		gl.attachShader(program, shaderOf(gl, gl.VERTEX_SHADER, "attribute vec2 a_pos; uniform vec2 u_res; void main() { gl_Position = vec4(a_pos.x * u_res.x - 1.0, 1.0 - a_pos.y * u_res.y, 0.0, 1.0); }"));
-		gl.attachShader(program, shaderOf(gl, gl.FRAGMENT_SHADER, "precision mediump float; uniform vec4 u_color; void main() { gl_FragColor = u_color; }"));
-		gl.linkProgram(program);
-		programs.set(gl, program);
-	}
-	return program;
-}
-function shaderOf(gl, type, source) {
-	const shader = gl.createShader(type);
-	gl.shaderSource(shader, source);
-	gl.compileShader(shader);
-	return shader;
-}
-function bufferOf(gl) {
-	let buffer = buffers.get(gl);
-	if (!buffer) {
-		buffer = gl.createBuffer();
-		buffers.set(gl, buffer);
-	}
-	return buffer;
-}
+/** Twice the signed area of a ring: its sign tells which way it winds. */
+const areaOf = (ring) => ring.reduce((sum, p, i) => sum + turn(ring[0], p, ring[i + 1] ?? p), 0);
 /** The canvas over the chart box that the marks are painted on, if the chart draws on one. */
 function ChartCanvas3D({ renderer, canvas, width, height }) {
 	if (renderer === "svg") return null;
@@ -1101,7 +1288,7 @@ function ChartCanvas3D({ renderer, canvas, width, height }) {
 		ref: canvas,
 		className: "pointer-events-none absolute top-0 left-0 w-full mask-x-from-96% mask-y-from-96%",
 		style: { aspectRatio: `${width} / ${height}` }
-	}, renderer);
+	});
 }
 const GIZMO = [
 	{
@@ -1169,8 +1356,21 @@ function ChartGizmo3D({ camera, corner }) {
 	});
 }
 /**
-* The focus edge of a fill: `--chart-3d-focus`, or the fill itself lightened,
-* so the highlight carries the color of what it highlights.
+* `text` as part of a CSS identifier: every character but an ASCII letter, a
+* digit, `-` and `_` written as its escape, such as the space of "Net sales"
+* or the dot of "q1.sales". Unescaped, it would end the name, and the browser
+* would drop the rule that declares the color.
+*/
+const cssName = (text) => text.replace(/[^\w-]/gu, (c) => `\\${c.codePointAt(0).toString(16)} `);
+/**
+* The color of the config key `key`: the CSS variable the container declares
+* for it. A chart without a config has no first key to fall back on, and
+* draws in a variable nobody declares: colorless, as before.
+*/
+const colorOf = (key) => `var(--color-${cssName(String(key))})`;
+/**
+* The focus color of a fill, which a lit mark takes: `--chart-3d-focus`, or the
+* fill itself lightened, so the highlight carries the color of what it highlights.
 */
 const focusOf = (fill) => `var(--chart-3d-focus, color-mix(in oklch, ${fill} 60%, white))`;
 /**
@@ -1178,29 +1378,42 @@ const focusOf = (fill) => `var(--chart-3d-focus, color-mix(in oklch, ${fill} 60%
 * elements, or on the canvas over the chart box. The hover reads them too.
 */
 function Marks3D({ marks }) {
-	const { renderer, scene, repaint } = useChart3D();
+	const { renderer, place, repaint } = useChart3D();
+	const id = React.useId();
+	const node = React.useRef(null);
 	const lit = useLit(marks);
 	const drawn = marks.map((mark) => lit(mark) ? {
 		...mark,
-		stroke: mark.stroke && mark.stroke !== "var(--background)" ? mark.stroke : focusOf(mark.fill)
+		fill: focusOf(mark.fill)
 	} : mark);
 	React.useLayoutEffect(() => {
-		scene.current = drawn;
+		place(id, {
+			marks: drawn,
+			node: node.current
+		});
 		repaint();
 	});
-	if (renderer !== "svg") return null;
+	React.useLayoutEffect(() => () => {
+		place(id);
+		repaint();
+	}, [
+		id,
+		place,
+		repaint
+	]);
 	return /* @__PURE__ */ jsx("g", {
+		ref: node,
 		"data-slot": "chart-3d-marks",
-		children: drawn.map(({ key, points, r, fill, stroke }) => r === void 0 ? /* @__PURE__ */ jsx("path", {
+		children: renderer === "svg" && drawn.map(({ key, points, r, fill, stroke }) => r === void 0 ? /* @__PURE__ */ jsx("path", {
 			d: `M${points.map((p) => `${+p.x.toFixed(2)},${+p.y.toFixed(2)}`).join("L")}Z`,
 			fill,
 			stroke: stroke ?? fill,
-			strokeWidth: stroke === focusOf(fill) ? 1.5 : .5,
+			strokeWidth: .5,
 			strokeLinejoin: "round"
 		}, key) : /* @__PURE__ */ jsx("circle", {
-			cx: points[0].x,
-			cy: points[0].y,
-			r,
+			cx: +points[0].x.toFixed(2),
+			cy: +points[0].y.toFixed(2),
+			r: +r.toFixed(2),
 			fill,
 			stroke,
 			strokeWidth: stroke ? 1 : void 0
@@ -1231,29 +1444,30 @@ function Labels3D({ labels }) {
 	});
 }
 function ChartStyle({ id, config }) {
+	const scope = `[data-chart=${cssName(id)}]`;
 	const colorConfig = Object.entries(config).filter(([, c]) => c.theme || c.color);
 	const entering = [
 		"text",
 		"line",
 		"path"
-	].map((el) => `[data-chart=${id}] [data-slot="chart-3d-axes"] ${el}`).join(", ");
+	].map((el) => `${scope} [data-slot="chart-3d-axes"] ${el}`).join(", ");
 	const base = `@keyframes chart-3d-axes-in { from { opacity: 0; } }
 ${entering} { animation: chart-3d-axes-in 300ms ease-out; }
 @media (prefers-reduced-motion: reduce) { ${entering} { animation: none; } }
-[data-chart=${id}] svg[data-mod="true"] { cursor: grab; }
-[data-chart=${id}] svg[data-alt="true"] { cursor: move; }
-[data-chart=${id}] svg[data-zoom="in"] { cursor: zoom-in; }
-[data-chart=${id}] svg[data-zoom="out"] { cursor: zoom-out; }
-[data-chart=${id}] svg[data-orbiting="true"] { cursor: grabbing; }`;
-	if (!colorConfig.length) return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: base } });
-	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: [base, ...Object.entries(THEMES).map(([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
+${scope} svg[data-mod="true"] { cursor: grab; }
+${scope} svg[data-alt="true"] { cursor: move; }
+${scope} svg[data-zoom="in"] { cursor: zoom-in; }
+${scope} svg[data-zoom="out"] { cursor: zoom-out; }
+${scope} svg[data-orbiting="true"] { cursor: grabbing; }`;
+	const themes = colorConfig.length ? Object.entries(THEMES) : [];
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: [base, ...themes.map(([theme, prefix]) => `
+${prefix} ${scope} {
 ${colorConfig.map(([key, item]) => {
 		const color = item.theme?.[theme] || item.color;
-		return color ? `  --color-${key}: ${color};` : null;
+		return color ? `  --color-${cssName(key)}: ${color};` : null;
 	}).join("\n")}
 }
-`)].join("\n") } });
+`)].join("\n").replaceAll("<", "\\3c ") } });
 }
 function ChartTooltip3D({ tip }) {
 	const { tooltip, ref, place } = tip;
@@ -1286,6 +1500,28 @@ function ChartTooltip3D({ tip }) {
 	});
 }
 /**
+* The hint of a drag that missed, a box in the middle of the chart over a
+* light veil, above the tooltip: always there, empty while it has nothing to
+* say, so a screen reader hears its first word. The veil has no blur, which
+* would cost every frame of the drag it shows during.
+*/
+function ChartHint3D({ shown, open }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"data-slot": "chart-3d-hint",
+		"data-state": open ? "open" : "closed",
+		className: "pointer-events-none absolute inset-0 z-20 grid place-items-center rounded-[inherit] bg-background/40 motion-safe:transition-opacity data-[state=closed]:opacity-0",
+		children: shown && /* @__PURE__ */ jsxs("div", {
+			"data-slot": "chart-3d-hint-box",
+			className: "flex items-center gap-2 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 shadow-xl",
+			children: [/* @__PURE__ */ jsx(KbdGroup3D, { group: shown.gesture }), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: shown.label
+			})]
+		})
+	});
+}
+/**
 * A button in the corner of the chart, named `label`, that lists the rows of
 * its keymap. The `help` keys on the chart open and close the list, Escape
 * closes it.
@@ -1325,13 +1561,35 @@ function ChartShortcuts3D({ rows, help, label }) {
 			"aria-controls": open ? id : void 0,
 			onClick: () => setOpen((o) => !o),
 			className: "inline-flex size-7 cursor-pointer items-center justify-center rounded-md bg-background/60 text-muted-foreground outline-none transition-colors hover:bg-background hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4",
-			children: /* @__PURE__ */ jsx(KeyboardIcon, {})
+			children: /* @__PURE__ */ jsx(KeyboardIcon3D, {})
 		}), open && /* @__PURE__ */ jsx(ChartShortcutList3D, {
 			id,
 			rows
 		})]
 	});
 }
+/**
+* The keyboard of the shortcut button: the keyboard icon of Lucide,
+* Copyright (c) Lucide Icons and Contributors, ISC License, https://lucide.dev.
+*/
+function KeyboardIcon3D() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [/* @__PURE__ */ jsx("path", { d: "M10 8h.01M12 12h.01M14 8h.01M16 12h.01M18 8h.01M6 8h.01M7 16h10M8 12h.01" }), /* @__PURE__ */ jsx("rect", {
+			width: "20",
+			height: "16",
+			x: "2",
+			y: "4",
+			rx: "2"
+		})]
+	});
+}
 /** One group of keys as chips. */
 function KbdGroup3D({ group }) {
 	return /* @__PURE__ */ jsx("span", {
@@ -1370,12 +1628,12 @@ function ChartShortcutList3D({ id, rows }) {
 function ChartLegend3D({ config }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "chart-3d-legend",
-		className: "flex items-center justify-center gap-4 pt-3",
+		className: "flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3",
 		children: Object.entries(config).map(([key, item]) => /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1.5",
 			children: [item.icon ? /* @__PURE__ */ jsx(item.icon, {}) : /* @__PURE__ */ jsx("span", {
 				className: "size-2 rounded-[2px]",
-				style: { background: `var(--color-${key})` }
+				style: { background: colorOf(key) }
 			}), item.label ?? key]
 		}, key))
 	});
@@ -1435,6 +1693,7 @@ const PAD = 2;
 const FADE = 4;
 const DODGE = 12;
 const MARK = 6;
+const LIFT = 30;
 /** The closed quad of a wall; its gridlines are their own lines, so a new one fades in. */
 function quad(wall) {
 	return `M${wall.map(({ projected }) => `${projected.x},${projected.y}`).join("L")}Z`;
@@ -1462,7 +1721,7 @@ function gridKey(wall, from, to) {
 * way to the ticks.
 */
 function labelAxes(edges, spec, format, titles) {
-	const axes = edges.filter((edge) => edge.length).map((edge) => edgeLabels(edge, spec[edge.axis], format[edge.axis] ?? String, titles[edge.axis]));
+	const axes = edges.filter((edge) => edge.length).map((edge) => edgeLabels(edge, edges, spec[edge.axis], format[edge.axis] ?? String, titles[edge.axis]));
 	const shown = axes.filter((axis) => axis.chosen).sort((a, b) => a.ticks.length - b.ticks.length);
 	const placed = [];
 	for (const label of [...shown.flatMap((a) => a.ticks), ...shown.flatMap((a) => a.title ?? [])]) {
@@ -1515,7 +1774,7 @@ function hideOffRange(labels, range, chosen) {
 	if (!chosen) for (const l of labels) l.opacity = 0;
 	else for (const l of labels) if (l.value !== void 0 && !within(range.lo, range.hi, l.value)) l.opacity = 0;
 }
-function edgeLabels(edge, { domain, leaving = [], span }, format, title) {
+function edgeLabels(edge, edges, { domain, leaving = [], span }, format, title) {
 	const { axis, normal: n, chosen } = edge;
 	const label = (key, at, text, h, gap, value) => {
 		const w = textWidth(text, h);
@@ -1544,15 +1803,9 @@ function edgeLabels(edge, { domain, leaving = [], span }, format, title) {
 	const [s0, s1] = span ?? [edge[0][axis], edge[edge.length - 1][axis]];
 	const start = along(edge, clamp(range.lo, range.hi, s0));
 	const end = along(edge, clamp(range.lo, range.hi, s1));
-	const middle = {
-		x: (start.x + end.x) / 2,
-		y: (start.y + end.y) / 2
-	};
-	const head = title ? {
-		...label(`${id}-title`, middle, title, 12, GAP + depth + GAP),
-		title: true
-	} : void 0;
-	if (head && rows === 2) head.shift = row;
+	const upper = clamp(range.lo, range.hi, end.y <= start.y ? s1 : s0);
+	const head = title ? titleLabel(`${id}-title`, axis, title, start, end, n, depth, face(edge, edges, upper)) : void 0;
+	if (head && rows === 2 && axis !== "y") head.shift = row;
 	hideOffRange([...ticks, ...head ? [head] : []], range, chosen);
 	return {
 		chosen,
@@ -1576,6 +1829,68 @@ function edgeLabels(edge, { domain, leaving = [], span }, format, title) {
 	};
 }
 /**
+* The top of the box: the ends at `value` of the four edges of `edge`'s
+* axis, round the face they frame.
+*/
+function face(edge, edges, value) {
+	const round = ({ sides: [a, b] }) => a ? 3 - b : b;
+	return edges.filter((e) => e.axis === edge.axis).sort((p, q) => round(p) - round(q)).map((e) => along(e, value));
+}
+/**
+* The height on screen of `face` between `x0` and `x1`: its least y there,
+* at a corner inside or where an edge crosses either end.
+*/
+function highest(face, x0, x1) {
+	const [lo, hi] = [Math.min(x0, x1), Math.max(x0, x1)];
+	const inside = face.filter((p) => within(lo, hi, p.x)).map((p) => p.y);
+	const crossing = face.flatMap((p, i) => {
+		const q = face[(i + 1) % face.length];
+		return [lo, hi].filter((x) => p.x !== q.x && within(Math.min(p.x, q.x), Math.max(p.x, q.x), x)).map((x) => p.y + (q.y - p.y) * (x - p.x) / (q.x - p.x));
+	});
+	return Math.min(...inside, ...crossing);
+}
+/**
+* The title of an axis, upright. The y axis has a free end, the top: its
+* title stands over that corner on the box's side of the line, its edge on
+* the line, a gap clear of the `top` of the box as far as it reaches, rising
+* with it by up to `LIFT`. A floor axis ends in corners the other axes label,
+* so its title sits beyond its tick labels, at the middle of its edge,
+* `depth` being how far they reach out.
+*/
+function titleLabel(key, axis, text, start, end, normal, depth, top) {
+	const h = 12;
+	const w = textWidth(text, h);
+	const middle = {
+		x: (start.x + end.x) / 2,
+		y: (start.y + end.y) / 2
+	};
+	const label = {
+		key,
+		axis,
+		text,
+		title: true,
+		opacity: 1,
+		shift: ZERO,
+		w,
+		h
+	};
+	if (axis !== "y") return {
+		...label,
+		at: beside(middle, normal, w, h, GAP + depth + GAP)
+	};
+	const corner = end.y <= start.y ? end : start;
+	const side = Math.sign(-normal.x) || 1;
+	const under = Math.max(corner.y - LIFT, highest(top, corner.x, corner.x + side * w));
+	return {
+		...label,
+		anchor: side > 0 ? "start" : "end",
+		at: {
+			x: corner.x + side * w / 2,
+			y: under - GAP - h / 2
+		}
+	};
+}
+/**
 * Fits the tick labels of an edge into the space between its ticks: in one
 * row if they keep `PAD` apart, or slid along the edge if no label has to
 * slide further than `DODGE`, else every other label a `row` further out if
@@ -1668,7 +1983,7 @@ function dodge(want, gaps) {
 * follows the geometry, the label fades as smoothly as the camera turns.
 */
 function shows(label, placed) {
-	return placed.reduce((opacity, p) => p.axis === label.axis ? opacity : Math.min(opacity, 1 - (1 - clamp(0, 1, apart(label, p) / FADE)) * p.opacity), label.opacity);
+	return placed.reduce((opacity, p) => p.axis === label.axis && !label.title ? opacity : Math.min(opacity, 1 - (1 - clamp(0, 1, apart(label, p) / FADE)) * p.opacity), label.opacity);
 }
 /** The space between the boxes of two labels, negative where they overlap. */
 function apart(a, b) {
@@ -1712,11 +2027,12 @@ function AxisLine3D({ line: { from, to, opacity }, ink, width }) {
 * A label of the chart box. Its place follows the camera at once; a change
 * of edge, of row or of the labels that fit fades and moves it in a transition.
 */
-function AxisLabel3D({ label: { at, shift, opacity, text, title } }) {
+function AxisLabel3D({ label: { at, w, shift, opacity, text, title, anchor } }) {
+	const x = at.x + (anchor === "start" ? -w / 2 : anchor === "end" ? w / 2 : 0);
 	return /* @__PURE__ */ jsx("text", {
-		x: at.x,
+		x,
 		y: at.y,
-		textAnchor: "middle",
+		textAnchor: anchor ?? "middle",
 		dominantBaseline: "central",
 		style: {
 			opacity: Math.round(opacity * 100) / 100,
@@ -1758,6 +2074,104 @@ function worldBox(spec, depth = 1) {
 	};
 }
 /**
+* The point at `lon` and `lat`, in degrees, on the sphere of `radius` around
+* the center of the world box: the prime meridian faces the viewer at yaw 0,
+* east lies to the right and the north pole is up - towards -y, as the box
+* counts y. The globe chart builds its tiles from it, since a chart may not
+* do trigonometry of its own.
+*/
+function globe(lon, lat, radius = 1) {
+	const [theta, phi] = [lon, lat].map((degrees) => degrees * Math.PI / 180);
+	const flat = radius * Math.cos(phi);
+	return {
+		x: flat * Math.sin(theta),
+		y: -radius * Math.sin(phi),
+		z: flat * Math.cos(theta)
+	};
+}
+/** The radius of the globe in the world box: `geoView` projects the land at it, and a geo chart places its marks on it. */
+const GLOBE_RADIUS = 1.15;
+/**
+* The camera without its perspective, a copy, since d3-3d shares the view of
+* a camera it is handed: d3-geo has no perspective, so a geo chart projects
+* its marks without one too, and they stay on the land.
+*/
+function orthographic(camera) {
+	return camera3D().origin(camera.origin()).scale(camera.scale()).rotateX(camera.rotateX()).rotateY(camera.rotateY());
+}
+/**
+* Sets a projection of d3-geo to the camera: its rotation in degrees, its
+* scale at the radius of the globe and its origin, so the land turns, pans
+* and zooms with the marks.
+*/
+function geoView(camera, projection) {
+	const degrees = (radians) => radians * 180 / Math.PI;
+	const { x, y } = camera.origin();
+	return projection.rotate([degrees(camera.rotateY()), degrees(camera.rotateX())]).scale(camera.scale() * GLOBE_RADIUS).translate([x, y]);
+}
+/**
+* Stands in for a canvas under d3-geo's `geoPath`: `marks(draw, key, fill)`
+* runs `draw` and returns every ring it drew, cut at the horizon as d3-geo
+* cuts it, as a polygon mark keyed `key-i`. A point is not a region: the ring
+* its `moveTo` began goes with its `arc`. A hole is not one either: a ring
+* wound the other way than the largest ring is left out, so the region
+* around a hole fills it once, not twice.
+*/
+function ringSink() {
+	const rings = [];
+	return {
+		beginPath: () => {
+			rings.length = 0;
+		},
+		moveTo: (x, y) => {
+			rings.push([{
+				x,
+				y
+			}]);
+		},
+		lineTo: (x, y) => {
+			rings.at(-1).push({
+				x,
+				y
+			});
+		},
+		closePath: () => {},
+		arc: () => {
+			rings.pop();
+		},
+		marks: (draw, key, fill) => {
+			rings.length = 0;
+			draw();
+			const areas = rings.map(areaOf);
+			const largest = areas.reduce((a, b) => Math.abs(b) > Math.abs(a) ? b : a, 0);
+			return rings.flatMap((points, i) => areas[i] * largest < 0 ? [] : [{
+				key: `${key}-${i}`,
+				points,
+				fill
+			}]);
+		}
+	};
+}
+/**
+* The earth under the marks of a geo chart: the ocean and the land as marks,
+* flat in `--chart-3d-ocean` and `--chart-3d-land`, falling back to the
+* colors of the walls - scenery, grouped by nothing, with no tooltip, that
+* neither enters nor glides. The chart hands in d3-geo's `geoOrthographic()`
+* and `geoPath`, so the core carries no d3-geo; `earth` sets the projection
+* to the camera and draws through a sink that collects every ring, cut at
+* the horizon, as a polygon. `path` and `sink` come along for a chart that
+* draws regions of its own: `sink.marks(() => path(feature), key, fill)`.
+*/
+function earth(land, camera, projection, geoPath) {
+	const sink = ringSink();
+	const path = geoPath(geoView(camera, projection), sink);
+	return {
+		marks: [...sink.marks(() => path({ type: "Sphere" }), "ocean", "var(--chart-3d-ocean, var(--muted))"), ...land.features.flatMap((feature, i) => sink.marks(() => path(feature), `land-${i}`, "var(--chart-3d-land, var(--border))"))],
+		path,
+		sink
+	};
+}
+/**
 * Hands the projection its accessors into the world box, so every chart maps
 * its shapes onto the screen the same way.
 */
@@ -1791,23 +2205,56 @@ function faded(color, opacity) {
 	return percent >= 100 ? color : `color-mix(in oklab, ${color} ${percent}%, transparent)`;
 }
 /**
+* Whether `value` is a number a chart can place: whatever `Number` reads as a
+* finite number - a number, a string of one, a date, a bigint - but not what
+* it reads as 0 for want of a value: null, a blank string and a boolean would
+* draw an entry without a place at the origin.
+*/
+function finite(value) {
+	const isBlank = typeof value === "string" && value.trim() === "";
+	return value != null && typeof value !== "boolean" && !isBlank && Number.isFinite(Number(value));
+}
+/**
+* `value` as an amount a mark is sized by, such as the area of a dot or the
+* height of a tile: one below 0, or one that is not a finite number, stands
+* as 0.
+*/
+function nonNegative(value) {
+	return finite(value) ? Math.max(0, Number(value)) : 0;
+}
+/**
 * The entries of `data` and their series, for a chart that lays the entries
 * out along x and the series along z, as the bar and the area chart do. The
 * name of every entry comes from its `index` field, the series are `keys` or
 * the keys of the config, and the `target` of every cell is keyed by the name
 * of its entry and its series, so it follows its entry when the data
-* reorders; a value that is not a number stands as 0. Each glides by name:
+* reorders; a value that is not a finite number stands as 0. Each glides by name:
 * `values` from 0, `rows` - the place of every entry - to where it stands, and
 * `presence` from 0 to 1 as an entry comes and back as it goes, the gone ones
 * still among them. `labels` name the ticks: the entry at a tick of x, through
 * `format.x` - a tick of a gone entry fades out unnamed - and the series at a
-* tick of z.
+* tick of z. Every entry is keyed by its id - its name, made unique where a
+* name repeats - and `nameOf` reads the name back; `entries` holds the entry
+* behind every id still in the data.
 */
 function useSeries({ data, index, keys, format = {} }) {
 	const { config } = useChart3D();
-	const series = keys ?? Object.keys(config);
-	const names = data.map((d) => String(d[index] ?? ""));
-	const target = Object.fromEntries(data.flatMap((d, i) => series.map((key) => [`${names[i]}-${key}`, Number(d[key]) || 0])));
+	const series = React.useMemo(() => keys ?? Object.keys(config), [keys, config]);
+	const { names, ids, target, order, present } = React.useMemo(() => {
+		const names = data.map((d) => String(d[index] ?? ""));
+		const ids = uniqueIds(names);
+		return {
+			names,
+			ids,
+			target: Object.fromEntries(data.flatMap((d, i) => series.map((key) => [`${ids[i]}-${key}`, finite(d[key]) ? Number(d[key]) : 0]))),
+			order: Object.fromEntries(ids.map((id, i) => [id, i])),
+			present: Object.fromEntries(ids.map((id) => [id, 1]))
+		};
+	}, [
+		data,
+		index,
+		series
+	]);
 	const labels = {
 		x: (i) => (format.x ?? String)(names[i] ?? ""),
 		y: format.y,
@@ -1816,12 +2263,31 @@ function useSeries({ data, index, keys, format = {} }) {
 	return {
 		series,
 		target,
+		entries: new Map(data.map((d, i) => [ids[i], d])),
 		values: useTween(target, 0),
-		rows: useTween(Object.fromEntries(names.map((name, i) => [name, i]))),
-		presence: useTween(Object.fromEntries(names.map((name) => [name, 1])), 0),
-		labels
+		rows: useTween(order),
+		presence: useTween(present, 0),
+		labels,
+		nameOf
 	};
 }
+const REPEAT = "\0";
+/**
+* An id per name, unique: a name the first time, the name and its count when
+* it comes again, so entries of the same name are entries of their own.
+* Nothing else tells them apart, so the order of the data does: the first
+* "Jan" stays the first through an update, whichever entry that is.
+*/
+function uniqueIds(names) {
+	const seen = /* @__PURE__ */ new Map();
+	return names.map((name) => {
+		const count = (seen.get(name) ?? 0) + 1;
+		seen.set(name, count);
+		return count === 1 ? name : `${name}${REPEAT}${count}`;
+	});
+}
+/** The name of the entry of `id`, as its data names it. */
+const nameOf = (id) => id.split(REPEAT)[0];
 /** The marks of a cube: its faces that look at the camera, shaded in `color`, each with `tooltip` on hover. */
 function cubeMarks(id, faces, color, tooltip) {
 	return faces.filter((face) => face.ccw).map((face) => ({
@@ -1831,6 +2297,69 @@ function cubeMarks(id, faces, color, tooltip) {
 		tooltip
 	}));
 }
+/**
+* The corners of a bar on the floor of `world`, at `x` and `z` in the values
+* of the data, from 0 to `value`, `size` wide and deep in the world box.
+* box() rises towards -y, so a negative bar starts at its value.
+*/
+function barCorners(world, x, z, value, size) {
+	const floor = world.y(0);
+	const top = world.y(value);
+	return box({
+		x: world.x(x),
+		y: Math.max(floor, top),
+		z: world.z(z),
+		...size,
+		height: Math.abs(floor - top)
+	});
+}
+/** The marks of one bar: the faces that look at the camera, shaded and faded to `opacity`, each with `tooltip` on hover. Its group is the bar alone, so hovering highlights one bar. */
+function barMarks({ id, faces, color, tooltip, opacity }) {
+	return cubeMarks(id, faces, color, tooltip).map((mark) => ({
+		...mark,
+		fill: faded(mark.fill, opacity),
+		groups: [id]
+	}));
+}
+/**
+* The color at `value` on a ramp from the config color `low` at `lo` to
+* `high` at `hi` - a value beyond them takes the color of the nearer end: a
+* CSS color-mix, so it follows the theme.
+*/
+function ramp(value, [lo, hi], [low, high]) {
+	const t = Math.min(100, Math.max(0, Math.round((value - lo) / (hi - lo || 1) * 100)));
+	return `color-mix(in oklch, ${colorOf(high)} ${t}%, ${colorOf(low)})`;
+}
+/**
+* Where the `count` columns or rows of a grid stand along one axis of
+* arrangement: at their value of `at`, in any order, or evenly over `ends`,
+* by default their indices; one without a finite value has no place. With
+* the cell, the smallest gap between two places - 1 where there is none -
+* and the axis over the places, its ticks within: its walls half a cell
+* beyond them - the padding - or at them where not `padded`, never at a
+* rounder tick, which would leave the box empty beyond the data.
+*/
+function gridAxis(count, { at, ends = [0, count - 1], padded = true } = {}) {
+	const even = linear([0, count - 1], ends);
+	const values = Array.from({ length: count }, (_, i) => at ? at[i] : even(i));
+	const places = Object.fromEntries(values.flatMap((v, i) => finite(v) ? [[i, v]] : []));
+	const sorted = [...new Set(Object.values(places))].sort((a, b) => a - b);
+	const gaps = sorted.slice(1).map((v, i) => v - sorted[i]);
+	const cell = gaps.length ? Math.min(...gaps) : 1;
+	const [lo = 0, hi = lo] = [sorted[0], sorted.at(-1)];
+	return {
+		places,
+		cell,
+		spec: pad({
+			domain: [lo, hi],
+			ticks: ticks(lo, hi, 5)
+		}, padded || lo === hi ? cell : 0)
+	};
+}
+/** `cubes`, each with its bottom face as `floor`, found once: bars on one floor paint back to front by it. */
+function floored(cubes) {
+	return cubes.map((cube) => Object.assign(cube, { floor: cube.faces.find((f) => f.face === "bottom") }));
+}
 // registry/new-york/ui/area-chart-3d.tsx
 const RIBBON = 2 / 3;
 /**
@@ -1839,9 +2368,9 @@ const RIBBON = 2 / 3;
 * the box. The series are the keys of the chart config unless `keys` names
 * them.
 */
-function AreaChart3D({ data, index, keys, format = {}, titles }) {
+function AreaChart3D({ data, index, keys, format = {}, titles, tooltip }) {
 	const { config, camera } = useChart3D();
-	const { series, target, values, rows, presence, labels } = useSeries({
+	const { series, target, entries, values, rows, presence, labels, nameOf } = useSeries({
 		data,
 		index,
 		keys,
@@ -1862,7 +2391,15 @@ function AreaChart3D({ data, index, keys, format = {}, titles }) {
 			line,
 			faces: ribbonFaces(polygons, line, spec.y.domain[0], z)
 		}];
-	}).sort((a, b) => sort(a.faces[4], b.faces[4])).flatMap(({ key, line, faces }) => ribbonMarks(key, painted(faces, toward), line, config[key]?.label ?? key, format.x ?? String));
+	}).sort((a, b) => sort(a.faces[4], b.faces[4])).flatMap(({ key, line, faces }) => ribbonMarks(key, painted(faces, toward), line, (names) => ribbonTooltip(key, names, {
+		config,
+		entries,
+		target,
+		nameOf
+	}, {
+		format,
+		tooltip
+	})));
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
 		spec,
 		world,
@@ -1982,12 +2519,13 @@ function painted(faces, toward) {
 * The marks of one ribbon, shaded in the color of its series. Each face is a
 * group of its own, so hovering highlights the face under the pointer alone.
 * A segment of the top is keyed by the entry it starts at, so it keeps its
-* mark when entries come or go before it. Every face names the series; a
-* segment of the top tells the values at its two ends.
+* mark when entries come or go before it. Every face says what `tooltip`
+* makes of the entries it spans: the two ends of a segment of the top, none
+* on a side.
 */
-function ribbonMarks(key, faces, line, label, name) {
-	const color = `var(--color-${key})`;
-	const spans = (f) => f.face === "top" ? [line[f.segment], line[f.segment + 1]] : [];
+function ribbonMarks(key, faces, line, tooltip) {
+	const color = colorOf(key);
+	const spans = (f) => f.face === "top" ? [line[f.segment].name, line[f.segment + 1].name] : [];
 	return faces.map((f) => {
 		const id = f.face === "top" ? `${key}-top-${line[f.segment].name}` : `${key}-${f.face}`;
 		return {
@@ -1995,18 +2533,40 @@ function ribbonMarks(key, faces, line, label, name) {
 			points: f.map((p) => p.projected),
 			fill: shade(f, color),
 			groups: [id],
-			tooltip: {
-				title: label,
-				items: spans(f).map((p) => ({
-					label: name(p.name),
-					value: p.value,
-					color
-				}))
-			}
+			tooltip: tooltip(spans(f))
 		};
 	});
 }
 /**
+* What a face of the ribbon of `key` says on hover, made when the pointer
+* lands on it: the series and, on a segment of the top, the entries it
+* spans as the ticks of x name them, with their values as the ticks of y
+* name them - or what `tooltip` makes of that. A segment whose entry has
+* left the data says nothing.
+*/
+function ribbonTooltip(key, names, { config, entries, target, nameOf }, { format = {}, tooltip = (tip) => tip }) {
+	const spanned = names.flatMap((name) => {
+		const entry = entries.get(name);
+		return entry ? [entry] : [];
+	});
+	if (spanned.length < names.length) return void 0;
+	const color = colorOf(key);
+	return () => tooltip({
+		title: config[key]?.label ?? key,
+		items: names.map((name) => {
+			const value = target[`${name}-${key}`];
+			return {
+				label: (format.x ?? String)(nameOf(name)),
+				value: format.y?.(value) ?? value,
+				color
+			};
+		})
+	}, {
+		key,
+		entries: spanned
+	});
+}
+/**
 * The axes of an area chart: the entries along x, with half a row of room
 * between the first and the last and the walls, a row per series along z.
 * A line has many entries, so x ticks about ten of them, not every one.
@@ -2031,9 +2591,9 @@ function areaAxes(entries, series, values) {
 * along z, the value as the height. The series are the keys of the chart
 * config unless `keys` names them.
 */
-function BarChart3D({ data, index, keys, barSize = .6, format, titles }) {
+function BarChart3D({ data, index, keys, barSize = .6, format, titles, tooltip }) {
 	const { config, camera } = useChart3D();
-	const { series, target, values, rows, presence, labels } = useSeries({
+	const { series, target, entries, values, rows, presence, labels, nameOf } = useSeries({
 		data,
 		index,
 		keys,
@@ -2053,20 +2613,26 @@ function BarChart3D({ data, index, keys, barSize = .6, format, titles }) {
 	}), /* @__PURE__ */ jsx(Marks3D, { marks: bars.flatMap((bar) => barMarks({
 		id: `${bar.name}-${bar.key}`,
 		faces: bar.faces,
-		color: `var(--color-${bar.key})`,
-		title: bar.name,
-		label: config[bar.key]?.label ?? bar.key,
-		value: bar.value,
+		color: colorOf(bar.key),
+		tooltip: barTooltip({
+			id: bar.name,
+			name: nameOf(bar.name),
+			key: bar.key
+		}, entries.get(bar.name), target, {
+			config,
+			format,
+			tooltip
+		}),
 		opacity: presence[bar.name]
 	})) })] });
 }
 /** The cubes of the cells, projected by `camera` and painted back to front by their footprint, as the bars stand on one floor. */
 function barShapes(camera, cells, world, size) {
-	return cubes3D().camera(camera).data(cells.map(({ name, x, j, key, value }) => Object.assign(barCorners(world, x, j, value, size), {
+	return floored(cubes3D().camera(camera).data(cells.map(({ name, x, j, key, value }) => Object.assign(barCorners(world, x, j, value, size), {
 		name,
 		key,
 		value
-	}))).map((bar) => Object.assign(bar, { bottom: bar.faces.find((f) => f.face === "bottom") })).sort((a, b) => sort(a.bottom, b.bottom));
+	})))).sort((a, b) => sort(a.floor, b.floor));
 }
 /**
 * The cell of every bar, the rows still gliding away among them: the row
@@ -2103,7 +2669,7 @@ function barBox(entries, series, values) {
 				ticks: index(series)
 			}, 1)
 		},
-		depth: Math.min(1, Math.max(.25, series / entries))
+		depth: Math.min(1, Math.max(.25, series / (entries || 1)))
 	};
 }
 /**
@@ -2117,70 +2683,701 @@ function cellSize(spec, depth, barSize) {
 	};
 }
 /**
-* The corners of one bar, from the floor to its value, at row `x` and series
-* `z`. box() rises towards -y, so a negative bar starts at its value.
+* What the bar of `entry` says on hover, made when the pointer lands on it:
+* the entry as the ticks of x name it and its value as the ticks of y name
+* it - or what `tooltip` makes of that. A bar whose entry has left the data
+* says nothing.
 */
-function barCorners(world, x, z, value, size) {
-	const floor = world.y(0);
-	const top = world.y(value);
-	return box({
-		x: world.x(x),
-		y: Math.max(floor, top),
-		z: world.z(z),
-		...size,
-		height: Math.abs(floor - top)
-	});
-}
-/** The marks of one bar: the faces that look at the camera, shaded and faded to `opacity`, each with its entry and value on hover. Its group is the bar alone, so hovering highlights one bar, not its series. */
-function barMarks({ id, faces, color, title, label, value, opacity }) {
-	return cubeMarks(id, faces, color, {
-		title,
+function barTooltip({ id, name, key }, entry, target, { config, format = {}, tooltip = (tip) => tip }) {
+	if (!entry) return void 0;
+	const value = target[`${id}-${key}`];
+	return () => tooltip({
+		title: (format.x ?? String)(name),
 		items: [{
-			label,
-			value,
-			color
+			label: config[key]?.label ?? key,
+			value: format.y?.(value) ?? value,
+			color: colorOf(key)
 		}]
-	}).map((mark) => ({
-		...mark,
-		fill: faded(mark.fill, opacity),
-		groups: [id]
-	}));
+	}, {
+		entry,
+		key
+	});
 }
-// registry/new-york/ui/scatter-chart-3d.tsx
+// registry/new-york/ui/bar-field-chart-3d.tsx
+const BAR = .8;
 /**
-* Points in the chart box, at the fields `x`, `y` and `z` of each entry.
-* `series` names the field whose value is the config key of the color.
+* A field of bars over a grid: `data[row][column]` is the value of a bar, the
+* columns run along x and the rows along z. Everything about a bar comes from
+* the data - its place from the value of its column and row, its footprint
+* from the smallest gap between two of them, its height from its value, its
+* color from the ramp between the two `colors` at the lowest and the highest
+* value.
 */
-function ScatterChart3D({ data, x, y, z, id, series, radius = 4, format, titles }) {
+function BarFieldChart3D({ data, domain = {}, x, z, tooltip, format, titles, colors }) {
 	const { config, camera } = useChart3D();
-	const fields = {
+	const [low, high = low] = colors ?? Object.keys(config);
+	const field = useField(data, {
+		domain,
 		x,
-		y,
 		z
+	});
+	const values = useTween(field.target, 0);
+	const presence = useTween(field.present, 0);
+	const y = axis(Math.min(0, field.lo), Math.max(0, field.hi));
+	const spec = useTweenAxes({
+		x: field.x.spec,
+		y,
+		z: field.z.spec
+	});
+	const world = worldBox(spec);
+	const places = {
+		x: useTween(field.x.places),
+		z: useTween(field.z.places)
+	};
+	const cell = useTween({
+		x: field.x.cell,
+		z: field.z.cell
+	});
+	const size = {
+		width: Math.abs(world.x(cell.x) - world.x(0)) * BAR,
+		depth: Math.abs(world.z(cell.z) - world.z(0)) * BAR
+	};
+	const span = useTween({
+		lo: field.lo,
+		hi: field.hi
+	});
+	const marks = floored(cubes3D().camera(camera).data(fieldCorners(values, world, places, size))).sort((a, b) => sort(a.floor, b.floor)).flatMap((bar) => barMarks({
+		id: bar.key,
+		faces: bar.faces,
+		color: ramp(bar.value, [span.lo, span.hi], [low, high]),
+		tooltip: fieldTooltip(bar, field, {
+			format,
+			titles,
+			tooltip
+		}),
+		opacity: presence[bar.key]
+	}));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
+		spec,
+		world,
+		format,
+		titles
+	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
+}
+/**
+* The value of every bar, keyed by its row and column so it follows its cell
+* through updates, with its presence, the lowest and highest value and the
+* places of the columns and rows - built once per change of the data, not at
+* every frame the camera turns. A bar draws where its value and both its
+* places are finite numbers.
+*/
+function useField(data, { domain, x, z }) {
+	return React.useMemo(() => {
+		const sides = {
+			x: gridAxis(Math.max(0, ...data.map((row) => row.length)), {
+				at: x,
+				ends: domain.x
+			}),
+			z: gridAxis(data.length, {
+				at: z,
+				ends: domain.z
+			})
+		};
+		const target = Object.fromEntries(data.flatMap((row, r) => row.flatMap((v, c) => finite(v) && c in sides.x.places && r in sides.z.places ? [[`${r}-${c}`, v]] : [])));
+		const [lo = 0, hi = 0] = extent(Object.values(target));
+		return {
+			...sides,
+			target,
+			present: Object.fromEntries(Object.keys(target).map((key) => [key, 1])),
+			lo,
+			hi
+		};
+	}, [
+		data,
+		x,
+		z,
+		domain.x,
+		domain.z
+	]);
+}
+/**
+* The corners of every bar still on screen, from 0 to its gliding value, at
+* its row and column, `size` wide and deep.
+*/
+function fieldCorners(values, world, at, size) {
+	return Object.entries(values).map(([key, value]) => {
+		const [row, column] = key.split("-").map(Number);
+		const corners = barCorners(world, at.x[column], at.z[row], value, size);
+		return Object.assign(corners, {
+			key,
+			row,
+			column,
+			value
+		});
+	});
+}
+/**
+* What a bar says on hover, made when the pointer lands on it: its x and z
+* as the ticks name them and its value as the ticks of y name it - or what
+* `tooltip` makes of that. A bar that has left the data, its value or its
+* place, says nothing.
+*/
+function fieldTooltip({ key, row, column }, { target, x: xs, z: zs }, { format = {}, titles = {}, tooltip = (tip) => tip }) {
+	if (!(key in target)) return void 0;
+	const value = target[key];
+	const named = (name, v) => ({
+		label: titles[name] ?? (name === "y" ? "value" : name),
+		value: format[name]?.(v) ?? v
+	});
+	const [x, z] = [xs.places[column], zs.places[row]];
+	return () => tooltip({ items: [
+		named("x", x),
+		named("z", z),
+		named("y", value)
+	] }, {
+		row,
+		column,
+		x,
+		z,
+		value
+	});
+}
+// registry/new-york/ui/choropleth-chart-3d.tsx
+/**
+* The regions of the land on a globe, each in the color of its class. The
+* region an entry names is colored over the land, in the config color of
+* its series; one without an entry stays land. Nothing grows: a region fades
+* in with its entry, out without it, and one that changes series leaves as
+* one and enters as the other.
+*/
+function ChoroplethChart3D({ data, land, id, value, series, label, format, tooltip }) {
+	const { config, camera } = useChart3D();
+	const largerFirst = useLargerFirst(land);
+	const reading = {
+		config,
+		value,
+		format,
+		tooltip
+	};
+	const { regions, present } = useRegions(data, {
+		id,
+		value,
+		series,
+		label
+	}, Object.keys(config)[0]);
+	const presence = useTween(present, 0);
+	const opaque = new Set(Object.entries(presence).flatMap(([pid, o]) => o >= 1 ? [JSON.parse(pid)[0]] : []));
+	const { marks: scenery, path, sink } = earth({ features: land.features.filter((f) => f.id === void 0 || !opaque.has(String(f.id))) }, camera, geoOrthographic(), geoPath);
+	const features = new Map(land.features.filter((f) => f.id !== void 0).map((f) => [String(f.id), f]));
+	const overlays = Object.entries(presence).sort(([a], [b]) => largerFirst(a, b)).flatMap(([pid, opacity]) => {
+		const [rid, key] = JSON.parse(pid);
+		const feature = features.get(rid);
+		if (!feature) return [];
+		const region = regions.get(rid);
+		const says = region?.key === key ? regionTooltip(region, reading) : void 0;
+		return sink.marks(() => path(feature), `region-${rid}-${key}`, faded(colorOf(key), opacity)).map((mark) => ({
+			...mark,
+			groups: [rid],
+			tooltip: says
+		}));
+	});
+	return /* @__PURE__ */ jsx(Marks3D, { marks: [...scenery, ...overlays] });
+}
+/**
+* Orders the presence ids of two regions, the larger region first, so a
+* region inside another - Lesotho in South Africa - is painted on top, where
+* the pointer finds it.
+*/
+function useLargerFirst(land) {
+	const areas = React.useMemo(() => new Map(land.features.map((f) => [String(f.id), geoArea(f)])), [land]);
+	const size = (pid) => areas.get(JSON.parse(pid)[0]) ?? 0;
+	return (a, b) => size(b) - size(a);
+}
+/**
+* What a region says on hover, made when the pointer lands on it: its name,
+* or the label of its series, over its value in the series color, labelled
+* by the field - or what `tooltip` makes of that.
+*/
+function regionTooltip({ key, value, name, entry }, { config, value: field, format, tooltip = (tip) => tip }) {
+	return () => tooltip({
+		title: name ?? config[key]?.label ?? key,
+		items: [{
+			label: field,
+			value: format?.(value) ?? value,
+			color: colorOf(key)
+		}]
+	}, { entry });
+}
+/**
+* The region of every entry and its presence - built once per change of the
+* data, not at every frame the camera turns. The presence is keyed by the
+* region and its series, so a region that changes color leaves as one and
+* enters as the other, each fading.
+*/
+function useRegions(data, fields, fallback) {
+	const { id, value, series, label } = fields;
+	return React.useMemo(() => {
+		const regions = regionValues(data, {
+			id,
+			value,
+			series,
+			label
+		}, fallback);
+		return {
+			regions,
+			present: Object.fromEntries([...regions.values()].map((r) => [JSON.stringify([r.rid, r.key]), 1]))
+		};
+	}, [
+		data,
+		id,
+		value,
+		series,
+		label,
+		fallback
+	]);
+}
+/** The region of every entry - the last entry on a region wins - by the id it names. */
+function regionValues(data, fields, fallback) {
+	const regions = /* @__PURE__ */ new Map();
+	for (const d of data) {
+		const rid = String(d[fields.id]);
+		regions.set(rid, {
+			rid,
+			key: fields.series ? String(d[fields.series]) : fallback,
+			value: Number(d[fields.value]) || 0,
+			entry: d,
+			name: fields.label ? String(d[fields.label]) : void 0
+		});
+	}
+	return regions;
+}
+// registry/new-york/ui/globe-chart-3d.tsx
+/** The width of a tile in degrees, unless the chart says. */
+const STEP = 5;
+/** The height of a tile at the ceiling, in the world box. */
+const HEIGHT = .4;
+/**
+* A globe of tiles between meridians and parallels, `step` degrees wide, on
+* the land. The tile that holds an entry rises from the globe to the entry's
+* value, in the color of its series; one without an entry is not drawn.
+*/
+function GlobeChart3D({ data, land, lon, lat, value, series, label, step: requested = STEP, format, tooltip }) {
+	const { config, camera } = useChart3D();
+	const step = requested > 0 && requested <= 180 ? requested : STEP;
+	const fields = {
+		lon,
+		lat,
+		value,
+		series,
+		label
+	};
+	const { tiles, target, present } = useTiles(data, fields, step, Object.keys(config)[0]);
+	const heights = useTween(target, 0);
+	const presence = useTween(present, 0);
+	const { ceiling } = useTween({ ceiling: axis(0, Object.values(target).reduce((max, v) => Math.max(max, v), 0)).domain[1] });
+	const eye = orthographic(camera);
+	const ids = Object.keys(heights);
+	const shapes = useShapes(ids, step);
+	const tooltips = useTileTooltips(tiles, {
+		config,
+		fields,
+		format,
+		tooltip
+	});
+	const near = nearTiles(ids, shapes, step, eye);
+	const prisms = polygons3D().camera(eye).data(prismFaces(near, shapes, heights, ceiling, eye.scale())).map((face) => Object.assign(face, { centroid: {
+		...face.centroid,
+		z: +face.centroid.z.toFixed(9)
+	} })).sort(sort).filter((face) => face.ccw && face.centroid.z > 0).map((face) => prismMark(face, shapes.get(face.id).key, presence[face.id], tooltips.get(face.id)));
+	const scenery = earth(land, camera, geoOrthographic(), geoPath).marks;
+	return /* @__PURE__ */ jsx(Marks3D, { marks: [...scenery, ...prisms] });
+}
+/**
+* The tile of every entry, the value of each and its presence - built once
+* per change of the data, not at every frame the camera turns. A tile is
+* keyed by its place and its series, so a tile that changes color leaves as
+* one and enters as the other.
+*/
+function useTiles(data, fields, step, fallback) {
+	const { lon, lat, value, series, label } = fields;
+	return React.useMemo(() => {
+		const tiles = tileValues(data, {
+			lon,
+			lat,
+			value,
+			series,
+			label
+		}, step, fallback);
+		return {
+			tiles,
+			target: Object.fromEntries([...tiles.values()].map((t) => [t.id, t.value])),
+			present: Object.fromEntries([...tiles.keys()].map((k) => [k, 1]))
+		};
+	}, [
+		data,
+		lon,
+		lat,
+		value,
+		series,
+		label,
+		step,
+		fallback
+	]);
+}
+/**
+* The shape of every tile `ids` names, read from its id once and not at
+* every frame the camera turns - the gone ones too, while they shrink - and
+* forgotten with the tile, so the memory stays the size of the globe.
+*/
+function useShapes(ids, step) {
+	const memory = React.useRef({
+		step,
+		shapes: /* @__PURE__ */ new Map()
+	});
+	if (memory.current.step !== step) memory.current = {
+		step,
+		shapes: /* @__PURE__ */ new Map()
+	};
+	const { shapes } = memory.current;
+	for (const id of ids) {
+		if (shapes.has(id)) continue;
+		const { lon, lat, key } = tile(id);
+		shapes.set(id, {
+			key,
+			center: globe(lon, lat, GLOBE_RADIUS),
+			ground: corners(lon, lat, step, GLOBE_RADIUS)
+		});
+	}
+	if (shapes.size > ids.length) {
+		const live = new Set(ids);
+		for (const id of shapes.keys()) if (!live.has(id)) shapes.delete(id);
+	}
+	return shapes;
+}
+/**
+* What every tile says on hover, made once per change of the tiles or of
+* what reads them, not at every frame the camera turns; every face of a tile
+* shares it.
+*/
+function useTileTooltips(tiles, { config, fields, format, tooltip }) {
+	const { lon, lat, value, series, label } = fields;
+	return React.useMemo(() => {
+		const reading = {
+			config,
+			fields: {
+				lon,
+				lat,
+				value,
+				series,
+				label
+			},
+			format,
+			tooltip
+		};
+		return new Map([...tiles].map(([id, t]) => [id, tileTooltip(t, reading)]));
+	}, [
+		tiles,
+		config,
+		lon,
+		lat,
+		value,
+		series,
+		label,
+		format,
+		tooltip
+	]);
+}
+/**
+* The ids of the tiles whose center lies in front of the center plane of the
+* globe, or less than half a tile behind it: every face of any other tile is
+* behind the plane too, and projecting those only to cull them cost half the
+* frame.
+*/
+function nearTiles(ids, shapes, step, eye) {
+	const edge = -globe(0, step / 2, GLOBE_RADIUS).y;
+	const centers = ids.map((id) => ({
+		id,
+		...shapes.get(id).center
+	}));
+	return points3D().camera(eye).data(centers).filter((p) => p.rotated.z > -edge).map((p) => p.id);
+}
+/**
+* The tile of every entry - the last entry on a tile wins - keyed by the
+* center of the tile and the config key of its color, with its value and, if
+* the chart names entries, the name of that last entry, and every entry on
+* the tile, gathered in one list: a copy per entry costs the square of them.
+*/
+function tileValues(data, fields, step, fallback) {
+	const tiles = /* @__PURE__ */ new Map();
+	for (const d of data) {
+		if (!finite(d[fields.lon]) || !finite(d[fields.lat])) continue;
+		const [lon, lat] = [Number(d[fields.lon]), Number(d[fields.lat])];
+		const center = `${snap(lon, -180, 180, step)},${snap(lat, -90, 90, step)}`;
+		const key = fields.series ? String(d[fields.series]) : fallback;
+		const entries = tiles.get(center)?.entries ?? [];
+		entries.push(d);
+		tiles.set(center, {
+			id: `${center},${key}`,
+			value: nonNegative(d[fields.value]),
+			entries,
+			name: fields.label ? String(d[fields.label]) : void 0
+		});
+	}
+	return new Map([...tiles.values()].map((t) => [t.id, t]));
+}
+/** The center of the tile between `lo` and `hi` that holds `v`; the last tile holds the far edge and beyond. */
+function snap(v, lo, hi, step) {
+	return lo + (Math.min(Math.max(0, Math.floor((v - lo) / step)), Math.round((hi - lo) / step) - 1) + .5) * step;
+}
+/** The center and the config key of a tile that rises, read back from its id. */
+function tile(id) {
+	const [lon, lat, ...key] = id.split(",");
+	return {
+		lon: Number(lon),
+		lat: Number(lat),
+		key: key.join(",")
+	};
+}
+/**
+* The faces of the tiles `ids` - the top of each and, where the tile is a
+* pixel tall on screen, its four sides - the gone ones still shrinking among
+* them. A side thinner than a pixel draws nothing, and on a globe of
+* thousands of flat tiles the sides are most of the faces, so leaving them
+* out turns it about twice as fast.
+*/
+function prismFaces(ids, shapes, heights, ceiling, scale) {
+	return ids.flatMap((id) => {
+		const bottom = shapes.get(id).ground;
+		const lift = heights[id] / ceiling * HEIGHT;
+		const lifted = (GLOBE_RADIUS + lift) / GLOBE_RADIUS;
+		const top = Object.assign(bottom.map((p) => ({
+			x: p.x * lifted,
+			y: p.y * lifted,
+			z: p.z * lifted
+		})), {
+			id,
+			part: "top"
+		});
+		if (lift * scale < 1) return [top];
+		return [top, ...bottom.map((b, i) => {
+			const j = (i + 1) % 4;
+			return Object.assign([
+				b,
+				bottom[j],
+				top[j],
+				top[i]
+			], {
+				id,
+				part: `side${i}`
+			});
+		})];
+	});
+}
+/** The corners of the tile around `lon` and `lat` at `radius`, wound to face outwards. */
+function corners(lon, lat, step, radius) {
+	const [w, e, s, n] = [
+		lon - step / 2,
+		lon + step / 2,
+		lat - step / 2,
+		lat + step / 2
+	];
+	return [
+		globe(w, s, radius),
+		globe(e, s, radius),
+		globe(e, n, radius),
+		globe(w, n, radius)
+	];
+}
+/**
+* What a tile says on hover, made when the pointer lands on one of its
+* faces: its name, or the label of its series, over its value in the series
+* color and the center of the tile, labelled by the fields - or what
+* `tooltip` makes of that. A tile whose entries have left the data says
+* nothing.
+*/
+function tileTooltip({ id, value, name, entries }, { config, fields, format, tooltip = (tip) => tip }) {
+	return () => {
+		const { lon, lat, key } = tile(id);
+		return tooltip({
+			title: name ?? config[key]?.label ?? key,
+			items: [
+				{
+					label: fields.value,
+					value: format?.(value) ?? value,
+					color: colorOf(key)
+				},
+				{
+					label: fields.lat,
+					value: lat
+				},
+				{
+					label: fields.lon,
+					value: lon
+				}
+			]
+		}, { entries });
+	};
+}
+/**
+* The mark of one face of a tile that rises: shaded in the color of its
+* series and faded to its presence. Its group is the tile alone, so hovering
+* highlights one tile, not its series.
+*/
+function prismMark(face, key, presence, tooltip) {
+	return {
+		key: `${face.id}-${face.part}`,
+		points: face.map((p) => p.projected),
+		fill: faded(shade(face, colorOf(key)), presence),
+		groups: [face.id],
+		tooltip
+	};
+}
+// registry/new-york/ui/places-chart-3d.tsx
+/**
+* Dots on the land of a globe, one per place, its area its value. A dot on
+* the far side is hidden by the globe.
+*/
+function PlacesChart3D({ data, land, lon, lat, value, series, id, radius = 6, format, tooltip }) {
+	const { config, camera } = useChart3D();
+	const fields = {
+		lon,
+		lat,
+		value,
+		series,
+		id
+	};
+	const { entries, names, target, present } = useDots(data, fields);
+	const sizes = useTween(target, 0);
+	const opacity = useTween(present, 0);
+	const { peak } = useTween({ peak: Math.max(0, ...Object.values(target)) });
+	const place = usePlaces(names, entries, fields, Object.keys(config)[0], sizes);
+	const reading = {
+		config,
+		fields,
+		radius,
+		format,
+		tooltip
 	};
-	const names = data.map((d, i) => id ? String(d[id]) : String(i));
-	const { radii, opacity, read, key } = usePointTweens(names, data, fields, series, config, radius);
-	const spec = useTweenAxes(pointAxes(data, fields));
+	const behind = new Map(entries.map((d, i) => [names[i], d]));
+	const dots = points3D().camera(orthographic(camera)).x((p) => p.x).y((p) => p.y).z((p) => p.z).data(Object.keys(sizes).map((name) => {
+		const { lon, lat } = place(name);
+		return {
+			name,
+			...globe(lon, lat, GLOBE_RADIUS)
+		};
+	})).filter((p) => p.rotated.z > 0).sort(sort).map((p) => dotMark(p, place(p.name), sizes[p.name] / (peak || 1), behind.get(p.name), opacity[p.name], reading));
+	const scenery = earth(land, camera, geoOrthographic(), geoPath).marks;
+	return /* @__PURE__ */ jsx(Marks3D, { marks: [...scenery, ...dots] });
+}
+/**
+* The entries with a place on the globe, the name of each, their values and
+* their presence - built once per change of the data, not at every frame the
+* camera turns.
+*/
+function useDots(data, fields) {
+	const { lon, lat, value, id } = fields;
+	return React.useMemo(() => {
+		const entries = data.filter((d) => finite(d[lon]) && finite(d[lat]));
+		const names = entries.map((d) => id ? String(d[id]) : `${Number(d[lon])},${Number(d[lat])}`);
+		return {
+			entries,
+			names,
+			target: Object.fromEntries(entries.map((d, i) => [names[i], value ? nonNegative(d[value]) : 1])),
+			present: Object.fromEntries(names.map((name) => [name, 1]))
+		};
+	}, [
+		data,
+		lon,
+		lat,
+		value,
+		id
+	]);
+}
+/**
+* The mark of one dot: a circle whose area is its share of the peak, in the
+* color of its series, faded to its presence and ringed by the background so
+* that dots in front stand out. Its group is the dot alone, so hovering
+* highlights that dot only.
+*/
+function dotMark(p, place, share, entry, presence, reading) {
+	return {
+		key: p.name,
+		points: [p.projected],
+		r: reading.radius * Math.sqrt(share),
+		fill: faded(colorOf(place.key), presence),
+		stroke: faded("var(--background)", presence),
+		groups: [p.name],
+		tooltip: dotTooltip(p.name, place, entry, reading)
+	};
+}
+/**
+* What a dot says on hover, made when the pointer lands on it - thousands of
+* dots, one tooltip: its name, or its series, over its value and its place,
+* labelled by the fields - or what `tooltip` makes of that. A dot whose
+* entry has left the data says nothing.
+*/
+function dotTooltip(name, { lon, lat, key }, entry, { config, fields, format, tooltip = (tip) => tip }) {
+	if (!entry) return void 0;
+	const value = fields.value ? nonNegative(entry[fields.value]) : 0;
+	return () => tooltip({
+		title: fields.id ? name : config[key]?.label ?? key,
+		items: [
+			...fields.value ? [{
+				label: fields.value,
+				value: format?.(value) ?? value,
+				color: colorOf(key)
+			}] : [],
+			{
+				label: fields.lat,
+				value: lat
+			},
+			{
+				label: fields.lon,
+				value: lon
+			}
+		]
+	}, { entry });
+}
+/**
+* The place and the config key of every dot, by name - remembered while a
+* gone dot shrinks away, since its entry has already left the data - and
+* forgotten with the dot, so the memory stays the size of the chart.
+*/
+function usePlaces(names, data, fields, fallback, alive) {
+	const known = React.useRef(/* @__PURE__ */ new Map());
+	data.forEach((d, i) => known.current.set(names[i], {
+		lon: Number(d[fields.lon]),
+		lat: Number(d[fields.lat]),
+		key: fields.series ? String(d[fields.series]) : fallback
+	}));
+	const live = new Set(names);
+	for (const name of known.current.keys()) if (!(name in alive) && !live.has(name)) known.current.delete(name);
+	return (name) => known.current.get(name);
+}
+// registry/new-york/ui/scatter-chart-3d.tsx
+/**
+* Points in the chart box, at the fields `x`, `y` and `z` of each entry.
+* `series` names the field whose value is the config key of the color.
+*/
+function ScatterChart3D({ data: all, x, y, z, id, series, radius = 4, format, titles, tooltip }) {
+	const { config, camera } = useChart3D();
+	const { fields, data, names, entries, values, axes } = usePoints(all, x, y, z, id);
+	const { radii, opacity, read, key } = usePointTweens(names, data, values, series, config, radius);
+	const spec = useTweenAxes(axes);
 	const world = worldBox(spec);
 	const placed = usePointPlaces(names, radii, read, world);
 	const marks = points3D().camera(camera).x((p) => p.x).y((p) => p.y).z((p) => p.z).data(placed).sort(sort).map((p) => ({
 		key: p.name,
 		points: [p.projected],
 		r: radii[p.name],
-		fill: faded(`var(--color-${key(p.name)})`, opacity[p.name]),
+		fill: faded(colorOf(key(p.name)), opacity[p.name]),
 		groups: [p.name],
 		stroke: faded("var(--background)", opacity[p.name]),
-		tooltip: {
-			title: series ? config[key(p.name)]?.label ?? key(p.name) : void 0,
-			items: [
-				"x",
-				"y",
-				"z"
-			].map((a) => ({
-				label: titles?.[a] ?? fields[a],
-				value: read(p.name, a)
-			}))
-		}
+		tooltip: pointTooltip(entries.get(p.name), series ? config[key(p.name)]?.label ?? key(p.name) : void 0, fields, {
+			format,
+			titles,
+			tooltip
+		})
 	}));
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
 		spec,
@@ -2189,6 +3386,67 @@ function ScatterChart3D({ data, x, y, z, id, series, radius = 4, format, titles
 		titles
 	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
 }
+/**
+* What a point says on hover, made when the pointer lands on it: its series,
+* where `title` names one, and its x, y and z as the ticks of each axis name
+* them - or what `tooltip` makes of that. A point whose entry has left the
+* data says nothing.
+*/
+function pointTooltip(entry, title, fields, { format = {}, titles = {}, tooltip = (tip) => tip }) {
+	if (!entry) return void 0;
+	return () => tooltip({
+		title,
+		items: [
+			"x",
+			"y",
+			"z"
+		].map((a) => {
+			const value = Number(entry[fields[a]]);
+			return {
+				label: titles[a] ?? fields[a],
+				value: format[a]?.(value) ?? value
+			};
+		})
+	}, { entry });
+}
+/**
+* The entries with a place in the box, their names, the entry behind each
+* name, their positions and the axes that hold them - built once per change
+* of the data, not at every frame the camera turns.
+*/
+function usePoints(all, x, y, z, id) {
+	return React.useMemo(() => {
+		const fields = {
+			x,
+			y,
+			z
+		};
+		const placed = all.flatMap((d, i) => [
+			x,
+			y,
+			z
+		].every((f) => finite(d[f])) ? [{
+			d,
+			name: id ? String(d[id]) : String(i)
+		}] : []);
+		const data = placed.map((p) => p.d);
+		const names = placed.map((p) => p.name);
+		return {
+			fields,
+			data,
+			names,
+			entries: new Map(names.map((name, i) => [name, data[i]])),
+			values: pointValues(names, data, fields),
+			axes: pointAxes(data, fields)
+		};
+	}, [
+		all,
+		x,
+		y,
+		z,
+		id
+	]);
+}
 /** The axes that hold every entry of `data`, a nice one per field. */
 function pointAxes(data, fields) {
 	const range = (a) => {
@@ -2208,10 +3466,10 @@ function pointAxes(data, fields) {
 * one shrinks as it fades away. `read` and `key` look them up, also for a
 * point still leaving.
 */
-function usePointTweens(names, data, fields, series, config, radius) {
-	const values = useTween(pointValues(names, data, fields));
-	const radii = useTween(Object.fromEntries(names.map((name) => [name, radius])), 0);
-	const opacity = useTween(Object.fromEntries(names.map((name) => [name, 1])), 0);
+function usePointTweens(names, data, target, series, config, radius) {
+	const values = useTween(target);
+	const radii = useTween(React.useMemo(() => Object.fromEntries(names.map((name) => [name, radius])), [names, radius]), 0);
+	const opacity = useTween(React.useMemo(() => Object.fromEntries(names.map((name) => [name, 1])), [names]), 0);
 	const fallback = Object.keys(config)[0];
 	return {
 		radii,
@@ -2277,44 +3535,57 @@ function usePointKeys(names, data, series, fallback, alive) {
 * `colors` at the lowest height to the second at the highest; both are keys
 * of the chart config, by default its first two.
 */
-function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
+function SurfaceChart3D({ data: raw, domain = {}, x, z, colors, format, titles, tooltip }) {
 	const { config, camera } = useChart3D();
 	const [low, high = low] = colors ?? Object.keys(config);
-	const [floor = 0, peak = 0] = extent(data.flat());
-	const target = gridValues(data);
-	const heights = gridHeights(useTween(target), floor);
-	const fade = useTween(Object.fromEntries(Object.keys(target).map((k) => [k, 1])), 0);
-	const rows = data.length;
-	const columns = data[0]?.length ?? 0;
-	const [x0, x1] = domain.x ?? [0, columns - 1];
-	const [z0, z1] = domain.z ?? [0, rows - 1];
-	const cell = {
-		x: (x1 - x0) / Math.max(1, columns - 1),
-		z: (z1 - z0) / Math.max(1, rows - 1)
-	};
-	const [lo = 0, hi = 0] = extent(heights.flat());
+	const { floor, peak, target, present, ...sides } = useGrid(raw, {
+		domain,
+		x,
+		z
+	});
+	const heights = useTween(target);
+	const fade = useTween(present, 0);
+	const placesX = useTween(sides.x.places);
+	const placesZ = useTween(sides.z.places);
+	const { lattice, points } = React.useMemo(() => {
+		const lattice = gridLattice(heights, {
+			x: placesX,
+			z: placesZ
+		}, floor);
+		return {
+			lattice,
+			points: gridPoints(lattice, {
+				x: placesX,
+				z: placesZ
+			}, {
+				raw,
+				present,
+				keys: [low, high],
+				format,
+				titles,
+				tooltip
+			})
+		};
+	}, [
+		heights,
+		placesX,
+		placesZ,
+		floor,
+		raw,
+		present,
+		low,
+		high,
+		format,
+		titles,
+		tooltip
+	]);
 	const spec = useTweenAxes({
-		x: domain.x ? axis(x0, x1) : pad(axis(x0, x1), cell.x),
+		x: sides.x.spec,
 		y: axis(floor, peak),
-		z: domain.z ? axis(z0, z1) : pad(axis(z0, z1), cell.z)
+		z: sides.z.spec
 	});
 	const world = worldBox(spec);
-	const toX = linear([0, columns - 1], [x0, x1]);
-	const toZ = linear([0, rows - 1], [z0, z1]);
-	const grid = intoWorld(gridPlanes3D().camera(camera), world).rows(Math.max(1, heights[0]?.length ?? 0));
-	const points = heights.flatMap((row, r) => row.map((y, c) => ({
-		x: toX(c),
-		y,
-		z: toZ(r),
-		r,
-		c
-	})));
-	const marks = grid.data(points).sort(sort).map((quad) => quadMark(quad, fade, {
-		lo,
-		hi,
-		low,
-		high
-	}, titles?.y));
+	const marks = intoWorld(gridPlanes3D().camera(camera), world).rows(Math.max(1, lattice[0]?.length ?? 0)).data(points).sort(sort).map((quad) => quadMark(quad, fade));
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
 		spec,
 		world,
@@ -2323,44 +3594,162 @@ function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
 	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
 }
 /**
-* The mark of one cell: its quad, shaded by the color ramp at its height and
-* faded in place by `fade` while the cell enters or leaves.
+* The points of the lattice at their places, each cell on the point it
+* starts at - its lowest row and column - with its color on the ramp at its
+* height, the mean of its corners, and its tooltip.
 */
-function quadMark(quad, fade, ramp, title) {
-	const height = quad.reduce((sum, p) => sum + p.y, 0) / quad.length;
-	const t = Math.round((height - ramp.lo) / (ramp.hi - ramp.lo || 1) * 100);
-	const shaded = shade(quad, `color-mix(in oklch, var(--color-${ramp.high}) ${t}%, var(--color-${ramp.low}))`);
-	const seen = Math.min(...quad.map((p) => fade[`${p.r}-${p.c}`] ?? 0));
+function gridPoints(lattice, places, { raw, present, keys, ...say }) {
+	const [lo = 0, hi = 0] = extent(lattice.flat(), (p) => p.y);
+	return lattice.flatMap((row, i) => row.map(({ r, c, y }, j) => {
+		const point = {
+			x: places.x[c],
+			y,
+			z: places.z[r],
+			r,
+			c,
+			key: `${r}-${c}`
+		};
+		const corners = [
+			row[j + 1],
+			lattice[i + 1]?.[j],
+			lattice[i + 1]?.[j + 1]
+		];
+		if (corners.every(Boolean)) {
+			const quad = [{
+				r,
+				c,
+				y
+			}, ...corners];
+			const height = quad.reduce((sum, p) => sum + p.y, 0) / quad.length;
+			point.cell = {
+				key: point.key,
+				color: ramp(height, [lo, hi], keys),
+				tooltip: cellTooltip(quad, raw, present, say)
+			};
+		}
+		return point;
+	}));
+}
+/**
+* What a cell says on hover, made when the pointer lands on it: its height,
+* the mean of its four corners in the data, as the ticks of y name it - or
+* what `tooltip` makes of that. A cell on its way out of the data - its
+* height or its place - says nothing, and so does one with a height that is no number, where the
+* stand-in at the floor would make a value up.
+*/
+function cellTooltip(quad, data, present, { format = {}, titles = {}, tooltip = (tip) => tip }) {
+	if (quad.some((p) => !(`${p.r}-${p.c}` in present) || !finite(data[p.r][p.c]))) return void 0;
+	return () => {
+		const value = quad.reduce((sum, p) => sum + data[p.r][p.c], 0) / quad.length;
+		const row = Math.min(...quad.map((p) => p.r));
+		const column = Math.min(...quad.map((p) => p.c));
+		return tooltip({ items: [{
+			label: titles.y ?? "value",
+			value: format.y?.(value) ?? value
+		}] }, {
+			row,
+			column,
+			value
+		});
+	};
+}
+/**
+* The mark of one cell: its quad, shaded in the color of its cell and faded
+* in place by `fade` while the cell enters or leaves. It is named by the row
+* and column it starts at, as d3-3d numbers its quads anew as the grid grows.
+*/
+function quadMark(quad, fade) {
+	let start = quad[0];
+	let seen = 1;
+	for (const p of quad) {
+		if (p.r <= start.r && p.c <= start.c) start = p;
+		seen = Math.min(seen, fade[p.key] ?? 0);
+	}
+	const { key, color, tooltip } = start.cell;
+	const shaded = shade(quad, color);
 	return {
-		key: quad.plane,
+		key,
 		points: quad.map((p) => p.projected),
 		fill: seen < 1 ? `color-mix(in srgb, ${shaded} ${Math.round(seen * 100)}%, transparent)` : shaded,
-		groups: [quad.plane],
-		tooltip: { items: [{
-			label: title ?? "value",
-			value: height
-		}] }
+		groups: [key],
+		tooltip
 	};
 }
-/** The height of every cell, keyed by its row and column, gliding into new data. */
-function gridValues(data) {
-	return Object.fromEntries(data.flatMap((row, r) => row.map((y, c) => [`${r}-${c}`, y])));
+/**
+* The grid with every height a number, its lowest and highest height, the
+* height of every cell and its presence, and the places of its columns and
+* rows - built once per change of the data, not at every frame the camera
+* turns. A column or row without a place drops out of all of them.
+*/
+function useGrid(raw, { domain, x, z }) {
+	return React.useMemo(() => {
+		const sides = {
+			x: gridAxis(Math.max(0, ...raw.map((row) => row.length)), {
+				at: x,
+				ends: domain.x,
+				padded: !(x || domain.x)
+			}),
+			z: gridAxis(raw.length, {
+				at: z,
+				ends: domain.z,
+				padded: !(z || domain.z)
+			})
+		};
+		const grid = cleanGrid(raw.map((row, r) => r in sides.z.places ? row.map((y, c) => c in sides.x.places ? y : NaN) : []));
+		const target = gridValues(grid.data, sides);
+		return {
+			...grid,
+			...sides,
+			target,
+			present: Object.fromEntries(Object.keys(target).map((k) => [k, 1]))
+		};
+	}, [
+		raw,
+		x,
+		z,
+		domain.x,
+		domain.z
+	]);
 }
 /**
-* The gliding heights as a lattice. It spans the cells still leaving too, so
-* a shrunken grid sinks away instead of popping; a corner only one dimension
-* kept stands at the floor until it goes.
+* The grid with every height a number: one that is not - NaN, Infinity -
+* stands at the lowest of the others, so one cell cannot blank the surface.
+* With the lowest and the highest height, 0 for a grid without one.
 */
-function gridHeights(tweened, floor) {
-	let rows = 0;
-	let columns = 0;
+function cleanGrid(raw) {
+	const [floor = 0, peak = 0] = extent(raw.flat().filter(finite));
+	return {
+		data: raw.map((row) => row.map((y) => finite(y) ? y : floor)),
+		floor,
+		peak
+	};
+}
+/** The height of every cell with a place, keyed by its row and column, gliding into new data. */
+function gridValues(data, sides) {
+	return Object.fromEntries(data.flatMap((row, r) => row.flatMap((y, c) => c in sides.x.places && r in sides.z.places ? [[`${r}-${c}`, y]] : [])));
+}
+/**
+* The gliding heights as a lattice over the rows and columns they name. It
+* spans the cells still leaving too, so a shrunken grid sinks away instead
+* of popping; a corner only one dimension kept stands at the floor until it
+* goes. A column or row without a place is no line of it: new heights
+* glide a leaving one on while its place, and its fade, are gone.
+*/
+function gridLattice(tweened, places, floor) {
+	const rows = /* @__PURE__ */ new Set();
+	const columns = /* @__PURE__ */ new Set();
 	for (const key of Object.keys(tweened)) {
 		const [r, c] = key.split("-").map(Number);
-		rows = Math.max(rows, r + 1);
-		columns = Math.max(columns, c + 1);
+		if (r in places.z) rows.add(r);
+		if (c in places.x) columns.add(c);
 	}
-	return Array.from({ length: rows }, (_, r) => Array.from({ length: columns }, (_, c) => tweened[`${r}-${c}`] ?? floor));
+	const ascending = (set) => [...set].sort((a, b) => a - b);
+	return ascending(rows).map((r) => ascending(columns).map((c) => ({
+		r,
+		c,
+		y: tweened[`${r}-${c}`] ?? floor
+	})));
 }
-export { AreaChart3D, Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, ScatterChart3D, SurfaceChart3D, axis, cubeMarks, faded, intoWorld, linear, pad, shade, useChart3D, useSeries, useTween, useTweenAxes, worldBox };
+export { AreaChart3D, Axes3D, BarChart3D, BarFieldChart3D, ChartContainer3D, ChartLegend3D, ChoroplethChart3D, GLOBE_RADIUS, GlobeChart3D, Labels3D, Marks3D, PlacesChart3D, ScatterChart3D, SurfaceChart3D, axis, barCorners, barMarks, colorOf, cubeMarks, earth, faded, finite, floored, globe, gridAxis, intoWorld, linear, nonNegative, orthographic, pad, ramp, shade, useChart3D, useSeries, useTween, useTweenAxes, worldBox };
 
 //# sourceMappingURL=index.js.map