@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/threebars/Round3DChart.js

@@ -0,0 +1,166 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { Marks3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { greatest, pie } from "d3";
+import { ExtrudeGeometry, Group, Mesh, Shape } from "three";
+// src/charts/threebars/Round3DChart.ts
+var SliceDepth3D = /* @__PURE__ */ function(SliceDepth3D) {
+	SliceDepth3D["Uniform"] = "uniform";
+	SliceDepth3D["ByValue"] = "by-value";
+	SliceDepth3D["ByRank"] = "by-rank";
+	return SliceDepth3D;
+}({});
+var SliceExplode3D = /* @__PURE__ */ function(SliceExplode3D) {
+	SliceExplode3D["None"] = "none";
+	SliceExplode3D["Largest"] = "largest";
+	SliceExplode3D["All"] = "all";
+	return SliceExplode3D;
+}({});
+var SliceSort3D = /* @__PURE__ */ function(SliceSort3D) {
+	SliceSort3D["Input"] = "input";
+	SliceSort3D["Descending"] = "descending";
+	return SliceSort3D;
+}({});
+/** Fraction of the circle used. */
+var SliceSweep3D = /* @__PURE__ */ function(SliceSweep3D) {
+	SliceSweep3D["Full"] = "full";
+	SliceSweep3D["Half"] = "half";
+	return SliceSweep3D;
+}({});
+var FLOOR = -.34;
+var BASE_HEIGHT = .2;
+var TALL = .62;
+var GAP = .014;
+var BEVEL = .006;
+var SLICES_MAX = 8;
+var STEP = Math.PI / 64;
+var OTHER = "Other";
+/** Shared logic of round part-to-whole solids: folding, ordering, extruded sectors, explode and labels. */
+var Round3DChart = class extends Chart3D {
+	defaults() {
+		return {
+			label: "category",
+			value: "value",
+			sort: "input",
+			depth: "uniform",
+			explode: "none",
+			sweep: "full",
+			elevation: 38,
+			azimuth: 12,
+			distance: 4.9
+		};
+	}
+	/** Positive totals per key; keys past the eighth fold into "Other" so identity colours stay meaningful. */
+	parts(rows) {
+		const totals = Rows3D.totals(rows, this.options.label, this.options.value);
+		if (totals.length <= SLICES_MAX) return totals;
+		const ranked = Rows3D.sortBy(totals, (part) => part.value, -1);
+		const kept = new Set(ranked.slice(0, 7).map((part) => part.key));
+		const rest = ranked.slice(7).reduce((sum, part) => sum + part.value, 0);
+		return [...totals.filter((part) => kept.has(part.key)), {
+			key: OTHER,
+			value: rest
+		}];
+	}
+	/** Angles, ranks and heights for one ring of parts, measured clockwise from the front. */
+	ring(parts, ring, inner, outer) {
+		const { sort, sweep, depth } = this.options;
+		const half = sweep === "half";
+		const layout = pie().value((part) => part.value).sort(sort === "descending" ? (a, b) => b.value - a.value : null).startAngle(half ? -Math.PI / 2 : 0).endAngle(half ? Math.PI / 2 : Math.PI * 2);
+		const total = parts.reduce((sum, part) => sum + part.value, 0) || 1;
+		const top = Math.max(...parts.map((part) => part.value), 1);
+		const ranks = Rows3D.sortBy(parts, (part) => part.value, -1).map((part) => part.key);
+		return layout(parts).map((arc) => {
+			const rank = ranks.indexOf(arc.data.key);
+			const scale = depth === "by-value" ? .2 + .8 * arc.value / top : depth === "by-rank" ? 1 - rank / parts.length * .8 : 0;
+			return {
+				key: arc.data.key,
+				value: arc.value,
+				share: arc.value / total,
+				start: arc.startAngle,
+				end: arc.endAngle,
+				rank,
+				ring,
+				inner,
+				outer,
+				height: depth === "uniform" ? BASE_HEIGHT : TALL * scale
+			};
+		});
+	}
+	outline({ start, end, inner, outer }) {
+		const pad = (radius) => GAP / 2 / Math.max(radius, .001);
+		const spot = (radius, angle) => [Math.sin(angle) * radius, Math.cos(angle) * radius];
+		const arc = (radius, from, to) => {
+			const steps = Math.max(1, Math.ceil(Math.abs(to - from) / STEP));
+			return Array.from({ length: steps + 1 }, (_, i) => spot(radius, from + (to - from) * i / steps));
+		};
+		const padOuter = Math.min(pad(outer), (end - start) * .3);
+		const points = [...arc(outer, start + padOuter, end - padOuter)];
+		if (inner > 0) {
+			const padInner = Math.min(pad(inner), (end - start) * .3);
+			points.push(...arc(inner, end - padInner, start + padInner));
+		} else {
+			const middle = (start + end) / 2;
+			points.push(spot(Math.min(GAP / 2 / Math.max(Math.sin((end - start) / 2), .05), outer * .4), middle));
+		}
+		const shape = new Shape();
+		points.forEach(([x, y], i) => i ? shape.lineTo(x, -y) : shape.moveTo(x, -y));
+		shape.closePath();
+		return shape;
+	}
+	/** Extrudes every slice from a common floor and rises it into place. */
+	sectors(ctx, slices) {
+		const { explode } = this.options;
+		const biggest = greatest(slices, (slice) => slice.value);
+		const pivot = new Group();
+		pivot.position.y = FLOOR;
+		ctx.root.add(pivot);
+		slices.forEach((slice, i) => {
+			const lifted = explode === "all" || explode === "largest" && slice === biggest;
+			const middle = (slice.start + slice.end) / 2;
+			const shift = lifted ? .1 : 0;
+			const color = ctx.palette.color(slice.key);
+			const geometry = new ExtrudeGeometry(this.outline(slice), {
+				depth: Math.max(.02, slice.height - BEVEL * 2),
+				bevelEnabled: true,
+				bevelSize: BEVEL,
+				bevelThickness: BEVEL,
+				bevelSegments: 2,
+				bevelOffset: -.006,
+				curveSegments: 1
+			});
+			geometry.rotateX(-Math.PI / 2);
+			const mesh = new Mesh(geometry, Marks3D.matte({ color }));
+			mesh.castShadow = mesh.receiveShadow = true;
+			mesh.position.set(Math.sin(middle) * shift, 0, Math.cos(middle) * shift);
+			pivot.add(mesh);
+			ctx.reveal((progress) => {
+				mesh.scale.y = Math.max(.001, Marks3D.stagger(progress, i, slices.length));
+			}, 1);
+			ctx.pick(mesh, () => ({
+				title: slice.key,
+				color,
+				rows: [[this.options.value, +slice.value.toFixed(2)], ["Share", `${(slice.share * 100).toFixed(1)}%`]]
+			}));
+		});
+		this.plate(ctx, slices);
+	}
+	/** Outer labels sit on the slice's own radial, wide slices only. */
+	plate(ctx, slices) {
+		const { explode } = this.options;
+		const outerRing = Math.max(...slices.map((slice) => slice.ring), 0);
+		for (const slice of slices) {
+			if (slice.ring !== outerRing || slice.share < .045) continue;
+			const middle = (slice.start + slice.end) / 2;
+			const reach = slice.outer + (explode === "none" ? .09 : .19);
+			const x = Math.sin(middle) * reach, z = Math.cos(middle) * reach;
+			const text = outerRing ? slice.key : `${slice.key} ${Math.round(slice.share * 100)}%`;
+			ctx.label(text, [
+				x,
+				FLOOR + (z < -.2 ? slice.height + .05 : .02),
+				z
+			], "secondary", 11).center.set(x > .12 ? 0 : x < -.12 ? 1 : .5, z > .2 ? 0 : z < -.2 ? 1 : .5);
+		}
+	}
+};
+export { Round3DChart, SliceDepth3D, SliceExplode3D, SliceSort3D, SliceSweep3D };

package/dist/charts/threebars/Rows3D.js

@@ -0,0 +1,44 @@
+import { ascending, group, sum } from "d3";
+// src/charts/threebars/Rows3D.ts
+/** Reads loose user rows: coerces numbers, drops nulls and folds duplicate keys. */
+var Rows3D = class Rows3D {
+	/** Finite number for a cell (dates become epoch ms), otherwise null. */
+	static number(value) {
+		if (value === null || value === void 0 || value === "") return null;
+		const parsed = +value;
+		return Number.isFinite(parsed) ? parsed : null;
+	}
+	static text(value) {
+		if (value instanceof Date) return value.toISOString().slice(0, 10);
+		return value === null || value === void 0 ? "" : String(value);
+	}
+	/** Distinct text values in first-seen order. */
+	static levels(rows, field) {
+		return [...new Set(rows.map((row) => Rows3D.text(row[field])))];
+	}
+	/** One summed value per `x × z` pair; rows without a usable value are ignored. */
+	static cross(rows, x, z, y) {
+		const usable = rows.filter((row) => Rows3D.number(row[y]) !== null);
+		return [...group(usable, (row) => Rows3D.text(row[x]), (row) => Rows3D.text(row[z]))].flatMap(([xKey, lanes]) => [...lanes].map(([zKey, cell]) => ({
+			x: xKey,
+			z: zKey,
+			value: sum(cell, (row) => Rows3D.number(row[y]))
+		})));
+	}
+	/** Sums a value per key in first-seen order, keeping only positive totals. */
+	static totals(rows, key, value) {
+		const summed = /* @__PURE__ */ new Map();
+		for (const row of rows) {
+			const amount = Rows3D.number(row[value]);
+			if (amount !== null) summed.set(Rows3D.text(row[key]), (summed.get(Rows3D.text(row[key])) ?? 0) + amount);
+		}
+		return [...summed].filter(([, amount]) => amount > 0).map(([name, amount]) => ({
+			key: name,
+			value: amount
+		}));
+	}
+	static sortBy(items, score, direction) {
+		return [...items].sort((a, b) => direction * ascending(score(a), score(b)));
+	}
+};
+export { Rows3D };

package/dist/charts/threebars/Scatter3DChart.js

@@ -0,0 +1,152 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BOX3D } from "./Cartesian3DChart.js";
+import { PointCloud3DChart, PointCloudProjection3D } from "./PointCloud3DChart.js";
+import { Glyph3D, Marks3D } from "./Marks3D.js";
+import { deviation, group, mean } from "d3";
+import { BufferGeometry, DoubleSide, Float32BufferAttribute, Mesh, SphereGeometry } from "three";
+// src/charts/threebars/Scatter3DChart.ts
+/** Statistical summary drawn through the cloud. */
+var ScatterFit3D = /* @__PURE__ */ function(ScatterFit3D) {
+	ScatterFit3D["None"] = "none";
+	ScatterFit3D["Plane"] = "regression-plane";
+	ScatterFit3D["Ellipsoids"] = "group-ellipsoids";
+	ScatterFit3D["Centroids"] = "group-centroids";
+	return ScatterFit3D;
+}({});
+var RADIUS = .03;
+var GRID = 16;
+/** Three numeric columns as a point cloud: for seeing clusters and planes that any 2D pair of axes would hide. */
+var Scatter3DChart = class extends PointCloud3DChart {
+	static meta = {
+		id: "scatter-3d",
+		name: "3D scatter plot",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Plots three numeric columns as a point cloud, revealing clusters and planes that a flat scatter hides.",
+		tags: [
+			"point cloud",
+			"xyz",
+			"regression plane",
+			"clusters"
+		],
+		sample: (seed) => {
+			const depth = SampleData.points(seed + 1, 150, 3);
+			return SampleData.points(seed, 150, 3).map((row, i) => ({
+				...row,
+				z: depth[(i + 1) % depth.length].y
+			}));
+		},
+		variants: {
+			symbol: [
+				Glyph3D.Sphere,
+				Glyph3D.Cube,
+				Glyph3D.Octahedron
+			],
+			fit: [
+				"none",
+				"regression-plane",
+				"group-ellipsoids",
+				"group-centroids"
+			],
+			projection: [
+				PointCloudProjection3D.None,
+				PointCloudProjection3D.Floor,
+				PointCloudProjection3D.Walls
+			],
+			drops: [false, true],
+			scale: [ScaleKind.Linear, ScaleKind.Log]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			symbol: Glyph3D.Sphere,
+			fit: "none"
+		};
+	}
+	build(ctx) {
+		const { data, symbol, fit, x, y, z } = this.options;
+		const { points, axes } = this.cloud(data);
+		this.stage(ctx, axes);
+		Marks3D.instanced(ctx, Marks3D.glyph(symbol), points, {
+			material: Marks3D.matte({ flatShading: Marks3D.facetedGlyph(symbol) }),
+			place: (dummy, { at }, progress) => {
+				dummy.position.copy(at);
+				dummy.scale.setScalar(Math.max(.001, RADIUS * progress));
+			},
+			color: (point) => this.tint(ctx, point),
+			tip: ({ row, group }) => ({
+				title: group || void 0,
+				rows: [
+					x,
+					y,
+					z
+				].map((field) => [field, row[field]])
+			})
+		});
+		this.guides(ctx, points);
+		if (fit === "regression-plane") this.plane(ctx, points);
+		if (fit === "group-ellipsoids" || fit === "group-centroids") this.clusters(ctx, points);
+	}
+	/** Least-squares `y = a + bx + cz`, drawn only where it stays inside the box. */
+	plane(ctx, points) {
+		if (points.length < 3) return;
+		const mx = mean(points, (p) => p.at.x), my = mean(points, (p) => p.at.y), mz = mean(points, (p) => p.at.z);
+		let xx = 0, zz = 0, xz = 0, xy = 0, zy = 0;
+		for (const { at } of points) {
+			const dx = at.x - mx, dy = at.y - my, dz = at.z - mz;
+			xx += dx * dx;
+			zz += dz * dz;
+			xz += dx * dz;
+			xy += dx * dy;
+			zy += dz * dy;
+		}
+		const det = xx * zz - xz * xz;
+		if (Math.abs(det) < 1e-9) return;
+		const b = (xy * zz - zy * xz) / det, c = (zy * xx - xy * xz) / det;
+		const positions = [], index = [];
+		for (let j = 0; j <= GRID; j++) for (let i = 0; i <= GRID; i++) {
+			const px = (i / GRID * 2 - 1) * BOX3D.x, pz = (j / GRID * 2 - 1) * BOX3D.z;
+			positions.push(px, Math.max(-BOX3D.y, Math.min(BOX3D.y, my + b * (px - mx) + c * (pz - mz))), pz);
+		}
+		for (let j = 0; j < GRID; j++) for (let i = 0; i < GRID; i++) {
+			const a = j * 17 + i;
+			index.push(a, a + GRID + 1, a + 1, a + 1, a + GRID + 1, a + GRID + 2);
+		}
+		const geometry = new BufferGeometry().setAttribute("position", new Float32BufferAttribute(positions, 3)).setIndex(index);
+		geometry.computeVertexNormals();
+		const material = Marks3D.glass(.22);
+		material.color.set(ctx.theme.inkSecondary);
+		material.side = DoubleSide;
+		ctx.root.add(new Mesh(geometry, material));
+	}
+	/** One-sigma ellipsoid or a solid centre per group, axis-aligned. */
+	clusters(ctx, points) {
+		const { fit } = this.options;
+		const groups = [...group(points, (point) => point.group)].filter(([, members]) => members.length > 1);
+		const clamp = (value, reach) => Math.max(-reach, Math.min(reach, value));
+		const axisStats = (members, read) => ({
+			center: mean(members, (p) => read(p.at)),
+			sigma: deviation(members, (p) => read(p.at)) ?? 0
+		});
+		for (const [, members] of groups) {
+			const [x, y, z] = [
+				axisStats(members, (at) => at.x),
+				axisStats(members, (at) => at.y),
+				axisStats(members, (at) => at.z)
+			];
+			const material = fit === "group-ellipsoids" ? Marks3D.glass(.2) : Marks3D.matte();
+			material.color.set(this.tint(ctx, members[0]));
+			const mesh = new Mesh(new SphereGeometry(1, 32, 20), material);
+			mesh.position.set(x.center, y.center, z.center);
+			if (fit === "group-ellipsoids") {
+				const room = (axis, reach) => Math.min(Math.max(axis.sigma, .02), reach - Math.abs(clamp(axis.center, reach)));
+				mesh.scale.set(room(x, BOX3D.x), room(y, BOX3D.y), room(z, BOX3D.z));
+			} else mesh.scale.setScalar(.05);
+			ctx.root.add(mesh);
+		}
+	}
+};
+export { Scatter3DChart, ScatterFit3D };

package/dist/charts/threebars/Series3DChart.js

@@ -0,0 +1,124 @@
+import { CurveKind, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { BOX3D, Cartesian3DChart } from "./Cartesian3DChart.js";
+import { CurveSampler3D } from "./CurveSampler3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { extent, scaleBand, scaleLinear, scaleUtc } from "d3";
+// src/charts/threebars/Series3DChart.ts
+/** How series share the depth axis. */
+var SeriesLayout3D = /* @__PURE__ */ function(SeriesLayout3D) {
+	SeriesLayout3D["Lanes"] = "lanes";
+	SeriesLayout3D["Overlay"] = "overlay";
+	return SeriesLayout3D;
+}({});
+var SeriesMeasure3D = /* @__PURE__ */ function(SeriesMeasure3D) {
+	SeriesMeasure3D["Absolute"] = "absolute";
+	SeriesMeasure3D["Rebased"] = "rebased";
+	return SeriesMeasure3D;
+}({});
+/** Shared logic of series-over-x charts: column reading, x typing, rebasing, depth lanes and curve sampling. */
+var Series3DChart = class extends Cartesian3DChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "date",
+			y: "value",
+			z: "series",
+			curve: CurveKind.Linear,
+			layout: "lanes",
+			measure: "absolute",
+			scale: ScaleKind.Linear
+		};
+	}
+	/** Rows per series, ordered along x. Text x columns take their first-seen order. */
+	tracks() {
+		const { data, x, y, z, measure } = this.options;
+		const usable = data.filter((row) => Rows3D.number(row[y]) !== null);
+		const numeric = usable.every((row) => Rows3D.number(row[x]) !== null);
+		const levels = Rows3D.levels(usable, x);
+		const tracks = Rows3D.levels(usable, z).map((name) => ({
+			name,
+			points: usable.filter((row) => Rows3D.text(row[z]) === name).map((row) => ({
+				order: numeric ? Rows3D.number(row[x]) : levels.indexOf(Rows3D.text(row[x])),
+				value: Rows3D.number(row[y]),
+				text: Rows3D.text(row[x])
+			})).sort((a, b) => a.order - b.order)
+		}));
+		if (measure !== "rebased") return tracks;
+		return tracks.map((track) => {
+			const first = track.points.find((point) => point.value !== 0)?.value ?? 1;
+			return {
+				...track,
+				points: track.points.map((point) => ({
+					...point,
+					value: point.value / first * 100
+				}))
+			};
+		});
+	}
+	positional(tracks) {
+		const { data, x: field, xTitle } = this.options;
+		const title = xTitle ?? field;
+		const orders = tracks.flatMap((track) => track.points.map((point) => point.order));
+		const [low = 0, high = 1] = extent(orders);
+		const span = [low, high === low ? low + 1 : high];
+		if (data.some((row) => row[field] instanceof Date)) {
+			const time = scaleUtc(span.map((value) => new Date(value)), [-BOX3D.x, BOX3D.x]);
+			return {
+				x: (order) => time(new Date(order)),
+				axis: Cartesian3DChart.timeAxis(time, title)
+			};
+		}
+		const linear = scaleLinear(span, [-BOX3D.x, BOX3D.x]);
+		if (data.every((row) => Rows3D.number(row[field]) !== null)) return {
+			x: linear,
+			axis: Cartesian3DChart.valueAxis(linear, title)
+		};
+		const levels = Rows3D.levels(data, field);
+		const band = scaleBand(levels, [-BOX3D.x, BOX3D.x]);
+		const axis = Cartesian3DChart.bandAxis(band, title);
+		axis.ticks = levels.map((text, i) => ({
+			text,
+			at: linear(i)
+		}));
+		return {
+			x: linear,
+			axis
+		};
+	}
+	/** A value scale over the given extent; falls back to symlog when a log scale meets non-positive data. */
+	heights(values, range, zero = false) {
+		const { scale } = this.options;
+		const [low = 0, high = 1] = extent(zero ? [0, ...values] : values);
+		const kind = scale === ScaleKind.Log && low <= 0 ? ScaleKind.Symlog : scale;
+		const built = Scales.continuous(kind).domain([low, high === low ? low + 1 : high]).range(range);
+		return kind === ScaleKind.Log ? built : built.nice(5);
+	}
+	lanes(names, layout = this.options.layout) {
+		const { z, zTitle } = this.options;
+		if (layout === "overlay") {
+			const depth = .34;
+			return {
+				z: () => 0,
+				width: depth * 1.4,
+				axis: {
+					ticks: [],
+					rules: [],
+					title: ""
+				},
+				depth
+			};
+		}
+		const band = scaleBand(names, [-BOX3D.z, BOX3D.z]).padding(.3);
+		return {
+			z: (name) => band(name) + band.bandwidth() / 2,
+			width: band.bandwidth(),
+			axis: Cartesian3DChart.bandAxis(band, zTitle ?? z),
+			depth: BOX3D.z
+		};
+	}
+	path(points) {
+		return CurveSampler3D.sample(points, this.options.curve);
+	}
+};
+export { Series3DChart, SeriesLayout3D, SeriesMeasure3D };

package/dist/charts/threebars/Stacked3DBars.js

@@ -0,0 +1,166 @@
+import { ChartFamily, DataShape, Dimension, StackMode } 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, rollup, scaleBand, scaleLinear, stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetSilhouette, stackOrderAppearance, stackOrderInsideOut, stackOrderNone } from "d3";
+// src/charts/threebars/Stacked3DBars.ts
+var StackOrder3D = /* @__PURE__ */ function(StackOrder3D) {
+	StackOrder3D["Input"] = "input";
+	StackOrder3D["Appearance"] = "appearance";
+	StackOrder3D["InsideOut"] = "inside-out";
+	return StackOrder3D;
+}({});
+var OFFSETS = {
+	[StackMode.Normalized]: stackOffsetExpand,
+	[StackMode.Streamgraph]: stackOffsetSilhouette
+};
+var ORDERS = {
+	["input"]: stackOrderNone,
+	["appearance"]: stackOrderAppearance,
+	["inside-out"]: stackOrderInsideOut
+};
+var GAP = .012;
+/** Stacks segments inside every cell of a category × lane floor: for part-to-whole compared across two dimensions. */
+var Stacked3DBars = class extends Cartesian3DChart {
+	static meta = {
+		id: "stacked-3d-bars",
+		name: "3D stacked bars",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Stacks part-to-whole segments in each cell of a floor, comparing composition across two categorical dimensions.",
+		tags: [
+			"stacked",
+			"normalized",
+			"composition",
+			"layered"
+		],
+		sample: (seed) => [
+			"Retail",
+			"Online",
+			"Partner"
+		].flatMap((lane, i) => SampleData.categories(seed + i, 6, 4).map((row) => ({
+			...row,
+			lane
+		}))),
+		variants: {
+			stack: [
+				StackMode.Stacked,
+				StackMode.Normalized,
+				StackMode.Streamgraph
+			],
+			order: [
+				"input",
+				"appearance",
+				"inside-out"
+			],
+			shape: [
+				Prism3D.Box,
+				Prism3D.Cylinder,
+				Prism3D.Hexagon
+			],
+			lanes: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "category",
+			z: "lane",
+			series: "series",
+			y: "value",
+			stack: StackMode.Stacked,
+			order: "input",
+			shape: Prism3D.Box,
+			lanes: true
+		};
+	}
+	build(ctx) {
+		const { data, x, y, z, series, stack: mode, order, shape, lanes, xTitle, yTitle, zTitle } = this.options;
+		const rows = data.map((row) => ({
+			category: Rows3D.text(row[x]),
+			lane: lanes ? Rows3D.text(row[z]) : "",
+			series: Rows3D.text(row[series]),
+			value: Rows3D.number(row[y])
+		})).filter((row) => row.value !== null);
+		const keys = [...new Set(rows.map((row) => row.series))];
+		const categories = [...new Set(rows.map((row) => row.category))];
+		const laneKeys = [...new Set(rows.map((row) => row.lane))];
+		const layout = stack().keys(keys).value((cell, key) => cell.get(key) ?? 0).offset(OFFSETS[mode] ?? stackOffsetDiverging).order(ORDERS[order]);
+		const placed = laneKeys.flatMap((lane) => {
+			const byCategory = rollup(rows.filter((row) => row.lane === lane), (group) => new Map(rollup(group, (each) => each.reduce((total, row) => total + row.value, 0), (row) => row.series)), (row) => row.category);
+			const table = categories.map((category) => byCategory.get(category) ?? /* @__PURE__ */ new Map());
+			return layout(table).flatMap((band) => band.map(([from, to], i) => ({
+				lane,
+				category: categories[i],
+				series: band.key,
+				from,
+				to,
+				value: table[i].get(band.key) ?? 0
+			})));
+		}).filter((segment) => Number.isFinite(segment.from) && Number.isFinite(segment.to) && segment.to !== segment.from);
+		const [low = 0, high = 1] = extent(placed.flatMap((segment) => [
+			segment.from,
+			segment.to,
+			...mode === StackMode.Streamgraph ? [] : [0]
+		]));
+		const value = scaleLinear([low, high === low ? low + 1 : high], [-BOX3D.y, BOX3D.y]).nice(5);
+		const across = scaleBand(categories, [-BOX3D.x, BOX3D.x]).padding(.28);
+		const deep = lanes ? BOX3D.z : .42;
+		const lanesScale = scaleBand(laneKeys, [-deep, deep]).padding(.28);
+		const ratio = mode === StackMode.Normalized;
+		this.stage(ctx, {
+			x: Cartesian3DChart.bandAxis(across, xTitle ?? x),
+			y: Cartesian3DChart.valueAxis(value, yTitle ?? (ratio ? `share of ${y}` : y), 5, mode === StackMode.Streamgraph ? Math.abs : ratio ? (share) => share * 100 : void 0),
+			z: lanes ? Cartesian3DChart.bandAxis(lanesScale, zTitle ?? z) : {
+				ticks: [],
+				rules: [],
+				title: ""
+			}
+		}, deep);
+		const size = Math.min(across.bandwidth(), lanesScale.bandwidth());
+		const round = shape !== Prism3D.Box;
+		const segments = placed.map((segment) => {
+			const bottom = value(segment.from), span = value(segment.to) - bottom;
+			const trimmed = Math.abs(span) > .018000000000000002 ? span - Math.sign(span) * GAP : span;
+			return {
+				from: [
+					across(segment.category) + across.bandwidth() / 2,
+					bottom,
+					lanesScale(segment.lane) + lanesScale.bandwidth() / 2
+				],
+				axis: "y",
+				length: trimmed,
+				width: round ? size : across.bandwidth(),
+				depth: round ? size : lanesScale.bandwidth(),
+				category: segment.category,
+				lane: segment.lane,
+				series: segment.series,
+				value: segment.value
+			};
+		});
+		Marks3D.instanced(ctx, Marks3D.prism(shape), segments, {
+			material: Marks3D.matte({ flatShading: Marks3D.facetedPrism(shape) }),
+			place: (dummy, segment, progress) => {
+				const lift = value(mode === StackMode.Streamgraph ? 0 : Math.max(low, 0));
+				const span = {
+					...segment,
+					from: [
+						segment.from[0],
+						lift + (segment.from[1] - lift) * progress,
+						segment.from[2]
+					]
+				};
+				Marks3D.span(dummy, span, progress);
+			},
+			color: (segment) => ctx.palette.color(segment.series),
+			tip: (segment) => ({
+				title: [segment.category, segment.lane].filter(Boolean).join(" · "),
+				rows: [[segment.series, +segment.value.toFixed(2)]],
+				color: ctx.palette.color(segment.series)
+			})
+		});
+	}
+};
+export { StackOrder3D, Stacked3DBars };