@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threeglobe/LinkGlobeChart.js

@@ -0,0 +1,55 @@
+import { GlobeChart } from "./GlobeChart.js";
+import { GlobeArcProfile } from "./GlobeEnums.js";
+import { finite } from "./GlobeMath.js";
+import { geoDistance } from "d3";
+// src/charts/threeglobe/LinkGlobeChart.ts
+/** Base for origin-destination charts. Rows with missing or identical endpoints are skipped. */
+var LinkGlobeChart = class extends GlobeChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			fromLon: "fromLon",
+			fromLat: "fromLat",
+			toLon: "toLon",
+			toLat: "toLat",
+			value: "value",
+			from: "from",
+			to: "to",
+			profile: GlobeArcProfile.Lofted
+		};
+	}
+	get links() {
+		const { data, fromLon, fromLat, toLon, toLat, value, from, to } = this.options;
+		return (data ?? []).flatMap((row) => {
+			const a = [finite(row[fromLon], NaN), finite(row[fromLat], NaN)], b = [finite(row[toLon], NaN), finite(row[toLat], NaN)];
+			if (![...a, ...b].every(Number.isFinite) || a[0] === b[0] && a[1] === b[1]) return [];
+			return [{
+				row,
+				from: a,
+				to: b,
+				value: finite(row[value]),
+				source: String(row[from] ?? ""),
+				target: String(row[to] ?? ""),
+				span: geoDistance(a, b)
+			}];
+		});
+	}
+	/** Height above the surface at `t` along a link. */
+	altitude(link, t) {
+		const arc = Math.sin(t * Math.PI);
+		if (this.options.profile === GlobeArcProfile.Hugging) return .008;
+		if (this.options.profile === GlobeArcProfile.Fixed) return .008 + .1 * arc;
+		return .008 + (.04 + .2 * link.span / Math.PI) * arc;
+	}
+	path(link, steps = 40) {
+		return this.body.trace(link.from, link.to, steps, (t) => this.altitude(link, t));
+	}
+	linkTip(link, color) {
+		return {
+			title: `${link.source} → ${link.target}`,
+			rows: [[this.options.value, link.value]],
+			color
+		};
+	}
+};
+export { LinkGlobeChart };

package/dist/charts/threeglobe/MapPlaneChart.js

@@ -0,0 +1,14 @@
+import { GlobeProjection, GlobeSurface } from "./GlobeEnums.js";
+import { RegionGlobeChart } from "./RegionGlobeChart.js";
+// src/charts/threeglobe/MapPlaneChart.ts
+/** Region chart fixed to a projected plane. */
+var MapPlaneChart = class extends RegionGlobeChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			surface: GlobeSurface.Plane,
+			projection: GlobeProjection.NaturalEarth
+		};
+	}
+};
+export { MapPlaneChart };

package/dist/charts/threeglobe/MeshBuffer.js

@@ -0,0 +1,137 @@
+import { OwnedMesh } from "./OwnedMesh.js";
+import { BufferAttribute, BufferGeometry, DoubleSide, MeshStandardMaterial, Vector3 } from "three";
+// src/charts/threeglobe/MeshBuffer.ts
+var [ab, ac, cross] = [
+	new Vector3(),
+	new Vector3(),
+	new Vector3()
+];
+/** Grows one merged mesh out of many data marks, tracking the owner of each face and each vertex's pre-reveal position. */
+var MeshBuffer = class {
+	positions = [];
+	starts = [];
+	normals = [];
+	colors = [];
+	alphas = [];
+	index = [];
+	owners = [];
+	get faces() {
+		return this.owners.length;
+	}
+	vertex(point, normal, color, start = point, alpha = 1) {
+		this.positions.push(point.x, point.y, point.z);
+		this.starts.push(start.x, start.y, start.z);
+		this.normals.push(normal.x, normal.y, normal.z);
+		this.colors.push(color.r, color.g, color.b);
+		this.alphas.push(alpha);
+		return this.positions.length / 3 - 1;
+	}
+	/** Adds a face, winding it to agree with its first vertex normal. */
+	face(a, b, c, owner) {
+		const p = this.positions, n = this.normals;
+		ab.set(p[b * 3] - p[a * 3], p[b * 3 + 1] - p[a * 3 + 1], p[b * 3 + 2] - p[a * 3 + 2]);
+		ac.set(p[c * 3] - p[a * 3], p[c * 3 + 1] - p[a * 3 + 1], p[c * 3 + 2] - p[a * 3 + 2]);
+		if (cross.crossVectors(ab, ac).x * n[a * 3] + cross.y * n[a * 3 + 1] + cross.z * n[a * 3 + 2] < 0) this.index.push(a, c, b);
+		else this.index.push(a, b, c);
+		this.owners.push(owner);
+	}
+	/** Round tube along a polyline; radius may vary with `t`. Ends are capped. */
+	tube(points, radius, paint, owner, sides = 6) {
+		const tint = typeof paint === "function" ? paint : () => paint;
+		const rings = this.rail(points, radius, tint, sides);
+		for (let i = 0; i + 1 < rings.length; i++) for (let k = 0; k < sides; k++) {
+			const [a, b] = [rings[i] + k, rings[i] + (k + 1) % sides], [c, d] = [rings[i + 1] + k, rings[i + 1] + (k + 1) % sides];
+			this.face(a, c, b, owner);
+			this.face(b, c, d, owner);
+		}
+		const last = points.length - 1;
+		this.cap(rings[0], sides, owner, points[0], points[0].clone().sub(points[1]).normalize(), tint(0));
+		this.cap(rings.at(-1), sides, owner, points[last], points[last].clone().sub(points[last - 1]).normalize(), tint(1));
+	}
+	rail(points, radius, tint, sides) {
+		const tangent = new Vector3(), frame = new Vector3(), bi = new Vector3(), radial = new Vector3(), at = new Vector3();
+		const seed = new Vector3(0, 1, 0);
+		return points.map((point, i) => {
+			tangent.copy(points[Math.min(i + 1, points.length - 1)]).sub(points[Math.max(i - 1, 0)]).normalize();
+			if (i === 0) frame.copy(Math.abs(tangent.y) > .9 ? seed.set(1, 0, 0) : seed);
+			frame.addScaledVector(tangent, -frame.dot(tangent)).normalize();
+			bi.crossVectors(tangent, frame);
+			const t = i / (points.length - 1), r = radius(t), color = tint(t), first = this.positions.length / 3;
+			for (let k = 0; k < sides; k++) {
+				const angle = k / sides * Math.PI * 2;
+				radial.copy(frame).multiplyScalar(Math.cos(angle)).addScaledVector(bi, Math.sin(angle));
+				this.vertex(at.copy(point).addScaledVector(radial, r), radial, color);
+			}
+			return first;
+		});
+	}
+	cap(ring, sides, owner, center, normal, color) {
+		const hub = this.vertex(center, normal, color);
+		for (let k = 0; k < sides; k++) this.face(hub, ring + k, ring + (k + 1) % sides, owner);
+	}
+	/** Flat-topped band whose top faces `normals`, for wide links. */
+	ribbon(points, normals, width, thickness, color, owner) {
+		const tangent = new Vector3(), side = new Vector3(), corner = new Vector3(), n = new Vector3();
+		const slices = points.map((point, i) => {
+			tangent.copy(points[Math.min(i + 1, points.length - 1)]).sub(points[Math.max(i - 1, 0)]).normalize();
+			side.crossVectors(tangent, normals[i]).normalize();
+			const half = width(i / (points.length - 1)) / 2;
+			const put = (s, h, normal) => this.vertex(corner.copy(point).addScaledVector(side, s * half).addScaledVector(normals[i], h * thickness), normal, color);
+			const down = n.copy(normals[i]).negate().clone(), out = side.clone(), back = side.clone().negate();
+			return [
+				put(-1, 1, normals[i]),
+				put(1, 1, normals[i]),
+				put(1, 1, out),
+				put(1, 0, out),
+				put(1, 0, down),
+				put(-1, 0, down),
+				put(-1, 0, back),
+				put(-1, 1, back)
+			];
+		});
+		for (let i = 0; i + 1 < slices.length; i++) for (const pair of [
+			0,
+			2,
+			4,
+			6
+		]) {
+			const [a, b, c, d] = [
+				slices[i][pair],
+				slices[i][pair + 1],
+				slices[i + 1][pair],
+				slices[i + 1][pair + 1]
+			];
+			this.face(a, c, b, owner);
+			this.face(b, c, d, owner);
+		}
+	}
+	/** Finishes the mesh; vertices travel from their start positions to their final positions during reveal. */
+	build(ctx, options = {}) {
+		const final = new Float32Array(this.positions), starts = new Float32Array(this.starts);
+		const geometry = new BufferGeometry();
+		const position = new BufferAttribute(new Float32Array(final), 3);
+		geometry.setAttribute("position", position);
+		geometry.setAttribute("normal", new BufferAttribute(new Float32Array(this.normals), 3));
+		const rgba = options.fade ? this.colors.flatMap((value, i) => i % 3 === 2 ? [value, this.alphas[(i - 2) / 3]] : [value]) : this.colors;
+		geometry.setAttribute("color", new BufferAttribute(new Float32Array(rgba), options.fade ? 4 : 3));
+		geometry.setIndex(this.index);
+		if (options.relit) geometry.computeVertexNormals();
+		geometry.computeBoundingSphere();
+		const mesh = new OwnedMesh(geometry, new MeshStandardMaterial({
+			vertexColors: true,
+			roughness: options.roughness ?? .72,
+			side: options.side ?? DoubleSide,
+			transparent: options.fade ?? false,
+			depthWrite: !options.fade
+		}));
+		mesh.owners = this.owners;
+		mesh.frustumCulled = false;
+		if (options.sweep) ctx.reveal((p) => geometry.setDrawRange(0, Math.round(this.index.length * p / 3) * 3), options.duration ?? 1.6, options.delay);
+		else if (this.positions.some((v, i) => v !== this.starts[i])) ctx.reveal((p) => {
+			for (let i = 0; i < final.length; i++) position.array[i] = starts[i] + (final[i] - starts[i]) * p;
+			position.needsUpdate = true;
+		}, options.duration, options.delay);
+		return mesh;
+	}
+};
+export { MeshBuffer };

package/dist/charts/threeglobe/OwnedMesh.js

@@ -0,0 +1,12 @@
+import { Mesh } from "three";
+// src/charts/threeglobe/OwnedMesh.ts
+/** A merged mesh that reports which datum each face belongs to, through `instanceId`, so one draw call can carry many picks. */
+var OwnedMesh = class extends Mesh {
+	owners = [];
+	raycast(raycaster, intersects) {
+		const start = intersects.length;
+		super.raycast(raycaster, intersects);
+		for (let i = start; i < intersects.length; i++) intersects[i].instanceId = this.owners[intersects[i].faceIndex ?? 0];
+	}
+};
+export { OwnedMesh };

package/dist/charts/threeglobe/PlaneSurface.js

@@ -0,0 +1,69 @@
+import { GeoSurface } from "./GeoSurface.js";
+import { regionLines, regionPolygons } from "./GeoRings.js";
+import { geoPath } from "d3";
+import { Vector3 } from "three";
+import { geoProject } from "d3-geo-projection";
+// src/charts/threeglobe/PlaneSurface.ts
+var EXTENT = 2e3;
+/** A projected world map lying on the floor, north away from the viewer. Patch coordinates are scene x and z. */
+var PlaneSurface = class extends GeoSurface {
+	projection;
+	interrupted;
+	latitudes;
+	maxEdge = 0;
+	key;
+	/** Half depth of the fitted map. */
+	depth;
+	constructor(projection, name, interrupted = false, latitudes) {
+		super();
+		this.projection = projection;
+		this.interrupted = interrupted;
+		this.latitudes = latitudes;
+		this.key = `plane-${name}`;
+		projection.fitWidth(EXTENT, { type: "Sphere" });
+		const [, [, bottom]] = geoPath(projection).bounds({ type: "Sphere" });
+		const [top, base] = latitudes ? [projection([0, latitudes[1]])[1], projection([0, latitudes[0]])[1]] : [0, bottom];
+		const [x, y] = projection.translate();
+		projection.translate([x, y - (top + base) / 2]);
+		if (latitudes) projection.clipExtent([[0, (top - base) / 2], [EXTENT, (base - top) / 2]]);
+		this.depth = (base - top) / EXTENT;
+	}
+	covers(lat) {
+		return !this.latitudes || lat >= this.latitudes[0] && lat <= this.latitudes[1];
+	}
+	place(lon, lat, lift = 0, out = new Vector3()) {
+		const held = this.latitudes ? Math.max(this.latitudes[0], Math.min(this.latitudes[1], lat)) : lat;
+		const [x, y] = this.projection([lon, held]) ?? [EXTENT / 2, EXTENT / 2];
+		return out.set(x / (EXTENT / 2) - 1, lift, y / (EXTENT / 2));
+	}
+	patchPoint(u, v, lift, out = new Vector3()) {
+		return out.set(u, lift, v);
+	}
+	normal(_point, out = new Vector3()) {
+		return out.set(0, 1, 0);
+	}
+	trace(a, b, steps, lift) {
+		const from = this.place(a[0], a[1]), to = this.place(b[0], b[1]);
+		return Array.from({ length: steps + 1 }, (_, i) => {
+			const t = i / steps;
+			return from.clone().lerp(to, t).setY(lift(t));
+		});
+	}
+	polygons(geometry) {
+		return regionPolygons(geoProject(geometry, this.projection)).map((polygon) => polygon.map((ring) => ring.map(([x, y]) => this.scene(x, y))));
+	}
+	lines(geometry) {
+		return regionLines(geoProject(geometry, this.projection)).map((line) => line.map(([x, y]) => this.scene(x, y)));
+	}
+	/** Edges this long are jumps between the lobes of an interrupted map, not borders. */
+	seam(a, b) {
+		return this.interrupted && Math.hypot(a[0] - b[0], a[1] - b[1]) > .12;
+	}
+	key01(t, out = new Vector3()) {
+		return out.set(-.5 + t, 0, this.depth + .09);
+	}
+	scene(x, y) {
+		return [x / (EXTENT / 2) - 1, y / (EXTENT / 2)];
+	}
+};
+export { PlaneSurface };

package/dist/charts/threeglobe/PointGlobeChart.js

@@ -0,0 +1,83 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeLand, GlobeSizing, GlobeSurface, GlobeSymbol } from "./GlobeEnums.js";
+import { magnitude } from "./GlobeMath.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { SiteGlobeChart } from "./SiteGlobeChart.js";
+import { groups } from "d3";
+import { CircleGeometry, OctahedronGeometry, RingGeometry, SphereGeometry } from "three";
+// src/charts/threeglobe/PointGlobeChart.ts
+var DISC = .015;
+/** Individual points on the earth: for where events or records happen. */
+var PointGlobeChart = class extends SiteGlobeChart {
+	static meta = {
+		id: "point-globe",
+		name: "Point globe",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Scatters located records over the earth, with area showing size and colour showing group.",
+		tags: [
+			"dot map",
+			"scatter",
+			"locations",
+			"events"
+		],
+		sample: (seed) => GlobeSamples.scatter(seed, 160),
+		variants: {
+			symbol: Object.values(GlobeSymbol),
+			sizing: Object.values(GlobeSizing),
+			cluster: [false, true],
+			land: [GlobeLand.Dotted, GlobeLand.Solid],
+			surface: Object.values(GlobeSurface)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			symbol: GlobeSymbol.Disc,
+			sizing: GlobeSizing.Area,
+			cluster: false,
+			land: GlobeLand.Dotted,
+			group: "group"
+		};
+	}
+	get marks() {
+		if (!this.options.cluster) return this.sites;
+		return groups(this.sites, (site) => `${Math.round(site.lon / 6)}:${Math.round(site.lat / 6)}:${site.group ?? ""}`).map(([, members]) => ({
+			...members[0],
+			lon: members.reduce((sum, m) => sum + m.lon, 0) / members.length,
+			lat: members.reduce((sum, m) => sum + m.lat, 0) / members.length,
+			value: members.reduce((sum, m) => sum + m.value, 0),
+			name: `${members[0].name} (${members.length})`
+		}));
+	}
+	shape() {
+		switch (this.options.symbol) {
+			case GlobeSymbol.Sphere: return new SphereGeometry(1, 14, 10);
+			case GlobeSymbol.Ring: return new RingGeometry(.62, 1, 22);
+			case GlobeSymbol.Diamond: return new OctahedronGeometry(1);
+			default: return new CircleGeometry(1, 22);
+		}
+	}
+	draw(ctx) {
+		const { marks } = this, { symbol, sizing } = this.options;
+		const size = magnitude(marks.map((site) => site.value), void 0);
+		const radius = (site) => sizing === GlobeSizing.Area ? Math.max(DISC * .5, DISC * 3.4 * Math.sqrt(size(site.value))) : DISC;
+		const seat = (lift, grow = 0) => (site, _, node, p) => {
+			const at = this.body.place(site.lon, site.lat, lift);
+			node.position.copy(at);
+			this.faceOut(node, at);
+			node.scale.setScalar(Math.max((radius(site) + grow) * p, 1e-4));
+		};
+		if (symbol === GlobeSymbol.Disc) this.stamp(ctx, new CircleGeometry(1, 22), marks, seat(.0065, .005), () => this.theme.surface, void 0, {
+			shadow: false,
+			grow: true
+		});
+		this.stamp(ctx, this.shape(), marks, seat(symbol === GlobeSymbol.Disc || symbol === GlobeSymbol.Ring ? .008 : .016), (site) => this.tone(ctx, site, size(site.value)), (site) => this.siteTip(site, this.tone(ctx, site, size(site.value))), {
+			grow: true,
+			shadow: symbol === GlobeSymbol.Sphere
+		});
+		this.leaders(ctx, marks, 3, () => .05);
+	}
+};
+export { PointGlobeChart };

package/dist/charts/threeglobe/PrismMapChart.js

@@ -0,0 +1,96 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeClassify, GlobeFootprint, GlobeProjection } from "./GlobeEnums.js";
+import { magnitude } from "./GlobeMath.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { MapPlaneChart } from "./MapPlaneChart.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+import { geoCentroid } from "d3";
+import { CylinderGeometry } from "three";
+// src/charts/threeglobe/PrismMapChart.ts
+var TALL = .14;
+/** Prisms carrying two variables, height and colour: for reading a magnitude against a rate at the same place. */
+var PrismMapChart = class extends MapPlaneChart {
+	static meta = {
+		id: "prism-map",
+		name: "Prism map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Shows one variable as prism height and a second as colour, on footprints from true borders to tokens.",
+		tags: [
+			"bivariate map",
+			"cartogram",
+			"dorling"
+		],
+		sample: (seed) => GlobeSamples.regions(seed),
+		variants: {
+			footprint: [
+				GlobeFootprint.Inset,
+				GlobeFootprint.Region,
+				GlobeFootprint.Proportional,
+				GlobeFootprint.Hexagon,
+				GlobeFootprint.Circle
+			],
+			bins: [
+				0,
+				4,
+				6
+			],
+			projection: [
+				GlobeProjection.NaturalEarth,
+				GlobeProjection.EqualEarth,
+				GlobeProjection.Equirectangular
+			],
+			plate: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			color: "share",
+			footprint: GlobeFootprint.Inset,
+			bins: 0
+		};
+	}
+	draw(ctx) {
+		const { footprint, bins, color: colorColumn } = this.options, { features, body } = this;
+		const values = this.values(), shares = this.values(colorColumn), size = magnitude(values);
+		const levels = this.classes(ctx, values.map(size), GlobeClassify.EqualInterval, Math.max(bins, 2));
+		const hues = this.classes(ctx, shares.length ? shares : [0, 1], GlobeClassify.Continuous, 5);
+		const height = (value) => .012 + (bins ? levels.level(size(value)) : size(value)) * TALL;
+		const paint = (feature) => {
+			const share = this.reading(feature, colorColumn);
+			return share === null ? this.missing(ctx) : hues.color(share);
+		};
+		const tip = (feature) => ({
+			...this.regionTip(feature, paint(feature)),
+			rows: [[this.options.value, this.reading(feature) ?? "No data"], [colorColumn, this.reading(feature, colorColumn) ?? "No data"]]
+		});
+		if (footprint === GlobeFootprint.Hexagon || footprint === GlobeFootprint.Circle) {
+			const tokens = features.filter((feature) => this.reading(feature) !== null && feature.geometry);
+			this.stamp(ctx, new CylinderGeometry(1, 1, 1, footprint === GlobeFootprint.Hexagon ? 6 : 28).translate(0, .5, 0), tokens, (feature, _, node, p) => {
+				const r = Math.max(.008, .042 * Math.sqrt(size(this.reading(feature))));
+				node.position.copy(body.place(...geoCentroid(feature)));
+				node.scale.set(r, Math.max(height(this.reading(feature)) * p, .001), r);
+			}, paint, tip, { grow: true });
+		} else {
+			const buffer = new MeshBuffer();
+			features.forEach((feature, i) => {
+				const value = this.reading(feature);
+				if (value === null || !feature.geometry) return;
+				const center = body.place(...geoCentroid(feature));
+				const ratio = footprint === GlobeFootprint.Region ? 1 : footprint === GlobeFootprint.Inset ? .86 : Math.max(.12, Math.sqrt(size(value)));
+				this.region(buffer, feature, 0, height(value), ctx.color(paint(feature)), i, true, (u, v) => [center.x + (u - center.x) * ratio, center.z + (v - center.z) * ratio]);
+			});
+			const mesh = buffer.build(ctx, {
+				roughness: .7,
+				duration: 1.2
+			});
+			mesh.castShadow = mesh.receiveShadow = true;
+			ctx.root.add(mesh);
+			ctx.pick(mesh, (i) => tip(features[i]));
+		}
+		if (shares.length) this.drawKey(ctx, hues.stops, hues.low, hues.high);
+	}
+};
+export { PrismMapChart };

package/dist/charts/threeglobe/RegionGlobeChart.js

@@ -0,0 +1,81 @@
+import { GlobeChart } from "./GlobeChart.js";
+import { GlobeClassify, GlobeLand } from "./GlobeEnums.js";
+import { ascending, bisectRight, extent, quantile, ticks } from "d3";
+// src/charts/threeglobe/RegionGlobeChart.ts
+/** Base for charts of GeoJSON regions. Features with no value draw in the neutral land colour. */
+var RegionGlobeChart = class extends GlobeChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			value: "value",
+			label: "name",
+			land: GlobeLand.Bare
+		};
+	}
+	get features() {
+		return this.options.data?.features ?? [];
+	}
+	reading(feature, column = this.options.value) {
+		const value = feature.properties?.[column];
+		return value == null || value === "" || !Number.isFinite(+value) ? null : +value;
+	}
+	values(column) {
+		return this.features.flatMap((feature) => this.reading(feature, column) ?? []);
+	}
+	nameOf(feature) {
+		return String(feature.properties?.[this.options.label] ?? feature.id ?? "");
+	}
+	regionTip(feature, color) {
+		return {
+			title: this.nameOf(feature),
+			rows: [[this.options.value, this.reading(feature) ?? "No data"]],
+			color
+		};
+	}
+	table() {
+		const { value, label } = this.options;
+		return {
+			columns: [label, value],
+			rows: this.features.map((feature) => [this.nameOf(feature), this.reading(feature)])
+		};
+	}
+	/** Classifies values and builds the matching key. Spans crossing zero take the diverging ramp. */
+	classes(ctx, values, kind, bins) {
+		const [low = 0, high = 1] = extent(values), span = high - low || 1, reach = Math.max(Math.abs(low), Math.abs(high)) || 1;
+		const paint = (t, value) => low < 0 && high > 0 ? ctx.palette.diverging(value / reach) : this.heat(ctx, t);
+		if (kind === GlobeClassify.Continuous) return {
+			level: (v) => (v - low) / span,
+			color: (v) => paint((v - low) / span, v),
+			stops: this.ramp(ctx).map((stop) => ({
+				...stop,
+				color: paint(stop.from, low + stop.from * span)
+			})),
+			low,
+			high
+		};
+		const sorted = [...values].sort(ascending);
+		const breaks = kind === GlobeClassify.Quantile ? Array.from({ length: bins - 1 }, (_, i) => quantile(sorted, (i + 1) / bins) ?? low) : kind === GlobeClassify.Rounded ? ticks(low, high, bins).filter((tick) => tick > low && tick < high) : Array.from({ length: bins - 1 }, (_, i) => low + span * (i + 1) / bins);
+		const edges = [
+			low,
+			...breaks,
+			high
+		], top = Math.max(1, edges.length - 2);
+		const level = (v) => Math.min(top, bisectRight(breaks, v)) / top;
+		const color = (v) => paint(level(v), (edges[Math.min(top, bisectRight(breaks, v))] + edges[Math.min(top + 1, bisectRight(breaks, v) + 1)]) / 2);
+		return {
+			level,
+			color,
+			stops: edges.slice(0, -1).map((edge, i) => ({
+				from: (edge - low) / span,
+				to: (edges[i + 1] - low) / span,
+				color: color((edge + edges[i + 1]) / 2)
+			})),
+			low,
+			high
+		};
+	}
+	missing(ctx) {
+		return ctx.theme.axis;
+	}
+};
+export { RegionGlobeChart };

package/dist/charts/threeglobe/RibbonGlobe.js

@@ -0,0 +1,81 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeArcProfile, GlobeLand, GlobeLinkWidth, GlobeRibbonEnd, GlobeRibbonSection, GlobeSurface } from "./GlobeEnums.js";
+import { magnitude } from "./GlobeMath.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { LinkGlobeChart } from "./LinkGlobeChart.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+import { Vector3 } from "three";
+// src/charts/threeglobe/RibbonGlobe.ts
+var WIDE = .03;
+/** Flat bands across the earth whose width carries volume: the geographic form of a Sankey. */
+var RibbonGlobe = class extends LinkGlobeChart {
+	static meta = {
+		id: "ribbon-globe",
+		name: "Ribbon globe",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Draws wide bands between places, with band width showing volume, in the style of a flow map.",
+		tags: [
+			"flow map",
+			"sankey",
+			"trade",
+			"minard"
+		],
+		sample: (seed) => GlobeSamples.routes(seed),
+		variants: {
+			profile: [GlobeArcProfile.Hugging, GlobeArcProfile.Lofted],
+			band: Object.values(GlobeLinkWidth),
+			end: Object.values(GlobeRibbonEnd),
+			section: Object.values(GlobeRibbonSection),
+			bundle: [true, false],
+			surface: [GlobeSurface.Sphere, GlobeSurface.Plane]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			profile: GlobeArcProfile.Hugging,
+			band: GlobeLinkWidth.Value,
+			end: GlobeRibbonEnd.Flat,
+			section: GlobeRibbonSection.Sheet,
+			bundle: true,
+			land: GlobeLand.Solid
+		};
+	}
+	shape(t) {
+		const { end } = this.options;
+		if (end === GlobeRibbonEnd.Tapered) return Math.min(1, 1.1 - t);
+		return end === GlobeRibbonEnd.Lens ? .25 + .75 * Math.sin(t * Math.PI) : 1;
+	}
+	draw(ctx) {
+		const { links } = this, { band, section, bundle } = this.options;
+		const size = magnitude(links.map((link) => link.value));
+		const span = (link) => band === GlobeLinkWidth.Value ? .008 + WIDE * size(link.value) : .022;
+		const used = /* @__PURE__ */ new Map(), buffer = new MeshBuffer(), side = new Vector3(), tangent = new Vector3();
+		const totals = /* @__PURE__ */ new Map();
+		for (const link of links) totals.set(link.source, (totals.get(link.source) ?? 0) + span(link) * .45);
+		const bearing = ({ from, to }) => Math.atan2(to[1] - from[1], (to[0] - from[0] + 540) % 360 - 180);
+		links.map((_, i) => i).sort((a, b) => bearing(links[a]) - bearing(links[b])).forEach((i) => {
+			const link = links[i], points = this.path(link, 48), normals = points.map((point) => this.body.normal(point));
+			if (bundle) {
+				const before = used.get(link.source) ?? 0, offset = before + span(link) * .225 - (totals.get(link.source) ?? 0) / 2;
+				used.set(link.source, before + span(link) * .45);
+				points.forEach((point, k) => {
+					tangent.subVectors(points[Math.min(k + 1, points.length - 1)], points[Math.max(k - 1, 0)]).normalize();
+					side.crossVectors(tangent, normals[k]).normalize();
+					point.addScaledVector(side, offset * (1 - k / (points.length - 1)) ** 2);
+				});
+			}
+			buffer.ribbon(points, normals, (t) => span(link) * this.shape(t), section === GlobeRibbonSection.Bar ? .016 : .002, ctx.color(ctx.palette.color(link.source)), i);
+		});
+		const mesh = buffer.build(ctx, {
+			sweep: true,
+			roughness: .6
+		});
+		mesh.castShadow = true;
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => this.linkTip(links[i], ctx.palette.color(links[i].source)));
+	}
+};
+export { RibbonGlobe };