@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/network/GridLayoutGraph.js

@@ -0,0 +1,164 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { EdgeRouter } from "./EdgeRouter.js";
+import { GraphOrder } from "./GraphOrder.js";
+import { NetworkEdge, NetworkMetric, NetworkOrder } from "./networkEnums.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { NodeLinkNetwork } from "./NodeLinkNetwork.js";
+// src/charts/network/GridLayoutGraph.ts
+var GridPlacement = /* @__PURE__ */ function(GridPlacement) {
+	GridPlacement["Optimised"] = "optimised";
+	GridPlacement["Sequential"] = "sequential";
+	GridPlacement["Serpentine"] = "serpentine";
+	GridPlacement["Spiral"] = "spiral";
+	GridPlacement["GroupBlocks"] = "group-blocks";
+	return GridPlacement;
+}({});
+var GridLattice = /* @__PURE__ */ function(GridLattice) {
+	GridLattice["Square"] = "square";
+	GridLattice["Hex"] = "hex";
+	return GridLattice;
+}({});
+/** Nodes snap to a lattice: for tidy diagrams of infrastructure, circuits or teams, where alignment beats organic shape. */
+var GridLayoutGraph = class extends NodeLinkNetwork {
+	static meta = {
+		id: "grid-layout-graph",
+		name: "Grid layout graph",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Snaps nodes to a regular lattice, giving tidy, schematic network diagrams with even spacing.",
+		tags: [
+			"network",
+			"grid layout",
+			"schematic",
+			"orthogonal"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 30, 4),
+		variants: {
+			placement: [
+				"optimised",
+				"sequential",
+				"serpentine",
+				"spiral",
+				"group-blocks"
+			],
+			lattice: ["square", "hex"],
+			edge: [
+				NetworkEdge.Straight,
+				NetworkEdge.Orthogonal,
+				NetworkEdge.Arc
+			],
+			nodeSize: [NetworkMetric.Degree, NetworkMetric.Uniform]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			placement: "optimised",
+			lattice: "square",
+			edge: NetworkEdge.Straight,
+			labels: 6
+		};
+	}
+	slots(ctx, count, pad) {
+		const { width, height } = ctx.plot, hex = this.options.lattice === "hex";
+		const columns = Math.max(1, Math.ceil(Math.sqrt(count * width / height))), rows = Math.ceil(count / columns);
+		const stepX = (width - pad * 2) / Math.max(1, columns - (hex ? .5 : 1)), stepY = (height - pad * 2) / Math.max(1, rows - 1);
+		return {
+			slots: Array.from({ length: rows * columns }, (_, i) => {
+				const row = Math.floor(i / columns), column = i % columns;
+				return {
+					row,
+					column,
+					x: pad + (column + (hex && row % 2 ? .5 : 0)) * stepX,
+					y: rows > 1 ? pad + row * stepY : height / 2
+				};
+			}),
+			columns,
+			rows
+		};
+	}
+	pad(radii) {
+		return Math.max(...radii) + 3;
+	}
+	assign(ctx, model, slots, columns) {
+		const { placement } = this.options, placed = /* @__PURE__ */ new Map();
+		const fill = (list, order) => list.forEach((node, i) => placed.set(node.index, order[i]));
+		switch (placement) {
+			case "sequential":
+				fill(model.nodes, slots);
+				break;
+			case "serpentine":
+				fill(GraphOrder.sort(model, NetworkOrder.Group), [...slots].sort((a, b) => a.row - b.row || (a.row % 2 ? b.column - a.column : a.column - b.column)));
+				break;
+			case "spiral": {
+				const { x, y } = this.centre(ctx);
+				fill(GraphOrder.sort(model, NetworkOrder.Degree), [...slots].sort((a, b) => Math.hypot(a.x - x, a.y - y) - Math.hypot(b.x - x, b.y - y)));
+				break;
+			}
+			case "group-blocks": {
+				const groups = model.groups, rows = Math.ceil(slots.length / columns);
+				let start = 0;
+				const free = [...slots].sort((a, b) => a.column - b.column || a.row - b.row);
+				for (const group of groups) {
+					const members = GraphOrder.sort(model, NetworkOrder.Degree).filter((node) => node.group === group);
+					const whole = Math.ceil(members.length / rows) * rows;
+					fill(members, free.slice(start, start + whole));
+					start += Math.min(whole, members.length + (rows - members.length % rows) % rows);
+				}
+				break;
+			}
+			default: return this.optimise(model, slots);
+		}
+		return placed;
+	}
+	/** Hill-climbs pairwise slot swaps to shorten total edge length, from a grouped start. */
+	optimise(model, slots) {
+		const at = new Map(GraphOrder.sort(model, NetworkOrder.Group).map((node, i) => [node.index, slots[i]]));
+		const cost = (index) => model.neighbours[index].reduce((sum, other) => {
+			const a = at.get(index), b = at.get(other.index);
+			return sum + Math.hypot(a.x - b.x, a.y - b.y);
+		}, 0);
+		const rounds = model.nodes.length > 400 ? 0 : 6;
+		for (let round = 0; round < rounds; round++) {
+			let moved = false;
+			for (let a = 0; a < model.nodes.length; a++) for (let b = a + 1; b < model.nodes.length; b++) {
+				const before = cost(a) + cost(b), sa = at.get(a), sb = at.get(b);
+				at.set(a, sb);
+				at.set(b, sa);
+				if (cost(a) + cost(b) < before - 1e-6) moved = true;
+				else {
+					at.set(a, sa);
+					at.set(b, sb);
+				}
+			}
+			if (!moved) break;
+		}
+		return at;
+	}
+	radii(model, metric, ctx) {
+		return this.capped(super.radii(model, metric, ctx), Math.sqrt(ctx.plot.width * ctx.plot.height / model.nodes.length) * .3);
+	}
+	place(ctx, model, radii) {
+		const { slots, columns } = this.slots(ctx, model.nodes.length, this.pad(radii));
+		const placed = this.assign(ctx, model, slots, columns);
+		return model.nodes.map((node) => placed.get(node.index));
+	}
+	underlay(ctx, model, placed) {
+		const { slots } = this.slots(ctx, model.nodes.length, this.pad(placed.map((d) => d.r)));
+		const dots = ctx.marks("lattice", "circle", slots).attr("fill", ctx.theme.axis);
+		ctx.set(dots, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 1.5
+		}, {
+			cx: (d) => d.x,
+			cy: (d) => d.y,
+			r: 0
+		});
+	}
+	routeEdge(_link, input) {
+		return EdgeRouter.route(this.options.edge, input);
+	}
+};
+export { GridLattice, GridLayoutGraph, GridPlacement };

package/dist/charts/network/GroupInABox.js

@@ -0,0 +1,185 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { EdgeRouter } from "./EdgeRouter.js";
+import { GraphLayouts } from "./GraphLayouts.js";
+import { GraphOrder } from "./GraphOrder.js";
+import { NetworkEdge, NetworkMetric, NetworkOrder } from "./networkEnums.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { NodeLinkNetwork } from "./NodeLinkNetwork.js";
+import { hierarchy, treemap, treemapBinary, treemapDice, treemapSlice, treemapSquarify } from "d3";
+// src/charts/network/GroupInABox.ts
+var BoxTile = /* @__PURE__ */ function(BoxTile) {
+	BoxTile["Squarify"] = "squarify";
+	BoxTile["Binary"] = "binary";
+	BoxTile["Slice"] = "slice";
+	BoxTile["Dice"] = "dice";
+	return BoxTile;
+}({});
+var BoxInner = /* @__PURE__ */ function(BoxInner) {
+	BoxInner["Force"] = "force";
+	BoxInner["Circle"] = "circle";
+	BoxInner["Lattice"] = "lattice";
+	return BoxInner;
+}({});
+var BoxBridges = /* @__PURE__ */ function(BoxBridges) {
+	BoxBridges["Straight"] = "straight";
+	BoxBridges["Bundled"] = "bundled";
+	BoxBridges["Hidden"] = "hidden";
+	return BoxBridges;
+}({});
+var BoxSize = /* @__PURE__ */ function(BoxSize) {
+	BoxSize["Members"] = "members";
+	BoxSize["Links"] = "links";
+	return BoxSize;
+}({});
+var BESIDE = 64;
+var TILES = {
+	["squarify"]: treemapSquarify,
+	["binary"]: treemapBinary,
+	["slice"]: treemapSlice,
+	["dice"]: treemapDice
+};
+/** Group-in-a-box: a treemap of groups, each with its own layout, so groups stop hiding one another. */
+var GroupInABox = class extends NodeLinkNetwork {
+	static meta = {
+		id: "group-in-a-box",
+		name: "Group-in-a-box",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Gives each group a treemap tile and its own layout, separating clusters while keeping sizes comparable.",
+		tags: [
+			"network",
+			"group in a box",
+			"treemap",
+			"cluster"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 40, 5),
+		variants: {
+			tile: [
+				"squarify",
+				"binary",
+				"slice",
+				"dice"
+			],
+			inner: [
+				"force",
+				"circle",
+				"lattice"
+			],
+			bridges: [
+				"straight",
+				"bundled",
+				"hidden"
+			],
+			sizeBy: ["members", "links"]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			tile: "squarify",
+			inner: "force",
+			bridges: "straight",
+			sizeBy: "members",
+			nodeSize: NetworkMetric.Degree,
+			labels: 0
+		};
+	}
+	boxes = [];
+	view(model) {
+		return this.options.bridges === "hidden" ? model.subgraph(model.nodes, (link) => link.source.group === link.target.group) : model;
+	}
+	tiles(ctx, model) {
+		const members = (group) => model.nodes.filter((node) => node.group === group);
+		const weight = (group) => this.options.sizeBy === "links" ? 1 + members(group).reduce((sum, node) => sum + node.degree, 0) : members(group).length;
+		const root = hierarchy({ children: model.groups.map((group) => ({ group })) }).sum((d) => d.group ? weight(d.group) : 0).sort(() => 0);
+		return treemap().tile(TILES[this.options.tile]).size([ctx.plot.width, ctx.plot.height]).paddingInner(5).round(true)(root).leaves().map((leaf) => ({
+			group: leaf.data.group,
+			x: leaf.x0,
+			y: leaf.y0,
+			width: leaf.x1 - leaf.x0,
+			height: leaf.y1 - leaf.y0
+		}));
+	}
+	inside(box, group, model, radii) {
+		const beside = box.height < BESIDE, left = beside ? Math.min(70, box.width / 3) : 0, top = beside ? 0 : 16;
+		const size = {
+			width: box.width - left,
+			height: Math.max(10, box.height - top)
+		};
+		const sub = model.subgraph(group), mine = group.map((node) => radii[node.index]);
+		const shift = (points) => points.map((p) => ({
+			x: box.x + left + p.x,
+			y: box.y + top + p.y
+		}));
+		const pad = Math.max(...mine) + 3;
+		if (this.options.inner === "circle") {
+			const ring = Math.max(4, Math.min(size.width, size.height) / 2 - pad), sorted = GraphOrder.sort(sub, NetworkOrder.Spectral), at = [];
+			sorted.forEach((node, i) => {
+				const turn = i / sorted.length * 2 * Math.PI - Math.PI / 2;
+				at[node.index] = {
+					x: size.width / 2 + Math.cos(turn) * ring,
+					y: size.height / 2 + Math.sin(turn) * ring
+				};
+			});
+			return shift(at);
+		}
+		if (this.options.inner === "lattice") {
+			const columns = Math.max(1, Math.round(Math.sqrt(sub.nodes.length * size.width / size.height))), rows = Math.ceil(sub.nodes.length / columns), at = [];
+			GraphOrder.sort(sub, NetworkOrder.Degree).forEach((node, i) => {
+				at[node.index] = {
+					x: pad + (i % columns + .5) * ((size.width - pad * 2) / columns),
+					y: pad + (Math.floor(i / columns) + .5) * ((size.height - pad * 2) / rows)
+				};
+			});
+			return shift(at);
+		}
+		const raw = GraphLayouts.force(sub, {
+			box: size,
+			radii: mine,
+			gravity: .1,
+			ticks: 200
+		});
+		return shift(GraphLayouts.relax(GraphLayouts.fit(raw, size, Math.min(pad, size.height / 2 - 1), 12), mine, size, 30));
+	}
+	place(ctx, model, radii) {
+		this.boxes = this.tiles(ctx, model);
+		const points = [];
+		for (const box of this.boxes) {
+			const group = model.nodes.filter((node) => node.group === box.group);
+			this.inside(box, group, model, radii).forEach((p, i) => {
+				points[group[i].index] = p;
+			});
+		}
+		return points;
+	}
+	radii(model, metric, ctx) {
+		return this.capped(super.radii(model, metric, ctx), 7);
+	}
+	underlay(ctx, _model, _placed) {
+		const panels = ctx.marks("boxes", "rect", this.boxes, (d) => d.group).attr("rx", 6).attr("fill", ctx.theme.grid).attr("fill-opacity", .4);
+		ctx.set(panels, {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: (d) => d.width,
+			height: (d) => d.height
+		}, {
+			x: (d) => d.x,
+			y: (d) => d.y,
+			width: (d) => d.width,
+			height: (d) => d.height
+		});
+		this.paintAxisLabels(ctx, this.boxes.filter((box) => box.width > 40).map((box) => ({
+			key: box.group,
+			text: box.group.slice(0, Math.floor((box.width - 12) / 6.2)),
+			x: box.x + 7,
+			y: box.y + (box.height < BESIDE ? box.height / 2 : 10),
+			anchor: "start"
+		})));
+	}
+	routeEdge(link, input) {
+		const bridge = link.source.group !== link.target.group;
+		return EdgeRouter.route(bridge && this.options.bridges === "bundled" ? NetworkEdge.Bundled : NetworkEdge.Straight, input);
+	}
+};
+export { BoxBridges, BoxInner, BoxSize, BoxTile, GroupInABox };

package/dist/charts/network/HierarchicalEdgeBundling.js

@@ -0,0 +1,194 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GraphCommunities } from "./GraphCommunities.js";
+import { NetworkCommunity } from "./networkEnums.js";
+import { NetworkChart } from "./NetworkChart.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { arc, ascending, cluster, curveBundle, descending, hierarchy, line, lineRadial } from "d3";
+// src/charts/network/HierarchicalEdgeBundling.ts
+var BundleLayout = /* @__PURE__ */ function(BundleLayout) {
+	BundleLayout["Radial"] = "radial";
+	BundleLayout["Linear"] = "linear";
+	return BundleLayout;
+}({});
+/** The tree links are bundled along: the group column, or communities nested inside it. */
+var BundleHierarchy = /* @__PURE__ */ function(BundleHierarchy) {
+	BundleHierarchy["Groups"] = "groups";
+	BundleHierarchy["Nested"] = "nested";
+	return BundleHierarchy;
+}({});
+var BundleSort = /* @__PURE__ */ function(BundleSort) {
+	BundleSort["Input"] = "input";
+	BundleSort["Degree"] = "degree";
+	BundleSort["Name"] = "name";
+	return BundleSort;
+}({});
+/** Holten's bundling: for dense relations between items that sit in a known hierarchy. */
+var HierarchicalEdgeBundling = class extends NetworkChart {
+	static meta = {
+		id: "hierarchical-edge-bundling",
+		name: "Hierarchical edge bundling",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Routes links along a hierarchy so dense relations condense into readable bundles between groups.",
+		tags: [
+			"network",
+			"bundling",
+			"holten",
+			"hierarchy",
+			"dependency"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 40, 4),
+		variants: {
+			layout: ["radial", "linear"],
+			hierarchyBy: ["groups", "nested"],
+			sort: [
+				"input",
+				"degree",
+				"name"
+			],
+			bands: [true, false],
+			tension: [
+				.85,
+				.6,
+				.97
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			layout: "radial",
+			hierarchyBy: "groups",
+			sort: "input",
+			bands: true,
+			tension: .85
+		};
+	}
+	tree(model) {
+		const nested = this.options.hierarchyBy === "nested";
+		const leaf = (node) => ({
+			name: node.id,
+			node
+		});
+		const children = model.groups.map((group) => {
+			const members = model.nodes.filter((node) => node.group === group);
+			if (!nested || members.length < 4) return {
+				name: group,
+				children: members.map(leaf)
+			};
+			const inner = model.subgraph(members), labels = GraphCommunities.label(inner, NetworkCommunity.Louvain);
+			return {
+				name: group,
+				children: [...new Set(labels)].map((label) => ({
+					name: `${group}/${label}`,
+					children: members.filter((_, i) => labels[i] === label).map(leaf)
+				}))
+			};
+		});
+		const root = hierarchy({
+			name: "root",
+			children
+		});
+		const { sort } = this.options;
+		if (sort === "degree") root.sort((a, b) => descending(a.data.node?.degree ?? 0, b.data.node?.degree ?? 0));
+		if (sort === "name") root.sort((a, b) => ascending(a.data.name, b.data.name));
+		return root;
+	}
+	drawNetwork(ctx, model) {
+		const { layout, bands, tension } = this.options;
+		const radial = layout === "radial";
+		const { width, height } = ctx.plot;
+		const room = 30;
+		const outer = Math.max(20, Math.min(width, height) / 2 - room);
+		const root = this.tree(model);
+		const leaves = (radial ? cluster().size([2 * Math.PI, outer - (bands ? 8 : 0)]) : cluster().size([width - 8, height - room - (bands ? 8 : 0)]))(root).leaves();
+		const byId = new Map(leaves.map((leaf) => [leaf.data.node.id, leaf]));
+		const centre = {
+			x: width / 2,
+			y: height / 2
+		};
+		const point = (d) => {
+			const { x = 0, y = 0 } = d;
+			return radial ? {
+				x: centre.x + Math.sin(x) * y,
+				y: centre.y - Math.cos(x) * y
+			} : {
+				x: x + 4,
+				y
+			};
+		};
+		const bundled = radial ? lineRadial().curve(curveBundle.beta(tension)).radius((d) => d.y).angle((d) => d.x) : line().curve(curveBundle.beta(tension)).x((d) => d.x + 4).y((d) => d.y);
+		const stage = radial ? ctx.nest(`translate(${centre.x},${centre.y})`, "bundle") : ctx.nest("translate(0,0)", "bundle");
+		const edges = model.links.map((link) => {
+			const a = byId.get(link.source.id), b = byId.get(link.target.id);
+			return {
+				link,
+				d: bundled(a.path(b)) ?? "",
+				width: 1.25,
+				...this.edgeTone(ctx, link)
+			};
+		}).map((edge) => ({
+			...edge,
+			opacity: .42
+		}));
+		const paths = this.paintEdges(stage, edges);
+		const span = radial ? 2 * Math.PI * outer / leaves.length : (width - 8) / leaves.length;
+		const dot = Math.max(2, Math.min(3.5, span / 3.2));
+		const placed = leaves.map((leaf) => ({
+			node: leaf.data.node,
+			r: dot,
+			...point(leaf)
+		}));
+		const shifted = radial ? placed.map((d) => ({
+			...d,
+			x: d.x - centre.x,
+			y: d.y - centre.y
+		})) : placed;
+		this.paintNodes(stage, model, shifted, paths);
+		const groups = (root.children ?? []).map((group) => {
+			const items = group.leaves();
+			return {
+				name: group.data.name,
+				start: Math.min(...items.map((d) => d.x)),
+				end: Math.max(...items.map((d) => d.x))
+			};
+		});
+		const band = bands ? groups : [];
+		const ring = arc().innerRadius(outer - 4).outerRadius(outer).cornerRadius(2).startAngle((d) => d.start - .02).endAngle((d) => d.end + .02);
+		const bar = (d) => {
+			const x0 = d.start + 2, x1 = d.end + 6, y = height - room - 3;
+			return `M${x0.toFixed(2)},${y}h${(x1 - x0).toFixed(2)}v4h${(x0 - x1).toFixed(2)}Z`;
+		};
+		const shape = radial ? (d) => ring(d) ?? "" : bar;
+		const strips = stage.marks("bands", "path", band, (d) => d.name).attr("fill", (d) => ctx.palette.color(d.name));
+		stage.set(strips, { d: shape }, { d: shape });
+		stage.hover(strips, (d) => ({
+			title: d.name,
+			color: ctx.palette.color(d.name)
+		}));
+		const every = Math.max(1, Math.ceil(11 / span));
+		const labels = leaves.filter((_, i) => i % every === 0).map((leaf) => {
+			const { x } = leaf, text = leaf.data.node.label.slice(0, 5);
+			if (!radial) return {
+				key: leaf.data.name,
+				text,
+				x: x + 4,
+				y: height - room + 6,
+				rotate: -90,
+				anchor: "end"
+			};
+			const r = outer + 5, right = x < Math.PI, degrees = x * 180 / Math.PI - 90;
+			return {
+				key: leaf.data.name,
+				text,
+				x: Math.sin(x) * r,
+				y: -Math.cos(x) * r,
+				rotate: right ? degrees : degrees + 180,
+				anchor: right ? "start" : "end"
+			};
+		});
+		this.paintAxisLabels(stage, labels, "axis-labels", 10);
+	}
+};
+export { BundleHierarchy, BundleLayout, BundleSort, HierarchicalEdgeBundling };