@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threebars/Histogram3DChart.js

@@ -0,0 +1,239 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } 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 { bin, extent, max, scaleLinear, scaleSqrt, thresholdFreedmanDiaconis, thresholdScott, thresholdSturges } from "d3";
+import { CylinderGeometry } from "three";
+import { hexbin } from "d3-hexbin";
+// src/charts/threebars/Histogram3DChart.ts
+var HistogramCell3D = /* @__PURE__ */ function(HistogramCell3D) {
+	HistogramCell3D["Square"] = "square";
+	HistogramCell3D["Hexagon"] = "hexagon";
+	return HistogramCell3D;
+}({});
+var HistogramRule3D = /* @__PURE__ */ function(HistogramRule3D) {
+	HistogramRule3D["Sturges"] = "sturges";
+	HistogramRule3D["Scott"] = "scott";
+	HistogramRule3D["FreedmanDiaconis"] = "freedman-diaconis";
+	HistogramRule3D["Sqrt"] = "sqrt";
+	return HistogramRule3D;
+}({});
+var HistogramMeasure3D = /* @__PURE__ */ function(HistogramMeasure3D) {
+	HistogramMeasure3D["Count"] = "count";
+	HistogramMeasure3D["Share"] = "share";
+	HistogramMeasure3D["Cumulative"] = "cumulative";
+	return HistogramMeasure3D;
+}({});
+var THRESHOLDS = {
+	["sturges"]: thresholdSturges,
+	["scott"]: thresholdScott,
+	["freedman-diaconis"]: thresholdFreedmanDiaconis,
+	["sqrt"]: (values) => Math.ceil(Math.sqrt(values.length))
+};
+var GAP = .9;
+var WALL = .02;
+/** Bivariate histogram: for the joint distribution of two numeric columns. */
+var Histogram3DChart = class extends Cartesian3DChart {
+	static meta = {
+		id: "histogram-3d",
+		name: "3D histogram",
+		family: ChartFamily.Distribution,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Bins two numeric columns into a grid and raises a tower for each cell to show their joint distribution.",
+		tags: [
+			"bivariate",
+			"hexbin",
+			"joint distribution",
+			"lego plot"
+		],
+		sample: (seed) => SampleData.points(seed, 900, 3).map(({ x, y }) => ({
+			x,
+			y: +(100 - +y).toFixed(2)
+		})),
+		variants: {
+			rule: [
+				"sturges",
+				"scott",
+				"freedman-diaconis",
+				"sqrt"
+			],
+			cell: ["square", "hexagon"],
+			measure: [
+				"count",
+				"share",
+				"cumulative"
+			],
+			scale: [ScaleKind.Linear, ScaleKind.Sqrt],
+			marginals: [false, true]
+		},
+		valid: ({ cell, measure }) => !(cell === "hexagon" && measure === "cumulative")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "x",
+			z: "y",
+			rule: "sturges",
+			cell: "square",
+			measure: "count",
+			scale: ScaleKind.Linear,
+			marginals: false
+		};
+	}
+	build(ctx) {
+		const { data, x, z, rule, cell, xTitle, zTitle } = this.options;
+		const pairs = data.flatMap((row) => {
+			const [a, b] = [Rows3D.number(row[x]), Rows3D.number(row[z])];
+			return a === null || b === null ? [] : [[a, b]];
+		});
+		const domain = (values) => {
+			const [low = 0, high = 1] = extent(values);
+			return low === high ? [low - .5, high + .5] : [low, high];
+		};
+		const xs = pairs.map(([a]) => a), zs = pairs.map(([, b]) => b);
+		const across = scaleLinear(domain(xs), [-BOX3D.x, BOX3D.x]).nice(6);
+		const deep = scaleLinear(domain(zs), [-BOX3D.z, BOX3D.z]).nice(6);
+		const threshold = THRESHOLDS[rule];
+		const edges = (values, scale) => {
+			const [low, high] = scale.domain();
+			const bins = values.length ? Math.max(2, Math.min(24, threshold(values, low, high))) : 2;
+			return Array.from({ length: bins + 1 }, (_, i) => low + i / bins * (high - low));
+		};
+		const xEdges = edges(xs, across), zEdges = edges(zs, deep);
+		const cells = cell === "hexagon" ? this.hexagons(pairs, across, deep, xEdges.length - 1) : this.squares(pairs, across, deep, xEdges, zEdges);
+		const total = pairs.length || 1;
+		const measured = this.measured(cells, total, xEdges.length - 1);
+		const top = max(measured, (tower) => tower.value) || 1;
+		const axisScale = (this.options.scale === ScaleKind.Sqrt ? scaleSqrt([0, top], [-BOX3D.y, BOX3D.y * .92]) : scaleLinear([0, top], [-BOX3D.y, BOX3D.y * .92])).nice(5);
+		const share = this.options.measure !== "count";
+		this.stage(ctx, {
+			x: Cartesian3DChart.valueAxis(across, xTitle ?? x),
+			z: Cartesian3DChart.valueAxis(deep, zTitle ?? z),
+			y: Cartesian3DChart.valueAxis(axisScale, share ? "share of rows" : "count", 5, share ? (value) => value * 100 : void 0)
+		});
+		const towers = measured.map((tower) => ({
+			...tower.span,
+			length: axisScale(tower.value) + BOX3D.y,
+			count: tower.count,
+			share: tower.count / total,
+			label: tower.label
+		}));
+		const hex = cell === "hexagon";
+		const geometry = hex ? new CylinderGeometry(.5, .5, 1, 6) : Marks3D.prism(Prism3D.Box);
+		Marks3D.instanced(ctx, geometry, towers, {
+			material: Marks3D.matte({ flatShading: hex }),
+			place: (dummy, tower, progress) => Marks3D.span(dummy, tower, progress),
+			color: (tower) => ctx.palette.sequential(.18 + .82 * Math.sqrt(tower.count / (max(towers, (other) => other.count) || 1))),
+			tip: (tower) => ({
+				title: tower.label,
+				rows: [["Count", tower.count], ["Share", `${(tower.share * 100).toFixed(1)}%`]]
+			})
+		});
+		if (this.options.marginals) this.marginals(ctx, xs, zs, across, deep, xEdges, zEdges);
+	}
+	squares(pairs, across, deep, xEdges, zEdges) {
+		const counts = /* @__PURE__ */ new Map();
+		const slot = (edges, value) => Math.min(edges.length - 2, Math.max(0, edges.findLastIndex((edge) => value >= edge)));
+		for (const [a, b] of pairs) {
+			const key = `${slot(xEdges, a)}|${slot(zEdges, b)}`;
+			counts.set(key, (counts.get(key) ?? 0) + 1);
+		}
+		return [...counts].map(([key, count]) => {
+			const [i, j] = key.split("|").map(Number);
+			const x0 = across(xEdges[i]), x1 = across(xEdges[i + 1]), z0 = deep(zEdges[j]), z1 = deep(zEdges[j + 1]);
+			return {
+				i,
+				j,
+				count,
+				label: `${+xEdges[i].toFixed(2)}–${+xEdges[i + 1].toFixed(2)} × ${+zEdges[j].toFixed(2)}–${+zEdges[j + 1].toFixed(2)}`,
+				span: {
+					from: [
+						(x0 + x1) / 2,
+						-BOX3D.y,
+						(z0 + z1) / 2
+					],
+					axis: "y",
+					length: 0,
+					width: (x1 - x0) * GAP,
+					depth: (z1 - z0) * GAP
+				}
+			};
+		});
+	}
+	hexagons(pairs, across, deep, bins) {
+		const radius = BOX3D.x / bins * 1.05;
+		const generator = hexbin().radius(radius).extent([[-BOX3D.x + radius, -BOX3D.z + radius], [BOX3D.x - radius, BOX3D.z - radius]]);
+		const flat = pairs.map(([a, b]) => [across(a), deep(b)]);
+		const size = radius * Math.sqrt(3) * GAP * 1.12;
+		return generator(flat).map((hex, i) => ({
+			i,
+			j: 0,
+			count: hex.length,
+			label: `${hex.length} rows near (${hex.x.toFixed(2)}, ${hex.y.toFixed(2)})`,
+			span: {
+				from: [
+					Math.max(-BOX3D.x + radius, Math.min(BOX3D.x - radius, hex.x)),
+					-BOX3D.y,
+					Math.max(-BOX3D.z + radius, Math.min(BOX3D.z - radius, hex.y))
+				],
+				axis: "y",
+				length: 0,
+				width: size,
+				depth: size
+			}
+		}));
+	}
+	measured(cells, total, bins) {
+		const { measure } = this.options;
+		if (measure !== "cumulative") return cells.map((cell) => ({
+			...cell,
+			value: measure === "share" ? cell.count / total : cell.count
+		}));
+		const grid = new Map(cells.map((cell) => [`${cell.i}|${cell.j}`, cell.count]));
+		const rows = Math.max(0, ...cells.map((cell) => cell.j)) + 1;
+		const running = Array.from({ length: bins + 1 }, () => Array(rows + 1).fill(0));
+		for (let i = 1; i <= bins; i++) for (let j = 1; j <= rows; j++) running[i][j] = (grid.get(`${i - 1}|${j - 1}`) ?? 0) + running[i - 1][j] + running[i][j - 1] - running[i - 1][j - 1];
+		return cells.map((cell) => ({
+			...cell,
+			value: running[cell.i + 1][cell.j + 1] / total
+		}));
+	}
+	/** Each column's marginal histogram standing against a back wall. */
+	marginals(ctx, xs, zs, across, deep, xEdges, zEdges) {
+		const azimuth = (this.options.azimuth ?? 38) * Math.PI / 180;
+		const backZ = (Math.cos(azimuth) >= 0 ? -1 : 1) * (BOX3D.z - WALL), backX = (Math.sin(azimuth) >= 0 ? -1 : 1) * (BOX3D.x - WALL);
+		const frequency = (values, edges) => bin().thresholds(edges.slice(1, -1)).domain([edges[0], edges[edges.length - 1]])(values);
+		const xBins = frequency(xs, xEdges), zBins = frequency(zs, zEdges);
+		const peak = max([...xBins, ...zBins], (entry) => entry.length) || 1;
+		const reach = (count) => count / peak * BOX3D.y * 1.8;
+		const spans = [...xBins.map((entry, i) => ({
+			from: [
+				(across(xEdges[i]) + across(xEdges[i + 1])) / 2,
+				-BOX3D.y,
+				backZ
+			],
+			axis: "y",
+			length: reach(entry.length),
+			width: (across(xEdges[i + 1]) - across(xEdges[i])) * GAP,
+			depth: WALL
+		})), ...zBins.map((entry, i) => ({
+			from: [
+				backX,
+				-BOX3D.y,
+				(deep(zEdges[i]) + deep(zEdges[i + 1])) / 2
+			],
+			axis: "y",
+			length: reach(entry.length),
+			width: WALL,
+			depth: (deep(zEdges[i + 1]) - deep(zEdges[i])) * GAP
+		}))];
+		Marks3D.instanced(ctx, Marks3D.prism(Prism3D.Box), spans, {
+			shadow: false,
+			place: (dummy, span, progress) => Marks3D.span(dummy, span, progress),
+			color: () => ctx.theme.axis
+		});
+	}
+};
+export { Histogram3DChart, HistogramCell3D, HistogramMeasure3D, HistogramRule3D };

package/dist/charts/threebars/Line3DChart.js

@@ -0,0 +1,113 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BOX3D } from "./Cartesian3DChart.js";
+import { Marks3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { Series3DChart, SeriesLayout3D, SeriesMeasure3D } from "./Series3DChart.js";
+import { greatest } from "d3";
+import { BufferGeometry, Float32BufferAttribute, LineBasicMaterial, LineSegments, SphereGeometry, Vector3 } from "three";
+// src/charts/threebars/Line3DChart.ts
+var LineMarks3D = /* @__PURE__ */ function(LineMarks3D) {
+	LineMarks3D["None"] = "none";
+	LineMarks3D["Ends"] = "ends";
+	LineMarks3D["Peaks"] = "peaks";
+	LineMarks3D["All"] = "all-points";
+	return LineMarks3D;
+}({});
+var RADIUS = .0115;
+var DOT = .03;
+/** Series as tubes through a box, one lane per series: for many trends that would tangle on a flat chart. */
+var Line3DChart = class Line3DChart extends Series3DChart {
+	static meta = {
+		id: "line-3d",
+		name: "3D line chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Runs each series as a tube in its own depth lane, separating trends that would tangle on a flat chart.",
+		tags: [
+			"tube",
+			"time series",
+			"trend",
+			"waterfall lines"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 48, 5),
+		variants: {
+			curve: [
+				CurveKind.Linear,
+				CurveKind.Monotone,
+				CurveKind.Step,
+				CurveKind.CatmullRom,
+				CurveKind.Basis
+			],
+			marks: [
+				"none",
+				"ends",
+				"peaks",
+				"all-points"
+			],
+			curtain: [false, true],
+			layout: [SeriesLayout3D.Lanes, SeriesLayout3D.Overlay],
+			measure: [SeriesMeasure3D.Absolute, SeriesMeasure3D.Rebased],
+			scale: [ScaleKind.Linear, ScaleKind.Log]
+		},
+		valid: ({ curve, curtain, marks }) => !(curve !== CurveKind.Linear && (curtain === true || marks === "all-points"))
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			marks: "none",
+			curtain: false
+		};
+	}
+	build(ctx) {
+		const { marks, curtain, yTitle, y, measure } = this.options;
+		const tracks = this.tracks();
+		const place = this.positional(tracks);
+		const height = this.heights(tracks.flatMap((track) => track.points.map((point) => point.value)), [-BOX3D.y, BOX3D.y]);
+		const lanes = this.lanes(tracks.map((track) => track.name));
+		const title = yTitle ?? (measure === SeriesMeasure3D.Rebased ? `${y} (first = 100)` : y);
+		this.stage(ctx, {
+			x: place.axis,
+			y: Line3DChart.valueAxis(height, title),
+			z: lanes.axis
+		}, lanes.depth);
+		const dots = [];
+		const curtains = [];
+		for (const track of tracks) {
+			const color = ctx.palette.color(track.name || "Series");
+			const z = lanes.z(track.name);
+			const flat = this.path(track.points.map((point) => [place.x(point.order), height(point.value)]));
+			const last = track.points[track.points.length - 1];
+			Marks3D.tube(ctx, flat.map(([x, y]) => new Vector3(x, y, z)), RADIUS, color, () => ({
+				title: track.name,
+				color,
+				rows: last ? [[`Last (${last.text})`, +last.value.toFixed(2)]] : []
+			}));
+			const at = (point) => ({
+				point,
+				track: track.name,
+				at: new Vector3(place.x(point.order), height(point.value), z)
+			});
+			const chosen = marks === "all-points" || track.points.length === 1 ? track.points : marks === "ends" ? track.points.filter((_, i) => i === 0 || i === track.points.length - 1) : marks === "peaks" ? [greatest(track.points, (point) => point.value)].filter(Boolean) : [];
+			dots.push(...chosen.map(at));
+			if (curtain) for (const [x, y] of flat) curtains.push(x, y, z, x, -BOX3D.y, z);
+		}
+		Marks3D.instanced(ctx, new SphereGeometry(1, 16, 12), dots, {
+			place: (dummy, dot, progress) => {
+				dummy.position.copy(dot.at);
+				dummy.scale.setScalar(Math.max(.001, DOT * progress));
+			},
+			color: (dot) => ctx.palette.color(dot.track || "Series"),
+			tip: (dot) => ({
+				title: dot.track,
+				rows: [[Rows3D.text(dot.point.text), +dot.point.value.toFixed(2)]]
+			})
+		});
+		if (curtains.length) {
+			const geometry = new BufferGeometry().setAttribute("position", new Float32BufferAttribute(curtains, 3));
+			ctx.root.add(new LineSegments(geometry, new LineBasicMaterial({ color: ctx.theme.axis })));
+		}
+	}
+};
+export { Line3DChart, LineMarks3D };

package/dist/charts/threebars/Lollipop3DChart.js

@@ -0,0 +1,66 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarBaseline3D, BarField3DChart, BarLayout3D, BarSort3D } from "./BarField3DChart.js";
+import { Glyph3D, Marks3D, Prism3D } from "./Marks3D.js";
+// src/charts/threebars/Lollipop3DChart.ts
+var STEM = .016;
+var HEAD = .052;
+/** Thin stems with a head on each: a lighter 3D bar that keeps the rear rows of a dense floor visible. */
+var Lollipop3DChart = class extends BarField3DChart {
+	static meta = {
+		id: "lollipop-3d",
+		name: "3D lollipop chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Replaces solid 3D bars with stems and heads so that values in back rows stay readable.",
+		tags: [
+			"dot",
+			"stem",
+			"pin"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 5),
+		variants: {
+			head: [
+				Glyph3D.Sphere,
+				Glyph3D.Cube,
+				Glyph3D.Octahedron,
+				Glyph3D.Disc
+			],
+			layout: [BarLayout3D.Field, BarLayout3D.Cluster],
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			sort: [BarSort3D.Input, BarSort3D.Descending],
+			baseline: [BarBaseline3D.Zero, BarBaseline3D.Mean]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			head: Glyph3D.Sphere
+		};
+	}
+	draw(ctx, bars) {
+		const { head } = this.options;
+		const stems = bars.map((bar) => ({
+			...bar,
+			width: STEM,
+			depth: STEM
+		}));
+		Marks3D.instanced(ctx, Marks3D.prism(Prism3D.Cylinder), stems, {
+			place: (dummy, bar, progress) => Marks3D.span(dummy, bar, progress),
+			color: (bar) => this.tint(ctx, bar, bars)
+		});
+		Marks3D.instanced(ctx, Marks3D.glyph(head), bars, {
+			material: Marks3D.matte({ flatShading: Marks3D.facetedGlyph(head) }),
+			place: (dummy, bar, progress) => {
+				const tip = bar.length * progress;
+				dummy.position.set(bar.from[0] + (bar.axis === "x" ? tip : 0), bar.from[1] + (bar.axis === "y" ? tip : 0), bar.from[2]);
+				dummy.scale.setScalar(Math.max(.001, HEAD * Math.min(1, progress * 3)));
+				if (bar.axis === "x") dummy.rotation.z = Math.PI / 2;
+			},
+			color: (bar) => this.tint(ctx, bar, bars),
+			tip: (bar) => this.tooltip(bar)
+		});
+	}
+};
+export { Lollipop3DChart };

package/dist/charts/threebars/Marks3D.js

@@ -0,0 +1,127 @@
+import { Polyline3D } from "./Polyline3D.js";
+import { BoxGeometry, CylinderGeometry, DoubleSide, IcosahedronGeometry, InstancedMesh, Mesh, MeshStandardMaterial, Object3D, OctahedronGeometry, SphereGeometry, TetrahedronGeometry, TubeGeometry } from "three";
+// src/charts/threebars/Marks3D.ts
+/** Standing mark footprints. */
+var Prism3D = /* @__PURE__ */ function(Prism3D) {
+	Prism3D["Box"] = "box";
+	Prism3D["Hexagon"] = "hexagon";
+	Prism3D["Pyramid"] = "pyramid";
+	Prism3D["Cylinder"] = "cylinder";
+	Prism3D["Cone"] = "cone";
+	Prism3D["Frustum"] = "frustum";
+	return Prism3D;
+}({});
+/** Free-standing point marks. */
+var Glyph3D = /* @__PURE__ */ function(Glyph3D) {
+	Glyph3D["Sphere"] = "sphere";
+	Glyph3D["Cube"] = "cube";
+	Glyph3D["Octahedron"] = "octahedron";
+	Glyph3D["Tetrahedron"] = "tetrahedron";
+	Glyph3D["Icosahedron"] = "icosahedron";
+	Glyph3D["Disc"] = "disc";
+	return Glyph3D;
+}({});
+var SPREAD = .45;
+/** Factory for the instanced solids, tubes and materials that every 3D mark is made of. */
+var Marks3D = class Marks3D {
+	static matte(params = {}) {
+		return new MeshStandardMaterial({
+			roughness: .58,
+			metalness: .04,
+			...params
+		});
+	}
+	static glass(opacity = .28) {
+		return Marks3D.matte({
+			transparent: true,
+			opacity,
+			depthWrite: false,
+			side: DoubleSide,
+			roughness: .4
+		});
+	}
+	/** Per-item progress so marks arrive in a wave rather than all at once. */
+	static stagger(progress, index, count) {
+		const start = count > 1 ? index / (count - 1) * SPREAD : 0;
+		return Math.max(0, Math.min(1, (progress - start) / .55));
+	}
+	/** Unit-height prism centred on the origin, footprint width 1. */
+	static prism(kind) {
+		switch (kind) {
+			case "hexagon": return new CylinderGeometry(.5, .5, 1, 6);
+			case "pyramid": return new CylinderGeometry(.005, Math.SQRT1_2, 1, 4).rotateY(Math.PI / 4);
+			case "cylinder": return new CylinderGeometry(.5, .5, 1, 32);
+			case "cone": return new CylinderGeometry(.005, .5, 1, 32);
+			case "frustum": return new CylinderGeometry(.28, .5, 1, 32);
+			default: return new BoxGeometry(1, 1, 1);
+		}
+	}
+	static facetedPrism(kind) {
+		return kind === "hexagon" || kind === "pyramid";
+	}
+	/** Unit-radius point mark. */
+	static glyph(kind) {
+		switch (kind) {
+			case "cube": return new BoxGeometry(1.5, 1.5, 1.5);
+			case "octahedron": return new OctahedronGeometry(1.25);
+			case "tetrahedron": return new TetrahedronGeometry(1.4);
+			case "icosahedron": return new IcosahedronGeometry(1.1);
+			case "disc": return new CylinderGeometry(1.15, 1.15, .35, 24);
+			default: return new SphereGeometry(1, 20, 14);
+		}
+	}
+	static facetedGlyph(kind) {
+		return kind !== "sphere" && kind !== "disc";
+	}
+	static instanced(ctx, geometry, items, spec) {
+		if (!items.length) {
+			geometry.dispose();
+			return null;
+		}
+		const mesh = new InstancedMesh(geometry, spec.material ?? Marks3D.matte(), items.length);
+		mesh.castShadow = spec.shadow ?? true;
+		mesh.receiveShadow = spec.shadow ?? true;
+		mesh.frustumCulled = false;
+		items.forEach((item, i) => mesh.setColorAt(i, ctx.color(spec.color(item, i))));
+		const dummy = new Object3D();
+		ctx.reveal((progress) => {
+			items.forEach((item, i) => {
+				dummy.position.set(0, 0, 0);
+				dummy.rotation.set(0, 0, 0);
+				dummy.scale.set(1, 1, 1);
+				spec.place(dummy, item, Marks3D.stagger(progress, i, items.length), i);
+				dummy.updateMatrix();
+				mesh.setMatrixAt(i, dummy.matrix);
+			});
+			mesh.instanceMatrix.needsUpdate = true;
+			if (progress === 1) mesh.computeBoundingSphere();
+		}, 1.1);
+		ctx.root.add(mesh);
+		if (spec.tip) ctx.pick(mesh, (index) => spec.tip(items[index], index));
+		return mesh;
+	}
+	/** Grows a unit prism along a span, flipping it for negative lengths so tips stay on the far end. */
+	static span(dummy, { from, axis, length, width, depth }, progress) {
+		const sign = length < 0 ? -1 : 1;
+		const size = Math.max(.002, Math.abs(length) * progress);
+		const offset = sign * size / 2;
+		dummy.position.set(from[0] + (axis === "x" ? offset : 0), from[1] + (axis === "y" ? offset : 0), from[2] + (axis === "z" ? offset : 0));
+		if (axis === "x") dummy.rotation.z = -sign * Math.PI / 2;
+		else if (axis === "z") dummy.rotation.x = sign * Math.PI / 2;
+		else if (sign < 0) dummy.rotation.x = Math.PI;
+		dummy.scale.set(width, size, depth);
+	}
+	/** Round tube along a sampled path, drawn on from its start. Needs at least two distinct points. */
+	static tube(ctx, points, radius, color, tip) {
+		const path = points.filter((point, i) => i === 0 || point.distanceToSquared(points[i - 1]) > 1e-9);
+		if (path.length < 2) return null;
+		const geometry = new TubeGeometry(new Polyline3D(path), Math.min(600, path.length * 2), radius, 8, false);
+		const mesh = new Mesh(geometry, Marks3D.matte({ color }));
+		const count = geometry.index.count;
+		ctx.reveal((progress) => geometry.setDrawRange(0, Math.floor(count * progress / 6) * 6), 1.3);
+		ctx.root.add(mesh);
+		if (tip) ctx.pick(mesh, tip);
+		return mesh;
+	}
+};
+export { Glyph3D, Marks3D, Prism3D };

package/dist/charts/threebars/Pie3DChart.js

@@ -0,0 +1,42 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Round3DChart, SliceDepth3D, SliceExplode3D, SliceSort3D, SliceSweep3D } from "./Round3DChart.js";
+// src/charts/threebars/Pie3DChart.ts
+var RADIUS = 1;
+/** Extruded pie: most useful when slice height carries a second reading of the value or rank. */
+var Pie3DChart = class extends Round3DChart {
+	static meta = {
+		id: "pie-3d",
+		name: "3D pie chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Extrudes pie slices into solids, optionally using slice height to repeat the value or its rank.",
+		tags: [
+			"pie",
+			"share",
+			"part to whole",
+			"exploded"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 1),
+		variants: {
+			depth: [
+				SliceDepth3D.Uniform,
+				SliceDepth3D.ByValue,
+				SliceDepth3D.ByRank
+			],
+			explode: [
+				SliceExplode3D.None,
+				SliceExplode3D.Largest,
+				SliceExplode3D.All
+			],
+			sort: [SliceSort3D.Input, SliceSort3D.Descending],
+			sweep: [SliceSweep3D.Full, SliceSweep3D.Half]
+		}
+	};
+	build(ctx) {
+		const options = this.options;
+		this.sectors(ctx, this.ring(this.parts(options.data), 0, 0, RADIUS));
+	}
+};
+export { Pie3DChart };