@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/threevolume/LorenzAttractor.js

@@ -0,0 +1,303 @@
+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.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 };

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