@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/threenetwork/CirclePack3DChart.js

@@ -0,0 +1,161 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ForceLayout3D } from "./ForceLayout3D.js";
+import { Hierarchy3DBase } from "./Hierarchy3DBase.js";
+import { NetworkMarks3D } from "./NetworkMarks3D.js";
+import { pack } from "d3";
+import { CylinderGeometry, SphereGeometry, Vector3 } from "three";
+// src/charts/threenetwork/CirclePack3DChart.ts
+/** `Spheres` is a true 3D pack: volume, not area, carries the measure. */
+var PackForm3D = /* @__PURE__ */ function(PackForm3D) {
+	PackForm3D["Discs"] = "discs";
+	PackForm3D["Domes"] = "domes";
+	PackForm3D["Spheres"] = "spheres";
+	return PackForm3D;
+}({});
+var PackParents3D = /* @__PURE__ */ function(PackParents3D) {
+	PackParents3D["Solid"] = "solid";
+	PackParents3D["Glass"] = "glass";
+	PackParents3D["Hidden"] = "hidden";
+	return PackParents3D;
+}({});
+var PackLift3D = /* @__PURE__ */ function(PackLift3D) {
+	PackLift3D["Terraced"] = "terraced";
+	PackLift3D["Level"] = "level";
+	return PackLift3D;
+}({});
+var BASE = -.42;
+var STEP = .12;
+/** Circle packing raised off the page, or a true sphere pack: for nesting where the containment should be felt. */
+var CirclePack3DChart = class extends Hierarchy3DBase {
+	static meta = {
+		id: "circle-pack-3d",
+		name: "3D circle pack",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Three,
+		shape: DataShape.Hierarchy,
+		description: "Nests a hierarchy as raised discs, domes or spheres inside spheres, sized honestly by area or volume.",
+		tags: [
+			"circle packing",
+			"sphere packing",
+			"nested"
+		],
+		sample: (seed) => SampleData.tree(seed, 3, 5),
+		variants: {
+			form: Object.values(PackForm3D),
+			parents: Object.values(PackParents3D),
+			lift: Object.values(PackLift3D),
+			gap: [.012, .03]
+		},
+		valid: (values) => values.form !== "spheres" || values.parents !== "solid" && values.lift === "terraced"
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			form: "discs",
+			parents: "solid",
+			lift: "terraced",
+			gap: .012,
+			elevation: 36,
+			distance: 3.9
+		};
+	}
+	/** Bottom-up relaxation: children repel out of overlap and fall inward, then a shell encloses them. */
+	packBalls(node) {
+		const { gap } = this.options;
+		const kids = node.children ?? [];
+		if (!kids.length) return [{
+			center: new Vector3(),
+			radius: Math.max(.02, Math.cbrt(node.value ?? 0)),
+			node
+		}];
+		const families = kids.map((kid) => this.packBalls(kid));
+		const seats = families.map((family, i) => ForceLayout3D.sphere(i, kids.length).multiplyScalar(family[0].radius * 2));
+		const radii = families.map((family) => family[0].radius + gap * 3);
+		const rounds = Math.min(220, Math.ceil(4e4 / kids.length ** 2));
+		for (let round = 0; round < rounds; round++) {
+			seats.forEach((seat) => seat.multiplyScalar(.97));
+			for (let a = 0; a < seats.length; a++) for (let b = a + 1; b < seats.length; b++) {
+				const apart = seats[b].clone().sub(seats[a]), overlap = radii[a] + radii[b] - apart.length();
+				if (overlap <= 0) continue;
+				apart.setLength(overlap / 2 + 1e-4);
+				seats[a].sub(apart);
+				seats[b].add(apart);
+			}
+		}
+		const shift = seats.reduce((sum, seat) => sum.add(seat), new Vector3()).divideScalar(seats.length);
+		seats.forEach((seat) => seat.sub(shift));
+		const radius = Math.max(...seats.map((seat, i) => seat.length() + radii[i]));
+		families.forEach((family, i) => family.forEach((ball) => ball.center.add(seats[i])));
+		return [{
+			center: new Vector3(),
+			radius,
+			node
+		}, ...families.flat()];
+	}
+	spheres(ctx, marks) {
+		const balls = this.packBalls(this.tree(true));
+		const scale = 1 / balls[0].radius;
+		const toMark = ({ center, radius, node }) => ({
+			at: center.clone().multiplyScalar(scale),
+			size: radius * scale,
+			color: this.branchColor(ctx, marks, node),
+			tip: this.tipOf(node)
+		});
+		if (this.options.parents === "glass") marks.instances(new SphereGeometry(1, 40, 28), balls.filter(({ node }) => node.children && node.depth).map(toMark), {
+			opacity: .16,
+			shadow: false,
+			roughness: .3
+		});
+		marks.instances(new SphereGeometry(1, 24, 16), balls.filter(({ node }) => !node.children).map(toMark), { roughness: .35 });
+	}
+	plan(ctx, marks) {
+		const { form, parents, lift, gap } = this.options;
+		const everyone = pack().size([2, 2]).padding(gap)(this.tree(true)).descendants().filter((node) => node.depth && node.r > 0);
+		const terraced = lift === "terraced";
+		const floor = (node) => BASE + (terraced ? (node.depth - 1) * STEP : 0);
+		const tall = (node) => terraced ? STEP : .05 * node.depth;
+		const disc = (node) => ({
+			at: new Vector3(node.x - 1, floor(node) + tall(node) / 2, node.y - 1),
+			size: new Vector3(node.r, tall(node), node.r),
+			color: this.branchColor(ctx, marks, node),
+			tip: this.tipOf(node)
+		});
+		const dome = (node) => ({
+			at: new Vector3(node.x - 1, floor(node) + (terraced ? STEP : 0), node.y - 1),
+			size: new Vector3(node.r, node.r * .8, node.r),
+			color: this.branchColor(ctx, marks, node),
+			tip: this.tipOf(node)
+		});
+		const jar = (node) => {
+			const up = terraced ? STEP * (node.height + 1) : .05 * (node.depth + node.height) + .04;
+			return {
+				...disc(node),
+				at: new Vector3(node.x - 1, floor(node) + up / 2, node.y - 1),
+				size: new Vector3(node.r, up, node.r)
+			};
+		};
+		const inner = everyone.filter((node) => node.children), leaves = everyone.filter((node) => !node.children);
+		const cylinder = () => new CylinderGeometry(1, 1, 1, 56);
+		const cap = () => new SphereGeometry(1, 32, 14, 0, Math.PI * 2, 0, Math.PI / 2);
+		if (parents === "solid") marks.instances(cylinder(), inner.map(disc), {
+			rise: true,
+			roughness: .7
+		});
+		if (parents === "glass") marks.instances(form === "domes" ? cap() : cylinder(), inner.map(form === "domes" ? dome : jar), {
+			opacity: .22,
+			shadow: false
+		});
+		marks.instances(form === "domes" ? cap() : cylinder(), leaves.map(form === "domes" ? dome : disc), {
+			rise: form === "discs",
+			roughness: .45
+		});
+	}
+	build(ctx) {
+		if (!this.tree().value) return;
+		const marks = new NetworkMarks3D(ctx);
+		if (this.options.form === "spheres") this.spheres(ctx, marks);
+		else this.plan(ctx, marks);
+	}
+};
+export { CirclePack3DChart, PackForm3D, PackLift3D, PackParents3D };

package/dist/charts/threenetwork/City3DChart.js

@@ -0,0 +1,128 @@
+import { ChartFamily, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Hierarchy3DBase } from "./Hierarchy3DBase.js";
+import { NetworkMarks3D } from "./NetworkMarks3D.js";
+import { scaleLinear, scaleLog, scaleSqrt, treemap, treemapBinary, treemapSliceDice, treemapSquarify } from "d3";
+import { BoxGeometry, CylinderGeometry, Vector3 } from "three";
+// src/charts/threenetwork/City3DChart.ts
+var CityLots3D = /* @__PURE__ */ function(CityLots3D) {
+	CityLots3D["Squarified"] = "squarified";
+	CityLots3D["Binary"] = "binary";
+	CityLots3D["Blocks"] = "blocks";
+	return CityLots3D;
+}({});
+var CityBuilding3D = /* @__PURE__ */ function(CityBuilding3D) {
+	CityBuilding3D["Block"] = "block";
+	CityBuilding3D["Tower"] = "tower";
+	CityBuilding3D["Tapered"] = "tapered";
+	return CityBuilding3D;
+}({});
+var CityTerrain3D = /* @__PURE__ */ function(CityTerrain3D) {
+	CityTerrain3D["Terraced"] = "terraced";
+	CityTerrain3D["Level"] = "level";
+	return CityTerrain3D;
+}({});
+var TILES = {
+	["squarified"]: treemapSquarify,
+	["binary"]: treemapBinary,
+	["blocks"]: treemapSliceDice
+};
+var BASE = -.42;
+var DECK = .035;
+var withComplexity = (node) => node.children ? {
+	...node,
+	children: node.children.map(withComplexity)
+} : {
+	...node,
+	complexity: (node.value ?? 0) * 37 % 97 + 3
+};
+/** Software city: packages are districts, and each file is a building with two measures, footprint and height. */
+var City3DChart = class extends Hierarchy3DBase {
+	static meta = {
+		id: "city-3d",
+		name: "Software city",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Three,
+		shape: DataShape.Hierarchy,
+		description: "Maps a codebase or any hierarchy to a city, where districts nest and buildings show two measures at once.",
+		tags: [
+			"code city",
+			"software map",
+			"skyline"
+		],
+		sample: (seed) => withComplexity(SampleData.tree(seed, 3, 5)),
+		variants: {
+			lots: Object.values(CityLots3D),
+			building: Object.values(CityBuilding3D),
+			terrain: Object.values(CityTerrain3D),
+			scale: [
+				ScaleKind.Linear,
+				ScaleKind.Sqrt,
+				ScaleKind.Log
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			heightBy: "complexity",
+			lots: "squarified",
+			building: "block",
+			terrain: "terraced",
+			scale: ScaleKind.Linear,
+			elevation: 32,
+			distance: 4.2
+		};
+	}
+	heightScale(top) {
+		const { scale } = this.options;
+		if (scale === ScaleKind.Log) return scaleLog([1, Math.max(top, 2)], [.04, .95]).clamp(true);
+		return scale === ScaleKind.Sqrt ? scaleSqrt([0, top], [.02, .95]) : scaleLinear([0, top], [.02, .95]);
+	}
+	geometry() {
+		const { building } = this.options;
+		if (building === "tower") return new CylinderGeometry(.56, .56, 1, 24);
+		if (building === "tapered") return new CylinderGeometry(.42, .72, 1, 4).rotateY(Math.PI / 4);
+		return new BoxGeometry(1, 1, 1);
+	}
+	build(ctx) {
+		const { lots, terrain, heightBy } = this.options;
+		const root = this.tree(true);
+		if (!root.value) return;
+		const marks = new NetworkMarks3D(ctx);
+		const placed = treemap().tile(TILES[lots]).size([2, 2]).paddingInner(.03).paddingOuter(.022)(root);
+		const rise = (depth) => BASE + (terrain === "terraced" ? depth * DECK * 1.6 : DECK);
+		const districts = placed.descendants().filter((node) => node.children);
+		marks.instances(new BoxGeometry(1, 1, 1), districts.map((node) => ({
+			at: new Vector3((node.x0 + node.x1) / 2 - 1, rise(node.depth) - DECK / 2, (node.y0 + node.y1) / 2 - 1),
+			size: new Vector3(node.x1 - node.x0, DECK, node.y1 - node.y0),
+			color: node.depth ? marks.faded(this.branchColor(ctx, marks, node), .72) : ctx.theme.grid,
+			tip: this.tipOf(node)
+		})), { roughness: .9 });
+		const leaves = placed.leaves().filter((leaf) => (leaf.value ?? 0) > 0);
+		const metric = (leaf) => Math.max(0, +leaf.data[heightBy] || 0);
+		const tall = this.heightScale(Math.max(...leaves.map(metric), 1));
+		marks.instances(this.geometry(), leaves.map((leaf) => {
+			const side = Math.sqrt((leaf.x1 - leaf.x0) * (leaf.y1 - leaf.y0)) * .78, up = tall(metric(leaf)), floor = rise(leaf.depth - 1);
+			const tip = this.tipOf(leaf);
+			return {
+				at: new Vector3((leaf.x0 + leaf.x1) / 2 - 1, floor + up / 2, (leaf.y0 + leaf.y1) / 2 - 1),
+				size: new Vector3(side, up, side),
+				color: this.branchColor(ctx, marks, leaf.ancestors().find((step) => step.depth === 1) ?? leaf),
+				tip: {
+					...tip,
+					rows: [...tip.rows, ["Height", metric(leaf)]]
+				}
+			};
+		}), {
+			rise: true,
+			roughness: .5
+		});
+		for (const district of placed.children ?? []) ctx.label(this.nameOf(district), [
+			(district.x0 + district.x1) / 2 - 1,
+			-.39,
+			district.y1 - 1
+		], "secondary", 10);
+	}
+};
+export { City3DChart, CityBuilding3D, CityLots3D, CityTerrain3D };

package/dist/charts/threenetwork/ConeTreeChart.js

@@ -0,0 +1,148 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Hierarchy3DBase } from "./Hierarchy3DBase.js";
+import { NetworkMarks3D } from "./NetworkMarks3D.js";
+import { Path3D } from "./Path3D.js";
+import { ConeGeometry, Quaternion, SphereGeometry, Vector3 } from "three";
+// src/charts/threenetwork/ConeTreeChart.ts
+var ConeAxis3D = /* @__PURE__ */ function(ConeAxis3D) {
+	ConeAxis3D["Vertical"] = "vertical";
+	ConeAxis3D["Horizontal"] = "horizontal";
+	return ConeAxis3D;
+}({});
+var ConeSpacing3D = /* @__PURE__ */ function(ConeSpacing3D) {
+	ConeSpacing3D["Weighted"] = "weighted";
+	ConeSpacing3D["Equal"] = "equal";
+	return ConeSpacing3D;
+}({});
+var ConeRadius3D = /* @__PURE__ */ function(ConeRadius3D) {
+	ConeRadius3D["Fit"] = "fit";
+	ConeRadius3D["Shrink"] = "shrink";
+	return ConeRadius3D;
+}({});
+var ConeLink3D = /* @__PURE__ */ function(ConeLink3D) {
+	ConeLink3D["Spoke"] = "spoke";
+	ConeLink3D["Stem"] = "stem";
+	return ConeLink3D;
+}({});
+var LEAF = .05;
+/** Robertson's cone tree: each parent is the apex of a cone with its children on the rim. Horizontal gives a cam tree. */
+var ConeTreeChart = class extends Hierarchy3DBase {
+	static meta = {
+		id: "robertson-cone-tree-3d",
+		name: "Cone tree",
+		family: ChartFamily.Hierarchy,
+		dimension: Dimension.Three,
+		shape: DataShape.Hierarchy,
+		description: "Hangs each family as a cone below its parent, fitting large trees in far less area than a flat layout.",
+		tags: [
+			"cone tree",
+			"cam tree",
+			"hierarchy"
+		],
+		sample: (seed) => SampleData.tree(seed, 3, 5),
+		variants: {
+			axis: Object.values(ConeAxis3D),
+			spacing: Object.values(ConeSpacing3D),
+			radius: Object.values(ConeRadius3D),
+			linkShape: Object.values(ConeLink3D),
+			cones: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			axis: "vertical",
+			spacing: "weighted",
+			radius: "fit",
+			linkShape: "spoke",
+			cones: true,
+			distance: 4.5
+		};
+	}
+	/** Bottom-up radius each subtree needs so sibling cones do not collide. */
+	reaches(root) {
+		const reach = /* @__PURE__ */ new Map();
+		root.eachAfter((node) => {
+			const kids = node.children ?? [];
+			const rim = kids.length > 1 ? kids.reduce((sum, kid) => sum + reach.get(kid) * 2, 0) / (Math.PI * 2) * 1.08 : 0;
+			reach.set(node, kids.length ? Math.max(rim, LEAF) + Math.max(...kids.map((kid) => reach.get(kid))) * (kids.length > 1 ? 1 : 0) : LEAF);
+		});
+		return reach;
+	}
+	seats(root, step) {
+		const { spacing, radius } = this.options;
+		const reach = this.reaches(root), seats = [];
+		const visit = (node, at) => {
+			const kids = node.children ?? [];
+			const spread = !kids.length || kids.length === 1 ? 0 : radius === "shrink" ? .72 * .46 ** node.depth : reach.get(node) - Math.max(...kids.map((kid) => reach.get(kid)));
+			seats.push({
+				node,
+				at,
+				spread
+			});
+			const total = kids.reduce((sum, kid) => sum + (spacing === "weighted" ? kid.leaves().length : 1), 0);
+			let turn = 0;
+			for (const kid of kids) {
+				const share = (spacing === "weighted" ? kid.leaves().length : 1) / total;
+				const angle = (turn + share / 2) * Math.PI * 2;
+				turn += share;
+				visit(kid, new Vector3(at.x + Math.cos(angle) * spread, at.y - step, at.z + Math.sin(angle) * spread));
+			}
+		};
+		visit(root, new Vector3(0, .82, 0));
+		return seats;
+	}
+	build(ctx) {
+		const root = this.tree();
+		if (!root.children?.length) return;
+		const { axis, cones, linkShape } = this.options;
+		const marks = new NetworkMarks3D(ctx);
+		const step = 1.64 / Math.max(root.height, 1);
+		const seats = this.seats(root, step);
+		const fit = .92 / Math.max(.001, ...seats.flatMap(({ at }) => [Math.abs(at.x), Math.abs(at.z)]));
+		const turn = axis === "horizontal" ? new Quaternion().setFromAxisAngle(new Vector3(0, 0, 1), Math.PI / 2) : new Quaternion();
+		const placed = new Map(seats.map(({ node, at }) => [node, new Vector3(at.x * fit, at.y, at.z * fit).applyQuaternion(turn)]));
+		if (cones) {
+			const shell = new ConeGeometry(1, 1, 48, 1, true);
+			shell.translate(0, -.5, 0);
+			marks.instances(shell, seats.filter(({ spread }) => spread > 0).map(({ node, spread }) => ({
+				at: placed.get(node),
+				size: new Vector3(spread * fit, step, spread * fit),
+				spin: turn,
+				color: marks.faded(this.branchColor(ctx, marks, node), .4)
+			})), {
+				opacity: .14,
+				shadow: false
+			});
+		}
+		marks.batch(root.links().map(({ source, target }) => {
+			const a = placed.get(source), b = placed.get(target);
+			const hub = a.clone().add(new Vector3(0, -step, 0).applyQuaternion(turn));
+			return {
+				rings: Path3D.tube(linkShape === "spoke" ? [a, b] : [
+					a,
+					hub,
+					b
+				], .006, 5),
+				color: marks.faded(this.branchColor(ctx, marks, target), .2)
+			};
+		}), {}, { roughness: .8 });
+		const top = root.value || 1, shrink = Math.min(1, 3.6 / Math.cbrt(seats.length));
+		marks.instances(new SphereGeometry(1, 18, 12), seats.map(({ node }) => ({
+			at: placed.get(node),
+			size: Math.max(.018, .088 * Math.cbrt((node.value ?? 0) / top)) * shrink,
+			color: this.branchColor(ctx, marks, node),
+			tip: this.tipOf(node)
+		})), { roughness: .35 });
+		for (const branch of root.children) {
+			const point = placed.get(branch);
+			ctx.label(this.nameOf(branch), [
+				point.x,
+				point.y + .1,
+				point.z
+			], "secondary", 10);
+		}
+	}
+};
+export { ConeAxis3D, ConeLink3D, ConeRadius3D, ConeSpacing3D, ConeTreeChart };

package/dist/charts/threenetwork/Dag3DChart.js

@@ -0,0 +1,149 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { Graph3DBase } from "./Graph3DBase.js";
+import { NetworkMarks3D } from "./NetworkMarks3D.js";
+import { Path3D } from "./Path3D.js";
+import { Vector3 } from "three";
+// src/charts/threenetwork/Dag3DChart.ts
+/** Direction the graph flows along. */
+var DagFlow3D = /* @__PURE__ */ function(DagFlow3D) {
+	DagFlow3D["Down"] = "down";
+	DagFlow3D["Forward"] = "forward";
+	DagFlow3D["Outward"] = "outward";
+	return DagFlow3D;
+}({});
+/** How the nodes of one layer spread across it. */
+var DagLayer3D = /* @__PURE__ */ function(DagLayer3D) {
+	DagLayer3D["Grid"] = "grid";
+	DagLayer3D["Ring"] = "ring";
+	DagLayer3D["Line"] = "line";
+	return DagLayer3D;
+}({});
+var DagRoute3D = /* @__PURE__ */ function(DagRoute3D) {
+	DagRoute3D["Spline"] = "spline";
+	DagRoute3D["Straight"] = "straight";
+	DagRoute3D["Orthogonal"] = "orthogonal";
+	return DagRoute3D;
+}({});
+/** Layered directed graph: for pipelines, dependencies and build graphs, where order matters more than proximity. */
+var Dag3DChart = class extends Graph3DBase {
+	static meta = {
+		id: "dag-3d",
+		name: "3D DAG",
+		family: ChartFamily.Network,
+		dimension: Dimension.Three,
+		shape: DataShape.Graph,
+		description: "Sorts a directed graph into layers along one axis, so dependencies always run the same way.",
+		tags: [
+			"dag",
+			"dependency graph",
+			"layered graph",
+			"sugiyama"
+		],
+		sample: (seed) => SampleData.flow(seed, 5, 4),
+		variants: {
+			flow: Object.values(DagFlow3D),
+			layer: Object.values(DagLayer3D),
+			route: Object.values(DagRoute3D),
+			arrows: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			flow: "down",
+			layer: "grid",
+			route: "spline",
+			arrows: true,
+			distance: 5.6
+		};
+	}
+	/** Longest-path layers. Links that would close a cycle are ignored for ranking, so cyclic input still terminates. */
+	layers(nodes, links) {
+		const forward = this.acyclic(nodes, links);
+		const rank = new Map(nodes.map((node) => [node, 0]));
+		const pending = new Map(nodes.map((node) => [node, 0]));
+		const out = new Map(nodes.map((node) => [node, []]));
+		for (const link of forward) {
+			pending.set(link.target, pending.get(link.target) + 1);
+			out.get(link.source).push(link.target);
+		}
+		const queue = nodes.filter((node) => !pending.get(node));
+		while (queue.length) {
+			const node = queue.pop();
+			for (const next of out.get(node)) {
+				rank.set(next, Math.max(rank.get(next), rank.get(node) + 1));
+				pending.set(next, pending.get(next) - 1);
+				if (!pending.get(next)) queue.push(next);
+			}
+		}
+		return rank;
+	}
+	/** Barycentre pass: each layer sorts by the mean position of its parents to reduce crossings. */
+	ordered(nodes, links, rank) {
+		const depth = Math.max(...rank.values()) + 1;
+		const rows = Array.from({ length: depth }, (_, r) => nodes.filter((node) => rank.get(node) === r));
+		const slot = /* @__PURE__ */ new Map();
+		rows.forEach((row) => {
+			const mean = (node) => {
+				const seats = links.filter((link) => link.target === node && slot.has(link.source)).map((link) => slot.get(link.source));
+				return seats.length ? seats.reduce((a, b) => a + b, 0) / seats.length : node.index;
+			};
+			const sorted = row.map((node) => [mean(node), node]).sort((a, b) => a[0] - b[0]).map(([, node]) => node);
+			row.splice(0, row.length, ...sorted);
+			row.forEach((node, i) => slot.set(node, i / Math.max(row.length - 1, 1)));
+		});
+		return rows;
+	}
+	/** Position inside a layer as two offsets in -1..1. */
+	spread(index, count) {
+		const { layer } = this.options;
+		if (count === 1) return [0, 0];
+		if (layer === "line") return [index / (count - 1) * 2 - 1, 0];
+		if (layer === "ring") {
+			const angle = index / count * Math.PI * 2;
+			return [Math.cos(angle), Math.sin(angle)];
+		}
+		const side = Math.ceil(Math.sqrt(count)), row = Math.floor(index / side), rows = Math.ceil(count / side);
+		const inRow = row === rows - 1 ? count - row * side : side;
+		return [inRow > 1 ? index % side / (inRow - 1) * 2 - 1 : 0, rows > 1 ? row / (rows - 1) * 2 - 1 : 0];
+	}
+	seat(depth, u, v) {
+		const { flow } = this.options;
+		if (flow === "forward") return new Vector3(depth * 2 - 1, u * .72, v * .72);
+		if (flow === "down") return new Vector3(u * .8, .95 - depth * 1.9, v * .8);
+		return (this.options.layer === "line" ? new Vector3(Math.cos(u * Math.PI * .9), 0, Math.sin(u * Math.PI * .9)) : u || v ? new Vector3(u, v * .8, v * .6 - u * .35).normalize() : new Vector3()).multiplyScalar(.12 + depth * .82);
+	}
+	path(a, b) {
+		const { route, flow } = this.options;
+		if (route === "straight") return [a, b];
+		const main = flow === "forward" ? new Vector3(1, 0, 0) : flow === "down" ? new Vector3(0, -1, 0) : a.clone().add(b).normalize();
+		const reach = b.clone().sub(a).dot(main) / 2;
+		if (route === "spline") return Path3D.cubic(a, a.clone().addScaledVector(main, reach), b.clone().addScaledVector(main, -reach), b, 18);
+		return [
+			a,
+			a.clone().addScaledVector(main, reach),
+			b.clone().addScaledVector(main, -reach),
+			b
+		].flatMap((point, i, all) => i ? Array.from({ length: 5 }, (_, k) => all[i - 1].clone().lerp(point, (k + 1) / 5)) : [point]);
+	}
+	build(ctx) {
+		const { nodes, links } = this.model();
+		if (!nodes.length) return;
+		const marks = new NetworkMarks3D(ctx);
+		const rank = this.layers(nodes, links);
+		const rows = this.ordered(nodes, links, rank);
+		const seats = /* @__PURE__ */ new Map();
+		rows.forEach((row, r) => row.forEach((node, i) => {
+			const [u, v] = this.spread(i, row.length);
+			seats.set(node, this.seat(rows.length > 1 ? r / (rows.length - 1) : .5, u, v));
+		}));
+		const at = (node) => seats.get(node);
+		const route = (link) => this.path(at(link.source), at(link.target));
+		this.drawLinks(ctx, marks, links, route);
+		if (this.options.arrows) this.drawArrows(ctx, marks, links, route);
+		this.drawNodes(ctx, marks, nodes, at);
+		this.labelHubs(ctx, rows[0], at, 3);
+	}
+};
+export { Dag3DChart, DagFlow3D, DagLayer3D, DagRoute3D };

package/dist/charts/threenetwork/Force3DGraph.js

@@ -0,0 +1,102 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { NodeSizing3D } from "./enums.js";
+import { ForceLayout3D } from "./ForceLayout3D.js";
+import { Graph3DBase } from "./Graph3DBase.js";
+import { NetworkMarks3D } from "./NetworkMarks3D.js";
+import { Path3D } from "./Path3D.js";
+import { Vector3 } from "three";
+// src/charts/threenetwork/Force3DGraph.ts
+/** Which extra force shapes the settled layout. */
+var ForceGraphLayout3D = /* @__PURE__ */ function(ForceGraphLayout3D) {
+	ForceGraphLayout3D["Clustered"] = "clustered";
+	ForceGraphLayout3D["Free"] = "free";
+	ForceGraphLayout3D["Planar"] = "planar";
+	ForceGraphLayout3D["Shells"] = "shells";
+	return ForceGraphLayout3D;
+}({});
+var ForceLinkStyle3D = /* @__PURE__ */ function(ForceLinkStyle3D) {
+	ForceLinkStyle3D["Straight"] = "straight";
+	ForceLinkStyle3D["Arc"] = "arc";
+	ForceLinkStyle3D["Bundled"] = "bundled";
+	return ForceLinkStyle3D;
+}({});
+/** Force-directed network in space: for seeing communities, hubs and bridges without a hand-made layout. */
+var Force3DGraph = class extends Graph3DBase {
+	static meta = {
+		id: "force-3d",
+		name: "3D force graph",
+		family: ChartFamily.Network,
+		dimension: Dimension.Three,
+		shape: DataShape.Graph,
+		description: "Lets nodes repel and links pull until communities and hubs separate in three dimensions.",
+		tags: [
+			"network",
+			"node-link",
+			"force-directed",
+			"communities"
+		],
+		sample: (seed) => SampleData.graph(seed, 64, 4),
+		variants: {
+			layout: Object.values(ForceGraphLayout3D),
+			linkStyle: Object.values(ForceLinkStyle3D),
+			sizeBy: Object.values(NodeSizing3D),
+			arrows: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			layout: "clustered",
+			linkStyle: "straight",
+			arrows: false,
+			distance: 4.5
+		};
+	}
+	positions(count, links, groupIndex, groups) {
+		const { layout } = this.options;
+		const pairs = links.map((link) => [link.source.index, link.target.index]);
+		if (layout === "clustered") {
+			const centers = Array.from({ length: groups }, (_, g) => ForceLayout3D.sphere(g, groups).multiplyScalar(.62));
+			return ForceLayout3D.run({
+				count,
+				links: pairs,
+				anchor: (i) => centers[groupIndex(i)]
+			});
+		}
+		if (layout === "planar") return ForceLayout3D.run({
+			count,
+			links: pairs,
+			squash: .82
+		});
+		if (layout === "shells") return ForceLayout3D.run({
+			count,
+			links: pairs,
+			shell: (i) => .34 + .66 * (groupIndex(i) + 1) / groups
+		});
+		return ForceLayout3D.run({
+			count,
+			links: pairs
+		});
+	}
+	build(ctx) {
+		const { nodes, links, groups } = this.model();
+		if (!nodes.length) return;
+		const marks = new NetworkMarks3D(ctx);
+		const points = this.positions(nodes.length, links, (i) => groups.indexOf(nodes[i].group), groups.length);
+		const hubs = groups.map((group) => nodes.filter((node) => node.group === group).reduce((sum, node) => sum.add(points[node.index]), new Vector3()).divideScalar(nodes.filter((node) => node.group === group).length));
+		const route = (link) => {
+			const a = points[link.source.index], b = points[link.target.index];
+			const { linkStyle } = this.options;
+			if (linkStyle === "straight") return [a, b];
+			if (linkStyle === "arc") return Path3D.quadratic(a, a.clone().add(b).multiplyScalar(.72), b, 16);
+			return Path3D.cubic(a, hubs[groups.indexOf(link.source.group)], hubs[groups.indexOf(link.target.group)], b, 20);
+		};
+		const at = (node) => points[node.index];
+		this.drawLinks(ctx, marks, links, route);
+		if (this.options.arrows) this.drawArrows(ctx, marks, links, route);
+		this.drawNodes(ctx, marks, nodes, at);
+		this.labelHubs(ctx, nodes, at);
+	}
+};
+export { Force3DGraph, ForceGraphLayout3D, ForceLinkStyle3D };