Algorithm examples

Nodus ships a set of classic graph algorithms you can run over a live graph and feed straight back into styling. Most take an explicit { nodes, edges } pair — typically nodus.getNodes() and nodus.getEdges() — and return the elements they found, which you can then color or resize. See the Algorithms API for the full list and return shapes.

Every demo runs live in your browser — drag, zoom and use the controls.

Shortest path

shortestPath is async and also takes a source and target. It returns the nodes along the shortest route, which the demo highlights in teal.

const result = await nodus.algorithms.shortestPath({
  source: FIRST,
  target: LAST,
  nodes: nodus.getNodes(),
  edges: nodus.getEdges(),
});
result.forEach((n) => n.setAttributes({ color: '#0f766e', radius: 16 }));

Shortest pathOpen in new tab ↗

Connected components

Splits the graph into its disconnected clusters. The demo paints each component a different color from a palette.

const comps = nodus.getConnectedComponents();
comps.forEach((comp, i) => {
  const color = palette[i % palette.length];
  comp.setAttributes({ color });
});

Connected componentsOpen in new tab ↗

Minimum spanning tree

Finds a minimum spanning tree — the smallest set of edges that keeps the graph connected — and highlights those edges.

const mst = nodus.algorithms.minimumSpanningTree({
  nodes: nodus.getNodes(),
  edges: nodus.getEdges(),
});
mst.forEach((e) => e.setAttributes({ color: '#0f766e', width: 4 }));

Minimum spanning treeOpen in new tab ↗

Betweenness centrality

Scores each node by how often it lies on shortest paths between other nodes. Bridge nodes score highest; the demo maps the score to radius and color.

const result = nodus.algorithms.betweenness();
const max = Math.max(...values);
result.forEach((val, id) => {
  const t = max > 0 ? val / max : 0;
  nodus.getNode(id).setAttributes({
    radius: 10 + t * 16,
    color: t > 0.5 ? '#0f766e' : '#94a3b8',
  });
});

Betweenness centralityOpen in new tab ↗

Cycle detection

Enumerates every simple cycle in the graph. The demo reports the count and highlights one of them.

const cycles = nodus.algorithms.getAllSimpleCycles({
  nodes: nodus.getNodes(),
  edges: nodus.getEdges(),
});
status.textContent = cycles.length + ' simple cycles';

Cycle detectionOpen in new tab ↗

BFS & DFS

bfs and dfs walk the graph from a { root } id. They don’t return a list — instead an onNode callback fires for each node in visit order, so collect them there (return true to stop early).

const visited = [];
nodus.algorithms.bfs({
  root: 0,
  onNode: (node) => { visited.push(node); },
});
visited.forEach((node, i) =>
  node.setAttributes({ color: '#0f766e', radius: 18 }, { duration: 400 + i * 120 }));

BFS & DFSOpen in new tab ↗

Circle packing

circlePack tightly packs a set of nodes together, eliminating overlaps while honouring each node’s radius. It animates over the given duration.

await nodus.algorithms.circlePack({
  nodes: nodus.getNodes(),
  duration: 600,
});
await nodus.view.locateGraph();

Circle packingOpen in new tab ↗

Fisheye focus

fishEyeExpand spreads nodes outward from a focus point, opening up space around it. focusNode is an actual Node (here the one you click), and deltaRadius controls how far the surrounding nodes are pushed.

nodus.algorithms.fishEyeExpand({
  nodes: nodus.getNodes(),
  focusNode: node, // the clicked Node
  deltaRadius: 70,
  duration: 500,
});

Fisheye focusOpen in new tab ↗