@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/threevolume/Helix3DChart.js

@@ -0,0 +1,142 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { numeric } from "./PointRowsChart.js";
+import { HelixEncoding, HelixHand, HelixShape } from "./volumeEnums.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { RIBBON_SECTION, ROUND_SECTION, VolumeStrands } from "./VolumeStrands.js";
+import { extent, group } from "d3";
+import { BoxGeometry, CylinderGeometry, InstancedMesh, Mesh, Quaternion, Vector3 } from "three";
+// src/charts/threevolume/Helix3DChart.ts
+var UP = new Vector3(0, 1, 0);
+/** A time series wound around an axis: for exposing a periodic rhythm, with one turn per cycle so like phases line up. */
+var Helix3DChart = class extends VolumeScene {
+	static meta = {
+		id: "helix-3d",
+		name: "3D helix",
+		family: ChartFamily.Temporal,
+		dimension: Dimension.Three,
+		shape: DataShape.Table,
+		description: "Winds an ordered series around a vertical axis so that each turn covers one cycle.",
+		tags: [
+			"spiral",
+			"periodic",
+			"seasonal",
+			"double helix",
+			"time"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 84, 2),
+		variants: {
+			shape: Object.values(HelixShape),
+			encoding: Object.values(HelixEncoding),
+			hand: Object.values(HelixHand),
+			cycle: [
+				14,
+				7,
+				28
+			],
+			rungs: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			x: "date",
+			y: "value",
+			series: "series",
+			cycle: 14,
+			shape: HelixShape.Cylinder,
+			encoding: HelixEncoding.Radius,
+			hand: HelixHand.Right,
+			rungs: false
+		};
+	}
+	spot(fraction, angle, radial) {
+		const { shape, hand } = this.options;
+		const turn = (hand === HelixHand.Left ? -1 : 1) * angle;
+		if (shape === HelixShape.Sphere) {
+			const polar = .1 + fraction * (Math.PI - .2), radius = .45 + radial * .45;
+			return new Vector3(radius * Math.sin(polar) * Math.cos(turn), radius * Math.cos(polar), radius * Math.sin(polar) * Math.sin(turn));
+		}
+		const radius = (.3 + radial * .55) * (shape === HelixShape.Cone ? 1.05 - fraction * .85 : 1);
+		return new Vector3(radius * Math.cos(turn), fraction * 1.8 - .9, radius * Math.sin(turn));
+	}
+	build(ctx) {
+		const { data, x, y, series, cycle, encoding, rungs } = this.options;
+		this.stage(ctx);
+		const rows = (Array.isArray(data) ? data : []).filter((row) => Number.isFinite(numeric(row[y])));
+		if (!rows.length) return;
+		const [low = 0, high = 1] = extent(rows, (row) => numeric(row[y]));
+		const unit = (row) => high > low ? (numeric(row[y]) - low) / (high - low) : .5;
+		const groups = [...group(rows, (row) => String(row[series] ?? "All"))].map(([name, members]) => ({
+			name,
+			members: [...members].sort((a, b) => numeric(a[x]) - numeric(b[x]))
+		}));
+		const position = (members, at, g) => {
+			const whole = Math.min(members.length - 1, Math.floor(at)), next = Math.min(members.length - 1, whole + 1);
+			const value = unit(members[whole]) + (unit(members[next]) - unit(members[whole])) * (at - whole);
+			return this.spot(members.length > 1 ? at / (members.length - 1) : .5, at / cycle * Math.PI * 2 + g / groups.length * Math.PI * 2, encoding === HelixEncoding.Radius ? value : .5);
+		};
+		groups.forEach(({ name, members }, g) => {
+			const color = ctx.color(ctx.palette.color(name));
+			const flat = encoding === HelixEncoding.Width;
+			const steps = (members.length - 1) * Math.max(1, Math.ceil(48 / cycle));
+			const path = Array.from({ length: steps + 1 }, (_, s) => position(members, s / (steps || 1) * (members.length - 1), g).toArray());
+			const geometry = new VolumeStrands(flat ? RIBBON_SECTION : ROUND_SECTION).add(path, {
+				radius: (_, f) => flat ? .02 + .07 * unit(members[Math.round(f * (members.length - 1))]) : .016,
+				color: () => color
+			}).build();
+			const mesh = new Mesh(geometry, this.surface({
+				vertexColors: true,
+				roughness: .4
+			}));
+			mesh.castShadow = true;
+			ctx.root.add(mesh);
+			ctx.pick(mesh, () => ({
+				title: name,
+				color: ctx.palette.color(name),
+				rows: [["Rows", members.length]]
+			}));
+			this.drawOn(ctx, geometry);
+			if (encoding === HelixEncoding.Spikes) this.spikes(ctx, members, members.map((_, i) => position(members, i, g)), unit, ctx.palette.color(name));
+		});
+		if (rungs && groups.length > 1) this.ladder(ctx, groups[0].members, groups[1].members, position);
+	}
+	spikes(ctx, members, spots, unit, color) {
+		const mesh = new InstancedMesh(new BoxGeometry(.022, 1, .022), this.surface({
+			color: ctx.color(color),
+			roughness: .5
+		}), members.length);
+		mesh.castShadow = true;
+		const heading = new Vector3(), spin = new Quaternion();
+		this.populate(ctx, mesh, (i, dummy) => {
+			const spot = spots[i];
+			const length = .04 + unit(members[i]) * .3;
+			heading.set(spot.x, 0, spot.z).normalize();
+			dummy.position.copy(spot).addScaledVector(heading, length / 2);
+			dummy.quaternion.copy(spin.setFromUnitVectors(UP, heading));
+			dummy.scale.set(1, length, 1);
+		}, (i) => i / members.length);
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => ({
+			title: String(members[i][this.options.series] ?? ""),
+			color,
+			rows: [[this.options.y, numeric(members[i][this.options.y])]]
+		}));
+	}
+	ladder(ctx, a, b, position) {
+		const count = Math.min(a.length, b.length);
+		const pairs = Array.from({ length: Math.ceil(count / 2) }, (_, i) => [position(a, i * 2, 0), position(b, i * 2, 1)]);
+		const mesh = new InstancedMesh(new CylinderGeometry(.006, .006, 1, 6), this.surface({
+			color: ctx.color(ctx.theme.axis),
+			roughness: .7
+		}), 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);
+	}
+};
+export { Helix3DChart };

package/dist/charts/threevolume/IsosurfaceChart.js

@@ -0,0 +1,78 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IsoAlgorithm, IsoThreshold, VolumeCut } from "./volumeEnums.js";
+import { VolumeGridChart } from "./VolumeGridChart.js";
+import { VolumeIsoSurface } from "./VolumeIsoSurface.js";
+import { Group, Mesh } from "three";
+// src/charts/threevolume/IsosurfaceChart.ts
+/** Solid level sets of a scalar volume: for showing where a field crosses a value, as in CT, MRI or simulation data. */
+var IsosurfaceChart = class extends VolumeGridChart {
+	static meta = {
+		id: "isosurface",
+		name: "Isosurface",
+		family: ChartFamily.Volumetric,
+		dimension: Dimension.Three,
+		shape: DataShape.Volume,
+		description: "Extracts surfaces of constant value from a scalar volume using marching cubes or surface nets.",
+		tags: [
+			"marching cubes",
+			"level set",
+			"surface nets",
+			"volume",
+			"scalar field"
+		],
+		sample: (seed) => SampleData.volume(seed, 28),
+		variants: {
+			shells: [
+				2,
+				1,
+				3
+			],
+			cut: Object.values(VolumeCut),
+			threshold: Object.values(IsoThreshold),
+			algorithm: Object.values(IsoAlgorithm)
+		}
+	};
+	defaults() {
+		return {
+			shells: 2,
+			cut: VolumeCut.None,
+			threshold: IsoThreshold.Otsu,
+			algorithm: IsoAlgorithm.MarchingCubes
+		};
+	}
+	build(ctx) {
+		const { level, shells, cut, threshold, algorithm } = this.options;
+		const source = this.grid;
+		this.volumeStage(ctx, source);
+		if (source.empty) return;
+		const grid = source.masked(cut);
+		const base = level ?? source.threshold(threshold);
+		const count = Math.max(1, Math.floor(shells));
+		const tone = this.sequential(ctx);
+		const body = new Group();
+		for (let shell = count - 1; shell >= 0; shell--) {
+			const at = base + (source.max - base) * shell / (count + .5);
+			const outer = shell < count - 1;
+			const material = this.surface({
+				color: tone(source.unit(at)),
+				roughness: .42,
+				transparent: outer,
+				opacity: outer ? .34 : 1,
+				depthWrite: !outer
+			});
+			const mesh = new Mesh(VolumeIsoSurface.geometry(grid, at, algorithm), material);
+			mesh.castShadow = !outer;
+			mesh.renderOrder = count - shell;
+			ctx.pick(mesh, () => ({
+				title: "Isosurface",
+				color: `#${material.color.getHexString()}`,
+				rows: [["Level", +at.toFixed(3)]]
+			}));
+			body.add(mesh);
+		}
+		ctx.root.add(body);
+		this.emerge(ctx, body);
+	}
+};
+export { IsosurfaceChart };

package/dist/charts/threevolume/LorenzAttractor.js

@@ -0,0 +1,322 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { numeric } from "./PointRowsChart.js";
+import { AttractorProjection, ChaoticSystem, StrandStyle } from "./volumeEnums.js";
+import { RIBBON_SECTION, THIN_SECTION, VolumeStrands } from "./VolumeStrands.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { max } from "d3";
+import { BufferGeometry, Float32BufferAttribute, Mesh, Points, PointsMaterial } from "three";
+// src/charts/threevolume/LorenzAttractor.ts
+var SYSTEMS = {
+	[ChaoticSystem.Lorenz]: {
+		start: [
+			1,
+			1,
+			20
+		],
+		parameters: [
+			10,
+			28,
+			8 / 3
+		],
+		dt: .006,
+		settle: 400,
+		flow: (x, y, z, [s, r, b]) => [
+			s * (y - x),
+			x * (r - z) - y,
+			x * y - b * z
+		]
+	},
+	[ChaoticSystem.Rossler]: {
+		start: [
+			1,
+			1,
+			1
+		],
+		parameters: [
+			.2,
+			.2,
+			5.7
+		],
+		dt: .02,
+		settle: 3e3,
+		flow: (x, y, z, [a, b, c]) => [
+			-y - z,
+			x + a * y,
+			b + z * (x - c)
+		]
+	},
+	[ChaoticSystem.Thomas]: {
+		start: [
+			1,
+			0,
+			.5
+		],
+		parameters: [.19],
+		dt: .06,
+		settle: 2e3,
+		flow: (x, y, z, [b]) => [
+			Math.sin(y) - b * x,
+			Math.sin(z) - b * y,
+			Math.sin(x) - b * z
+		]
+	},
+	[ChaoticSystem.Aizawa]: {
+		start: [
+			.1,
+			0,
+			0
+		],
+		parameters: [
+			.95,
+			.7,
+			.6,
+			3.5,
+			.25,
+			.1
+		],
+		dt: .012,
+		settle: 1500,
+		flow: (x, y, z, [a, b, c, d, e, f]) => [
+			(z - b) * x - d * y,
+			d * x + (z - b) * y,
+			c + a * z - z ** 3 / 3 - (x * x + y * y) * (1 + e * z) + f * z * x ** 3
+		]
+	},
+	[ChaoticSystem.Halvorsen]: {
+		start: [
+			-1.48,
+			-1.51,
+			2.04
+		],
+		parameters: [1.89],
+		dt: .006,
+		settle: 800,
+		flow: (x, y, z, [a]) => [
+			-a * x - 4 * y - 4 * z - y * y,
+			-a * y - 4 * z - 4 * x - z * z,
+			-a * z - 4 * x - 4 * y - x * x
+		]
+	},
+	[ChaoticSystem.Chen]: {
+		start: [
+			-3,
+			2,
+			20
+		],
+		parameters: [
+			35,
+			3,
+			28
+		],
+		dt: .003,
+		settle: 1500,
+		flow: (x, y, z, [a, b, c]) => [
+			a * (y - x),
+			(c - a) * x - x * z + c * y,
+			x * y - b * z
+		]
+	},
+	[ChaoticSystem.ChenLee]: {
+		start: [
+			1,
+			1,
+			1
+		],
+		parameters: [
+			5,
+			-10,
+			-3.8
+		],
+		dt: .005,
+		settle: 1500,
+		flow: (x, y, z, [a, b, c]) => [
+			a * x - y * z,
+			b * y + x * z,
+			c * z + x * y / 3
+		]
+	},
+	[ChaoticSystem.Dadras]: {
+		start: [
+			1.1,
+			2.1,
+			-2
+		],
+		parameters: [
+			3,
+			2.7,
+			1.7,
+			2,
+			9
+		],
+		dt: .006,
+		settle: 1500,
+		flow: (x, y, z, [a, b, c, d, e]) => [
+			y - a * x + b * y * z,
+			c * y - x * z + z,
+			d * x * y - e * z
+		]
+	}
+};
+/** Chaotic strange attractors: for showing bounded, never-repeating dynamics and sensitivity to starting conditions. */
+var LorenzAttractor = class extends VolumeScene {
+	static meta = {
+		id: "lorenz-attractor",
+		name: "Strange attractor",
+		family: ChartFamily.Mathematical,
+		dimension: Dimension.Three,
+		shape: DataShape.Function,
+		description: "Integrates a chaotic system with RK4 and draws the attractor, from Lorenz butterfly to Thomas and Aizawa.",
+		tags: [
+			"chaos",
+			"butterfly",
+			"dynamical system",
+			"phase space",
+			"rossler",
+			"ode"
+		],
+		sample: (seed) => SampleData.points(seed, 3, 3).map((row, i) => ({
+			run: `Run ${i + 1}`,
+			x: +row.x / 2e3,
+			y: +row.y / 2e3,
+			z: +row.size / 2e3
+		})),
+		variants: {
+			system: Object.values(ChaoticSystem),
+			style: Object.values(StrandStyle),
+			projection: Object.values(AttractorProjection),
+			trajectories: [1, 3]
+		}
+	};
+	defaults() {
+		return {
+			x: "x",
+			y: "y",
+			z: "z",
+			system: ChaoticSystem.Lorenz,
+			style: StrandStyle.Tube,
+			projection: AttractorProjection.None,
+			trajectories: 1,
+			steps: 5e3
+		};
+	}
+	integrate(row) {
+		const { system, parameters, steps, x, y, z } = this.options;
+		const { start, parameters: classic, dt, settle, flow } = SYSTEMS[system];
+		const p = parameters ?? classic;
+		const offset = [
+			x,
+			y,
+			z
+		].map((key) => row ? numeric(row[key]) || 0 : 0);
+		let a = start[0] + offset[0], b = start[1] + offset[1], c = start[2] + offset[2];
+		const path = [];
+		for (let i = 0; i < settle + steps; i++) {
+			const k1 = flow(a, b, c, p);
+			const k2 = flow(a + dt / 2 * k1[0], b + dt / 2 * k1[1], c + dt / 2 * k1[2], p);
+			const k3 = flow(a + dt / 2 * k2[0], b + dt / 2 * k2[1], c + dt / 2 * k2[2], p);
+			const k4 = flow(a + dt * k3[0], b + dt * k3[1], c + dt * k3[2], p);
+			a += dt / 6 * (k1[0] + 2 * k2[0] + 2 * k3[0] + k4[0]);
+			b += dt / 6 * (k1[1] + 2 * k2[1] + 2 * k3[1] + k4[1]);
+			c += dt / 6 * (k1[2] + 2 * k2[2] + 2 * k3[2] + k4[2]);
+			if (!Number.isFinite(a + b + c)) break;
+			if (i >= settle) path.push([
+				a,
+				b,
+				c
+			]);
+		}
+		return path;
+	}
+	build(ctx) {
+		const { data, style, trajectories, projection } = this.options;
+		this.stage(ctx);
+		const rows = Array.isArray(data) ? data : [];
+		const paths = (rows.length ? rows.slice(0, Math.max(1, Math.floor(trajectories))) : [void 0]).map((row) => this.integrate(row)).filter((path) => path.length > 1);
+		const all = paths.flat();
+		if (!all.length) return;
+		const low = [
+			0,
+			1,
+			2
+		].map((a) => all.reduce((m, p) => Math.min(m, p[a]), Infinity));
+		const high = [
+			0,
+			1,
+			2
+		].map((a) => all.reduce((m, p) => Math.max(m, p[a]), -Infinity));
+		const scale = 1.76 / (Math.max(high[0] - low[0], high[1] - low[1], high[2] - low[2]) || 1);
+		const fit = (p) => [
+			(p[0] - (low[0] + high[0]) / 2) * scale,
+			(p[2] - (low[2] + high[2]) / 2) * scale,
+			((low[1] + high[1]) / 2 - p[1]) * scale
+		];
+		const tone = this.sequential(ctx, .3);
+		const single = paths.length === 1;
+		paths.forEach((path, r) => {
+			const name = String(rows[r]?.run ?? `Run ${r + 1}`);
+			const points = path.map(fit);
+			const speed = points.map((p, i) => Math.hypot(...p.map((v, a) => v - points[Math.min(points.length - 1, i + 1)][a])));
+			const peak = max(speed) || 1;
+			const identity = single ? null : ctx.color(ctx.palette.color(name));
+			const paint = (i) => identity ?? tone(speed[i] / peak);
+			if (style === StrandStyle.Thread) this.dust(ctx, points, paint);
+			else this.tube(ctx, points, paint, style === StrandStyle.Ribbon, name);
+			if (projection !== AttractorProjection.None) this.shadow(ctx, points, projection);
+		});
+	}
+	tube(ctx, points, paint, flat, name) {
+		const geometry = new VolumeStrands(flat ? RIBBON_SECTION : THIN_SECTION).add(points, {
+			radius: () => flat ? .012 : .0058,
+			color: (i) => paint(i)
+		}).build();
+		const mesh = new Mesh(geometry, this.surface({
+			vertexColors: true,
+			roughness: .4
+		}));
+		ctx.root.add(mesh);
+		ctx.pick(mesh, () => ({
+			title: name,
+			rows: [["Steps", points.length]]
+		}));
+		this.drawOn(ctx, geometry, 3.5);
+	}
+	dust(ctx, points, paint) {
+		const geometry = new BufferGeometry();
+		geometry.setAttribute("position", new Float32BufferAttribute(points.flat(), 3));
+		geometry.setAttribute("color", new Float32BufferAttribute(points.flatMap((_, i) => paint(i).toArray()), 3));
+		ctx.root.add(new Points(geometry, new PointsMaterial({
+			size: .012,
+			vertexColors: true,
+			map: VolumeScene.roundSprite,
+			alphaTest: .4,
+			transparent: true
+		})));
+		this.drawOn(ctx, geometry, 3.5);
+	}
+	/** Flattened trace on the floor and, optionally, the back walls. */
+	shadow(ctx, points, projection) {
+		const flat = (map) => {
+			const pairs = [];
+			for (let i = 0; i < points.length - 2; i += 2) pairs.push(...map(points[i]), ...map(points[i + 2]));
+			ctx.root.add(this.segments(ctx, pairs, ctx.theme.axis, .5));
+		};
+		flat(([x, , z]) => [
+			x,
+			-.995,
+			z
+		]);
+		if (projection !== AttractorProjection.Walls) return;
+		flat(([, y, z]) => [
+			-.995,
+			y,
+			z
+		]);
+		flat(([x, y]) => [
+			x,
+			y,
+			-.995
+		]);
+	}
+};
+export { LorenzAttractor };

package/dist/charts/threevolume/Molecule3DChart.js

@@ -0,0 +1,162 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { numeric } from "./PointRowsChart.js";
+import { MoleculeLayout, MoleculeStyle } from "./volumeEnums.js";
+import { VolumeScene } from "./VolumeScene.js";
+import { CylinderGeometry, IcosahedronGeometry, InstancedMesh, Quaternion, Vector3 } from "three";
+// src/charts/threevolume/Molecule3DChart.ts
+var UP = new Vector3(0, 1, 0);
+/** Atoms and bonds in 3D: for molecular structure, and for any small graph where a physical reading helps. */
+var Molecule3DChart = class extends VolumeScene {
+	static meta = {
+		id: "molecule-3d",
+		name: "3D molecule",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Three,
+		shape: DataShape.Graph,
+		description: "Renders nodes and links as atoms and bonds in ball-and-stick, space-filling, stick or wire styles.",
+		tags: [
+			"chemistry",
+			"protein",
+			"ball and stick",
+			"cpk",
+			"structure"
+		],
+		sample: (seed) => SampleData.graph(seed, 44, 4),
+		variants: {
+			style: Object.values(MoleculeStyle),
+			layout: Object.values(MoleculeLayout),
+			bondOrder: [false, true],
+			sizedAtoms: [false, true]
+		},
+		valid: (values) => {
+			const bonds = values.style !== MoleculeStyle.SpaceFill, atoms = values.style === MoleculeStyle.BallStick || values.style === MoleculeStyle.SpaceFill;
+			return (bonds || values.bondOrder === false) && (atoms || values.sizedAtoms === false);
+		}
+	};
+	defaults() {
+		return {
+			style: MoleculeStyle.BallStick,
+			layout: MoleculeLayout.Force,
+			bondOrder: false,
+			sizedAtoms: false
+		};
+	}
+	/** Node positions fitted into ±0.9: real coordinates if every node has them, otherwise computed. */
+	positions(nodes, links) {
+		const spots = nodes.length > 0 && nodes.every((node) => Number.isFinite(numeric(node.x) + numeric(node.y) + numeric(node.z))) ? nodes.map((node) => new Vector3(node.x, node.y, node.z)) : this.computed(nodes.length, links);
+		const centre = spots.reduce((sum, spot) => sum.add(spot), new Vector3()).divideScalar(spots.length || 1);
+		const reach = Math.max(...spots.map((spot) => spot.distanceTo(centre)), 1e-6);
+		return spots.map((spot) => spot.sub(centre).multiplyScalar(.84 / reach));
+	}
+	computed(count, links) {
+		const { layout } = this.options;
+		if (layout === MoleculeLayout.Helix) return Array.from({ length: count }, (_, i) => new Vector3(Math.cos(i * .9), i / Math.max(1, count - 1) * 3 - 1.5, Math.sin(i * .9)));
+		const sphere = Array.from({ length: count }, (_, i) => {
+			const y = 1 - 2 * (i + .5) / count, ring = Math.sqrt(1 - y * y), angle = i * 2.39996;
+			return new Vector3(ring * Math.cos(angle), y, ring * Math.sin(angle));
+		});
+		return layout === MoleculeLayout.Force ? this.relax(sphere, links) : sphere;
+	}
+	/** Spring embedder: bonds pull to a fixed length, every pair repels. The cost is capped for large graphs. */
+	relax(spots, links) {
+		const count = spots.length, push = new Vector3();
+		const rounds = Math.min(220, Math.floor(4e6 / Math.max(1, count * count)));
+		const move = spots.map(() => new Vector3());
+		for (let round = 0; round < rounds; round++) {
+			const heat = .2 * (1 - round / rounds);
+			for (const shift of move) shift.set(0, 0, 0);
+			for (let a = 0; a < count; a++) for (let b = a + 1; b < count; b++) {
+				const d2 = Math.max(.01, spots[a].distanceToSquared(spots[b]));
+				push.subVectors(spots[a], spots[b]).multiplyScalar(.03 / (d2 * Math.sqrt(d2)));
+				move[a].add(push);
+				move[b].sub(push);
+			}
+			for (const [a, b] of links) {
+				const d = Math.max(.01, spots[a].distanceTo(spots[b]));
+				push.subVectors(spots[b], spots[a]).multiplyScalar((d - .4) / d * .3);
+				move[a].add(push);
+				move[b].sub(push);
+			}
+			spots.forEach((spot, i) => spot.addScaledVector(move[i].clampLength(0, .2), .3 + heat));
+		}
+		return spots;
+	}
+	build(ctx) {
+		const { data, style, sizedAtoms } = this.options;
+		this.stage(ctx);
+		const nodes = data?.nodes ?? [];
+		if (!nodes.length) return;
+		const index = new Map(nodes.map((node, i) => [node.id, i]));
+		const links = (data.links ?? []).filter((link) => index.has(link.source) && index.has(link.target) && link.source !== link.target);
+		const pairs = links.map((link) => [index.get(link.source), index.get(link.target)]);
+		const spots = this.positions(nodes, pairs);
+		const heaviest = Math.max(...nodes.map((node) => node.value ?? 1), 1);
+		const base = style === MoleculeStyle.SpaceFill ? .13 : style === MoleculeStyle.BallStick ? .066 : style === MoleculeStyle.Sticks ? .022 : .012;
+		const radius = (node) => base * (sizedAtoms ? Math.max(.4, 1.2 * Math.cbrt(Math.max(0, node.value ?? 1) / heaviest)) : 1);
+		const atoms = new InstancedMesh(new IcosahedronGeometry(1, 3), this.surface({ roughness: .32 }), nodes.length);
+		atoms.castShadow = true;
+		nodes.forEach((node, i) => atoms.setColorAt(i, ctx.color(ctx.palette.color(String(node.group ?? "Atom")))));
+		this.populate(ctx, atoms, (i, dummy) => {
+			dummy.position.copy(spots[i]);
+			dummy.scale.setScalar(radius(nodes[i]));
+		}, (i) => i / nodes.length);
+		ctx.root.add(atoms);
+		ctx.pick(atoms, (i) => ({
+			title: nodes[i].id,
+			color: ctx.palette.color(String(nodes[i].group ?? "Atom")),
+			rows: [["Group", String(nodes[i].group ?? "")], ["Value", nodes[i].value ?? ""]]
+		}));
+		if (style !== MoleculeStyle.SpaceFill) this.bonds(ctx, nodes, links, pairs, spots);
+	}
+	bonds(ctx, nodes, links, pairs, spots) {
+		const { style, bondOrder } = this.options;
+		const order = (link) => bondOrder ? 1 + Math.abs(Math.floor(link.value ?? 0)) % 3 : 1;
+		const licorice = style !== MoleculeStyle.BallStick;
+		const rods = links.flatMap((link, l) => Array.from({ length: order(link) }, (_, strand) => strand).flatMap((strand) => (licorice ? [0, 1] : [-1]).map((half) => ({
+			l,
+			strand,
+			of: order(link),
+			half
+		}))));
+		const thick = style === MoleculeStyle.Wire ? .006 : style === MoleculeStyle.Sticks ? .022 : .016;
+		const mesh = new InstancedMesh(new CylinderGeometry(thick, thick, 1, 10), this.surface({ roughness: .5 }), rods.length);
+		mesh.castShadow = true;
+		rods.forEach(({ l, half }, i) => mesh.setColorAt(i, ctx.color(half < 0 ? ctx.theme.inkMuted : ctx.palette.color(String(nodes[pairs[l][half]].group ?? "Atom")))));
+		const heading = new Vector3(), spin = new Quaternion(), side = new Vector3();
+		this.populate(ctx, mesh, (i, dummy) => {
+			const { l, strand, of, half } = rods[i];
+			const from = spots[pairs[l][0]], to = spots[pairs[l][1]];
+			heading.subVectors(to, from);
+			const length = heading.length();
+			heading.normalize();
+			side.crossVectors(heading, Math.abs(heading.y) < .9 ? UP : new Vector3(1, 0, 0)).normalize();
+			dummy.position.copy(from).lerp(to, half < 0 ? .5 : .25 + half * .5).addScaledVector(side, (strand - (of - 1) / 2) * .044);
+			dummy.quaternion.copy(spin.setFromUnitVectors(UP, heading));
+			dummy.scale.set(1, half < 0 ? length : length / 2, 1);
+		}, (i) => rods[i].l / Math.max(1, links.length));
+		ctx.root.add(mesh);
+		ctx.pick(mesh, (i) => {
+			const link = links[rods[i].l];
+			return {
+				title: `${link.source} – ${link.target}`,
+				rows: [["Order", order(link)]]
+			};
+		});
+	}
+	table() {
+		return {
+			columns: [
+				"source",
+				"target",
+				"value"
+			],
+			rows: (this.options.data?.links ?? []).map((link) => [
+				link.source,
+				link.target,
+				link.value
+			])
+		};
+	}
+};
+export { Molecule3DChart };