@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threebars/Stem3DChart.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BOX3D } from "./Cartesian3DChart.js";
+import { PointCloud3DChart } from "./PointCloud3DChart.js";
+import { Glyph3D, Marks3D, Prism3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { extent, mean, quantile } from "d3";
+// src/charts/threebars/Stem3DChart.ts
+var StemBaseline3D = /* @__PURE__ */ function(StemBaseline3D) {
+	StemBaseline3D["Zero"] = "zero";
+	StemBaseline3D["Mean"] = "mean";
+	StemBaseline3D["Floor"] = "floor";
+	return StemBaseline3D;
+}({});
+var StemTaper3D = /* @__PURE__ */ function(StemTaper3D) {
+	StemTaper3D["Rod"] = "rod";
+	StemTaper3D["Spike"] = "spike";
+	return StemTaper3D;
+}({});
+var StemFilter3D = /* @__PURE__ */ function(StemFilter3D) {
+	StemFilter3D["All"] = "all";
+	StemFilter3D["Extremes"] = "extremes";
+	return StemFilter3D;
+}({});
+var ROD = .012;
+/** Discrete samples over a plane, each joined to a baseline: for sparse measurements where a surface would invent data. */
+var Stem3DChart = class Stem3DChart extends PointCloud3DChart {
+	static meta = {
+		id: "stem-3d",
+		name: "3D stem plot",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Raises a stem from a baseline at each x, z sample, showing discrete measurements without interpolating a surface.",
+		tags: [
+			"stem",
+			"discrete",
+			"sampled",
+			"impulse"
+		],
+		sample: (seed) => {
+			const { x, y, z } = SampleData.surface(seed, 13);
+			return y.flatMap((depth, j) => x.map((across, i) => ({
+				x: +across.toFixed(3),
+				z: +depth.toFixed(3),
+				y: +z[j][i].toFixed(3)
+			})));
+		},
+		variants: {
+			baseline: [
+				"zero",
+				"mean",
+				"floor"
+			],
+			head: [
+				Glyph3D.Sphere,
+				Glyph3D.Disc,
+				Glyph3D.Octahedron,
+				"none"
+			],
+			taper: ["rod", "spike"],
+			filter: ["all", "extremes"],
+			scale: [ScaleKind.Linear, ScaleKind.Sqrt]
+		},
+		valid: ({ head, taper }) => !(head === "none" && taper === "rod")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			baseline: "zero",
+			head: Glyph3D.Sphere,
+			taper: "rod",
+			filter: "all",
+			scale: ScaleKind.Linear,
+			group: "group"
+		};
+	}
+	scaled(values, reach) {
+		const { scale } = this.options;
+		this.options = {
+			...this.options,
+			scale: ScaleKind.Linear
+		};
+		const built = super.scaled(values, reach);
+		this.options = {
+			...this.options,
+			scale
+		};
+		return built;
+	}
+	build(ctx) {
+		const { data, y, baseline, head, taper, filter, scale } = this.options;
+		const { points, axes } = this.cloud(data);
+		const values = points.map((point) => Rows3D.number(point.row[y]));
+		const center = mean(values) ?? 0;
+		const base = {
+			["zero"]: 0,
+			["mean"]: center,
+			["floor"]: extent(values)[0] ?? 0
+		}[baseline];
+		const [low = 0, high = 1] = extent([base, ...values]);
+		const heights = super.scaled([low, high], BOX3D.y);
+		axes.y = Stem3DChart.valueAxis(heights, this.options.yTitle ?? y);
+		this.stage(ctx, axes);
+		const sign = (value) => value < base ? -1 : 1;
+		const warp = (value) => scale === ScaleKind.Sqrt ? base + sign(value) * Math.sqrt(Math.abs(value - base) * (Math.max(high - base, base - low) || 1)) : value;
+		const q1 = quantile(values, .25) ?? 0, q3 = quantile(values, .75) ?? 0;
+		const keep = filter === "extremes" ? points.filter((point) => {
+			const value = Rows3D.number(point.row[y]);
+			return value <= q1 || value >= q3;
+		}) : points;
+		const yOf = (point) => heights(warp(Rows3D.number(point.row[y])));
+		const peak = Math.max(high - base, base - low) || 1;
+		const tint = (point) => {
+			const value = Rows3D.number(point.row[y]);
+			return baseline === "floor" ? ctx.palette.sequential(.2 + .8 * (value - base) / peak) : ctx.palette.diverging((value - base) / peak);
+		};
+		const spike = taper === "spike";
+		Marks3D.instanced(ctx, Marks3D.prism(spike ? Prism3D.Cone : Prism3D.Cylinder), keep, {
+			shadow: false,
+			place: (dummy, point, progress) => Marks3D.span(dummy, {
+				from: [
+					point.at.x,
+					heights(base),
+					point.at.z
+				],
+				axis: "y",
+				length: yOf(point) - heights(base),
+				width: spike ? .05 : ROD,
+				depth: spike ? .05 : ROD
+			}, progress),
+			color: tint,
+			tip: spike && head === "none" ? (point) => this.detail(point) : void 0
+		});
+		if (head === "none") return;
+		Marks3D.instanced(ctx, Marks3D.glyph(head), keep, {
+			material: Marks3D.matte({ flatShading: Marks3D.facetedGlyph(head) }),
+			place: (dummy, point, progress) => {
+				dummy.position.set(point.at.x, heights(base) + (yOf(point) - heights(base)) * progress, point.at.z);
+				dummy.scale.setScalar(Math.max(.001, .03 * Math.min(1, progress * 2)));
+			},
+			color: tint,
+			tip: (point) => this.detail(point)
+		});
+	}
+	detail({ row }) {
+		const { x, y, z } = this.options;
+		return { rows: [
+			[x, row[x]],
+			[z, row[z]],
+			[y, row[y]]
+		] };
+	}
+};
+export { Stem3DChart, StemBaseline3D, StemFilter3D, StemTaper3D };

package/dist/charts/threebars/Tier3DChart.js

@@ -0,0 +1,85 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { Marks3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { CylinderGeometry, Group, Mesh } from "three";
+// src/charts/threebars/Tier3DChart.ts
+/** Cross-section of the solid. */
+var TierSection3D = /* @__PURE__ */ function(TierSection3D) {
+	TierSection3D["Round"] = "round";
+	TierSection3D["Square"] = "square";
+	TierSection3D["Hexagon"] = "hexagon";
+	return TierSection3D;
+}({});
+var TierSort3D = /* @__PURE__ */ function(TierSort3D) {
+	TierSort3D["Input"] = "input";
+	TierSort3D["Descending"] = "descending";
+	return TierSort3D;
+}({});
+var SEGMENTS = {
+	["round"]: 56,
+	["square"]: 4,
+	["hexagon"]: 6
+};
+var TIER_HEIGHT = 1.5;
+var TIER_RADIUS = .78;
+var FOV = 19 * (Math.PI / 180);
+/** Shared logic of solids cut into horizontal tiers: frustum geometry, reveal, labels. */
+var Tier3DChart = class extends Chart3D {
+	defaults() {
+		return {
+			label: "category",
+			value: "value",
+			section: "round",
+			sort: "descending",
+			gap: .03,
+			elevation: 17,
+			azimuth: 28,
+			distance: 4.7
+		};
+	}
+	stages() {
+		const { data, label, value, sort } = this.options;
+		const totals = Rows3D.totals(data, label, value);
+		return sort === "descending" ? Rows3D.sortBy(totals, (part) => part.value, -1) : totals;
+	}
+	/** Builds one frustum per tier and raises them into place. Each tier's label sits on the right, so it never clips. */
+	solid(ctx, tiers, ramp) {
+		const { section, value, gap } = this.options;
+		const stack = new Group();
+		let lastLabel = Infinity;
+		const { distance = 4.7, elevation = 17 } = this.options;
+		const room = 30 * distance * Math.tan(FOV) / (this.size.height * Math.cos(elevation * (Math.PI / 180)));
+		ctx.root.add(stack);
+		tiers.forEach((tier, i) => {
+			const trim = Math.min(gap / 2, (tier.top - tier.bottom) * .3);
+			const height = Math.max(.004, tier.top - tier.bottom - trim * 2);
+			const geometry = new CylinderGeometry(Math.max(tier.radiusTop, .002), Math.max(tier.radiusBottom, .002), height, SEGMENTS[section], 1);
+			if (section === "square") geometry.rotateY(Math.PI / 4);
+			const color = ramp(tier, i);
+			const mesh = new Mesh(geometry, Marks3D.matte({
+				color,
+				flatShading: section !== "round"
+			}));
+			mesh.castShadow = mesh.receiveShadow = true;
+			mesh.position.y = (tier.top + tier.bottom) / 2;
+			stack.add(mesh);
+			ctx.reveal((progress) => {
+				mesh.scale.y = Math.max(.001, Marks3D.stagger(progress, i, tiers.length));
+			}, 1);
+			ctx.pick(mesh, () => ({
+				title: tier.key,
+				color,
+				rows: [[value, +tier.value.toFixed(2)], ["Of first", `${(tier.share * 100).toFixed(1)}%`]]
+			}));
+			if (Math.abs(mesh.position.y - lastLabel) < room) return;
+			lastLabel = mesh.position.y;
+			const spare = Math.max(tier.radiusTop, tier.radiusBottom);
+			ctx.label(`${tier.key}  ${+tier.value.toFixed(1)}`, [
+				spare + .1,
+				mesh.position.y,
+				0
+			], "secondary", 11).center.x = 0;
+		});
+	}
+};
+export { TIER_HEIGHT, TIER_RADIUS, Tier3DChart, TierSection3D, TierSort3D };

package/dist/charts/threebars/Waterfall3DChart.js

@@ -0,0 +1,156 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BOX3D, Cartesian3DChart } from "./Cartesian3DChart.js";
+import { Marks3D, Prism3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { extent, scaleBand, scaleLinear } from "d3";
+// src/charts/threebars/Waterfall3DChart.ts
+var WaterfallOrder3D = /* @__PURE__ */ function(WaterfallOrder3D) {
+	WaterfallOrder3D["Input"] = "input";
+	WaterfallOrder3D["Magnitude"] = "magnitude";
+	return WaterfallOrder3D;
+}({});
+var TOTAL = "Total";
+/** Waterfalls side by side in depth: for comparing how the same running total builds up across scenarios. */
+var Waterfall3DChart = class extends Cartesian3DChart {
+	static meta = {
+		id: "waterfall-3d",
+		name: "3D waterfall chart",
+		family: ChartFamily.Financial,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Floats each gain and loss on the running total, with one waterfall per scenario lane in depth.",
+		tags: [
+			"bridge",
+			"cumulative",
+			"variance"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 3).map((row) => ({
+			...row,
+			value: +row.value - 55
+		})),
+		variants: {
+			connectors: [true, false],
+			total: [true, false],
+			order: ["input", "magnitude"],
+			shape: [Prism3D.Box, Prism3D.Cylinder],
+			lanes: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "category",
+			z: "series",
+			y: "value",
+			connectors: true,
+			total: true,
+			order: "input",
+			shape: Prism3D.Box,
+			lanes: true
+		};
+	}
+	build(ctx) {
+		const { data, x, y, z, connectors, total, order, shape, lanes, xTitle, yTitle, zTitle } = this.options;
+		const cells = Rows3D.cross(data, x, lanes ? z : "\0", y);
+		const levels = Rows3D.levels(data, x).filter((level) => cells.some((cell) => cell.x === level));
+		const swing = (step) => cells.reduce((sum, cell) => cell.x === step ? sum + Math.abs(cell.value) : sum, 0);
+		const steps = order === "magnitude" ? Rows3D.sortBy(levels, swing, -1) : levels;
+		const laneKeys = [...new Set(cells.map((cell) => cell.z))];
+		const raw = laneKeys.flatMap((lane) => {
+			let level = 0;
+			const run = steps.flatMap((step) => {
+				const delta = cells.find((cell) => cell.x === step && cell.z === lane)?.value;
+				if (delta === void 0) return [];
+				const start = level;
+				level += delta;
+				return [{
+					step,
+					lane,
+					start,
+					end: level,
+					delta,
+					kind: delta >= 0 ? "gain" : "loss"
+				}];
+			});
+			return total && run.length ? [...run, {
+				step: TOTAL,
+				lane,
+				start: 0,
+				end: level,
+				delta: level,
+				kind: "total"
+			}] : run;
+		});
+		const [low = 0, high = 1] = extent([0, ...raw.flatMap((step) => [step.start, step.end])]);
+		const value = scaleLinear([low, high === low ? low + 1 : high], [-BOX3D.y, BOX3D.y]).nice(5);
+		const across = scaleBand(total && raw.length ? [...steps, TOTAL] : steps, [-BOX3D.x, BOX3D.x]).padding(.22);
+		const deep = lanes ? BOX3D.z : .34;
+		const laneScale = scaleBand(laneKeys, [-deep, deep]).padding(.3);
+		this.stage(ctx, {
+			x: Cartesian3DChart.bandAxis(across, xTitle ?? x),
+			y: Cartesian3DChart.valueAxis(value, yTitle ?? y),
+			z: lanes ? Cartesian3DChart.bandAxis(laneScale, zTitle ?? z) : {
+				ticks: [],
+				rules: [],
+				title: ""
+			}
+		}, deep);
+		const round = shape === Prism3D.Cylinder;
+		const size = Math.min(across.bandwidth(), laneScale.bandwidth());
+		const bars = raw.map((step) => ({
+			from: [
+				across(step.step) + across.bandwidth() / 2,
+				value(step.start),
+				laneScale(step.lane) + laneScale.bandwidth() / 2
+			],
+			axis: "y",
+			length: value(step.end) - value(step.start),
+			width: round ? size : across.bandwidth(),
+			depth: round ? size : laneScale.bandwidth(),
+			step: step.step,
+			lane: step.lane,
+			delta: step.delta,
+			level: step.end,
+			kind: step.kind
+		}));
+		const tints = {
+			gain: ctx.palette.diverging(-1),
+			loss: ctx.palette.diverging(1),
+			total: ctx.theme.inkMuted
+		};
+		Marks3D.instanced(ctx, Marks3D.prism(shape), bars, {
+			place: (dummy, bar, progress) => Marks3D.span(dummy, bar, progress),
+			color: (bar) => tints[bar.kind],
+			tip: (bar) => ({
+				title: [bar.step, bar.lane === "\0" ? "" : bar.lane].filter(Boolean).join(" · "),
+				rows: [[bar.kind === "total" ? "Total" : "Change", +bar.delta.toFixed(2)], ["Running", +bar.level.toFixed(2)]],
+				color: tints[bar.kind]
+			})
+		});
+		if (!connectors) return;
+		const links = bars.slice(0, -1).flatMap((bar, i) => {
+			const next = bars[i + 1];
+			if (next.lane !== bar.lane) return [];
+			const edge = bar.from[0] + bar.width / 2;
+			return [{
+				from: [
+					edge,
+					value(bar.level),
+					bar.from[2]
+				],
+				axis: "x",
+				length: next.from[0] - next.width / 2 - edge,
+				width: .008,
+				depth: .008
+			}];
+		});
+		Marks3D.instanced(ctx, Marks3D.prism(Prism3D.Box), links, {
+			material: Marks3D.matte(),
+			shadow: false,
+			place: (dummy, link, progress) => Marks3D.span(dummy, link, progress),
+			color: () => ctx.theme.inkSecondary
+		});
+	}
+};
+export { Waterfall3DChart, WaterfallOrder3D };

package/dist/charts/threebars/index.js

@@ -0,0 +1,47 @@
+import { BOX3D, BoxFrame, Cartesian3DChart } from "./Cartesian3DChart.js";
+import { Glyph3D, Prism3D } from "./Marks3D.js";
+import { Series3DChart, SeriesLayout3D, SeriesMeasure3D } from "./Series3DChart.js";
+import { Area3DChart } from "./Area3DChart.js";
+import { BarBaseline3D, BarField3DChart, BarLayout3D, BarMeasure3D, BarSort3D } from "./BarField3DChart.js";
+import { Bar3DChart } from "./Bar3DChart.js";
+import { PointCloud3DChart, PointCloudProjection3D } from "./PointCloud3DChart.js";
+import { Bubble3DChart, BubbleSizing3D } from "./Bubble3DChart.js";
+import { CandleKind3D, CandleOverlay3D, CandleVolume3D, Candlestick3DChart } from "./Candlestick3DChart.js";
+import { Cylinder3DBars } from "./Cylinder3DBars.js";
+import { Round3DChart, SliceDepth3D, SliceExplode3D, SliceSort3D, SliceSweep3D } from "./Round3DChart.js";
+import { Donut3DChart } from "./Donut3DChart.js";
+import { TIER_HEIGHT, TIER_RADIUS, Tier3DChart, TierSection3D, TierSort3D } from "./Tier3DChart.js";
+import { Funnel3DChart, FunnelEncoding3D, FunnelTaper3D } from "./Funnel3DChart.js";
+import { Histogram3DChart, HistogramCell3D, HistogramMeasure3D, HistogramRule3D } from "./Histogram3DChart.js";
+import { Line3DChart, LineMarks3D } from "./Line3DChart.js";
+import { Lollipop3DChart } from "./Lollipop3DChart.js";
+import { Pie3DChart } from "./Pie3DChart.js";
+import { Pyramid3DChart, PyramidEncoding3D } from "./Pyramid3DChart.js";
+import { Radar3DChart, RadarFill3D, RadarGrid3D, RadarLayout3D, RadarMeasure3D } from "./Radar3DChart.js";
+import { Ribbon3DChart, RibbonSection3D, RibbonWidth3D } from "./Ribbon3DChart.js";
+import { Scatter3DChart, ScatterFit3D } from "./Scatter3DChart.js";
+import { StackOrder3D, Stacked3DBars } from "./Stacked3DBars.js";
+import { Stem3DChart, StemBaseline3D, StemFilter3D, StemTaper3D } from "./Stem3DChart.js";
+import { Waterfall3DChart, WaterfallOrder3D } from "./Waterfall3DChart.js";
+// src/charts/threebars/index.ts
+var threebarsCatalog = [
+	Bar3DChart,
+	Cylinder3DBars,
+	Stacked3DBars,
+	Lollipop3DChart,
+	Waterfall3DChart,
+	Histogram3DChart,
+	Candlestick3DChart,
+	Scatter3DChart,
+	Bubble3DChart,
+	Stem3DChart,
+	Line3DChart,
+	Ribbon3DChart,
+	Area3DChart,
+	Pie3DChart,
+	Donut3DChart,
+	Funnel3DChart,
+	Pyramid3DChart,
+	Radar3DChart
+];
+export { Area3DChart, BOX3D, Bar3DChart, BarBaseline3D, BarField3DChart, BarLayout3D, BarMeasure3D, BarSort3D, BoxFrame, Bubble3DChart, BubbleSizing3D, CandleKind3D, CandleOverlay3D, CandleVolume3D, Candlestick3DChart, Cartesian3DChart, Cylinder3DBars, Donut3DChart, Funnel3DChart, FunnelEncoding3D, FunnelTaper3D, Glyph3D, Histogram3DChart, HistogramCell3D, HistogramMeasure3D, HistogramRule3D, Line3DChart, LineMarks3D, Lollipop3DChart, Pie3DChart, PointCloud3DChart, PointCloudProjection3D, Prism3D, Pyramid3DChart, PyramidEncoding3D, Radar3DChart, RadarFill3D, RadarGrid3D, RadarLayout3D, RadarMeasure3D, Ribbon3DChart, RibbonSection3D, RibbonWidth3D, Round3DChart, Scatter3DChart, ScatterFit3D, Series3DChart, SeriesLayout3D, SeriesMeasure3D, SliceDepth3D, SliceExplode3D, SliceSort3D, SliceSweep3D, StackOrder3D, Stacked3DBars, Stem3DChart, StemBaseline3D, StemFilter3D, StemTaper3D, TIER_HEIGHT, TIER_RADIUS, Tier3DChart, TierSection3D, TierSort3D, Waterfall3DChart, WaterfallOrder3D, threebarsCatalog };

package/dist/charts/threeglobe/ArcGlobeChart.js

@@ -0,0 +1,84 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeArcProfile, GlobeArcStroke, GlobeLand, GlobeLinkWidth, 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 { SphereGeometry } from "three";
+// src/charts/threeglobe/ArcGlobeChart.ts
+/** Great-circle arcs between places: for connections where the route's length and direction matter. */
+var ArcGlobeChart = class extends LinkGlobeChart {
+	static meta = {
+		id: "arc-globe",
+		name: "Arc globe",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Lifts great-circle arcs between origins and destinations, with thickness showing volume.",
+		tags: [
+			"great circle",
+			"routes",
+			"connection map",
+			"flights"
+		],
+		sample: (seed) => GlobeSamples.routes(seed),
+		variants: {
+			profile: Object.values(GlobeArcProfile),
+			thickness: Object.values(GlobeLinkWidth),
+			stroke: Object.values(GlobeArcStroke),
+			ends: [true, false],
+			surface: Object.values(GlobeSurface)
+		},
+		valid: (v) => !(v.stroke === GlobeArcStroke.Beaded && v.profile === GlobeArcProfile.Fixed)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			thickness: GlobeLinkWidth.Value,
+			stroke: GlobeArcStroke.Solid,
+			ends: true,
+			land: GlobeLand.Solid
+		};
+	}
+	draw(ctx) {
+		const { links } = this, { thickness, stroke, ends } = this.options;
+		const size = magnitude(links.map((link) => link.value));
+		const radius = (link) => thickness === GlobeLinkWidth.Value ? .0035 + .0085 * size(link.value) : .0055;
+		const color = (link) => ctx.palette.color(link.source);
+		if (stroke === GlobeArcStroke.Solid) {
+			const buffer = new MeshBuffer();
+			links.forEach((link, i) => buffer.tube(this.path(link), () => radius(link), ctx.color(color(link)), i));
+			const mesh = buffer.build(ctx, {
+				sweep: true,
+				roughness: .45
+			});
+			mesh.castShadow = true;
+			ctx.root.add(mesh);
+			ctx.pick(mesh, (i) => this.linkTip(links[i], color(links[i])));
+		} else {
+			const beads = links.flatMap((link) => {
+				const count = Math.max(6, Math.round(link.span * 16));
+				return this.path(link, count).map((point) => ({
+					link,
+					point
+				}));
+			});
+			this.stamp(ctx, new SphereGeometry(1, 8, 6), beads, ({ link, point }, _, node, p) => {
+				node.position.copy(point);
+				node.scale.setScalar(Math.max(radius(link) * 1.3 * p, 1e-4));
+			}, ({ link }) => color(link), ({ link }) => this.linkTip(link, color(link)), { grow: true });
+		}
+		if (!ends) return;
+		const places = [...new Map(links.flatMap((link) => [[link.source, link.from], [link.target, link.to]])).values()];
+		this.stamp(ctx, new SphereGeometry(1, 10, 8), places, ([lon, lat], _, node) => {
+			node.position.copy(this.body.place(lon, lat, .006));
+			node.scale.setScalar(.014);
+		}, () => this.theme.ink);
+		const hubs = [...new Set(links.map((link) => link.source))];
+		for (const hub of hubs.slice(0, 5)) {
+			const at = links.find((link) => link.source === hub).from;
+			this.callout(ctx, hub, this.body.place(at[0], at[1], .05));
+		}
+	}
+};
+export { ArcGlobeChart };

package/dist/charts/threeglobe/Bubble3DMap.js

@@ -0,0 +1,73 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeBubble, GlobeLand, GlobeProjection, GlobeSurface } from "./GlobeEnums.js";
+import { magnitude } from "./GlobeMath.js";
+import { SiteGlobeChart } from "./SiteGlobeChart.js";
+import { SampleData } from "../../data/SampleData.js";
+import { CylinderGeometry, SphereGeometry } from "three";
+// src/charts/threeglobe/Bubble3DMap.ts
+var WIDEST = .11;
+var STEM = .14;
+/** Solids standing on a flat map: for magnitudes at places, keeping the whole map in view. */
+var Bubble3DMap = class extends SiteGlobeChart {
+	static meta = {
+		id: "bubble-3d-map",
+		name: "3D bubble map",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Stands spheres, domes, discs or columns on a projected map, with size honestly scaled to the value.",
+		tags: ["proportional symbol", "graduated symbol"],
+		sample: (seed) => SampleData.cities(seed),
+		variants: {
+			bubble: Object.values(GlobeBubble),
+			volumetric: [false, true],
+			stem: [false, true],
+			projection: [
+				GlobeProjection.NaturalEarth,
+				GlobeProjection.Equirectangular,
+				GlobeProjection.EqualEarth,
+				GlobeProjection.Robinson
+			]
+		},
+		valid: (v) => (v.bubble === GlobeBubble.Sphere || !v.stem) && !(v.volumetric && (v.bubble === GlobeBubble.Disc || v.bubble === GlobeBubble.Column))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			surface: GlobeSurface.Plane,
+			bubble: GlobeBubble.Sphere,
+			volumetric: false,
+			stem: false,
+			land: GlobeLand.Solid
+		};
+	}
+	shape() {
+		switch (this.options.bubble) {
+			case GlobeBubble.Dome: return new SphereGeometry(1, 24, 10, 0, Math.PI * 2, 0, Math.PI / 2);
+			case GlobeBubble.Disc: return new CylinderGeometry(1, 1, .14, 28).translate(0, .07, 0);
+			case GlobeBubble.Column: return new CylinderGeometry(1, 1, 1, 20).translate(0, .5, 0);
+			default: return new SphereGeometry(1, 24, 16);
+		}
+	}
+	draw(ctx) {
+		const { sites } = this, { bubble, volumetric, stem } = this.options;
+		const size = magnitude(sites.map((site) => site.value)), color = (site) => this.tone(ctx, site, size(site.value));
+		const radius = (site) => Math.max(.012, WIDEST * (volumetric ? Math.cbrt : Math.sqrt)(size(site.value)));
+		const column = bubble === GlobeBubble.Column;
+		const rise = (site) => (bubble === GlobeBubble.Sphere ? radius(site) : 0) + (stem ? STEM : 0);
+		this.stamp(ctx, this.shape(), sites, (site, _, node, p) => {
+			node.position.copy(this.body.place(site.lon, site.lat, rise(site) * p));
+			if (column) node.scale.set(.022, Math.max(size(site.value) * .3, .003) * p + 1e-4, .022);
+			else node.scale.setScalar(Math.max(radius(site) * p, 1e-4));
+		}, color, (site) => this.siteTip(site, color(site)), {
+			grow: true,
+			roughness: .42
+		});
+		if (stem) this.stamp(ctx, new CylinderGeometry(.003, .003, 1, 6).translate(0, .5, 0), sites, (site, _, node, p) => {
+			node.position.copy(this.body.place(site.lon, site.lat));
+			node.scale.set(1, Math.max(rise(site) * p, 1e-4), 1);
+		}, () => this.theme.inkMuted);
+		this.leaders(ctx, sites, 5, (site) => rise(site) + (column ? size(site.value) * .3 : radius(site)) + .03);
+	}
+};
+export { Bubble3DMap };

package/dist/charts/threeglobe/ChoroplethGlobe.js

@@ -0,0 +1,70 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GlobeClassify, GlobeRelief, GlobeSurface } from "./GlobeEnums.js";
+import { magnitude } from "./GlobeMath.js";
+import { GlobeSamples } from "./GlobeSamples.js";
+import { MeshBuffer } from "./MeshBuffer.js";
+import { RegionGlobeChart } from "./RegionGlobeChart.js";
+// src/charts/threeglobe/ChoroplethGlobe.ts
+var BASE = .0025;
+/** Countries filled by value on a globe: for rates compared across the whole world without map distortion. */
+var ChoroplethGlobe = class extends RegionGlobeChart {
+	static meta = {
+		id: "choropleth-globe",
+		name: "Choropleth globe",
+		family: ChartFamily.Geospatial,
+		dimension: Dimension.Three,
+		shape: DataShape.Geo,
+		description: "Fills real country meshes by value, with a key whose segments show how the classes divide the range.",
+		tags: [
+			"filled map",
+			"countries",
+			"thematic"
+		],
+		sample: (seed) => GlobeSamples.regions(seed),
+		variants: {
+			classify: [
+				GlobeClassify.Quantile,
+				GlobeClassify.EqualInterval,
+				GlobeClassify.Rounded,
+				GlobeClassify.Continuous
+			],
+			bins: [
+				5,
+				3,
+				7
+			],
+			relief: Object.values(GlobeRelief),
+			surface: Object.values(GlobeSurface)
+		},
+		valid: (v) => v.classify === GlobeClassify.Continuous ? v.bins === 5 : v.classify !== GlobeClassify.Rounded || v.bins !== 7
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			classify: GlobeClassify.Quantile,
+			bins: 5,
+			relief: GlobeRelief.Flat
+		};
+	}
+	draw(ctx) {
+		const { classify, bins, relief } = this.options, { features } = this;
+		const values = this.values(), scale = this.classes(ctx, values, classify, bins), size = magnitude(values);
+		const height = (value) => relief === GlobeRelief.Stepped ? .01 + scale.level(value) * .09 : relief === GlobeRelief.Proportional ? .01 + size(value) * .1 : BASE;
+		const buffer = new MeshBuffer(), neutral = ctx.color(this.missing(ctx));
+		features.forEach((feature, i) => {
+			const value = this.reading(feature);
+			if (value === null) return this.region(buffer, feature, BASE, BASE, neutral, i);
+			this.region(buffer, feature, 0, height(value), ctx.color(scale.color(value)), i, relief !== GlobeRelief.Flat);
+		});
+		const mesh = buffer.build(ctx, { roughness: .78 });
+		mesh.castShadow = mesh.receiveShadow = relief !== GlobeRelief.Flat;
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => {
+			const value = this.reading(features[i]);
+			return this.regionTip(features[i], value === null ? void 0 : scale.color(value));
+		});
+		this.outline(ctx, features, this.theme.surface, relief === GlobeRelief.Flat ? .004 : 4e-4);
+		this.drawKey(ctx, scale.stops, scale.low, scale.high);
+	}
+};
+export { ChoroplethGlobe };