@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/threebars/PointCloud3DChart.js

@@ -0,0 +1,140 @@
+import { ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { BOX3D, Cartesian3DChart } from "./Cartesian3DChart.js";
+import { Marks3D, Prism3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { extent } from "d3";
+import { CircleGeometry, InstancedMesh, MeshBasicMaterial, Object3D, Vector3 } from "three";
+// src/charts/threebars/PointCloud3DChart.ts
+/** Shadow of the cloud cast onto the box. */
+var PointCloudProjection3D = /* @__PURE__ */ function(PointCloudProjection3D) {
+	PointCloudProjection3D["None"] = "none";
+	PointCloudProjection3D["Floor"] = "floor-shadow";
+	PointCloudProjection3D["Walls"] = "wall-shadows";
+	return PointCloudProjection3D;
+}({});
+var INSET = .93;
+var SPOT = .022;
+/** Shared logic of numeric x/y/z clouds: scales, axes, identity, floor drops and wall projections. */
+var PointCloud3DChart = class PointCloud3DChart extends Cartesian3DChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			x: "x",
+			y: "y",
+			z: "z",
+			group: "group",
+			projection: "none",
+			drops: false,
+			scale: ScaleKind.Linear
+		};
+	}
+	scaled(values, reach) {
+		const { scale } = this.options;
+		const [low = 0, high = 1] = extent(values);
+		const kind = scale === ScaleKind.Log && low <= 0 ? ScaleKind.Symlog : scale;
+		const built = Scales.continuous(kind).domain([low, high === low ? low + 1 : high]).range([-reach * INSET, reach * INSET]);
+		return kind === ScaleKind.Log ? built : built.nice(5);
+	}
+	/** Rows with a usable x, y and z, placed in the box, plus the axes that describe them. */
+	cloud(rows, laneOf) {
+		const { x, y, z, group, xTitle, yTitle, zTitle } = this.options;
+		const usable = rows.filter((row) => Rows3D.number(row[x]) !== null && Rows3D.number(row[y]) !== null && (laneOf || Rows3D.number(row[z]) !== null));
+		const column = (field) => usable.map((row) => Rows3D.number(row[field]));
+		const sx = this.scaled(column(x), BOX3D.x), sy = this.scaled(column(y), BOX3D.y), sz = this.scaled(laneOf ? [] : column(z), BOX3D.z);
+		return {
+			axes: {
+				x: PointCloud3DChart.valueAxis(sx, xTitle ?? x),
+				y: PointCloud3DChart.valueAxis(sy, yTitle ?? y),
+				z: laneOf ? {
+					ticks: [],
+					rules: [],
+					title: ""
+				} : PointCloud3DChart.valueAxis(sz, zTitle ?? z)
+			},
+			points: usable.map((row) => ({
+				row,
+				group: Rows3D.text(row[group]),
+				at: new Vector3(sx(Rows3D.number(row[x])), sy(Rows3D.number(row[y])), laneOf ? laneOf(row) : sz(Rows3D.number(row[z])))
+			}))
+		};
+	}
+	tint(ctx, point) {
+		return ctx.palette.color(point.group || "Points");
+	}
+	/** Floor drops and flat shadows of the cloud. */
+	guides(ctx, points) {
+		const { projection, drops } = this.options;
+		if (drops) Marks3D.instanced(ctx, Marks3D.prism(Prism3D.Cylinder), points, {
+			shadow: false,
+			place: (dummy, { at }, progress) => Marks3D.span(dummy, {
+				from: [
+					at.x,
+					-BOX3D.y,
+					at.z
+				],
+				axis: "y",
+				length: at.y + BOX3D.y,
+				width: .006,
+				depth: .006
+			}, progress),
+			color: () => ctx.theme.axis
+		});
+		if (projection === "none") return;
+		const azimuth = (this.options.azimuth ?? 38) * Math.PI / 180;
+		const backX = Math.sin(azimuth) >= 0 ? -1 : 1, backZ = Math.cos(azimuth) >= 0 ? -1 : 1;
+		const layers = [{
+			turn: [
+				-Math.PI / 2,
+				0,
+				0
+			],
+			at: (p) => [
+				p.x,
+				-BOX3D.y + .004,
+				p.z
+			]
+		}, ...projection === "wall-shadows" ? [{
+			turn: [
+				0,
+				backX * Math.PI / 2,
+				0
+			],
+			at: (p) => [
+				backX * (BOX3D.x - .004),
+				p.y,
+				p.z
+			]
+		}, {
+			turn: [
+				0,
+				backZ < 0 ? 0 : Math.PI,
+				0
+			],
+			at: (p) => [
+				p.x,
+				p.y,
+				backZ * (BOX3D.z - .004)
+			]
+		}] : []];
+		for (const layer of layers) this.shadow(ctx, points, layer.turn, layer.at);
+	}
+	shadow(ctx, points, turn, at) {
+		if (!points.length) return;
+		const mesh = new InstancedMesh(new CircleGeometry(SPOT, 16), new MeshBasicMaterial({
+			transparent: true,
+			opacity: .32,
+			depthWrite: false
+		}), points.length);
+		const dummy = new Object3D();
+		dummy.rotation.set(...turn);
+		points.forEach((point, i) => {
+			dummy.position.set(...at(point.at));
+			dummy.updateMatrix();
+			mesh.setMatrixAt(i, dummy.matrix);
+			mesh.setColorAt(i, ctx.color(this.tint(ctx, point)));
+		});
+		ctx.root.add(mesh);
+	}
+};
+export { PointCloud3DChart, PointCloudProjection3D };

package/dist/charts/threebars/Polyline3D.js

@@ -0,0 +1,17 @@
+import { Curve, Vector3 } from "three";
+// src/charts/threebars/Polyline3D.ts
+/** Straight segments as a three.js curve, so tubes can follow already-sampled paths. */
+var Polyline3D = class extends Curve {
+	points;
+	constructor(points) {
+		super();
+		this.points = points;
+		this.arcLengthDivisions = Math.max(200, points.length * 4);
+	}
+	getPoint(t, target = new Vector3()) {
+		const at = Math.min(t, 1) * (this.points.length - 1);
+		const index = Math.min(Math.floor(at), this.points.length - 2);
+		return target.lerpVectors(this.points[index], this.points[index + 1], at - index);
+	}
+};
+export { Polyline3D };

package/dist/charts/threebars/Pyramid3DChart.js

@@ -0,0 +1,85 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { TIER_HEIGHT, TIER_RADIUS, Tier3DChart, TierSection3D, TierSort3D } from "./Tier3DChart.js";
+// src/charts/threebars/Pyramid3DChart.ts
+/** What each tier's value is proportional to. */
+var PyramidEncoding3D = /* @__PURE__ */ function(PyramidEncoding3D) {
+	PyramidEncoding3D["Height"] = "height";
+	PyramidEncoding3D["Volume"] = "volume";
+	PyramidEncoding3D["Equal"] = "equal-tiers";
+	return PyramidEncoding3D;
+}({});
+/** A solid pyramid cut into tiers: for ranked hierarchies whose biggest level belongs at the base. */
+var Pyramid3DChart = class extends Tier3DChart {
+	static meta = {
+		id: "pyramid-3d",
+		name: "3D pyramid chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Cuts a solid pyramid into tiers, with tier height or volume proportional to each level of a hierarchy.",
+		tags: [
+			"pyramid",
+			"hierarchy",
+			"tiers",
+			"cone"
+		],
+		sample: (seed) => SampleData.categories(seed, 5, 1),
+		variants: {
+			encoding: [
+				"volume",
+				"height",
+				"equal-tiers"
+			],
+			section: [
+				TierSection3D.Square,
+				TierSection3D.Round,
+				TierSection3D.Hexagon
+			],
+			truncate: [0, .25],
+			sort: [TierSort3D.Descending, TierSort3D.Input],
+			gap: [.03, 0]
+		},
+		valid: ({ encoding, sort }) => !(encoding === "equal-tiers" && sort === TierSort3D.Input)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			section: TierSection3D.Square,
+			encoding: "volume",
+			truncate: 0
+		};
+	}
+	build(ctx) {
+		const { encoding, truncate } = this.options;
+		const stages = [...this.stages()].reverse();
+		const total = stages.reduce((sum, stage) => sum + stage.value, 0) || 1;
+		const peak = Math.max(...stages.map((stage) => stage.value), 1);
+		const low = Math.min(...stages.map((stage) => stage.value), peak);
+		const tip = truncate;
+		/** Fraction of the height from the apex that encloses the first `done` share of the value. */
+		const level = (done, index) => {
+			if (encoding === "equal-tiers") return tip + (1 - tip) * (index / Math.max(stages.length, 1));
+			if (encoding === "height") return tip + (1 - tip) * done;
+			return Math.cbrt(tip ** 3 + (1 - tip ** 3) * done);
+		};
+		const y = (fraction) => TIER_HEIGHT / 2 - (fraction - tip) / (1 - tip) * TIER_HEIGHT;
+		let done = 0;
+		const tiers = stages.map((stage, i) => {
+			const from = level(done, i);
+			done += stage.value / total;
+			const to = level(done, i + 1);
+			return {
+				key: stage.key,
+				value: stage.value,
+				share: stage.value / total,
+				radiusTop: from * TIER_RADIUS * 1.2,
+				radiusBottom: to * TIER_RADIUS * 1.2,
+				top: y(from),
+				bottom: y(to)
+			};
+		});
+		this.solid(ctx, tiers, (tier) => ctx.palette.sequential(.25 + .7 * (tier.value - low) / (peak - low || 1)));
+	}
+};
+export { Pyramid3DChart, PyramidEncoding3D };

package/dist/charts/threebars/Radar3DChart.js

@@ -0,0 +1,245 @@
+import { Chart3D } from "../../core/Chart3D.js";
+import { ChartFamily, CurveKind, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { CurveSampler3D } from "./CurveSampler3D.js";
+import { Marks3D, Prism3D } from "./Marks3D.js";
+import { Rows3D } from "./Rows3D.js";
+import { scaleLinear, scaleSqrt } from "d3";
+import { BoxGeometry, BufferGeometry, CylinderGeometry, DoubleSide, ExtrudeGeometry, Float32BufferAttribute, Mesh, MeshBasicMaterial, Shape, TorusGeometry, Vector3 } from "three";
+// src/charts/threebars/Radar3DChart.ts
+/** How series occupy height. */
+var RadarLayout3D = /* @__PURE__ */ function(RadarLayout3D) {
+	RadarLayout3D["Layered"] = "layered";
+	RadarLayout3D["Overlaid"] = "overlaid";
+	RadarLayout3D["Tent"] = "tent";
+	RadarLayout3D["Spokes"] = "spoke-bars";
+	return RadarLayout3D;
+}({});
+var RadarFill3D = /* @__PURE__ */ function(RadarFill3D) {
+	RadarFill3D["Solid"] = "solid";
+	RadarFill3D["Outline"] = "outline";
+	return RadarFill3D;
+}({});
+var RadarGrid3D = /* @__PURE__ */ function(RadarGrid3D) {
+	RadarGrid3D["Polygon"] = "polygon";
+	RadarGrid3D["Circle"] = "circle";
+	return RadarGrid3D;
+}({});
+var RadarMeasure3D = /* @__PURE__ */ function(RadarMeasure3D) {
+	RadarMeasure3D["Absolute"] = "absolute";
+	RadarMeasure3D["PerAxis"] = "per-axis";
+	return RadarMeasure3D;
+}({});
+var RADIUS = 1;
+var FLOOR = -.5;
+var SLAB = .03;
+var RINGS = 4;
+var LINE = .0055;
+/** Radar profiles in space: series get their own level, or the shape itself gains height, so they stop hiding one another. */
+var Radar3DChart = class extends Chart3D {
+	static meta = {
+		id: "radar-3d",
+		name: "3D radar chart",
+		family: ChartFamily.Radial,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Lifts radar profiles into space, giving each series its own level so overlapping shapes stop hiding one another.",
+		tags: [
+			"spider",
+			"polar",
+			"profile",
+			"web"
+		],
+		sample: (seed) => SampleData.categories(seed, 6, 3),
+		variants: {
+			layout: [
+				"layered",
+				"overlaid",
+				"tent",
+				"spoke-bars"
+			],
+			fill: ["solid", "outline"],
+			grid: ["polygon", "circle"],
+			curve: [CurveKind.Linear, CurveKind.CatmullRom],
+			scale: [ScaleKind.Linear, ScaleKind.Sqrt],
+			measure: ["absolute", "per-axis"]
+		},
+		valid: ({ layout, fill, curve }) => !(layout === "spoke-bars" && (fill !== "solid" || curve !== CurveKind.Linear)) && !(layout === "tent" && fill !== "solid")
+	};
+	defaults() {
+		return {
+			axis: "category",
+			series: "series",
+			value: "value",
+			layout: "layered",
+			fill: "solid",
+			grid: "polygon",
+			curve: CurveKind.Linear,
+			scale: ScaleKind.Linear,
+			measure: "absolute",
+			elevation: 34,
+			azimuth: 16,
+			distance: 4.9
+		};
+	}
+	build(ctx) {
+		const { data, axis, series, value, scale, measure } = this.options;
+		const cells = Rows3D.cross(data, axis, series, value);
+		const axes = Rows3D.levels(data, axis).filter((name) => cells.some((cell) => cell.x === name));
+		const names = Rows3D.levels(data, series).filter((name) => cells.some((cell) => cell.z === name));
+		const top = Math.max(1e-9, ...cells.map((cell) => Math.abs(cell.value)));
+		const axisTop = (name) => Math.max(1e-9, ...cells.filter((cell) => cell.x === name).map((cell) => Math.abs(cell.value)));
+		const radius = (scale === ScaleKind.Sqrt ? scaleSqrt : scaleLinear)([0, 1], [0, RADIUS]);
+		const spokes = cells.map((cell) => ({
+			axis: cell.x,
+			series: cell.z,
+			value: cell.value,
+			shown: Math.max(0, cell.value) / (measure === "per-axis" ? axisTop(cell.x) : top)
+		}));
+		const angle = (name) => axes.indexOf(name) / Math.max(axes.length, 1) * Math.PI * 2;
+		const spot = (name, r) => [Math.sin(angle(name)) * r, -Math.cos(angle(name)) * r];
+		this.web(ctx, axes, radius, top);
+		if (axes.length < 3) return;
+		names.forEach((name, i) => {
+			const profile = axes.map((spoke) => spokes.find((entry) => entry.axis === spoke && entry.series === name));
+			const ring = profile.map((entry, j) => spot(axes[j], radius(entry?.shown ?? 0)));
+			this.layer(ctx, name, i, names.length, this.options.curve === CurveKind.CatmullRom ? CurveSampler3D.closed(ring) : ring, ring, profile);
+		});
+	}
+	layer(ctx, name, index, count, ring, vertices, profile) {
+		const { layout, fill } = this.options;
+		const color = ctx.palette.color(name || "Series");
+		const summary = () => ({
+			title: name,
+			color,
+			rows: profile.flatMap((entry) => entry ? [[entry.axis, +entry.value.toFixed(2)]] : [])
+		});
+		if (layout === "spoke-bars") return this.spokeBars(ctx, index, count, vertices, profile, color, name);
+		if (layout === "tent") return this.tent(ctx, ring, index, count, color, summary);
+		const level = layout === "layered" ? -.47 + 1 * (index + .5) / count * .82 : -.47 + index * .012;
+		if (fill === "outline") {
+			Marks3D.tube(ctx, [...ring, ring[0]].map(([x, z]) => new Vector3(x, level, z)), .011, color, summary);
+			return;
+		}
+		const shape = new Shape();
+		ring.forEach(([x, z], i) => i ? shape.lineTo(x, -z) : shape.moveTo(x, -z));
+		shape.closePath();
+		const geometry = new ExtrudeGeometry(shape, {
+			depth: SLAB,
+			bevelEnabled: false
+		}).rotateX(-Math.PI / 2).translate(0, level, 0);
+		const material = layout === "overlaid" ? Marks3D.matte({
+			color,
+			transparent: true,
+			opacity: .55,
+			depthWrite: false
+		}) : Marks3D.matte({
+			color,
+			transparent: true,
+			opacity: .86
+		});
+		const mesh = new Mesh(geometry, material);
+		mesh.castShadow = true;
+		ctx.root.add(mesh);
+		ctx.reveal((progress) => mesh.scale.set(Math.max(.001, progress), 1, Math.max(.001, progress)));
+		ctx.pick(mesh, summary);
+		Marks3D.tube(ctx, [...ring, ring[0]].map(([x, z]) => new Vector3(x, level + SLAB + .002, z)), .007, color);
+	}
+	/** Series profile as a shell rising from the rim to a central peak. */
+	tent(ctx, ring, index, count, color, summary) {
+		const apex = -.46 + .8 * ((count - index) / count);
+		const positions = [];
+		ring.forEach(([x, z], i) => {
+			const [nx, nz] = ring[(i + 1) % ring.length];
+			positions.push(0, apex, 0, x, -.49, z, nx, -.49, nz);
+		});
+		const geometry = new BufferGeometry().setAttribute("position", new Float32BufferAttribute(positions, 3));
+		geometry.computeVertexNormals();
+		const mesh = new Mesh(geometry, Marks3D.matte({
+			color,
+			side: DoubleSide,
+			flatShading: true,
+			transparent: true,
+			opacity: .72
+		}));
+		mesh.position.y = FLOOR;
+		geometry.translate(0, .5, 0);
+		ctx.reveal((progress) => {
+			mesh.scale.y = Math.max(.001, progress);
+		});
+		ctx.root.add(mesh);
+		ctx.pick(mesh, summary);
+	}
+	spokeBars(ctx, index, count, vertices, profile, color, name) {
+		const items = profile.flatMap((entry, i) => entry ? [{
+			entry,
+			spot: vertices[i]
+		}] : []);
+		const width = Math.min(.11, .3 / count);
+		Marks3D.instanced(ctx, Marks3D.prism(Prism3D.Box), items, {
+			place: (dummy, { entry, spot: [x, z] }, progress) => {
+				const angle = Math.atan2(x, z);
+				const offset = (index - (count - 1) / 2) * (width * 1.15);
+				Marks3D.span(dummy, {
+					from: [
+						x + Math.cos(angle) * offset,
+						-.495,
+						z - Math.sin(angle) * offset
+					],
+					axis: "y",
+					length: Math.max(.02, entry.shown * 1 * .92),
+					width,
+					depth: width
+				}, progress);
+				dummy.rotation.y = angle;
+			},
+			color: () => color,
+			tip: ({ entry }) => ({
+				title: entry.axis,
+				color,
+				rows: [[name, +entry.value.toFixed(2)]]
+			})
+		});
+	}
+	web(ctx, axes, radius, top) {
+		const { grid, measure } = this.options;
+		const ink = new MeshBasicMaterial({ color: ctx.theme.grid });
+		const count = Math.max(axes.length, 3);
+		const between = Math.PI / count;
+		const add = (mesh) => {
+			mesh.position.y += FLOOR;
+			ctx.root.add(mesh);
+		};
+		for (let i = 1; i <= RINGS; i++) {
+			const r = radius(i / RINGS);
+			if (grid === "circle") add(new Mesh(new TorusGeometry(r, LINE, 6, 96).rotateX(Math.PI / 2), ink));
+			else for (let j = 0; j < count; j++) {
+				const a = j / count * Math.PI * 2, b = (j + 1) / count * Math.PI * 2;
+				const from = new Vector3(Math.sin(a) * r, 0, -Math.cos(a) * r), to = new Vector3(Math.sin(b) * r, 0, -Math.cos(b) * r);
+				const mesh = new Mesh(new BoxGeometry(LINE * 2, LINE * 2, from.distanceTo(to)), ink);
+				mesh.position.copy(from).add(to).multiplyScalar(.5);
+				mesh.lookAt(to);
+				add(mesh);
+			}
+			if (measure !== "per-axis" && i % 2 === 0) ctx.label(String(+(top * i / RINGS).toFixed(1)), [
+				Math.sin(between) * r,
+				FLOOR,
+				-Math.cos(between) * r
+			], "muted", 9).center.x = 0;
+		}
+		axes.forEach((name, i) => {
+			const a = i / axes.length * Math.PI * 2;
+			const spoke = new Mesh(new CylinderGeometry(LINE, LINE, radius(1), 6).rotateX(Math.PI / 2), ink);
+			spoke.position.set(Math.sin(a) * radius(1) / 2, 0, -Math.cos(a) * radius(1) / 2);
+			spoke.rotation.y = -a;
+			add(spoke);
+			const x = Math.sin(a) * 1.1, z = -Math.cos(a) * 1.1;
+			ctx.label(name, [
+				x,
+				z < -.2 ? .53 : FLOOR,
+				z
+			], "secondary", 11).center.set(x > .1 ? 0 : x < -.1 ? 1 : .5, z > .2 ? 0 : z < -.2 ? 1 : .5);
+		});
+	}
+};
+export { Radar3DChart, RadarFill3D, RadarGrid3D, RadarLayout3D, RadarMeasure3D };

package/dist/charts/threebars/Ribbon3DChart.js

@@ -0,0 +1,135 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BOX3D } from "./Cartesian3DChart.js";
+import { Marks3D } from "./Marks3D.js";
+import { Series3DChart, SeriesLayout3D, SeriesMeasure3D } from "./Series3DChart.js";
+import { max } from "d3";
+import { BufferGeometry, DoubleSide, Float32BufferAttribute, Mesh } from "three";
+// src/charts/threebars/Ribbon3DChart.ts
+/** Cross-section swept along each ribbon. */
+var RibbonSection3D = /* @__PURE__ */ function(RibbonSection3D) {
+	RibbonSection3D["Flat"] = "flat";
+	RibbonSection3D["Solid"] = "solid";
+	RibbonSection3D["Trough"] = "trough";
+	RibbonSection3D["Fin"] = "fin";
+	return RibbonSection3D;
+}({});
+var RibbonWidth3D = /* @__PURE__ */ function(RibbonWidth3D) {
+	RibbonWidth3D["Fixed"] = "fixed";
+	RibbonWidth3D["ByValue"] = "by-value";
+	return RibbonWidth3D;
+}({});
+/** Profile points as `[across -1..1, down]`. */
+var PROFILES = {
+	["flat"]: [[-1, 0], [1, 0]],
+	["solid"]: [
+		[-1, 0],
+		[1, 0],
+		[1, .05],
+		[-1, .05],
+		[-1, 0]
+	],
+	["trough"]: [
+		[-1, -.05],
+		[-.7, 0],
+		[.7, 0],
+		[1, -.05]
+	],
+	["fin"]: [
+		[0, 0],
+		[.12, .09],
+		[-.12, .09],
+		[0, 0]
+	]
+};
+/** Wide strips following each series, in the manner of a ribbon plot: for reading many series as a landscape in depth. */
+var Ribbon3DChart = class Ribbon3DChart extends Series3DChart {
+	static meta = {
+		id: "ribbon-3d",
+		name: "3D ribbon chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Sweeps each series into a wide ribbon, turning parallel trends into a landscape that reads well in depth.",
+		tags: [
+			"ribbon",
+			"strip",
+			"band",
+			"trend"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 36, 5),
+		variants: {
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.Step,
+				CurveKind.Basis
+			],
+			section: [
+				"flat",
+				"solid",
+				"trough",
+				"fin"
+			],
+			widthBy: ["fixed", "by-value"],
+			layout: [SeriesLayout3D.Lanes, SeriesLayout3D.Overlay],
+			measure: [SeriesMeasure3D.Absolute, SeriesMeasure3D.Rebased]
+		},
+		valid: ({ section, widthBy }) => !(section === "fin" && widthBy === "by-value")
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			curve: CurveKind.Monotone,
+			section: "flat",
+			widthBy: "fixed"
+		};
+	}
+	build(ctx) {
+		const { section, widthBy, measure, y, yTitle } = this.options;
+		const tracks = this.tracks();
+		const place = this.positional(tracks);
+		const values = tracks.flatMap((track) => track.points.map((point) => point.value));
+		const height = this.heights(values, [-BOX3D.y + .08, BOX3D.y]);
+		const lanes = this.lanes(tracks.map((track) => track.name));
+		this.stage(ctx, {
+			x: place.axis,
+			y: Ribbon3DChart.valueAxis(height, yTitle ?? (measure === SeriesMeasure3D.Rebased ? `${y} (first = 100)` : y)),
+			z: lanes.axis
+		}, lanes.depth);
+		const half = lanes.width / 2;
+		for (const track of tracks) {
+			const paired = this.path(track.points.map((point) => [place.x(point.order), height(point.value)]));
+			if (paired.length < 2) continue;
+			const width = (y) => widthBy === "by-value" ? Math.max(.1, (y + BOX3D.y) / (BOX3D.y * 2)) : 1;
+			const color = ctx.palette.color(track.name || "Series");
+			const ring = PROFILES[section];
+			const positions = [], index = [];
+			const center = lanes.z(track.name);
+			paired.forEach(([x, top]) => {
+				for (const [across, down] of ring) positions.push(x, top - down, center + across * half * width(top));
+			});
+			for (let i = 0; i < paired.length - 1; i++) for (let j = 0; j < ring.length - 1; j++) {
+				const a = i * ring.length + j, b = a + 1, c = a + ring.length, d = c + 1;
+				index.push(a, c, b, b, c, d);
+			}
+			const geometry = new BufferGeometry().setAttribute("position", new Float32BufferAttribute(positions, 3)).setIndex(index);
+			geometry.computeVertexNormals();
+			const mesh = new Mesh(geometry, Marks3D.matte({
+				color,
+				side: DoubleSide
+			}));
+			mesh.castShadow = mesh.receiveShadow = true;
+			const count = index.length;
+			ctx.reveal((progress) => geometry.setDrawRange(0, Math.floor(count * progress / 6) * 6), 1.3);
+			ctx.root.add(mesh);
+			const last = track.points[track.points.length - 1];
+			ctx.pick(mesh, () => ({
+				title: track.name,
+				color,
+				rows: [[`Last (${last.text})`, +last.value.toFixed(2)], ["Peak", +(max(track.points, (point) => point.value) ?? 0).toFixed(2)]]
+			}));
+		}
+	}
+};
+export { Ribbon3DChart, RibbonSection3D, RibbonWidth3D };