@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/network/NetworkSamples.js

@@ -0,0 +1,127 @@
+import { SampleData } from "../../data/SampleData.js";
+import { geoDistance } from "d3";
+// src/charts/network/NetworkSamples.ts
+/** Reshapes of `SampleData` graphs that the tree-like default cannot show. */
+var NetworkSamples = class {
+	/** A clustered graph with cycles: the union of several seeded spanning graphs over the same nodes. */
+	static clustered(seed, count = 36, groups = 4, layers = 2) {
+		const base = SampleData.graph(seed, count, groups);
+		const links = new Map(base.links.map((link) => [`${link.source}-${link.target}`, link]));
+		for (let layer = 1; layer < layers; layer++) for (const link of SampleData.graph(seed + layer * 7, count, groups).links) {
+			const key = `${link.source}-${link.target}`;
+			if (!links.has(key)) links.set(key, link);
+		}
+		return {
+			nodes: base.nodes,
+			links: [...links.values()]
+		};
+	}
+	/** The clustered graph split into two sides by breadth-first parity, keeping only links across. */
+	static bipartite(seed, count = 26) {
+		const tree = SampleData.graph(seed, count, 4);
+		const side = /* @__PURE__ */ new Map([[tree.nodes[0].id, 0]]);
+		for (const link of tree.links) side.set(link.target, 1 - (side.get(link.source) ?? 0));
+		const extra = SampleData.graph(seed + 3, count, 4).links.filter((link) => side.get(link.source) !== side.get(link.target));
+		const seen = new Set(tree.links.map((link) => `${link.source}-${link.target}`));
+		return {
+			nodes: tree.nodes.map((node) => ({
+				...node,
+				group: side.get(node.id) ? "Projects" : "People"
+			})),
+			links: [...tree.links, ...extra.filter((link) => !seen.has(`${link.source}-${link.target}`))]
+		};
+	}
+	/** A layered flow with thinned links and links that skip layers, so a DAG layout has real work to do. */
+	static dag(seed) {
+		const flow = SampleData.flow(seed, 5, 4), other = SampleData.flow(seed + 1, 5, 4);
+		const kept = flow.links.filter((link) => (link.value ?? 0) % 3 !== 0);
+		const skips = other.links.filter((link) => (link.value ?? 0) % 5 === 0).map((link) => ({
+			...link,
+			target: link.target.replace(/L(\d)/, (_, l) => `L${Math.min(4, +l + 1)}`)
+		}));
+		const links = [...kept, ...skips].filter((link) => link.source.slice(1, 2) < link.target.slice(1, 2));
+		return {
+			nodes: [...flow.nodes].sort((a, b) => (a.id.charCodeAt(3) * 7 + a.id.charCodeAt(1) * 3) % 5 - (b.id.charCodeAt(3) * 7 + b.id.charCodeAt(1) * 3) % 5),
+			links
+		};
+	}
+	/** A two-attribute node table for roll-ups: adds `tier` beside `group`. */
+	static tiered(seed) {
+		const graph = this.clustered(seed, 60, 4);
+		return {
+			nodes: graph.nodes.map((node, i) => ({
+				...node,
+				tier: [
+					"Junior",
+					"Mid",
+					"Senior"
+				][(i * 7 + (node.value ?? 0)) % 3]
+			})),
+			links: graph.links
+		};
+	}
+	/** World cities as located nodes, each linked to its nearest neighbours. */
+	static located(seed) {
+		const nodes = SampleData.cities(seed).map((city) => {
+			const lon = city.lon;
+			return {
+				id: String(city.name),
+				value: city.value,
+				lon,
+				lat: city.lat,
+				group: lon < -30 ? "Americas" : lon < 60 ? "Europe & Africa" : "Asia Pacific"
+			};
+		});
+		const links = /* @__PURE__ */ new Map();
+		for (const a of nodes) {
+			const near = nodes.filter((b) => b !== a).sort((p, q) => geoDistance([a.lon, a.lat], [p.lon, p.lat]) - geoDistance([a.lon, a.lat], [q.lon, q.lat])).slice(0, 2);
+			for (const b of near) {
+				const [source, target] = [a.id, b.id].sort();
+				links.set(`${source}-${target}`, {
+					source,
+					target,
+					value: Math.round(Math.sqrt(a.value * b.value))
+				});
+			}
+		}
+		return {
+			nodes,
+			links: [...links.values()]
+		};
+	}
+	/** A chain folded back on itself in a coil, jittered by a random walk; nearby residue pairs become contacts valued 0..1. */
+	static chain(seed, residues = 48) {
+		const walk = SampleData.timeSeries(seed, residues, 3), half = residues / 2;
+		const jitter = (i, axis) => (walk[i + axis * residues].value - walk[axis * residues].value) * .08;
+		const points = Array.from({ length: residues }, (_, i) => {
+			const along = i < half ? i : residues - 1 - i, turn = along * .3;
+			return [
+				14 * Math.cos(turn) + jitter(i, 0),
+				14 * Math.sin(turn) + jitter(i, 1),
+				along * .2 + (i < half ? 0 : 2.5) + jitter(i, 2)
+			];
+		});
+		const distance = (a, b) => Math.hypot(...points[a].map((value, k) => value - points[b][k]));
+		const segments = [
+			"Helix",
+			"Loop",
+			"Sheet"
+		];
+		return {
+			nodes: points.map((_, i) => ({
+				id: `R${i + 1}`,
+				group: segments[Math.floor(i / 9) % 3],
+				value: 1
+			})),
+			links: points.flatMap((_, i) => points.slice(i + 1).flatMap((__, k) => {
+				const value = Math.exp(-distance(i, i + 1 + k) / 3);
+				return value > .1 ? [{
+					source: `R${i + 1}`,
+					target: `R${i + k + 2}`,
+					value: +value.toFixed(3)
+				}] : [];
+			}))
+		};
+	}
+};
+export { NetworkSamples };

package/dist/charts/network/NodeLinkNetwork.js

@@ -0,0 +1,91 @@
+import { EdgeRouter } from "./EdgeRouter.js";
+import { NetworkEdge, NetworkMetric } from "./networkEnums.js";
+import { NetworkChart } from "./NetworkChart.js";
+// src/charts/network/NodeLinkNetwork.ts
+/** Every chart that positions dots and joins them: subclasses supply the positions. */
+var NodeLinkNetwork = class extends NetworkChart {
+	defaults() {
+		return {
+			...super.defaults(),
+			nodeSize: NetworkMetric.Degree,
+			edge: NetworkEdge.Straight,
+			arrows: false,
+			weighted: false
+		};
+	}
+	/** Marks under the edges: hulls, ring guides, backdrops. */
+	underlay(_ctx, _model, _placed) {}
+	/** Path for one link. Override to change the shape per link or to add route settings. */
+	routeEdge(_link, input) {
+		return EdgeRouter.route(this.options.edge ?? NetworkEdge.Straight, input);
+	}
+	style(ctx, link, width) {
+		return {
+			...this.edgeTone(ctx, link),
+			width
+		};
+	}
+	/** Hook for charts with a natural outward side for labels. */
+	drawLabelSide(_ctx, placed) {
+		return placed;
+	}
+	centre(ctx) {
+		return {
+			x: ctx.plot.width / 2,
+			y: ctx.plot.height / 2
+		};
+	}
+	/** Centroid of each group, for bundling. */
+	hubs(placed) {
+		const sums = /* @__PURE__ */ new Map();
+		for (const { node, x, y } of placed) {
+			const sum = sums.get(node.group) ?? {
+				x: 0,
+				y: 0,
+				n: 0
+			};
+			sums.set(node.group, {
+				x: sum.x + x,
+				y: sum.y + y,
+				n: sum.n + 1
+			});
+		}
+		return new Map([...sums].map(([group, { x, y, n }]) => [group, {
+			x: x / n,
+			y: y / n
+		}]));
+	}
+	drawNetwork(ctx, model) {
+		const { arrows = false, weighted = false, nodeSize = NetworkMetric.Degree } = this.options;
+		const radii = this.radii(model, nodeSize, ctx);
+		const points = this.place(ctx, model, radii);
+		const placed = model.nodes.map((node) => ({
+			node,
+			r: radii[node.index],
+			...points[node.index]
+		}));
+		this.underlay(ctx, model, placed);
+		const hubs = this.hubs(placed), center = this.centre(ctx), width = this.widths(model, weighted);
+		const edges = model.links.map((link) => {
+			const a = placed[link.source.index], b = placed[link.target.index];
+			const via = link.source.group === link.target.group ? [hubs.get(link.source.group)] : [hubs.get(link.source.group), hubs.get(link.target.group)];
+			return {
+				link,
+				...this.routeEdge(link, {
+					a,
+					b,
+					ra: a.r,
+					rb: b.r,
+					center,
+					via,
+					arrow: arrows
+				}),
+				...this.style(ctx, link, width(link))
+			};
+		});
+		const paths = this.paintEdges(ctx, edges);
+		this.paintNodes(ctx, model, placed, paths);
+		this.paintLabels(ctx, this.drawLabelSide(ctx, placed));
+	}
+};
+export { NodeLinkNetwork };

package/dist/charts/network/PivotGraph.js

@@ -0,0 +1,149 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { NetworkEdge, NetworkMetric } from "./networkEnums.js";
+import { NetworkModel } from "./NetworkModel.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { NodeLinkNetwork } from "./NodeLinkNetwork.js";
+import { scalePoint } from "d3";
+// src/charts/network/PivotGraph.ts
+var PivotMeasure = /* @__PURE__ */ function(PivotMeasure) {
+	PivotMeasure["Count"] = "count";
+	PivotMeasure["Sum"] = "sum";
+	return PivotMeasure;
+}({});
+/** Wattenberg's PivotGraph: a cross-tab of a network, to compare ties between categories, not individuals. */
+var PivotGraph = class extends NodeLinkNetwork {
+	static meta = {
+		id: "pivot-graph",
+		name: "PivotGraph",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Rolls a network up onto a grid of two node attributes, showing how whole categories connect.",
+		tags: [
+			"network",
+			"pivot",
+			"rollup",
+			"multivariate graph"
+		],
+		sample: (seed) => NetworkSamples.tiered(seed),
+		variants: {
+			edge: [
+				NetworkEdge.Arc,
+				NetworkEdge.Straight,
+				NetworkEdge.Tapered
+			],
+			arrows: [true, false],
+			measure: ["count", "sum"],
+			nodeSize: [
+				NetworkMetric.Value,
+				NetworkMetric.Degree,
+				NetworkMetric.Uniform
+			]
+		},
+		valid: ({ edge, arrows, measure, nodeSize }) => !(edge === NetworkEdge.Tapered && arrows) && (measure === "count" || nodeSize === NetworkMetric.Value)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			pivotX: "group",
+			pivotY: "tier",
+			measure: "count",
+			edge: NetworkEdge.Arc,
+			arrows: true,
+			weighted: true,
+			nodeSize: NetworkMetric.Value,
+			labels: 0
+		};
+	}
+	plotMargin() {
+		return {
+			top: 22,
+			right: 24,
+			bottom: 18,
+			left: 66
+		};
+	}
+	cell(node) {
+		const { pivotX, pivotY } = this.options;
+		return [String(node.raw?.[pivotX] ?? "Other"), String(node.raw?.[pivotY] ?? "Other")];
+	}
+	view(model) {
+		const sum = this.options.measure === "sum", nodes = /* @__PURE__ */ new Map();
+		const id = (node) => this.cell(node).join("\0");
+		for (const node of model.nodes) {
+			const [column, row] = this.cell(node), hit = nodes.get(id(node));
+			if (hit) hit.value += sum ? node.value : 1;
+			else nodes.set(id(node), {
+				id: id(node),
+				group: column,
+				value: sum ? node.value : 1,
+				row,
+				label: `${column} / ${row}`
+			});
+		}
+		const links = model.links.map(({ source, target, value }) => ({
+			source: id(source),
+			target: id(target),
+			value: sum ? value : 1
+		}));
+		return NetworkModel.from({
+			nodes: [...nodes.values()],
+			links
+		}, { nodeLabel: "label" });
+	}
+	axes(ctx, model) {
+		const columns = model.groups, rows = [...new Set(model.nodes.map((node) => String(node.raw?.row)))].sort();
+		return {
+			columns,
+			rows,
+			x: scalePoint(columns, [0, ctx.plot.width]).padding(.5),
+			y: scalePoint(rows, [0, ctx.plot.height]).padding(.5)
+		};
+	}
+	radii(model, metric, ctx) {
+		const { x, y } = this.axes(ctx, model);
+		return this.capped(super.radii(model, metric, ctx).map((r) => r * 2), Math.min(x.step() || 40, y.step() || 40) * .36);
+	}
+	place(ctx, model) {
+		const { x, y } = this.axes(ctx, model);
+		return model.nodes.map((node) => ({
+			x: x(node.group),
+			y: y(String(node.raw?.row))
+		}));
+	}
+	underlay(ctx, model) {
+		const { columns, rows, x, y } = this.axes(ctx, model);
+		const lines = ctx.marks("rules", "line", [...columns.map((c) => ({
+			key: `x/${c}`,
+			at: x(c),
+			flip: true
+		})), ...rows.map((r) => ({
+			key: `y/${r}`,
+			at: y(r),
+			flip: false
+		}))], (d) => d.key).attr("stroke", ctx.theme.grid).attr("stroke-width", 1);
+		const end = {
+			x1: (d) => d.flip ? d.at : 0,
+			x2: (d) => d.flip ? d.at : ctx.plot.width,
+			y1: (d) => d.flip ? 0 : d.at,
+			y2: (d) => d.flip ? ctx.plot.height : d.at
+		};
+		ctx.set(lines, end, end);
+		this.paintAxisLabels(ctx, [...columns.map((c) => ({
+			key: `x/${c}`,
+			text: c.slice(0, Math.floor((x.step() || 60) / 6.2)),
+			x: x(c),
+			y: -12
+		})), ...rows.map((r) => ({
+			key: `y/${r}`,
+			text: r.slice(0, 10),
+			x: -8,
+			y: y(r),
+			anchor: "end"
+		}))]);
+	}
+	legendItems() {
+		return [];
+	}
+};
+export { PivotGraph, PivotMeasure };

package/dist/charts/network/RadialNetwork.js

@@ -0,0 +1,155 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { EdgeRouter } from "./EdgeRouter.js";
+import { GraphMetrics } from "./GraphMetrics.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/RadialNetwork.ts
+/** What decides a node's ring. Rank-based bases put the most central nodes innermost. */
+var RadialRing = /* @__PURE__ */ function(RadialRing) {
+	RadialRing["Distance"] = "distance";
+	RadialRing["Degree"] = "degree";
+	RadialRing["KCore"] = "k-core";
+	RadialRing["Betweenness"] = "betweenness";
+	return RadialRing;
+}({});
+var RadialSweep = /* @__PURE__ */ function(RadialSweep) {
+	RadialSweep["Group"] = "group";
+	RadialSweep["Input"] = "input";
+	RadialSweep["Barycentre"] = "barycentre";
+	return RadialSweep;
+}({});
+/** A concentric layout: for networks where one measure, like distance from a hub or coreness, should read as radius. */
+var RadialNetwork = class extends NodeLinkNetwork {
+	static meta = {
+		id: "radial-network",
+		name: "Radial network",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Arranges nodes on concentric rings by distance or centrality, so importance reads as closeness to the centre.",
+		tags: [
+			"network",
+			"concentric",
+			"shell layout",
+			"radial"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 36, 4, 3),
+		variants: {
+			ring: [
+				"distance",
+				"degree",
+				"k-core",
+				"betweenness"
+			],
+			sweep: [
+				"barycentre",
+				"group",
+				"input"
+			],
+			edge: [
+				NetworkEdge.Straight,
+				NetworkEdge.Curve,
+				NetworkEdge.Bundled
+			],
+			guides: [true, false],
+			nodeSize: [NetworkMetric.Degree, NetworkMetric.Uniform]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			ring: "distance",
+			sweep: "barycentre",
+			guides: true
+		};
+	}
+	levels(model) {
+		const { ring, focus } = this.options;
+		const bands = (scores) => {
+			const ranked = model.nodes.map((node) => node.index).sort((a, b) => scores[b] - scores[a] || a - b);
+			const levels = model.nodes.map(() => 0), sizes = [
+				Math.ceil(ranked.length * .08),
+				.22,
+				.32
+			].map((share, i) => i ? Math.ceil(ranked.length * share) : share);
+			let cursor = 0;
+			sizes.concat(ranked.length).forEach((size, level) => {
+				for (const index of ranked.slice(cursor, cursor + size)) levels[index] = level;
+				cursor += size;
+			});
+			return levels;
+		};
+		if (ring === "degree") return bands(model.nodes.map((node) => node.degree));
+		if (ring === "betweenness") return bands(GraphMetrics.betweenness(model));
+		if (ring === "k-core") {
+			const core = GraphMetrics.coreness(model), top = Math.max(...core);
+			return core.map((value) => top - value);
+		}
+		const start = focus !== void 0 && model.byId.get(focus) || model.hub;
+		const hops = GraphMetrics.hops(model, start.index), far = Math.max(...hops) + 1;
+		return hops.map((hop) => hop < 0 ? far : hop);
+	}
+	rings(model) {
+		const levels = this.levels(model), rings = [];
+		for (const node of GraphOrder.sort(model, this.options.sweep === "input" ? NetworkOrder.Input : NetworkOrder.Group)) (rings[levels[node.index]] ??= []).push(node);
+		return rings.filter((ring) => ring?.length);
+	}
+	radiusAt(ctx, level, rings) {
+		const outer = Math.min(ctx.plot.width, ctx.plot.height) / 2 - 16, solo = rings[0].length === 1;
+		return outer * (level + (solo ? 0 : 1)) / (rings.length - (solo ? 1 : 0) || 1);
+	}
+	radii(model, metric, ctx) {
+		const rings = this.rings(model), spare = rings.map((ring, level) => 2 * Math.PI * this.radiusAt(ctx, level, rings) / ring.length || Infinity);
+		return this.capped(super.radii(model, metric, ctx), Math.min(...spare, (Math.min(ctx.plot.width, ctx.plot.height) / 2 - 16) / rings.length) * .5);
+	}
+	place(ctx, model) {
+		const rings = this.rings(model), angle = /* @__PURE__ */ new Map();
+		const { x: cx, y: cy } = this.centre(ctx), points = [];
+		const spectral = GraphOrder.sort(model, NetworkOrder.Spectral);
+		rings.forEach((ring, level) => {
+			const seated = ring.length > 1 ? spectral.filter((node) => ring.includes(node)) : ring;
+			const sorted = this.options.sweep !== "barycentre" ? ring : level ? GraphOrder.barycentre(ring, model, angle) : seated;
+			const radius = this.radiusAt(ctx, level, rings);
+			sorted.forEach((node, i) => {
+				const turn = i / sorted.length * 2 * Math.PI - Math.PI / 2 + level * .18;
+				angle.set(node.id, i / sorted.length);
+				points[node.index] = {
+					x: cx + Math.cos(turn) * radius,
+					y: cy + Math.sin(turn) * radius
+				};
+			});
+		});
+		return points;
+	}
+	underlay(ctx, model) {
+		const rings = this.rings(model), { x, y } = this.centre(ctx);
+		const levels = this.options.guides ? rings.map((_, level) => this.radiusAt(ctx, level, rings)).filter((r) => r > 0) : [];
+		const guides = ctx.marks("guides", "circle", levels).attr("fill", "none").attr("stroke", ctx.theme.grid).attr("stroke-width", 1.5);
+		ctx.set(guides, {
+			cx: x,
+			cy: y,
+			r: (r) => r
+		}, {
+			cx: x,
+			cy: y,
+			r: 0
+		});
+	}
+	routeEdge(_link, input) {
+		return EdgeRouter.route(this.options.edge, this.options.edge === NetworkEdge.Bundled ? {
+			...input,
+			via: [input.center],
+			bundle: .55
+		} : input);
+	}
+	drawLabelSide(ctx, placed) {
+		const { x } = this.centre(ctx);
+		return placed.map((d) => ({
+			...d,
+			side: d.x >= x ? "right" : "left"
+		}));
+	}
+};
+export { RadialNetwork, RadialRing, RadialSweep };

package/dist/charts/network/SpanningTreeChart.js

@@ -0,0 +1,117 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { EdgeRouter } from "./EdgeRouter.js";
+import { GraphLayouts } from "./GraphLayouts.js";
+import { GraphTrees } from "./GraphTrees.js";
+import { NetworkEdge, NetworkMetric, NetworkSpanning } from "./networkEnums.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { NodeLinkNetwork } from "./NodeLinkNetwork.js";
+import { hierarchy, tree } from "d3";
+// src/charts/network/SpanningTreeChart.ts
+/** Tidy and Radial lay out the tree itself; Overlay highlights it on a force layout of the whole graph. */
+var SpanningLayout = /* @__PURE__ */ function(SpanningLayout) {
+	SpanningLayout["Tidy"] = "tidy";
+	SpanningLayout["Radial"] = "radial";
+	SpanningLayout["Overlay"] = "overlay";
+	return SpanningLayout;
+}({});
+/** The backbone of a network: minimum-cost wiring, or a shortest-route tree from one source. */
+var SpanningTreeChart = class extends NodeLinkNetwork {
+	static meta = {
+		id: "spanning-tree",
+		name: "Spanning tree",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Extracts the backbone of a network, such as its minimum spanning or shortest-path tree, and draws it cleanly.",
+		tags: [
+			"network",
+			"mst",
+			"backbone",
+			"shortest path",
+			"tree"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 34, 4),
+		variants: {
+			method: [
+				NetworkSpanning.MinimumWeight,
+				NetworkSpanning.MaximumWeight,
+				NetworkSpanning.BreadthFirst,
+				NetworkSpanning.DepthFirst,
+				NetworkSpanning.ShortestPath
+			],
+			layout: [
+				"tidy",
+				"radial",
+				"overlay"
+			],
+			ghosts: [false, true],
+			edge: [NetworkEdge.Bump, NetworkEdge.Straight]
+		},
+		valid: ({ layout, ghosts, edge }) => layout !== "overlay" || ghosts === true && edge === NetworkEdge.Bump
+	};
+	chosen = /* @__PURE__ */ new Set();
+	defaults() {
+		return {
+			...super.defaults(),
+			method: NetworkSpanning.MinimumWeight,
+			layout: "tidy",
+			ghosts: false,
+			edge: NetworkEdge.Bump,
+			nodeSize: NetworkMetric.Uniform,
+			weighted: true
+		};
+	}
+	rootOf(model) {
+		return this.options.root !== void 0 && model.byId.get(this.options.root) || model.hub;
+	}
+	view(model) {
+		this.chosen = GraphTrees.span(model, this.options.method, this.rootOf(model));
+		return this.options.ghosts ? model : model.subgraph(model.nodes, (link) => this.chosen.has(link.key));
+	}
+	place(ctx, model, radii) {
+		const { layout } = this.options, pad = Math.max(...radii) + 2;
+		if (layout === "overlay") return GraphLayouts.relax(GraphLayouts.fit(GraphLayouts.force(model, {
+			box: ctx.plot,
+			radii
+		}), ctx.plot, pad), radii, ctx.plot);
+		const root = hierarchy(GraphTrees.branches(model, this.chosen, this.rootOf(model)), (d) => d.children);
+		const radial = layout === "radial", { x: cx, y: cy } = this.centre(ctx);
+		const reach = Math.min(cx, cy) - pad;
+		const laid = (radial ? tree().size([2 * Math.PI, reach + reach / Math.max(1, root.height - 1)]).separation((a, b) => (a.parent === b.parent ? 1 : 2) / (a.depth || 1)) : tree().size([ctx.plot.width - pad * 2, ctx.plot.height - pad * 2 + (ctx.plot.height - pad * 2) / Math.max(1, root.height - 1)]))(root);
+		const step = (radial ? reach : ctx.plot.height - pad * 2) / Math.max(1, root.height - 1);
+		const points = [];
+		for (const branch of laid.descendants()) {
+			const { node } = branch.data;
+			if (!node) continue;
+			const y = (branch.depth - 1) * step;
+			points[node.index] = radial ? {
+				x: cx + Math.sin(branch.x) * y,
+				y: cy - Math.cos(branch.x) * y
+			} : {
+				x: pad + branch.x,
+				y: pad + y
+			};
+		}
+		return points;
+	}
+	routeEdge(link, input) {
+		if (!this.chosen.has(link.key)) return EdgeRouter.route(NetworkEdge.Straight, input);
+		const tidy = this.options.layout === "tidy", { edge } = this.options;
+		return EdgeRouter.route(edge === NetworkEdge.Bump && !tidy ? NetworkEdge.Curve : edge, {
+			...input,
+			axis: "y"
+		});
+	}
+	style(ctx, link, width) {
+		return this.chosen.has(link.key) ? {
+			...this.edgeTone(ctx, link),
+			opacity: .9,
+			width
+		} : {
+			color: ctx.theme.axis,
+			opacity: .45,
+			width: 1
+		};
+	}
+};
+export { SpanningLayout, SpanningTreeChart };

package/dist/charts/network/StressLayoutGraph.js

@@ -0,0 +1,63 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { GraphLayouts } from "./GraphLayouts.js";
+import { NetworkEdge, NetworkMetric } from "./networkEnums.js";
+import { NetworkSamples } from "./NetworkSamples.js";
+import { NodeLinkNetwork } from "./NodeLinkNetwork.js";
+// src/charts/network/StressLayoutGraph.ts
+var StressAlgorithm = /* @__PURE__ */ function(StressAlgorithm) {
+	StressAlgorithm["Stress"] = "stress";
+	StressAlgorithm["ClassicalMds"] = "classical-mds";
+	StressAlgorithm["Spectral"] = "spectral";
+	return StressAlgorithm;
+}({});
+/** Positions that respect graph distance: use where on-screen distance has to mean something, unlike a force layout. */
+var StressLayoutGraph = class extends NodeLinkNetwork {
+	static meta = {
+		id: "stress-layout-graph",
+		name: "Stress layout graph",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Solves node positions so on-screen distance matches graph distance, with stress, MDS or spectral methods.",
+		tags: [
+			"network",
+			"stress majorization",
+			"mds",
+			"spectral layout",
+			"node-link"
+		],
+		sample: (seed) => NetworkSamples.clustered(seed, 36, 4),
+		variants: {
+			algorithm: [
+				"stress",
+				"classical-mds",
+				"spectral"
+			],
+			edge: [
+				NetworkEdge.Straight,
+				NetworkEdge.Arc,
+				NetworkEdge.Bundled
+			],
+			nodeSize: [
+				NetworkMetric.Betweenness,
+				NetworkMetric.Degree,
+				NetworkMetric.Closeness,
+				NetworkMetric.PageRank,
+				NetworkMetric.Uniform
+			]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			algorithm: "stress",
+			nodeSize: NetworkMetric.Betweenness
+		};
+	}
+	place(ctx, model, radii) {
+		const { algorithm } = this.options;
+		const raw = algorithm === "spectral" ? GraphLayouts.spectral(model) : algorithm === "classical-mds" ? GraphLayouts.classicalMds(model) : GraphLayouts.stress(model);
+		return GraphLayouts.relax(GraphLayouts.fit(raw, ctx.plot, Math.max(...radii) + 2), radii, ctx.plot);
+	}
+};
+export { StressAlgorithm, StressLayoutGraph };