@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threevolume/AtomicOrbitalChart.js

@@ -0,0 +1,228 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { numeric } from "./PointRowsChart.js";
+import { AtomicOrbital, IsoAlgorithm, OrbitalDisplay } from "./volumeEnums.js";
+import { VolumeGrid } from "./VolumeGrid.js";
+import { VolumeIsoSurface } from "./VolumeIsoSurface.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { VolumeSheet } from "./VolumeSheet.js";
+import { randomLcg } from "d3";
+import { BufferGeometry, Float32BufferAttribute, Group, Mesh, Points, PointsMaterial, SphereGeometry, Vector3 } from "three";
+// src/charts/threevolume/AtomicOrbitalChart.ts
+/** Real spherical harmonic on the unit vector, keyed by `l` then `m`. */
+var HARMONICS = {
+	"0:0": () => .282,
+	"1:-1": (_, y) => .488 * y,
+	"1:0": (_, __, z) => .488 * z,
+	"1:1": (x) => .488 * x,
+	"2:-2": (x, y) => 1.092 * x * y,
+	"2:-1": (_, y, z) => 1.092 * y * z,
+	"2:0": (_, __, z) => .315 * (3 * z * z - 1),
+	"2:1": (x, _, z) => 1.092 * x * z,
+	"2:2": (x, y) => .546 * (x * x - y * y),
+	"3:-2": (x, y, z) => 2.676 * x * y * z,
+	"3:0": (_, __, z) => .373 * z * (5 * z * z - 3),
+	"3:2": (x, y, z) => 1.338 * z * (x * x - y * y)
+};
+var PRESETS = {
+	[AtomicOrbital.S]: "0:0",
+	[AtomicOrbital.Pz]: "1:0",
+	[AtomicOrbital.Dz2]: "2:0",
+	[AtomicOrbital.Dxy]: "2:-2",
+	[AtomicOrbital.Dx2y2]: "2:2",
+	[AtomicOrbital.Fz3]: "3:0",
+	[AtomicOrbital.Fxyz]: "3:-2"
+};
+/** Spherical harmonics and their superpositions: for atomic orbitals, antenna patterns and any angular expansion. */
+var AtomicOrbitalChart = class extends VolumeScene {
+	static meta = {
+		id: "atomic-orbital",
+		name: "Atomic orbital",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Function,
+		description: "Shows the signed lobes of spherical harmonics, from single s, p, d and f orbitals to weighted sums.",
+		tags: [
+			"spherical harmonics",
+			"chemistry",
+			"quantum",
+			"lobes",
+			"wavefunction"
+		],
+		sample: (seed) => SampleData.categories(seed, 3, 1).map((row, i) => ({
+			l: [
+				1,
+				2,
+				2
+			][i],
+			m: [
+				0,
+				1,
+				0
+			][i],
+			weight: +row.value / 100
+		})),
+		variants: {
+			orbital: Object.values(AtomicOrbital),
+			display: Object.values(OrbitalDisplay)
+		}
+	};
+	defaults() {
+		return {
+			l: "l",
+			m: "m",
+			weight: "weight",
+			orbital: AtomicOrbital.Data,
+			display: OrbitalDisplay.Lobes
+		};
+	}
+	/** Angular part of the wavefunction as a function of a unit vector, y up. */
+	angular() {
+		const { data, orbital, l, m, weight } = this.options;
+		const preset = PRESETS[orbital];
+		const terms = preset ? [{
+			at: HARMONICS[preset],
+			weight: 1
+		}] : (Array.isArray(data) ? data : []).flatMap((row) => {
+			const key = `${numeric(row[l])}:${numeric(row[m])}`;
+			return key in HARMONICS ? [{
+				at: HARMONICS[key],
+				weight: numeric(row[weight]) || 0
+			}] : [];
+		});
+		return (x, y, z) => terms.reduce((sum, term) => sum + term.weight * term.at(x, z, y), 0);
+	}
+	build(ctx) {
+		const { display } = this.options;
+		this.stage(ctx);
+		const psi = this.angular();
+		const peak = this.peak(psi);
+		if (!peak) return;
+		const signed = this.diverging(ctx);
+		const body = new Group();
+		if (display === OrbitalDisplay.Lobes) this.lobes(ctx, psi, peak, signed, body);
+		else if (display === OrbitalDisplay.Cloud) this.cloud(psi, signed, body);
+		else if (display === OrbitalDisplay.Isosurface) this.iso(ctx, psi, signed, body);
+		else this.section(ctx, psi, signed, body);
+		ctx.root.add(body);
+		this.emerge(ctx, body);
+	}
+	peak(psi) {
+		let most = 0;
+		const unit = new Vector3();
+		for (let i = 0; i < 2e3; i++) {
+			const y = 1 - 2 * (i + .5) / 2e3, ring = Math.sqrt(1 - y * y), a = i * 2.39996;
+			unit.set(ring * Math.cos(a), y, ring * Math.sin(a));
+			most = Math.max(most, Math.abs(psi(unit.x, unit.y, unit.z)));
+		}
+		return most;
+	}
+	/** Radius equal to the amplitude in each direction. */
+	lobes(ctx, psi, peak, signed, body) {
+		const geometry = new SphereGeometry(1, 128, 96);
+		const position = geometry.getAttribute("position");
+		const colors = new Float32Array(position.count * 3), p = new Vector3();
+		for (let i = 0; i < position.count; i++) {
+			p.fromBufferAttribute(position, i).normalize();
+			const value = psi(p.x, p.y, p.z) / peak;
+			signed(value).toArray(colors, i * 3);
+			p.multiplyScalar(.015 + Math.abs(value) * .88);
+			position.setXYZ(i, p.x, p.y, p.z);
+		}
+		geometry.setAttribute("color", new Float32BufferAttribute(colors, 3));
+		geometry.computeVertexNormals();
+		const mesh = new Mesh(geometry, this.surface({
+			vertexColors: true,
+			roughness: .4
+		}));
+		mesh.castShadow = true;
+		ctx.pick(mesh, () => ({
+			title: "Angular amplitude",
+			rows: [["Peak", +peak.toFixed(3)]]
+		}));
+		body.add(mesh);
+	}
+	/** Radial decay under the angular part: hydrogen-like amplitude at a world position. */
+	amplitude(psi, x, y, z) {
+		const r = Math.hypot(x, y, z) || 1e-6;
+		return psi(x / r, y / r, z / r) * Math.exp(-r * 5.2) * (r * 5.2) ** (this.options.orbital === AtomicOrbital.S ? 0 : 1.4);
+	}
+	/** Dots drawn with probability equal to the squared amplitude. */
+	cloud(psi, signed, body) {
+		const next = randomLcg(.42);
+		let top = 0;
+		for (let i = 0; i < 4e3; i++) top = Math.max(top, this.amplitude(psi, next() * 2 - 1, next() * 2 - 1, next() * 2 - 1) ** 2);
+		const position = [], color = [];
+		for (let i = 0; i < 4e5 && position.length < 21e3; i++) {
+			const x = (next() * 2 - 1) * .92, y = (next() * 2 - 1) * .92, z = (next() * 2 - 1) * .92;
+			const value = this.amplitude(psi, x, y, z);
+			if (next() * top > value * value) continue;
+			position.push(x, y, z);
+			color.push(...signed(Math.sign(value) * .92).toArray());
+		}
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(position, 3));
+		geometry.setAttribute("color", new Float32BufferAttribute(color, 3));
+		body.add(new Points(geometry, new PointsMaterial({
+			size: .014,
+			vertexColors: true,
+			map: VolumeScene.roundSprite,
+			alphaTest: .4,
+			transparent: true
+		})));
+	}
+	/** Positive and negative lobes as separate level sets of the amplitude. */
+	iso(ctx, psi, signed, body) {
+		const n = 40, values = new Float32Array(n ** 3);
+		const world = (i) => i / 39 * 2 - 1;
+		let top = 0;
+		for (let k = 0; k < n; k++) for (let j = 0; j < n; j++) for (let i = 0; i < n; i++) {
+			const value = this.amplitude(psi, world(i), world(j), world(k));
+			values[i + j * n + k * n * n] = value;
+			top = Math.max(top, Math.abs(value));
+		}
+		for (const sign of [1, -1]) {
+			const grid = new VolumeGrid([
+				n,
+				n,
+				n
+			], values.map((value) => value * sign));
+			const material = this.surface({
+				color: signed(sign * .9),
+				roughness: .35
+			});
+			const mesh = new Mesh(VolumeIsoSurface.geometry(grid, top * .3, IsoAlgorithm.MarchingCubes), material);
+			mesh.castShadow = true;
+			ctx.pick(mesh, () => ({ title: sign > 0 ? "Positive phase" : "Negative phase" }));
+			body.add(mesh);
+		}
+	}
+	/** Amplitude on an oblique plane through the nucleus, which no real harmonic has as a nodal plane; phase is colour, size is relief. */
+	section(ctx, psi, signed, body) {
+		const normal = new Vector3(.45, .55, .7).normalize();
+		const u = new Vector3().crossVectors(normal, new Vector3(0, 1, 0)).normalize(), v = new Vector3().crossVectors(normal, u);
+		const point = new Vector3();
+		const value = (a, b) => {
+			point.copy(u).multiplyScalar(a).addScaledVector(v, b);
+			return this.amplitude(psi, point.x, point.y, point.z);
+		};
+		let top = 0;
+		for (let i = 0; i <= 60; i++) for (let j = 0; j <= 60; j++) top = Math.max(top, Math.abs(value((i / 30 - 1) * .82, (j / 30 - 1) * .82)));
+		const geometry = VolumeSheet.grid(120, 120, (a, b, out) => {
+			const height = value((a * 2 - 1) * .82, (b * 2 - 1) * .82) / (top || 1);
+			point.addScaledVector(normal, height * .34);
+			out.x = point.x;
+			out.y = point.y;
+			out.z = point.z;
+			out.color.copy(signed(height * 1.3));
+			out.alpha = 1;
+		});
+		const mesh = new Mesh(geometry, this.surface({
+			vertexColors: true,
+			roughness: .5
+		}));
+		mesh.castShadow = true;
+		body.add(mesh);
+	}
+};
+export { AtomicOrbitalChart };

package/dist/charts/threevolume/Bubble3DCloud.js

@@ -0,0 +1,126 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { samplePoints3D } from "./PointCloudChart.js";
+import { PointRowsChart, numeric } from "./PointRowsChart.js";
+import { BubbleLayout, BubbleSizing } from "./volumeEnums.js";
+import { CylinderGeometry, IcosahedronGeometry, InstancedMesh, Vector3 } from "three";
+// src/charts/threevolume/Bubble3DCloud.ts
+/** Bubbles in 3D space: for four measures at once, with position on three axes and honest size on the fourth. */
+var Bubble3DCloud = class extends PointRowsChart {
+	static meta = {
+		id: "bubble-3d-cloud",
+		name: "3D bubble cloud",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Places spheres by three measures and sizes them by a fourth, scattered or relaxed so they never overlap.",
+		tags: [
+			"bubble",
+			"packing",
+			"four measures",
+			"cluster"
+		],
+		sample: (seed) => samplePoints3D(seed, 70, 4),
+		variants: {
+			layout: Object.values(BubbleLayout),
+			sizing: Object.values(BubbleSizing),
+			scale: [
+				ScaleKind.Linear,
+				ScaleKind.Sqrt,
+				ScaleKind.Log
+			],
+			stems: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			size: "size",
+			layout: BubbleLayout.Scatter,
+			sizing: BubbleSizing.Volume,
+			scale: ScaleKind.Linear,
+			stems: true
+		};
+	}
+	warp(values) {
+		const { scale } = this.options;
+		if (scale === ScaleKind.Linear) return values;
+		const unit = this.unit(values);
+		return values.map((value) => scale === ScaleKind.Sqrt ? Math.sqrt(unit(value)) : Math.log1p(unit(value) * 9));
+	}
+	/** Pulls groups toward their own centre in the clustered layout and pushes overlapping spheres apart. */
+	relax(spots, radii, groups) {
+		const { layout } = this.options;
+		if (layout === BubbleLayout.Scatter) return;
+		const clustered = layout === BubbleLayout.Clustered;
+		const names = [...new Set(groups)];
+		const homes = new Map(names.map((name, g) => {
+			const angle = g / names.length * Math.PI * 2;
+			return [name, new Vector3(.5 * Math.cos(angle), g % 2 ? .25 : -.25, .5 * Math.sin(angle))];
+		}));
+		const push = new Vector3();
+		for (let round = 0; round < 90; round++) {
+			if (clustered) spots.forEach((spot, i) => spot.lerp(homes.get(groups[i]), .03));
+			for (let a = 0; a < spots.length; a++) for (let b = a + 1; b < spots.length; b++) {
+				const gap = radii[a] + radii[b] + .012;
+				const distance = spots[a].distanceTo(spots[b]);
+				if (distance >= gap) continue;
+				if (distance < 1e-6) push.set(Math.cos(a), Math.sin(b), Math.cos(a + b)).normalize();
+				else push.subVectors(spots[a], spots[b]).divideScalar(distance);
+				spots[a].addScaledVector(push, (gap - distance) / 2);
+				spots[b].addScaledVector(push, -(gap - distance) / 2);
+			}
+		}
+		spots.forEach((spot, i) => spot.clampScalar(-.96 + radii[i], .96 - radii[i]));
+	}
+	build(ctx) {
+		const { size, sizing, stems, layout, scale } = this.options;
+		const rows = this.rows();
+		this.rowStage(ctx, layout === BubbleLayout.Scatter && scale === ScaleKind.Linear ? rows : [], .85);
+		if (!rows.length) return;
+		const axes = [
+			"x",
+			"y",
+			"z"
+		].map((key) => {
+			const warped = this.warp(rows.map((row) => row[key]));
+			return warped.map(this.unit(warped));
+		});
+		const spots = rows.map((_, i) => new Vector3(axes[0][i] * 1.7 - .85, axes[1][i] * 1.7 - .85, axes[2][i] * 1.7 - .85));
+		const measures = rows.map((row) => Math.max(0, numeric(row.row[size]) || 0));
+		const top = Math.max(...measures) || 1;
+		const root = sizing === BubbleSizing.Volume ? Math.cbrt : Math.sqrt;
+		const radii = measures.map((value) => .012 + .135 * root(value / top));
+		this.relax(spots, radii, rows.map((row) => row.group));
+		const mesh = new InstancedMesh(new IcosahedronGeometry(1, 4), this.surface({
+			roughness: .3,
+			transparent: true,
+			opacity: .88
+		}), rows.length);
+		mesh.castShadow = true;
+		rows.forEach((row, i) => mesh.setColorAt(i, ctx.color(ctx.palette.color(row.group))));
+		this.populate(ctx, mesh, (i, dummy) => {
+			dummy.position.copy(spots[i]);
+			dummy.scale.setScalar(radii[i]);
+		}, (i) => 1 - measures[i] / top);
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => ({
+			title: rows[i].group,
+			color: ctx.palette.color(rows[i].group),
+			rows: [
+				["x", rows[i].x],
+				["y", rows[i].y],
+				["z", rows[i].z],
+				[size, measures[i]]
+			]
+		}));
+		if (!stems) return;
+		const stalks = new InstancedMesh(new CylinderGeometry(.0028, .0028, 1, 5), this.surface({ color: ctx.color(ctx.theme.axis) }), rows.length);
+		this.populate(ctx, stalks, (i, dummy) => {
+			const spot = spots[i], top = spot.y - radii[i];
+			dummy.position.set(spot.x, (top - 1) / 2, spot.z);
+			dummy.scale.set(1, Math.max(.001, top + 1), 1);
+		}, (i) => 1 - measures[i] / top);
+		ctx.root.add(stalks);
+	}
+};
+export { Bubble3DCloud };

package/dist/charts/threevolume/Cloud3DChart.js

@@ -0,0 +1,100 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { CloudContrast, CloudMethod } from "./volumeEnums.js";
+import { VolumeGridChart } from "./VolumeGridChart.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { randomLcg } from "d3";
+import { BufferGeometry, Float32BufferAttribute, IcosahedronGeometry, InstancedMesh, Points, PointsMaterial } from "three";
+// src/charts/threevolume/Cloud3DChart.ts
+var GAMMA = {
+	[CloudContrast.Linear]: 1,
+	[CloudContrast.Soft]: .55,
+	[CloudContrast.Hard]: 2.4
+};
+/** A volume rendered as a soft particle cloud: for smoke, plumes and fuzzy density where hard surfaces would claim false edges. */
+var Cloud3DChart = class extends VolumeGridChart {
+	static meta = {
+		id: "cloud-3d",
+		name: "3D cloud",
+		family: ChartFamily.Volumetric,
+		dimension: Dimension.Three,
+		shape: DataShape.Volume,
+		description: "Scatters particles through a volume in proportion to its density, as stippling, puffs, skins or strata.",
+		tags: [
+			"smoke",
+			"stipple",
+			"plume",
+			"splat",
+			"particles"
+		],
+		sample: (seed) => SampleData.volume(seed, 28),
+		variants: {
+			method: Object.values(CloudMethod),
+			contrast: Object.values(CloudContrast),
+			particles: [18e3, 6e3]
+		}
+	};
+	defaults() {
+		return {
+			method: CloudMethod.Stipple,
+			contrast: CloudContrast.Linear,
+			particles: 18e3
+		};
+	}
+	build(ctx) {
+		const { method, contrast, particles } = this.options;
+		const grid = this.grid;
+		this.volumeStage(ctx, grid);
+		if (grid.empty) return;
+		const puffs = method === CloudMethod.Puffs;
+		const want = Math.max(1, Math.floor(particles)) / (puffs ? 40 : 1);
+		const next = randomLcg(.73);
+		const power = GAMMA[contrast];
+		const accept = (unit) => {
+			if (method === CloudMethod.Skin) return Math.abs(unit ** power - .4) < .045;
+			if (method === CloudMethod.Strata) return Math.abs(unit ** power * 6 % 1 - .5) < .09 && unit > .1;
+			return next() < unit ** (power * 1.4);
+		};
+		const spots = [], units = [];
+		for (let tries = 0; tries < want * 60 && units.length < want; tries++) {
+			const x = (next() * 2 - 1) * grid.half[0], y = (next() * 2 - 1) * grid.half[1], z = (next() * 2 - 1) * grid.half[2];
+			const unit = grid.unit(grid.sample(x, y, z) ?? grid.min);
+			if (unit < .015 || !accept(unit)) continue;
+			spots.push(x, y, z);
+			units.push(unit);
+		}
+		const tone = this.sequential(ctx, .1);
+		if (puffs) {
+			const mesh = new InstancedMesh(new IcosahedronGeometry(1, 2), this.surface({
+				roughness: 1,
+				transparent: true,
+				opacity: .16,
+				depthWrite: false
+			}), units.length);
+			units.forEach((unit, i) => mesh.setColorAt(i, tone(unit)));
+			this.populate(ctx, mesh, (i, dummy) => {
+				dummy.position.set(spots[i * 3], spots[i * 3 + 1], spots[i * 3 + 2]);
+				dummy.scale.setScalar(Math.max(.03, .14 * Math.cbrt(units[i])));
+			}, (i) => 1 - units[i]);
+			ctx.root.add(mesh);
+			ctx.pick(mesh, (i) => ({
+				title: "Density",
+				rows: [["Share of peak", `${Math.round(units[i] * 100)}%`]]
+			}));
+			return;
+		}
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(spots, 3));
+		geometry.setAttribute("color", new Float32BufferAttribute(units.flatMap((unit) => tone(unit).toArray()), 3));
+		const size = Math.min(.024, .014 * Math.sqrt(18e3 / Math.max(1, units.length)));
+		ctx.root.add(new Points(geometry, new PointsMaterial({
+			size,
+			vertexColors: true,
+			map: VolumeScene.roundSprite,
+			alphaTest: .4,
+			transparent: true
+		})));
+		this.drawOn(ctx, geometry, 1.4);
+	}
+};
+export { Cloud3DChart };

package/dist/charts/threevolume/Contour3DStack.js

@@ -0,0 +1,183 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ContourSpacing, ContourStyle } from "./volumeEnums.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { RIBBON_SECTION, ROUND_SECTION, VolumeStrands } from "./VolumeStrands.js";
+import { contours, quantile, range } from "d3";
+import { ExtrudeGeometry, Group, Mesh, Path, Shape } from "three";
+// src/charts/threevolume/Contour3DStack.ts
+var FLOOR = -.94;
+/** A surface cut into elevation bands: for reading exact levels from terrain or a response surface, like a contour map with height. */
+var Contour3DStack = class extends VolumeScene {
+	static meta = {
+		id: "contour-3d-stack",
+		name: "3D contour stack",
+		family: ChartFamily.Volumetric,
+		dimension: Dimension.Three,
+		shape: DataShape.Grid,
+		description: "Slices a 2D grid into elevation levels and stacks them as terraces, plates, lines or curtains.",
+		tags: [
+			"contour",
+			"terrain",
+			"isolines",
+			"topographic",
+			"terrace"
+		],
+		sample: (seed) => SampleData.surface(seed, 44),
+		variants: {
+			style: Object.values(ContourStyle),
+			spacing: Object.values(ContourSpacing),
+			levels: [
+				10,
+				6,
+				16
+			],
+			floorMap: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			style: ContourStyle.Terraces,
+			spacing: ContourSpacing.Equal,
+			levels: 10,
+			floorMap: false
+		};
+	}
+	thresholds(values) {
+		const { spacing, levels } = this.options;
+		const n = Math.max(2, Math.floor(levels));
+		if (spacing === ContourSpacing.Quantile) {
+			const sorted = Float64Array.from(values).sort();
+			return [...new Set(range(0, n).map((i) => quantile(sorted, i / n)))];
+		}
+		const [low, high] = bounds(values);
+		return high > low ? range(0, n).map((i) => low + (high - low) * i / n) : [low];
+	}
+	build(ctx) {
+		const { data, style, floorMap } = this.options;
+		this.stage(ctx);
+		const columns = data?.z?.[0]?.length ?? 0, rows = data?.z?.length ?? 0;
+		if (columns < 2 || rows < 2) return;
+		const values = data.z.flat().map((value) => Number.isFinite(value) ? value : NaN);
+		const clean = values.filter(Number.isFinite);
+		if (!clean.length) return;
+		const [low, high] = bounds(clean);
+		const levels = this.thresholds(clean);
+		const bands = contours().size([columns, rows]).smooth(true).thresholds(levels)(values);
+		const x = (column) => Math.max(0, Math.min(columns - 1, column - .5)) / (columns - 1) * 1.8 - .9;
+		const z = (row) => Math.max(0, Math.min(rows - 1, row - .5)) / (rows - 1) * 1.8 - .9;
+		const height = (level) => FLOOR + (level - low) / (high - low || 1) * 1.75;
+		const polar = low < 0 && high > 0;
+		const signed = this.diverging(ctx), tone = this.sequential(ctx);
+		const bound = Math.max(Math.abs(low), Math.abs(high)) || 1;
+		const paint = (level) => polar ? signed(level / bound) : tone((level - low) / (high - low || 1));
+		const body = new Group();
+		const toShapes = (polygons) => polygons.map(([outer, ...holes]) => {
+			const shape = new Shape(outer.map(([a, b]) => ({
+				x: x(a),
+				y: -z(b)
+			})));
+			shape.holes = holes.map((hole) => new Path(hole.map(([a, b]) => ({
+				x: x(a),
+				y: -z(b)
+			}))));
+			return shape;
+		});
+		const slab = (shapes, y, depth, color, opaque = true) => {
+			const geometry = new ExtrudeGeometry(shapes, {
+				depth,
+				bevelEnabled: false,
+				curveSegments: 1
+			}).rotateX(-Math.PI / 2);
+			const mesh = new Mesh(geometry, this.surface({
+				color,
+				roughness: .6,
+				transparent: !opaque,
+				opacity: opaque ? 1 : .55
+			}));
+			mesh.position.y = y;
+			mesh.castShadow = opaque;
+			mesh.receiveShadow = opaque;
+			return mesh;
+		};
+		const strands = new VolumeStrands(style === ContourStyle.Curtains ? RIBBON_SECTION : ROUND_SECTION);
+		bands.forEach((band, b) => {
+			const level = band.value, y = height(level), color = paint(level);
+			const polygons = band.coordinates;
+			if (!polygons.length) return;
+			const next = bands[b + 1] ? height(bands[b + 1].value) : y + .08;
+			if (style === ContourStyle.Terraces) body.add(slab(toShapes(polygons), y, Math.max(.01, next - y), color));
+			else if (style === ContourStyle.Plates) body.add(slab(toShapes(polygons), y, .024, color));
+			else if (style === ContourStyle.Lines) for (const polygon of polygons) for (const ring of polygon) strands.add(ring.map(([a, c]) => [
+				x(a),
+				y,
+				z(c)
+			]), {
+				radius: () => .007,
+				color: () => color
+			});
+			else for (const polygon of polygons) for (const ring of polygon) body.add(this.curtain(ring.map(([a, c]) => [x(a), z(c)]), y, color));
+			if (floorMap) ctx.root.add(slab(toShapes(polygons), -.995, .003, color));
+		});
+		if (style === ContourStyle.Lines) {
+			const geometry = strands.build();
+			const mesh = new Mesh(geometry, this.surface({
+				vertexColors: true,
+				roughness: .5
+			}));
+			body.add(mesh);
+		}
+		ctx.root.add(body);
+		this.emerge(ctx, body);
+		ctx.pick(body, () => ({
+			title: "Contour stack",
+			rows: [["Levels", levels.length], ["Range", `${low.toFixed(2)} to ${high.toFixed(2)}`]]
+		}));
+	}
+	/** Thin wall that hangs from a contour ring down to the floor. */
+	curtain(ring, y, color) {
+		const shape = new Shape(ring.map(([a, b]) => ({
+			x: a,
+			y: -b
+		})));
+		const walls = new ExtrudeGeometry(shape, {
+			depth: Math.max(.01, y - FLOOR),
+			bevelEnabled: false,
+			curveSegments: 1,
+			steps: 1
+		}).rotateX(-Math.PI / 2);
+		const sides = walls.groups[1];
+		if (sides) {
+			walls.setDrawRange(sides.start, sides.count);
+			walls.clearGroups();
+		}
+		const mesh = new Mesh(walls, this.surface({
+			color,
+			transparent: true,
+			opacity: .5,
+			depthWrite: false,
+			roughness: .7
+		}));
+		mesh.position.y = FLOOR;
+		return mesh;
+	}
+	table() {
+		const { data } = this.options;
+		return {
+			columns: [
+				"x",
+				"y",
+				"z"
+			],
+			rows: (data?.z ?? []).flatMap((row, j) => row.map((value, i) => [
+				data.x?.[i],
+				data.y?.[j],
+				value
+			]))
+		};
+	}
+};
+function bounds(values) {
+	return values.reduce(([low, high], value) => [Math.min(low, value), Math.max(high, value)], [Infinity, -Infinity]);
+}
+export { Contour3DStack };