@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threevolume/CrystalLattice.js

@@ -0,0 +1,282 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { numeric } from "./PointRowsChart.js";
+import { CrystalStructure, LatticeAtoms } from "./volumeEnums.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { CylinderGeometry, IcosahedronGeometry, InstancedMesh, Quaternion, Vector3 } from "three";
+// src/charts/threevolume/CrystalLattice.ts
+var FCC = [
+	[
+		0,
+		0,
+		0
+	],
+	[
+		.5,
+		.5,
+		0
+	],
+	[
+		.5,
+		0,
+		.5
+	],
+	[
+		0,
+		.5,
+		.5
+	]
+];
+var shift = (sites, by, species) => sites.map(([x, y, z]) => [
+	(x + by[0]) % 1,
+	(y + by[1]) % 1,
+	(z + by[2]) % 1,
+	species
+]);
+/** Fractional basis of each conventional cell, with species indices; `hex` marks a hexagonal cell. */
+var BASES = {
+	[CrystalStructure.SimpleCubic]: { sites: [[
+		0,
+		0,
+		0,
+		0
+	]] },
+	[CrystalStructure.BodyCentered]: { sites: [[
+		0,
+		0,
+		0,
+		0
+	], [
+		.5,
+		.5,
+		.5,
+		0
+	]] },
+	[CrystalStructure.FaceCentered]: { sites: shift(FCC, [
+		0,
+		0,
+		0
+	], 0) },
+	[CrystalStructure.Hexagonal]: {
+		sites: [[
+			0,
+			0,
+			0,
+			0
+		], [
+			1 / 3,
+			2 / 3,
+			.5,
+			1
+		]],
+		hex: true
+	},
+	[CrystalStructure.Diamond]: { sites: [...shift(FCC, [
+		0,
+		0,
+		0
+	], 0), ...shift(FCC, [
+		.25,
+		.25,
+		.25
+	], 0)] },
+	[CrystalStructure.RockSalt]: { sites: [...shift(FCC, [
+		0,
+		0,
+		0
+	], 0), ...shift(FCC, [
+		.5,
+		0,
+		0
+	], 1)] },
+	[CrystalStructure.CesiumChloride]: { sites: [[
+		0,
+		0,
+		0,
+		0
+	], [
+		.5,
+		.5,
+		.5,
+		1
+	]] },
+	[CrystalStructure.Perovskite]: { sites: [
+		[
+			0,
+			0,
+			0,
+			0
+		],
+		[
+			.5,
+			.5,
+			.5,
+			1
+		],
+		[
+			.5,
+			.5,
+			0,
+			2
+		],
+		[
+			.5,
+			0,
+			.5,
+			2
+		],
+		[
+			0,
+			.5,
+			.5,
+			2
+		]
+	] },
+	[CrystalStructure.Fluorite]: { sites: [
+		...shift(FCC, [
+			0,
+			0,
+			0
+		], 0),
+		...shift(FCC, [
+			.25,
+			.25,
+			.25
+		], 1),
+		...shift(FCC, [
+			.75,
+			.75,
+			.75
+		], 1)
+	] }
+};
+var UP = new Vector3(0, 1, 0);
+var HEX_C = 1.633;
+/** Periodic crystal structures: for teaching and comparing how atoms pack in cubic, hexagonal and ionic lattices. */
+var CrystalLattice = class extends VolumeScene {
+	static meta = {
+		id: "crystal-lattice",
+		name: "Crystal lattice",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Builds repeating unit cells of a crystal structure from species rows, with bonds and a cell cage.",
+		tags: [
+			"fcc",
+			"bcc",
+			"hcp",
+			"unit cell",
+			"materials",
+			"bravais"
+		],
+		sample: (seed) => SampleData.categories(seed, 1, 3).map((row) => ({
+			species: row.series,
+			radius: row.value
+		})),
+		variants: {
+			lattice: Object.values(CrystalStructure),
+			cells: [
+				2,
+				1,
+				3
+			],
+			bonds: [false, true],
+			atoms: Object.values(LatticeAtoms)
+		}
+	};
+	defaults() {
+		return {
+			species: "species",
+			radius: "radius",
+			lattice: CrystalStructure.FaceCentered,
+			cells: 2,
+			bonds: false,
+			cage: true,
+			atoms: LatticeAtoms.BallStick
+		};
+	}
+	/** Cartesian site list, closed on the far faces so that a block of cells looks complete. */
+	sites() {
+		const { lattice, cells } = this.options;
+		const { sites, hex } = BASES[lattice];
+		const n = Math.max(1, Math.floor(cells)), epsilon = 1e-6, out = [];
+		for (let k = -1; k <= n; k++) for (let j = -1; j <= n; j++) for (let i = -1; i <= n; i++) for (const [x, y, z, species] of sites) {
+			const a = i + x, b = j + y, c = k + z;
+			if (a < -1e-6 || b < -1e-6 || c < -1e-6 || a > n + epsilon || b > n + epsilon || c > n + epsilon) continue;
+			out.push({
+				species,
+				at: hex ? new Vector3(a - b / 2, c * HEX_C, b * Math.sqrt(3) / 2) : new Vector3(a, c, b)
+			});
+		}
+		return out;
+	}
+	build(ctx) {
+		const { data, species, radius, lattice, cage, bonds, atoms } = this.options;
+		this.stage(ctx);
+		const rows = Array.isArray(data) && data.length ? data : [{
+			[species]: "Atom",
+			[radius]: 1
+		}];
+		const sites = this.sites();
+		const box = sites.reduce((all, site) => ({
+			min: all.min.min(site.at),
+			max: all.max.max(site.at)
+		}), {
+			min: new Vector3(Infinity, Infinity, Infinity),
+			max: new Vector3(-Infinity, -Infinity, -Infinity)
+		});
+		const centre = box.min.clone().add(box.max).multiplyScalar(.5);
+		const fit = 1.6 / Math.max(...box.max.clone().sub(box.min).toArray(), 1);
+		const spots = sites.map((site) => site.at.clone().sub(centre).multiplyScalar(fit));
+		const speciesOf = (i) => rows[Math.min(sites[i].species, rows.length - 1)];
+		const nearest = spots.reduce((least, a, i) => Math.min(least, ...spots.slice(i + 1).map((b) => a.distanceTo(b))), Infinity);
+		const sizes = rows.map((row) => Math.max(0, numeric(row[radius]) || 0));
+		const largest = Math.max(...sizes) || 1;
+		const base = nearest * (atoms === LatticeAtoms.Packed ? .5 : .2);
+		const size = (i) => base * (.6 + .4 * (Math.max(0, numeric(speciesOf(i)[radius]) || 0) / largest));
+		const mesh = new InstancedMesh(new IcosahedronGeometry(1, 3), this.surface({ roughness: .28 }), spots.length);
+		mesh.castShadow = true;
+		const label = (i) => String(speciesOf(i)[species] ?? "Atom");
+		spots.forEach((_, i) => mesh.setColorAt(i, ctx.color(ctx.palette.color(label(i)))));
+		this.populate(ctx, mesh, (i, dummy) => {
+			dummy.position.copy(spots[i]);
+			dummy.scale.setScalar(size(i));
+		}, (i) => i / spots.length);
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => ({
+			title: label(i),
+			color: ctx.palette.color(label(i)),
+			rows: [["Structure", lattice]]
+		}));
+		if (bonds) this.rods(ctx, spots, nearest * 1.06, base * .2);
+		if (cage) this.cage(ctx, fit, centre);
+	}
+	rods(ctx, spots, reach, thick) {
+		const pairs = [];
+		spots.forEach((a, i) => {
+			for (let j = i + 1; j < spots.length; j++) if (a.distanceTo(spots[j]) <= reach) pairs.push([a, spots[j]]);
+		});
+		const mesh = new InstancedMesh(new CylinderGeometry(thick, thick, 1, 8), this.surface({
+			color: ctx.color(ctx.theme.axis),
+			roughness: .6
+		}), pairs.length);
+		const heading = new Vector3(), spin = new Quaternion();
+		this.populate(ctx, mesh, (i, dummy) => {
+			const [from, to] = pairs[i];
+			dummy.position.copy(from).lerp(to, .5);
+			dummy.quaternion.copy(spin.setFromUnitVectors(UP, heading.subVectors(to, from).normalize()));
+			dummy.scale.set(1, from.distanceTo(to), 1);
+		}, (i) => i / pairs.length);
+		ctx.root.add(mesh);
+	}
+	/** Edges of every conventional cell. */
+	cage(ctx, fit, centre) {
+		const { lattice, cells } = this.options;
+		const n = Math.max(1, Math.floor(cells)), hex = BASES[lattice].hex;
+		const world = (a, b, c) => (hex ? new Vector3(a - b / 2, c * HEX_C, b * Math.sqrt(3) / 2) : new Vector3(a, c, b)).sub(centre).multiplyScalar(fit).toArray();
+		const lines = [];
+		for (let p = 0; p <= n; p++) for (let q = 0; q <= n; q++) lines.push(...world(0, p, q), ...world(n, p, q), ...world(p, 0, q), ...world(p, n, q), ...world(p, q, 0), ...world(p, q, n));
+		ctx.root.add(this.segments(ctx, lines, ctx.theme.axis, .8));
+	}
+};
+export { CrystalLattice };

package/dist/charts/threevolume/Density3DChart.js

@@ -0,0 +1,212 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { samplePoints3D } from "./PointCloudChart.js";
+import { PointRowsChart } from "./PointRowsChart.js";
+import { Density3DBandwidth, Density3DKernel, DensityDisplay } from "./volumeEnums.js";
+import { VolumeGrid } from "./VolumeGrid.js";
+import { VolumeIsoSurface } from "./VolumeIsoSurface.js";
+import { VolumeSheet } from "./VolumeSheet.js";
+import { deviation } from "d3";
+import { Group, IcosahedronGeometry, InstancedMesh, Mesh, Vector3 } from "three";
+// src/charts/threevolume/Density3DChart.ts
+var KERNELS = {
+	[Density3DKernel.Gaussian]: {
+		reach: 3,
+		at: (d2) => Math.exp(-d2 / 2)
+	},
+	[Density3DKernel.Epanechnikov]: {
+		reach: 1,
+		at: (d2) => Math.max(0, 1 - d2)
+	},
+	[Density3DKernel.Box]: {
+		reach: 1,
+		at: (d2) => d2 <= 1 ? 1 : 0
+	}
+};
+/** Three-dimensional kernel density estimate: for seeing the shape of a dense point cloud that overplots as points. */
+var Density3DChart = class extends PointRowsChart {
+	static meta = {
+		id: "density-3d",
+		name: "3D density",
+		family: ChartFamily.Volumetric,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Estimates a volume of probability density from rows and shows it as shells, voxels or slices.",
+		tags: [
+			"kde",
+			"density",
+			"smoothing",
+			"probability"
+		],
+		sample: (seed) => samplePoints3D(seed, 200, 3),
+		variants: {
+			display: Object.values(DensityDisplay),
+			kernel: Object.values(Density3DKernel),
+			bandwidth: Object.values(Density3DBandwidth),
+			marginals: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			kernel: Density3DKernel.Gaussian,
+			bandwidth: Density3DBandwidth.Scott,
+			display: DensityDisplay.Shells,
+			marginals: true,
+			resolution: 24
+		};
+	}
+	/** Bandwidth in unit-cube coordinates, per axis, from the sample spread and the 3D rule of thumb. */
+	widths(rows, axes) {
+		const factor = {
+			[Density3DBandwidth.Scott]: rows.length ** (-1 / 7),
+			[Density3DBandwidth.Silverman]: (4 / (5 * rows.length)) ** (1 / 7),
+			[Density3DBandwidth.Tight]: .55 * rows.length ** (-1 / 7)
+		}[this.options.bandwidth];
+		return axes.map((axis) => Math.max(.03, factor * (deviation(axis) ?? .2)) * (this.options.kernel === Density3DKernel.Gaussian ? 1 : 2.2));
+	}
+	estimate(rows) {
+		const { resolution, kernel, weight } = this.options;
+		const n = Math.max(4, Math.floor(resolution));
+		const axes = [
+			"x",
+			"y",
+			"z"
+		].map((key) => {
+			const values = rows.map((row) => row[key]);
+			return values.map(this.unit(values));
+		});
+		const widths = this.widths(rows, axes);
+		const { reach, at } = KERNELS[kernel];
+		const cells = new Float32Array(n ** 3);
+		rows.forEach((row, r) => {
+			const mass = weight ? Math.max(0, Number(row.row[weight]) || 0) : 1;
+			const low = axes.map((axis, a) => Math.max(0, Math.floor(((axis[r] - reach * widths[a]) * .86 + .07) * (n - 1))));
+			const high = axes.map((axis, a) => Math.min(n - 1, Math.ceil(((axis[r] + reach * widths[a]) * .86 + .07) * (n - 1))));
+			for (let k = low[2]; k <= high[2]; k++) for (let j = low[1]; j <= high[1]; j++) for (let i = low[0]; i <= high[0]; i++) {
+				const dx = ((i / (n - 1) - .07) / .86 - axes[0][r]) / widths[0], dy = ((j / (n - 1) - .07) / .86 - axes[1][r]) / widths[1], dz = ((k / (n - 1) - .07) / .86 - axes[2][r]) / widths[2];
+				cells[i + j * n + k * n * n] += mass * at(dx * dx + dy * dy + dz * dz);
+			}
+		});
+		return new VolumeGrid([
+			n,
+			n,
+			n
+		], cells);
+	}
+	build(ctx) {
+		const { display, marginals } = this.options;
+		const rows = this.rows();
+		this.rowStage(ctx, rows, .774);
+		if (!rows.length) return;
+		const grid = this.estimate(rows);
+		const tone = this.sequential(ctx);
+		const body = new Group();
+		if (display === DensityDisplay.Shells) this.shells(ctx, grid, body, tone);
+		else if (display === DensityDisplay.Voxels) this.dots(ctx, grid, tone);
+		else this.slices(ctx, grid, body);
+		ctx.root.add(body);
+		this.emerge(ctx, body);
+		if (marginals) this.walls(ctx, grid);
+	}
+	shells(ctx, grid, body, tone) {
+		[
+			.72,
+			.42,
+			.16
+		].forEach((fraction, shell) => {
+			const level = grid.min + grid.span * fraction;
+			const outer = shell > 0;
+			const material = this.surface({
+				color: tone(fraction),
+				transparent: outer,
+				opacity: outer ? .3 : 1,
+				depthWrite: !outer,
+				roughness: .4
+			});
+			const mesh = new Mesh(VolumeIsoSurface.geometry(grid, level), material);
+			mesh.renderOrder = shell;
+			mesh.castShadow = !outer;
+			ctx.pick(mesh, () => ({ title: `${Math.round(fraction * 100)}% of peak density` }));
+			body.add(mesh);
+		});
+	}
+	dots(ctx, grid, tone) {
+		const cells = [];
+		for (let k = 0; k < grid.nz; k += 2) for (let j = 0; j < grid.ny; j += 2) for (let i = 0; i < grid.nx; i += 2) if (grid.unit(grid.at(i, j, k)) > .05) cells.push(new Vector3(i, j, k));
+		const mesh = new InstancedMesh(new IcosahedronGeometry(1, 1), this.surface(), cells.length);
+		mesh.castShadow = true;
+		const unit = cells.map((c) => grid.unit(grid.at(c.x, c.y, c.z)));
+		unit.forEach((value, i) => mesh.setColorAt(i, tone(value)));
+		const pitch = 2 * grid.half[0] / (grid.nx - 1);
+		this.populate(ctx, mesh, (i, dummy) => {
+			const c = cells[i];
+			dummy.position.set(grid.worldAxis(0, c.x), grid.worldAxis(1, c.y), grid.worldAxis(2, c.z));
+			dummy.scale.setScalar(pitch * 1.05 * Math.cbrt(unit[i]));
+		}, (i) => unit[i]);
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => ({
+			title: "Density",
+			rows: [["Share of peak", `${Math.round(unit[i] * 100)}%`]]
+		}));
+	}
+	slices(ctx, grid, body) {
+		const tone = this.sequential(ctx, 0);
+		for (let s = 0; s < 6; s++) {
+			const y = (s + .5) / 6 * 2 * grid.half[1] - grid.half[1];
+			body.add(new Mesh(VolumeSheet.grid(40, 40, (u, v, out) => {
+				const value = grid.unit(grid.sample((u * 2 - 1) * grid.half[0], y, (v * 2 - 1) * grid.half[2]) ?? grid.min);
+				out.x = (u * 2 - 1) * grid.half[0];
+				out.y = y + value * .12;
+				out.z = (v * 2 - 1) * grid.half[2];
+				out.color.copy(tone(value));
+				out.alpha = Math.min(1, value * 2.2);
+			}), this.surface({
+				vertexColors: true,
+				transparent: true,
+				depthWrite: false,
+				roughness: .9
+			})));
+		}
+	}
+	/** Summed density on the floor and both back walls, the classic triptych of 2D marginals. */
+	walls(ctx, grid) {
+		const tone = this.sequential(ctx, 0);
+		const project = (axis) => {
+			const n = grid.nx, sums = new Float32Array(n * n);
+			for (let k = 0; k < n; k++) for (let j = 0; j < n; j++) for (let i = 0; i < n; i++) {
+				const [a, b] = axis === 0 ? [j, k] : axis === 1 ? [i, k] : [i, j];
+				sums[a + b * n] += grid.at(i, j, k);
+			}
+			const peak = sums.reduce((most, value) => Math.max(most, value), 0) || 1;
+			const geometry = VolumeSheet.grid(n - 1, n - 1, (u, v, out) => {
+				const value = sums[Math.round(u * (n - 1)) + Math.round(v * (n - 1)) * n] / peak;
+				const a = (u * 2 - 1) * grid.half[0], b = (v * 2 - 1) * grid.half[0];
+				[out.x, out.y, out.z] = axis === 0 ? [
+					-.99,
+					a,
+					b
+				] : axis === 1 ? [
+					a,
+					-.99,
+					b
+				] : [
+					a,
+					b,
+					-.99
+				];
+				out.color.copy(tone(value));
+				out.alpha = Math.min(.9, value * 1.4);
+			});
+			ctx.root.add(new Mesh(geometry, this.surface({
+				vertexColors: true,
+				transparent: true,
+				depthWrite: false,
+				roughness: 1
+			})));
+		};
+		project(0);
+		project(1);
+		project(2);
+	}
+};
+export { Density3DChart };

package/dist/charts/threevolume/FlowParticles.js

@@ -0,0 +1,119 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { FieldDerivation, FlowEmitter, FlowMark, FlowTrail } from "./volumeEnums.js";
+import { VectorField3DChart } from "./VectorField3DChart.js";
+import { ConeGeometry, IcosahedronGeometry, InstancedMesh, Object3D, Quaternion, Vector3 } from "three";
+// src/charts/threevolume/FlowParticles.ts
+var TRAILS = {
+	[FlowTrail.None]: 0,
+	[FlowTrail.Medium]: 6,
+	[FlowTrail.Long]: 14
+};
+var UP = new Vector3(0, 1, 0);
+/** Particles advected through a field: for showing speed and circulation through motion, with a fading comet tail. */
+var FlowParticles = class extends VectorField3DChart {
+	static meta = {
+		id: "flow-particles",
+		name: "Flow particles",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Volume,
+		description: "Releases particles into a vector field and animates them along it with fading trails.",
+		tags: [
+			"particle advection",
+			"pathlines",
+			"wind",
+			"animation",
+			"comet"
+		],
+		sample: VectorField3DChart.sampleField,
+		variants: {
+			emitter: Object.values(FlowEmitter),
+			trail: Object.values(FlowTrail),
+			mark: Object.values(FlowMark),
+			derivation: Object.values(FieldDerivation)
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			emitter: FlowEmitter.Volume,
+			trail: FlowTrail.Medium,
+			mark: FlowMark.Bead,
+			particles: 220,
+			period: 7
+		};
+	}
+	start(i, count, next, [hx, hy, hz]) {
+		const { emitter } = this.options;
+		const angle = i / count * Math.PI * 2;
+		if (emitter === FlowEmitter.Plane) return [
+			(next() * 2 - 1) * hx * .9,
+			-hy * .75,
+			(next() * 2 - 1) * hz * .9
+		];
+		if (emitter === FlowEmitter.Ring) return [
+			hx * .62 * Math.cos(angle),
+			(next() - .5) * .1,
+			hz * .62 * Math.sin(angle)
+		];
+		if (emitter === FlowEmitter.Core) return [
+			(next() - .5) * .3 * hx,
+			(next() - .5) * .3 * hy,
+			(next() - .5) * .3 * hz
+		];
+		return [
+			(next() * 2 - 1) * hx * .9,
+			(next() * 2 - 1) * hy * .9,
+			(next() * 2 - 1) * hz * .9
+		];
+	}
+	build(ctx) {
+		const { trail, mark, particles, period } = this.options;
+		const field = this.field;
+		this.stage(ctx);
+		if (field.empty) return;
+		const count = Math.max(1, Math.floor(particles));
+		const next = this.random(.61);
+		const paths = Array.from({ length: count }, (_, i) => field.trace(this.start(i, count, next, field.half), 140, .016)).filter((path) => path.length > 8);
+		const beads = TRAILS[trail] + 1;
+		const shape = mark === FlowMark.Dart ? new ConeGeometry(.42, 1.7, 8) : new IcosahedronGeometry(.5, 1);
+		const mesh = new InstancedMesh(shape, this.surface({ roughness: .35 }), paths.length * beads);
+		mesh.castShadow = true;
+		mesh.frustumCulled = false;
+		const tone = this.speedTone(ctx, field);
+		const phase = paths.map((_, p) => p * .61803 % 1);
+		const dummy = new Object3D(), spin = new Quaternion(), heading = new Vector3();
+		const place = (clock) => {
+			paths.forEach((path, p) => {
+				const head = (phase[p] + clock) % 1 * (path.length - 1);
+				for (let b = 0; b < beads; b++) {
+					const at = Math.max(0, head - b * 1.6);
+					const step = Math.floor(at), point = path[step], after = path[Math.min(path.length - 1, step + 1)];
+					const f = at - step;
+					dummy.position.set(point[0] + (after[0] - point[0]) * f, point[1] + (after[1] - point[1]) * f, point[2] + (after[2] - point[2]) * f);
+					heading.set(after[0] - point[0], after[1] - point[1], after[2] - point[2]);
+					if (heading.lengthSq() > 0) dummy.quaternion.copy(spin.setFromUnitVectors(UP, heading.normalize()));
+					const life = Math.sin(Math.PI * (head / (path.length - 1))) ** .5;
+					dummy.scale.setScalar((b ? .052 * (1 - b / beads) : .07) * life);
+					dummy.updateMatrix();
+					mesh.setMatrixAt(p * beads + b, dummy.matrix);
+				}
+			});
+			mesh.instanceMatrix.needsUpdate = true;
+		};
+		paths.forEach((path, p) => {
+			for (let b = 0; b < beads; b++) {
+				const point = path[Math.floor(path.length / 2)];
+				mesh.setColorAt(p * beads + b, tone(field.speed(...point)));
+			}
+		});
+		place(.5);
+		ctx.onFrame((seconds) => place(.5 + seconds / period));
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => ({
+			title: `Particle ${Math.floor(i / beads) + 1}`,
+			rows: [["Path steps", paths[Math.floor(i / beads)].length]]
+		}));
+	}
+};
+export { FlowParticles };