@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threevolume/Orbital3DChart.js

@@ -0,0 +1,188 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { numeric } from "./PointRowsChart.js";
+import { OrbitMarks, OrbitSpacing, OrbitTilt } from "./volumeEnums.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { ROUND_SECTION, VolumeStrands } from "./VolumeStrands.js";
+import { CircleGeometry, IcosahedronGeometry, InstancedMesh, Mesh, RingGeometry, Vector3 } from "three";
+// src/charts/threevolume/Orbital3DChart.ts
+var rad = Math.PI / 180;
+/** Kepler orbits from orbital elements: for comparing the size, shape and tilt of orbits around one primary. */
+var Orbital3DChart = class extends VolumeScene {
+	static meta = {
+		id: "orbital-3d",
+		name: "3D orbits",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Draws elliptical orbits from their Keplerian elements, with bodies moving at the correct relative speed.",
+		tags: [
+			"orbit",
+			"kepler",
+			"satellites",
+			"solar system",
+			"ellipse"
+		],
+		sample: (seed) => SampleData.points(seed, 6, 6).map((row, i) => ({
+			name: String(row.group),
+			axis: +(.4 * 1.75 ** i).toFixed(3),
+			eccentricity: +(+row.size / 80).toFixed(3),
+			inclination: +(+row.x % 24).toFixed(1),
+			node: +(+row.y * 7 % 360).toFixed(1),
+			periapsis: +(+row.x * 11 % 360).toFixed(1),
+			mass: +row.size
+		})),
+		variants: {
+			spacing: Object.values(OrbitSpacing),
+			marks: Object.values(OrbitMarks),
+			tilt: Object.values(OrbitTilt),
+			plane: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			name: "name",
+			axis: "axis",
+			eccentricity: "eccentricity",
+			inclination: "inclination",
+			node: "node",
+			periapsis: "periapsis",
+			mass: "mass",
+			spacing: OrbitSpacing.Log,
+			marks: OrbitMarks.Bodies,
+			tilt: OrbitTilt.Inclined,
+			plane: true
+		};
+	}
+	bodies() {
+		const { data, name, axis, eccentricity, inclination, node, periapsis, mass, spacing, tilt } = this.options;
+		const rows = (Array.isArray(data) ? data : []).filter((row) => numeric(row[axis]) > 0);
+		if (!rows.length) return [];
+		const sizes = rows.map((row) => numeric(row[axis]));
+		const smallest = Math.min(...sizes);
+		const spread = spacing === OrbitSpacing.Log ? (a) => Math.log1p(a / smallest) : spacing === OrbitSpacing.Sqrt ? Math.sqrt : (a) => a;
+		const heaviest = Math.max(...rows.map((row) => Math.max(0, numeric(row[mass]) || 0))) || 1;
+		const eccentric = (row) => Math.max(0, Math.min(.92, numeric(row[eccentricity]) || 0));
+		const widest = Math.max(...rows.map((row, i) => spread(sizes[i]) * (1 + eccentric(row))));
+		return rows.map((row, i) => {
+			const e = eccentric(row);
+			const a = spread(sizes[i]) / widest * .96;
+			const inc = (tilt === OrbitTilt.Coplanar ? 0 : numeric(row[inclination]) || 0) * rad;
+			const big = (numeric(row[node]) || 0) * rad, small = (numeric(row[periapsis]) || 0) * rad;
+			const cos = Math.cos, sin = Math.sin;
+			const p = new Vector3(cos(big) * cos(small) - sin(big) * sin(small) * cos(inc), sin(small) * sin(inc), sin(big) * cos(small) + cos(big) * sin(small) * cos(inc));
+			const q = new Vector3(-cos(big) * sin(small) - sin(big) * cos(small) * cos(inc), cos(small) * sin(inc), -sin(big) * sin(small) + cos(big) * cos(small) * cos(inc));
+			return {
+				row,
+				name: String(row[name] ?? `Body ${i + 1}`),
+				a,
+				e,
+				basis: [p, q],
+				radius: Math.max(.018, .058 * Math.cbrt(Math.max(0, numeric(row[mass]) || 0) / heaviest)),
+				phase: i * 2.39996
+			};
+		});
+	}
+	/** Position at eccentric anomaly `E`. */
+	at(body, E) {
+		const x = body.a * (Math.cos(E) - body.e), y = body.a * Math.sqrt(1 - body.e ** 2) * Math.sin(E);
+		return body.basis[0].clone().multiplyScalar(x).addScaledVector(body.basis[1], y);
+	}
+	/** Eccentric anomaly at mean anomaly `M`, from Kepler's equation by Newton iteration. */
+	anomaly(M, e) {
+		let E = M;
+		for (let i = 0; i < 6; i++) E -= (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
+		return E;
+	}
+	build(ctx) {
+		const { marks, plane } = this.options;
+		const bodies = this.bodies();
+		this.stage(ctx);
+		if (plane) {
+			const disc = new Mesh(new CircleGeometry(1, 72).rotateX(-Math.PI / 2), this.surface({
+				color: ctx.color(ctx.theme.grid),
+				transparent: true,
+				opacity: .45,
+				depthWrite: false,
+				roughness: 1
+			}));
+			ctx.root.add(disc);
+			ctx.root.add(new Mesh(new RingGeometry(.996, 1, 96).rotateX(-Math.PI / 2), this.surface({ color: ctx.color(ctx.theme.axis) })));
+		}
+		const primary = new Mesh(new IcosahedronGeometry(.05, 3), this.surface({
+			color: ctx.color(ctx.theme.inkSecondary),
+			roughness: .4
+		}));
+		primary.castShadow = true;
+		ctx.root.add(primary);
+		if (!bodies.length) return;
+		const orbs = new InstancedMesh(new IcosahedronGeometry(1, 3), this.surface({ roughness: .35 }), bodies.length);
+		orbs.castShadow = true;
+		orbs.frustumCulled = false;
+		bodies.forEach((body, i) => {
+			const color = ctx.color(ctx.palette.color(body.name));
+			orbs.setColorAt(i, color);
+			const loop = Array.from({ length: 145 }, (_, s) => this.at(body, s / 144 * Math.PI * 2).toArray());
+			const geometry = new VolumeStrands(ROUND_SECTION).add(loop, {
+				radius: () => .0062,
+				color: () => color
+			}).build();
+			ctx.root.add(new Mesh(geometry, this.surface({
+				vertexColors: true,
+				roughness: .5
+			})));
+			this.drawOn(ctx, geometry, 1.3);
+			if (marks === OrbitMarks.Sweep) ctx.root.add(this.sweep(ctx, body));
+			if (marks === OrbitMarks.Apsides) {
+				const a = this.at(body, 0), b = this.at(body, Math.PI);
+				ctx.root.add(this.segments(ctx, [...a.toArray(), ...b.toArray()], ctx.theme.axis));
+			}
+		});
+		const dummy = bodies.map((body) => body.phase);
+		const speed = bodies.map((body) => .9 * (bodies[0].a / body.a) ** 1.5);
+		const place = (seconds) => this.populateAt(orbs, bodies, dummy, speed, seconds);
+		place(0);
+		ctx.onFrame(place);
+		ctx.root.add(orbs);
+		ctx.pick(orbs, (i) => {
+			const { row, name } = bodies[i];
+			return {
+				title: name,
+				color: ctx.palette.color(name),
+				rows: [["Semi-major axis", numeric(row[this.options.axis])], ["Eccentricity", bodies[i].e]]
+			};
+		});
+	}
+	populateAt(orbs, bodies, phase, speed, seconds) {
+		const mover = new Mesh();
+		bodies.forEach((body, i) => {
+			mover.position.copy(this.at(body, this.anomaly(phase[i] + seconds * speed[i], body.e)));
+			mover.scale.setScalar(body.radius);
+			mover.updateMatrix();
+			orbs.setMatrixAt(i, mover.matrix);
+		});
+		orbs.instanceMatrix.needsUpdate = true;
+	}
+	/** Equal-time wedge from the primary, the area of Kepler's second law. */
+	sweep(ctx, body) {
+		const span = .9;
+		const steps = 24;
+		const path = Array.from({ length: 25 }, (_, s) => this.at(body, this.anomaly(body.phase + s / steps * span, body.e)));
+		const positions = path.slice(0, -1).flatMap((point, s) => [
+			0,
+			0,
+			0,
+			...point.toArray(),
+			...path[s + 1].toArray()
+		]);
+		const geometry = this.segments(ctx, positions, ctx.theme.axis).geometry;
+		return new Mesh(geometry, this.surface({
+			color: ctx.color(ctx.palette.color(body.name)),
+			transparent: true,
+			opacity: .32,
+			depthWrite: false,
+			roughness: 1
+		}));
+	}
+};
+export { Orbital3DChart };

package/dist/charts/threevolume/PointCloudChart.js

@@ -0,0 +1,171 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { PointRowsChart } from "./PointRowsChart.js";
+import { PointCoordinates, PointEnvelope, PointGuides, PointMark, PointNormalization } from "./volumeEnums.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { ascending } from "d3";
+import { BoxGeometry, BufferGeometry, Float32BufferAttribute, IcosahedronGeometry, InstancedMesh, Mesh, Points, PointsMaterial, SphereGeometry, Vector3 } from "three";
+import { ConvexGeometry } from "three/addons/geometries/ConvexGeometry.js";
+// src/charts/threevolume/PointCloudChart.ts
+/** Rows with a `z` column, built from two independent `SampleData.points` draws. */
+var samplePoints3D = (seed, count, groups) => {
+	const depth = SampleData.points(seed + 11, count, groups);
+	return SampleData.points(seed, count, groups).map((row, i) => ({
+		...row,
+		z: depth[count - 1 - i].y
+	}));
+};
+/** Rows positioned in three dimensions: for spotting clusters, shells and outliers that any 2D projection would collapse. */
+var PointCloudChart = class extends PointRowsChart {
+	static meta = {
+		id: "point-cloud",
+		name: "Point cloud",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Plots rows as points in cartesian, cylindrical or spherical space, with optional cluster envelopes.",
+		tags: [
+			"scatter 3d",
+			"lidar",
+			"cluster",
+			"embedding",
+			"pca"
+		],
+		sample: (seed) => samplePoints3D(seed, 240, 4),
+		variants: {
+			mark: Object.values(PointMark),
+			coordinates: Object.values(PointCoordinates),
+			normalization: Object.values(PointNormalization),
+			envelope: Object.values(PointEnvelope),
+			guides: Object.values(PointGuides)
+		},
+		valid: (values) => values.mark !== PointMark.Sprite || values.guides !== PointGuides.Drops
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			mark: PointMark.Sphere,
+			coordinates: PointCoordinates.Cartesian,
+			normalization: PointNormalization.Range,
+			envelope: PointEnvelope.None,
+			guides: PointGuides.None
+		};
+	}
+	normalise(values) {
+		if (this.options.normalization === PointNormalization.Range) return values.map(this.unit(values));
+		const order = values.map((_, i) => i).sort((a, b) => ascending(values[a], values[b]));
+		const rank = new Array(values.length);
+		order.forEach((row, position) => {
+			rank[row] = position / Math.max(1, values.length - 1);
+		});
+		return rank;
+	}
+	locate(a, b, c) {
+		const { coordinates } = this.options;
+		if (coordinates === PointCoordinates.Cylindrical) {
+			const radius = .25 + .65 * a, angle = b * Math.PI * 2;
+			return new Vector3(radius * Math.cos(angle), c * 1.8 - .9, radius * Math.sin(angle));
+		}
+		if (coordinates === PointCoordinates.Spherical) {
+			const radius = .3 + .6 * c, theta = a * Math.PI * 2, phi = .12 + b * (Math.PI - .24);
+			return new Vector3(radius * Math.sin(phi) * Math.cos(theta), radius * Math.cos(phi), radius * Math.sin(phi) * Math.sin(theta));
+		}
+		return new Vector3(a * 1.8 - .9, b * 1.8 - .9, c * 1.8 - .9);
+	}
+	build(ctx) {
+		const { mark, envelope, guides, coordinates, normalization } = this.options;
+		const rows = this.rows();
+		this.rowStage(ctx, coordinates === PointCoordinates.Cartesian && normalization === PointNormalization.Range ? rows : []);
+		if (!rows.length) return;
+		const ax = this.normalise(rows.map((row) => row.x)), ay = this.normalise(rows.map((row) => row.y)), az = this.normalise(rows.map((row) => row.z));
+		const spots = rows.map((_, i) => this.locate(ax[i], ay[i], az[i]));
+		const tint = rows.map((row) => ctx.color(ctx.palette.color(row.group)));
+		const radius = Math.max(.014, .036 - rows.length / 6e4);
+		if (mark === PointMark.Sprite) {
+			const geometry = new BufferGeometry();
+			geometry.setAttribute("position", new Float32BufferAttribute(spots.flatMap((spot) => spot.toArray()), 3));
+			geometry.setAttribute("color", new Float32BufferAttribute(tint.flatMap((color) => color.toArray()), 3));
+			const cloud = new Points(geometry, new PointsMaterial({
+				size: radius * 2.2,
+				vertexColors: true,
+				map: VolumeScene.roundSprite,
+				alphaTest: .4,
+				transparent: true
+			}));
+			ctx.root.add(cloud);
+			this.drawOn(ctx, geometry);
+		} else {
+			const shape = mark === PointMark.Cube ? new BoxGeometry(1.6, 1.6, 1.6) : new IcosahedronGeometry(1, 2);
+			const mesh = new InstancedMesh(shape, this.surface({ roughness: .4 }), rows.length);
+			mesh.castShadow = true;
+			tint.forEach((color, i) => mesh.setColorAt(i, color));
+			this.populate(ctx, mesh, (i, dummy) => {
+				dummy.position.copy(spots[i]);
+				dummy.scale.setScalar(radius);
+			}, (i) => i / rows.length);
+			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]
+				]
+			}));
+		}
+		if (guides === PointGuides.Drops) ctx.root.add(this.segments(ctx, spots.flatMap((p) => [
+			p.x,
+			p.y,
+			p.z,
+			p.x,
+			-1,
+			p.z
+		]), ctx.theme.axis, .55));
+		if (guides === PointGuides.Shadows) this.shadows(ctx, spots);
+		if (envelope !== PointEnvelope.None) this.envelopes(ctx, rows.map((row) => row.group), spots);
+	}
+	/** Flattened copies of the cloud on the floor and both back walls. */
+	shadows(ctx, spots) {
+		const flat = spots.flatMap((p) => [
+			p.x,
+			-.995,
+			p.z,
+			-.995,
+			p.y,
+			p.z,
+			p.x,
+			p.y,
+			-.995
+		]);
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(flat, 3));
+		ctx.root.add(new Points(geometry, new PointsMaterial({
+			size: .03,
+			color: ctx.color(ctx.theme.axis),
+			map: VolumeScene.roundSprite,
+			alphaTest: .4,
+			transparent: true
+		})));
+	}
+	envelopes(ctx, groups, spots) {
+		for (const group of new Set(groups)) {
+			const members = spots.filter((_, i) => groups[i] === group);
+			if (members.length < 5) continue;
+			const material = this.surface({
+				color: ctx.color(ctx.palette.color(group)),
+				transparent: true,
+				opacity: .16,
+				depthWrite: false
+			});
+			if (this.options.envelope === PointEnvelope.Hull) {
+				ctx.root.add(new Mesh(new ConvexGeometry(members), material));
+				continue;
+			}
+			const shell = new Mesh(new SphereGeometry(1, 32, 22), material);
+			shell.applyMatrix4(this.ellipsoid(members));
+			ctx.root.add(shell);
+		}
+	}
+};
+export { PointCloudChart, samplePoints3D };

package/dist/charts/threevolume/PointRowsChart.js

@@ -0,0 +1,137 @@
+import { VolumeScene } from "./VolumeScene.js";
+import { extent } from "d3";
+import { Matrix4, Vector3 } from "three";
+// src/charts/threevolume/PointRowsChart.ts
+var numeric = (cell) => cell instanceof Date ? +cell : cell === null || cell === void 0 || cell === "" ? NaN : Number(cell);
+/** Base for charts of `{ x, y, z }` rows: drops incomplete rows and supplies the shared numeric helpers. */
+var PointRowsChart = class extends VolumeScene {
+	defaults() {
+		return {
+			x: "x",
+			y: "y",
+			z: "z",
+			group: "group"
+		};
+	}
+	rows() {
+		const { data, x, y, z, group } = this.options;
+		if (!Array.isArray(data)) return [];
+		return data.flatMap((row) => {
+			const point = {
+				row,
+				x: numeric(row[x]),
+				y: numeric(row[y]),
+				z: numeric(row[z]),
+				group: String(row[group] ?? "All")
+			};
+			return Number.isFinite(point.x + point.y + point.z) ? [point] : [];
+		});
+	}
+	/** Maps values to 0..1; a constant column lands in the middle. */
+	unit(values) {
+		const [low = 0, high = 1] = extent(values);
+		return (value) => high > low ? (value - low) / (high - low) : .5;
+	}
+	/** `reach` is the world half-extent the data was fitted to, so ticks land on true positions. */
+	rowStage(ctx, points, reach = .9) {
+		const { x, y, z } = this.options;
+		const axis = (name, key) => ({
+			name,
+			domain: extent(points, (point) => point[key]),
+			range: [-reach, reach]
+		});
+		this.stage(ctx, points.length > 1 ? {
+			x: axis(x, "x"),
+			y: axis(y, "y"),
+			z: axis(z, "z")
+		} : {});
+	}
+	/** Principal axes of a point set, as a transform that maps the unit sphere to its 2σ ellipsoid. */
+	ellipsoid(points) {
+		const mean = points.reduce((sum, point) => sum.add(point), new Vector3()).divideScalar(points.length || 1);
+		const c = [
+			[
+				0,
+				0,
+				0
+			],
+			[
+				0,
+				0,
+				0
+			],
+			[
+				0,
+				0,
+				0
+			]
+		];
+		for (const point of points) {
+			const d = [
+				point.x - mean.x,
+				point.y - mean.y,
+				point.z - mean.z
+			];
+			for (let a = 0; a < 3; a++) for (let b = 0; b < 3; b++) c[a][b] += d[a] * d[b] / (points.length || 1);
+		}
+		const { values, vectors } = symmetricEigen(c);
+		const scale = (i) => 2 * Math.sqrt(Math.max(1e-5, values[i]));
+		const axis = (i) => new Vector3(vectors[0][i], vectors[1][i], vectors[2][i]).multiplyScalar(scale(i));
+		return new Matrix4().makeBasis(axis(0), axis(1), axis(2)).setPosition(mean);
+	}
+};
+/** Jacobi eigenvalue iteration for a 3×3 symmetric matrix; columns of `vectors` are eigenvectors. */
+function symmetricEigen(input) {
+	const a = input.map((row) => [...row]);
+	const v = [
+		[
+			1,
+			0,
+			0
+		],
+		[
+			0,
+			1,
+			0
+		],
+		[
+			0,
+			0,
+			1
+		]
+	];
+	for (let sweep = 0; sweep < 12; sweep++) for (const [p, q] of [
+		[0, 1],
+		[0, 2],
+		[1, 2]
+	]) {
+		if (Math.abs(a[p][q]) < 1e-10) continue;
+		const theta = (a[q][q] - a[p][p]) / (2 * a[p][q]);
+		const t = Math.sign(theta || 1) / (Math.abs(theta) + Math.sqrt(theta * theta + 1));
+		const c = 1 / Math.sqrt(t * t + 1), s = t * c;
+		for (let k = 0; k < 3; k++) {
+			const x = a[k][p], y = a[k][q];
+			a[k][p] = c * x - s * y;
+			a[k][q] = s * x + c * y;
+		}
+		for (let k = 0; k < 3; k++) {
+			const x = a[p][k], y = a[q][k];
+			a[p][k] = c * x - s * y;
+			a[q][k] = s * x + c * y;
+		}
+		for (let k = 0; k < 3; k++) {
+			const x = v[k][p], y = v[k][q];
+			v[k][p] = c * x - s * y;
+			v[k][q] = s * x + c * y;
+		}
+	}
+	return {
+		values: [
+			a[0][0],
+			a[1][1],
+			a[2][2]
+		],
+		vectors: v
+	};
+}
+export { PointRowsChart, numeric };

package/dist/charts/threevolume/Slab3DChart.js

@@ -0,0 +1,145 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { SlabRelief, VolumeAggregate, VolumeAxis } from "./volumeEnums.js";
+import { VolumeGridChart } from "./VolumeGridChart.js";
+import { extent } from "d3";
+import { BoxGeometry, InstancedMesh } from "three";
+// src/charts/threevolume/Slab3DChart.ts
+var AXIS_INDEX = {
+	[VolumeAxis.X]: 0,
+	[VolumeAxis.Y]: 1,
+	[VolumeAxis.Z]: 2
+};
+/** Thick-slab projections of a volume: for summarising each section at once, as in maximum-intensity imaging. */
+var Slab3DChart = class extends VolumeGridChart {
+	static meta = {
+		id: "slab-3d",
+		name: "3D slabs",
+		family: ChartFamily.Volumetric,
+		dimension: Dimension.Three,
+		shape: DataShape.Volume,
+		description: "Divides a volume into thick sections and draws each as a tile map of its mean, maximum or minimum.",
+		tags: [
+			"mip",
+			"projection",
+			"slab",
+			"stack",
+			"tomography"
+		],
+		sample: (seed) => SampleData.volume(seed, 28),
+		variants: {
+			axis: [
+				VolumeAxis.Y,
+				VolumeAxis.X,
+				VolumeAxis.Z
+			],
+			slabs: [
+				4,
+				3,
+				6
+			],
+			aggregate: [
+				VolumeAggregate.Max,
+				VolumeAggregate.Mean,
+				VolumeAggregate.Min
+			],
+			relief: Object.values(SlabRelief),
+			exploded: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			axis: VolumeAxis.Y,
+			slabs: 4,
+			aggregate: VolumeAggregate.Max,
+			relief: SlabRelief.Rising,
+			exploded: true,
+			resolution: 16
+		};
+	}
+	build(ctx) {
+		const { axis, slabs, aggregate, relief, exploded, resolution } = this.options;
+		const grid = this.grid;
+		this.volumeStage(ctx, grid);
+		if (grid.empty) return;
+		const main = AXIS_INDEX[axis];
+		const [a, b] = [
+			0,
+			1,
+			2
+		].filter((other) => other !== main);
+		const sizes = [
+			grid.nx,
+			grid.ny,
+			grid.nz
+		];
+		const count = Math.max(1, Math.min(Math.floor(slabs), sizes[main]));
+		const tiles = Math.max(2, Math.floor(resolution));
+		const merge = aggregate === VolumeAggregate.Max ? Math.max : aggregate === VolumeAggregate.Min ? Math.min : (x, y) => x + y;
+		const seed = aggregate === VolumeAggregate.Max ? -Infinity : aggregate === VolumeAggregate.Min ? Infinity : 0;
+		const fields = Array.from({ length: count }, () => new Float32Array(tiles * tiles).fill(seed));
+		const hits = Array.from({ length: count }, () => new Uint32Array(tiles * tiles));
+		const cell = [
+			0,
+			0,
+			0
+		];
+		for (cell[2] = 0; cell[2] < grid.nz; cell[2]++) for (cell[1] = 0; cell[1] < grid.ny; cell[1]++) for (cell[0] = 0; cell[0] < grid.nx; cell[0]++) {
+			const slab = Math.min(count - 1, Math.floor(cell[main] / sizes[main] * count));
+			const tile = Math.floor(cell[a] / sizes[a] * tiles) + Math.floor(cell[b] / sizes[b] * tiles) * tiles;
+			fields[slab][tile] = merge(fields[slab][tile], grid.at(cell[0], cell[1], cell[2]));
+			hits[slab][tile]++;
+		}
+		if (aggregate === VolumeAggregate.Mean) fields.forEach((field, s) => field.forEach((value, t) => {
+			field[t] = value / (hits[s][t] || 1);
+		}));
+		const all = fields.flatMap((field) => [...field].filter(Number.isFinite));
+		const [low = 0, high = 1] = extent(all);
+		const span = high - low || 1;
+		const tone = this.sequential(ctx);
+		const items = [];
+		fields.forEach((field, slab) => field.forEach((value, t) => {
+			const unit = (value - low) / span;
+			if (Number.isFinite(value) && unit > .035) items.push({
+				slab,
+				u: t % tiles,
+				v: Math.floor(t / tiles),
+				value,
+				unit
+			});
+		}));
+		const mesh = new InstancedMesh(new BoxGeometry(1, 1, 1), this.surface({ roughness: .65 }), items.length);
+		mesh.castShadow = true;
+		items.forEach((item, i) => mesh.setColorAt(i, tone(item.unit)));
+		const reach = grid.half[main];
+		const pace = reach * 2 / count * (exploded ? 1 : .8);
+		const pitch = 2 * Math.max(grid.half[a], grid.half[b]) / tiles;
+		const depth = reach * 2 / count * .72;
+		this.populate(ctx, mesh, (i, dummy) => {
+			const item = items[i];
+			const spot = [
+				0,
+				0,
+				0
+			], scale = [
+				pitch * .9,
+				pitch * .9,
+				pitch * .9
+			];
+			const tall = depth * (.1 + .9 * item.unit);
+			const middle = -reach + (item.slab + .5) * pace;
+			spot[a] = ((item.u + .5) / tiles * 2 - 1) * grid.half[a];
+			spot[b] = ((item.v + .5) / tiles * 2 - 1) * grid.half[b];
+			spot[main] = relief === SlabRelief.Rising ? middle - depth / 2 + tall / 2 : middle;
+			scale[main] = tall;
+			dummy.position.set(spot[0], spot[1], spot[2]);
+			dummy.scale.set(scale[0], scale[1], scale[2]);
+		}, (i) => items[i].slab / count);
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => ({
+			title: `Slab ${items[i].slab + 1} of ${count}`,
+			rows: [[aggregate, +items[i].value.toFixed(3)]]
+		}));
+	}
+};
+export { Slab3DChart };