@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/threeglobe/GeoMesher.js

@@ -0,0 +1,146 @@
+import { regionPolygons, unwrapped } from "./GeoRings.js";
+import { max, min } from "d3";
+import { ShapeUtils, Vector2 } from "three";
+// src/charts/threeglobe/GeoMesher.ts
+var patches = /* @__PURE__ */ new WeakMap();
+var dots = /* @__PURE__ */ new WeakMap();
+var rad = Math.PI / 180;
+/** Turns GeoJSON regions into triangles that follow a surface, with no textures. Results are cached per feature. */
+var GeoMesher = class GeoMesher {
+	static patch(feature, surface) {
+		const cache = patches.get(feature) ?? /* @__PURE__ */ new Map();
+		patches.set(feature, cache);
+		let patch = cache.get(surface.key);
+		if (!patch) cache.set(surface.key, patch = GeoMesher.mesh(feature, surface));
+		return patch;
+	}
+	static mesh(feature, surface) {
+		const patch = {
+			coords: [],
+			index: [],
+			rings: []
+		};
+		if (!feature.geometry) return patch;
+		for (const polygon of surface.polygons(feature.geometry)) {
+			const rings = polygon.map((ring) => GeoMesher.densify(GeoMesher.open(ring), surface.maxEdge)).filter((ring) => ring.length > 2);
+			if (!rings.length) continue;
+			const offset = patch.coords.length / 2;
+			const faces = ShapeUtils.triangulateShape(rings[0].map(([u, v]) => new Vector2(u, v)), rings.slice(1).map((ring) => ring.map(([u, v]) => new Vector2(u, v))));
+			patch.coords.push(...rings.flat(2));
+			for (const face of faces) patch.index.push(face[0] + offset, face[1] + offset, face[2] + offset);
+			patch.rings.push(...rings);
+		}
+		if (surface.maxEdge) GeoMesher.subdivide(patch, surface.maxEdge);
+		return patch;
+	}
+	static open(ring) {
+		const [first, last] = [ring[0], ring.at(-1)];
+		return first && last && first[0] === last[0] && first[1] === last[1] ? ring.slice(0, -1) : ring;
+	}
+	static densify(ring, maxEdge) {
+		if (!maxEdge) return ring;
+		return ring.flatMap((a, i) => {
+			const b = ring[(i + 1) % ring.length], parts = Math.ceil(Math.hypot(a[0] - b[0], a[1] - b[1]) / maxEdge);
+			return Array.from({ length: Math.max(1, parts) }, (_, k) => [a[0] + (b[0] - a[0]) * k / Math.max(1, parts), a[1] + (b[1] - a[1]) * k / Math.max(1, parts)]);
+		});
+	}
+	/** Splits every edge longer than `maxEdge` until none remain. Splits are per edge, so neighbours stay watertight. */
+	static subdivide(patch, maxEdge) {
+		const { coords } = patch;
+		const long = (a, b) => {
+			const du = (coords[a * 2] - coords[b * 2]) * Math.cos((coords[a * 2 + 1] + coords[b * 2 + 1]) / 2 * rad);
+			return Math.hypot(du, coords[a * 2 + 1] - coords[b * 2 + 1]) > maxEdge;
+		};
+		for (let pass = 0, split = true; split && pass < 8; pass++) {
+			split = false;
+			const middles = /* @__PURE__ */ new Map(), index = [];
+			const middle = (a, b) => {
+				const key = Math.min(a, b) * 1e7 + Math.max(a, b);
+				let m = middles.get(key);
+				if (m === void 0) {
+					m = coords.length / 2;
+					coords.push((coords[a * 2] + coords[b * 2]) / 2, (coords[a * 2 + 1] + coords[b * 2 + 1]) / 2);
+					middles.set(key, m);
+				}
+				return m;
+			};
+			for (let i = 0; i < patch.index.length; i += 3) {
+				const [a, b, c] = [
+					patch.index[i],
+					patch.index[i + 1],
+					patch.index[i + 2]
+				];
+				const [ab, bc, ca] = [
+					long(a, b),
+					long(b, c),
+					long(c, a)
+				];
+				if (!ab && !bc && !ca) {
+					index.push(a, b, c);
+					continue;
+				}
+				split = true;
+				const [m, n, o] = [
+					ab ? middle(a, b) : -1,
+					bc ? middle(b, c) : -1,
+					ca ? middle(c, a) : -1
+				];
+				if (ab && bc && ca) index.push(a, m, o, m, b, n, o, n, c, m, n, o);
+				else if (ab && bc) index.push(a, m, c, m, n, c, m, b, n);
+				else if (bc && ca) index.push(a, b, n, a, n, o, o, n, c);
+				else if (ca && ab) index.push(a, m, o, m, b, c, m, c, o);
+				else if (ab) index.push(a, m, c, m, b, c);
+				else if (bc) index.push(a, b, n, a, n, c);
+				else index.push(a, b, o, o, b, c);
+			}
+			patch.index = index;
+		}
+	}
+	/** Ring-even-odd test against one lon/lat polygon. */
+	static inside(polygon, lon, lat) {
+		let hit = false;
+		for (const ring of polygon) for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+			const [ax, ay] = ring[i], [bx, by] = ring[j];
+			if (ay > lat !== by > lat && lon < (bx - ax) * (lat - ay) / (by - ay) + ax) hit = !hit;
+		}
+		return hit;
+	}
+	/** Finds which feature covers a lon/lat, or -1. */
+	static locator(features) {
+		const shapes = features.map((feature) => {
+			const polygons = unwrapped(regionPolygons(feature.geometry)), points = polygons.flat(2);
+			return {
+				polygons,
+				west: min(points, (p) => p[0]) ?? 0,
+				east: max(points, (p) => p[0]) ?? 0,
+				south: min(points, (p) => p[1]) ?? 0,
+				north: max(points, (p) => p[1]) ?? 0
+			};
+		});
+		const at = (lon, lat) => shapes.findIndex((s) => lon >= s.west && lon <= s.east && lat >= s.south && lat <= s.north && s.polygons.some((polygon) => GeoMesher.inside(polygon, lon, lat)));
+		return (lon, lat) => {
+			const hit = at(lon, lat);
+			return hit >= 0 ? hit : at(lon + 360, lat);
+		};
+	}
+	/** Evenly spaced Fibonacci lattice points that fall on land, tagged with the feature they hit. */
+	static dots(features, count) {
+		const cache = dots.get(features) ?? /* @__PURE__ */ new Map();
+		dots.set(features, cache);
+		const hit = cache.get(count);
+		if (hit) return hit;
+		const locate = GeoMesher.locator(features), found = [];
+		for (let i = 0; i < count; i++) {
+			const lat = Math.asin(2 * ((i + .5) / count) - 1) / rad, lon = i * 137.50776405 % 360 - 180;
+			const feature = locate(lon, lat);
+			if (feature >= 0) found.push({
+				lon,
+				lat,
+				feature
+			});
+		}
+		cache.set(count, found);
+		return found;
+	}
+};
+export { GeoMesher };

package/dist/charts/threeglobe/GeoRings.js

@@ -0,0 +1,37 @@
+// src/charts/threeglobe/GeoRings.ts
+/** Polygon rings of any areal GeoJSON geometry; everything else yields none. */
+function regionPolygons(geometry) {
+	if (geometry?.type === "Polygon") return [geometry.coordinates];
+	if (geometry?.type === "MultiPolygon") return geometry.coordinates;
+	if (geometry?.type === "GeometryCollection") return geometry.geometries.flatMap(regionPolygons);
+	return [];
+}
+/** Polylines of any linear GeoJSON geometry. */
+function regionLines(geometry) {
+	if (geometry?.type === "LineString") return [geometry.coordinates];
+	if (geometry?.type === "MultiLineString") return geometry.coordinates;
+	if (geometry?.type === "GeometryCollection") return geometry.geometries.flatMap(regionLines);
+	return [];
+}
+/** Removes antimeridian jumps from a closed lon/lat ring. A ring that circles a pole is closed through that pole so it can be triangulated flat. */
+function unwrap(ring) {
+	const out = [];
+	let shift = 0;
+	ring.forEach(([lon, lat], i) => {
+		if (i) shift += Math.round((ring[i - 1][0] - lon) / 360) * 360;
+		const [x, y] = out.at(-1) ?? [NaN, NaN];
+		if (x !== lon + shift || y !== lat) out.push([lon + shift, lat]);
+	});
+	const turn = out.at(-1)[0] - out[0][0];
+	if (Math.abs(turn) < 180) return out;
+	const pole = out.reduce((sum, point) => sum + point[1], 0) < 0 ? -90 : 90;
+	return [
+		...out,
+		[out.at(-1)[0], pole],
+		[out[0][0], pole],
+		out[0]
+	];
+}
+/** Rings ready for flat triangulation in lon/lat. */
+var unwrapped = (polygons) => polygons.map((polygon) => polygon.map(unwrap));
+export { regionLines, regionPolygons, unwrapped };

package/dist/charts/threeglobe/GeoSurface.js

@@ -0,0 +1,30 @@
+import { geoCircle } from "d3";
+import { Vector3 } from "three";
+// src/charts/threeglobe/GeoSurface.ts
+/** Maps geography onto a body in the scene. Marks use lon/lat; region meshes use the surface's own patch coordinates. */
+var GeoSurface = class {
+	/** Camera azimuth in degrees, so the key opens toward the viewer. */
+	facing = 0;
+	/** Point along the colour key, `t` in 0..1: an arc under the body, curving around the starting view. */
+	key01(t, out = new Vector3()) {
+		const angle = this.facing * (Math.PI / 180) + (t - .5) * 3.6;
+		return out.set(.48 * Math.sin(angle), -.8, .48 * Math.cos(angle));
+	}
+	/** Whether an edge is a cut in the data, not a border: left out of walls and outlines. */
+	seam(a, b) {
+		return a[0] === b[0] || Math.abs(a[1]) > 89.9 && Math.abs(b[1]) > 89.9;
+	}
+	/** Whether a latitude lies on this body; a cropped map leaves some out. */
+	covers(_lat) {
+		return true;
+	}
+	/** Whether a label at `point` faces `camera`. */
+	faces(_point, _camera) {
+		return true;
+	}
+	/** Great-circle disc outline around a point, radius in degrees. */
+	circle(lon, lat, radius, steps, lift = 0) {
+		return geoCircle().center([lon, lat]).radius(radius).precision(360 / steps)().coordinates[0].map(([x, y]) => this.place(x, y, lift));
+	}
+};
+export { GeoSurface };

package/dist/charts/threeglobe/Globe3DChart.js

@@ -0,0 +1,59 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeLand, GlobeMarker, GlobeSurface } from "./GlobeEnums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { SiteGlobeChart } from "./SiteGlobeChart.js";
+import { ConeGeometry, CylinderGeometry, SphereGeometry, Vector3 } from "three";
+// src/charts/threeglobe/Globe3DChart.ts
+var up = new Vector3(0, 1, 0);
+/** A reference globe with named places: the starting point for showing where things are. */
+var Globe3DChart = class extends SiteGlobeChart {
+	static meta = {
+		id: "globe-3d",
+		name: "Globe",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Shows named places on a lit, rotatable earth built from real country geometry.",
+		tags: [
+			"earth",
+			"world",
+			"locator",
+			"orthographic"
+		],
+		sample: (seed) => SampleData.cities(seed),
+		variants: {
+			land: Object.values(GlobeLand),
+			graticule: [false, true],
+			marker: Object.values(GlobeMarker),
+			surface: Object.values(GlobeSurface)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			marker: GlobeMarker.Pin,
+			callouts: 6
+		};
+	}
+	draw(ctx) {
+		const { sites } = this, { marker, callouts } = this.options;
+		const color = ctx.palette.sequential(.7), stem = marker === GlobeMarker.Pin ? .07 : 0;
+		const seat = (node, point, normal, height, scale) => {
+			node.position.copy(point).addScaledVector(normal, height * scale);
+			node.quaternion.setFromUnitVectors(up, normal);
+			node.scale.setScalar(Math.max(scale, .001));
+		};
+		const pose = (height) => (site, _, node, p) => {
+			const point = this.body.place(site.lon, site.lat);
+			seat(node, point, this.body.normal(point), height, p);
+		};
+		const tip = (site) => this.siteTip(site, color);
+		if (marker === GlobeMarker.Pin) {
+			this.stamp(ctx, new CylinderGeometry(.0035, .0035, stem, 6).translate(0, stem / 2, 0), sites, pose(0), () => this.theme.inkSecondary, tip, { grow: true });
+			this.stamp(ctx, new SphereGeometry(.018, 14, 10), sites, pose(stem), () => color, tip, { grow: true });
+		} else if (marker === GlobeMarker.Dot) this.stamp(ctx, new SphereGeometry(.02, 14, 10), sites, pose(.008), () => color, tip, { grow: true });
+		else this.stamp(ctx, new ConeGeometry(.02, .1, 12).rotateX(Math.PI).translate(0, .05, 0), sites, pose(0), () => color, tip, { grow: true });
+		this.leaders(ctx, sites, callouts, () => stem + .05);
+	}
+};
+export { Globe3DChart };

package/dist/charts/threeglobe/GlobeChart.js

@@ -0,0 +1,287 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { SampleData } from "../../data/SampleData.js";
+import { CylinderSurface } from "./CylinderSurface.js";
+import { GeoMesher } from "./GeoMesher.js";
+import { GlobeLand, GlobeProjection, GlobeSurface } from "./GlobeEnums.js";
+import { finite, short } from "./GlobeMath.js";
+import { projectionFor } from "./GlobeProjections.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+import { PlaneSurface } from "./PlaneSurface.js";
+import { SphereSurface } from "./SphereSurface.js";
+import { geoGraticule } from "d3";
+import { BufferAttribute, BufferGeometry, CircleGeometry, CylinderGeometry, DoubleSide, FrontSide, InstancedMesh, LineBasicMaterial, LineSegments, Mesh, MeshStandardMaterial, Object3D, SphereGeometry, Vector3 } from "three";
+// src/charts/threeglobe/GlobeChart.ts
+var VIEWS = {
+	[GlobeSurface.Sphere]: {
+		azimuth: 24,
+		elevation: 16,
+		distance: 3.15
+	},
+	[GlobeSurface.Cylinder]: {
+		azimuth: 24,
+		elevation: 14,
+		distance: 3.3
+	},
+	[GlobeSurface.Plane]: {
+		azimuth: 6,
+		elevation: 50,
+		distance: 2.65
+	}
+};
+var LIFT = {
+	land: .0025,
+	line: .004
+};
+var world;
+var dummy = new Object3D();
+/** Base for every chart drawn on a geographic body: owns the surface, the basemap, the colour key and the shared mark helpers. */
+var GlobeChart = class extends Chart3D {
+	body;
+	constructor(options) {
+		super(options);
+		const view = VIEWS[this.options.surface ?? GlobeSurface.Sphere];
+		const { projection } = this.options;
+		const round = this.flat && (projection === GlobeProjection.AzimuthalEquidistant || projection === GlobeProjection.Mercator);
+		this.options = {
+			...view,
+			...round ? {
+				elevation: 62,
+				distance: 3.2
+			} : {},
+			...this.options
+		};
+	}
+	defaults() {
+		return {
+			surface: GlobeSurface.Sphere,
+			projection: GlobeProjection.NaturalEarth,
+			land: GlobeLand.Solid,
+			graticule: false,
+			plate: true
+		};
+	}
+	get flat() {
+		return this.options.surface === GlobeSurface.Plane;
+	}
+	makeBody() {
+		const { surface, projection } = this.options;
+		if (surface === GlobeSurface.Plane) return new PlaneSurface(projectionFor(projection), projection, projection === GlobeProjection.Goode, projection === GlobeProjection.Mercator ? [-58, 84] : void 0);
+		return surface === GlobeSurface.Cylinder ? new CylinderSurface() : new SphereSurface();
+	}
+	build(ctx) {
+		this.body = this.makeBody();
+		this.body.facing = this.options.azimuth ?? 0;
+		this.drawBody(ctx);
+		this.drawLand(ctx);
+		if (this.options.graticule) this.drawGraticule(ctx);
+		this.draw(ctx);
+	}
+	get basemap() {
+		return (this.options.basemap ?? (world ??= SampleData.world(1))).features;
+	}
+	get oceanColor() {
+		return this.theme.grid;
+	}
+	get landColor() {
+		return this.theme.axis;
+	}
+	drawBody(ctx) {
+		const material = new MeshStandardMaterial({
+			color: this.oceanColor,
+			roughness: .92,
+			side: FrontSide
+		});
+		const { surface } = this.options;
+		if (surface === GlobeSurface.Sphere) {
+			const ball = new Mesh(new SphereGeometry(SphereSurface.radius, 96, 64), material);
+			ball.receiveShadow = true;
+			ctx.root.add(ball);
+		} else if (surface === GlobeSurface.Cylinder) {
+			const drum = new Mesh(new CylinderGeometry(CylinderSurface.radius, CylinderSurface.radius, CylinderSurface.halfHeight * 2, 96), material);
+			drum.receiveShadow = true;
+			ctx.root.add(drum);
+		} else if (this.options.plate) {
+			const plate = new MeshBuffer(), tone = ctx.color(this.oceanColor);
+			this.region(plate, {
+				type: "Feature",
+				properties: null,
+				geometry: { type: "Sphere" }
+			}, -.035, 0, tone, 0);
+			ctx.root.add(this.finishPlate(plate, ctx));
+		}
+	}
+	finishPlate(plate, ctx) {
+		const mesh = plate.build(ctx, { roughness: .92 });
+		mesh.receiveShadow = true;
+		return mesh;
+	}
+	/** Land per `options.land`. Region charts set `land` to bare and draw their own. */
+	drawLand(ctx) {
+		const { land } = this.options;
+		if (land === GlobeLand.Solid) {
+			const buffer = new MeshBuffer(), tone = ctx.color(this.landColor);
+			this.basemap.forEach((feature, i) => this.region(buffer, feature, LIFT.land, LIFT.land, tone, i));
+			const mesh = buffer.build(ctx, { roughness: .85 });
+			mesh.receiveShadow = true;
+			ctx.root.add(mesh);
+			this.outline(ctx, this.basemap, this.theme.grid);
+		} else if (land === GlobeLand.Outline) this.outline(ctx, this.basemap, this.theme.inkMuted);
+		else if (land === GlobeLand.Dotted) {
+			const dots = GeoMesher.dots(this.basemap, 8e3).filter((dot) => this.body.covers(dot.lat));
+			this.stamp(ctx, new CircleGeometry(.0062, 6), dots, (dot, _, node) => {
+				const at = this.body.place(dot.lon, dot.lat, LIFT.land);
+				node.position.copy(at);
+				this.faceOut(node, at);
+			}, () => this.theme.inkMuted, void 0, { shadow: false });
+		}
+	}
+	drawGraticule(ctx) {
+		this.polylines(ctx, this.body.lines(geoGraticule().step([30, 30]).precision(3)()), this.theme.axis, LIFT.line, .55);
+	}
+	/** Thin unlit polylines laid along the surface, in patch coordinates. */
+	polylines(ctx, lines, color, lift = LIFT.line, opacity = 1) {
+		const positions = [], at = new Vector3();
+		for (const line of lines) for (let i = 0; i + 1 < line.length; i++) {
+			if (this.body.seam(line[i], line[i + 1])) continue;
+			for (const [u, v] of [line[i], line[i + 1]]) {
+				this.body.patchPoint(u, v, lift, at);
+				positions.push(at.x, at.y, at.z);
+			}
+		}
+		const geometry = new BufferGeometry().setAttribute("position", new BufferAttribute(new Float32Array(positions), 3));
+		const mesh = new LineSegments(geometry, new LineBasicMaterial({
+			color,
+			transparent: opacity < 1,
+			opacity
+		}));
+		ctx.root.add(mesh);
+		return mesh;
+	}
+	/** Region borders. */
+	outline(ctx, features, color, lift = LIFT.line) {
+		this.polylines(ctx, features.flatMap((feature) => GeoMesher.patch(feature, this.body).rings.map((ring) => [...ring, ring[0]])), color, lift);
+	}
+	/** Adds a region's top at `top` and, when it stands proud of `floor`, its walls. With `reveal`, tops rise from `floor`. `warp` reshapes the footprint. */
+	region(buffer, feature, floor, top, color, owner, reveal = false, warp) {
+		const patch = GeoMesher.patch(feature, this.body);
+		const { body } = this, offset = [], normal = new Vector3(), at = new Vector3(), start = new Vector3();
+		for (let i = 0; i < patch.coords.length; i += 2) {
+			const [u, v] = warp ? warp(patch.coords[i], patch.coords[i + 1]) : [patch.coords[i], patch.coords[i + 1]];
+			body.patchPoint(u, v, top, at);
+			body.patchPoint(u, v, floor, start);
+			offset.push(buffer.vertex(at, body.normal(at, normal), color, reveal ? start : at));
+		}
+		for (let i = 0; i < patch.index.length; i += 3) buffer.face(offset[patch.index[i]], offset[patch.index[i + 1]], offset[patch.index[i + 2]], owner);
+		if (Math.abs(top - floor) < 1e-4) return;
+		const [a, b, c, d, edge, up, wall] = [
+			new Vector3(),
+			new Vector3(),
+			new Vector3(),
+			new Vector3(),
+			new Vector3(),
+			new Vector3(),
+			new Vector3()
+		];
+		for (const ring of patch.rings) for (let i = 0; i < ring.length; i++) {
+			const [p, q] = warp ? [warp(...ring[i]), warp(...ring[(i + 1) % ring.length])] : [ring[i], ring[(i + 1) % ring.length]];
+			if (body.seam(p, q)) continue;
+			body.patchPoint(p[0], p[1], top, a);
+			body.patchPoint(q[0], q[1], top, b);
+			body.patchPoint(p[0], p[1], floor, c);
+			body.patchPoint(q[0], q[1], floor, d);
+			body.normal(a, up);
+			wall.crossVectors(edge.subVectors(b, a), up).normalize();
+			const [i0, i1, i2, i3] = [
+				buffer.vertex(a, wall, color, reveal ? c : a),
+				buffer.vertex(b, wall, color, reveal ? d : b),
+				buffer.vertex(c, wall, color),
+				buffer.vertex(d, wall, color)
+			];
+			buffer.face(i0, i1, i2, owner);
+			buffer.face(i1, i3, i2, owner);
+		}
+	}
+	/** Points `node`'s +y along the surface normal at `point`. CircleGeometry faces +z, so discs pass `axis`. */
+	faceOut(node, point, axis = new Vector3(0, 0, 1)) {
+		node.quaternion.setFromUnitVectors(axis, this.body.normal(point, new Vector3()));
+	}
+	/** One instanced mark per item with a tooltip and a grow-in reveal. */
+	stamp(ctx, shape, items, pose, tint, tip, { shadow = true, grow = false, roughness = .55 } = {}) {
+		const material = new MeshStandardMaterial({
+			roughness,
+			side: DoubleSide
+		});
+		const marks = new InstancedMesh(shape, material, Math.max(items.length, 1));
+		marks.count = items.length;
+		marks.frustumCulled = false;
+		marks.castShadow = shadow;
+		const place = (item, i, p) => {
+			dummy.position.set(0, 0, 0);
+			dummy.quaternion.identity();
+			dummy.scale.set(1, 1, 1);
+			pose(item, i, dummy, p);
+			dummy.updateMatrix();
+			marks.setMatrixAt(i, dummy.matrix);
+		};
+		items.forEach((item, i) => {
+			place(item, i, 1);
+			marks.setColorAt(i, ctx.color(tint(item, i)));
+		});
+		if (grow) ctx.reveal((p) => {
+			items.forEach((item, i) => place(item, i, Math.min(1, p * (1 + .6 * i / items.length))));
+			marks.instanceMatrix.needsUpdate = true;
+			if (p === 1) marks.boundingSphere = null;
+		});
+		ctx.root.add(marks);
+		if (tip) ctx.pick(marks, (i) => tip(items[i]));
+		return marks;
+	}
+	/** Text anchored above a point that hides itself when the body turns it away from the camera. */
+	callout(ctx, text, point, tone = "ink") {
+		const label = ctx.label(text, [
+			point.x,
+			point.y,
+			point.z
+		], tone, 11);
+		const { body } = this, element = label.element;
+		label.onBeforeRender = (_renderer, _scene, camera) => {
+			element.style.opacity = body.faces(point, camera.position) ? "1" : "0";
+		};
+	}
+	/** Stepped colour key whose segment widths show how the classes divide the data range. */
+	drawKey(ctx, stops, low, high) {
+		const buffer = new MeshBuffer(), up = new Vector3(0, 1, 0);
+		stops.forEach(({ from, to, color }, s) => {
+			const count = Math.max(2, Math.ceil((to - from) * (this.flat ? 2 : 48)));
+			const inset = stops.length > 1 ? .0035 : 0;
+			const points = Array.from({ length: count + 1 }, (_, i) => this.body.key01(from + inset + (to - from - inset * 2) * i / count));
+			buffer.ribbon(points, points.map(() => up), () => .036, .012, ctx.color(color), s);
+		});
+		const mesh = buffer.build(ctx, { roughness: .6 });
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => ({
+			title: "Key",
+			rows: [["Class", `${i + 1} of ${stops.length}`]],
+			color: stops[i]?.color
+		}));
+		const lift = new Vector3(0, .012, .03);
+		ctx.label(short(low), this.body.key01(-.01).add(lift).toArray(), "secondary", 10);
+		ctx.label(short(high), this.body.key01(1.01).add(lift).toArray(), "secondary", 10);
+	}
+	/** Colour-key stops of an unclassed sequential scale. */
+	ramp(ctx, steps = 24) {
+		return Array.from({ length: steps }, (_, i) => ({
+			from: i / steps,
+			to: (i + 1) / steps,
+			color: ctx.palette.sequential(.15 + .85 * i / (steps - 1))
+		}));
+	}
+	/** Magnitude colour: stays off the land colour at the low end. */
+	heat(ctx, t) {
+		return ctx.palette.sequential(.15 + .85 * t);
+	}
+	numeric(row, column) {
+		return finite(row[column]);
+	}
+};
+export { GlobeChart };