@mstone6969/graph 0.0.0-stage → 0.1.0

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 };

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 };