Voronoi — Force-Directed Hypergraph

A graph drawn the way physics would draw it. Every node carries a like charge, so they all push apart; every edge is a spring pulling its members back together. Release a random scatter of points and the whole figure relaxes — repulsion against tension — until it settles into a balanced layout where nothing crowds and nothing strays. This is force-directed graph drawing, spring embedding in its oldest sense, and it needs no layout rules at all: the structure of the graph is the layout. The forces aren't all equal, either — each node pushes with its own charge and each spring pulls with its own tension and rest length (dial the variation), so the figure breaks out of any regular lattice into something more organic.

The edges here are directed hyperedges. An ordinary edge joins two nodes; a hyperedge joins a set of them, and a directed one splits that set into tails (sources) and heads (targets) — tail → ◇ → head, with the little diamond a shared hub the springs all pull toward and arrowheads marking the direction of flow. It's the right shape for the things real graphs are full of: a reaction with several reactants and products, a function of many inputs, a dependency that fans in and fans out. For now the graph is random — but the nodes and hyperedges already carry names (n0, e0, …), waiting to be driven from a named structure.

Underneath sits a second computation. The node positions induce a Voronoi tessellation: each node owns the patch of plane closer to it than to any other, and the boundaries fall exactly halfway between neighbors. Its dual is the Delaunay triangulation — connect two nodes whenever their Voronoi cells share an edge. Both are recomputed live, every frame, as the layout breathes; the partition is the negative space of the graph, redrawn continuously as the springs settle.

Drag a node to pull the figure around and watch it re-relax; tune the spring, repulsion, gravity, and variation; toggle the Voronoi cells and Delaunay edges; shuffle for a fresh random hypergraph. Drag empty space to pan, scroll to zoom, double-click to reset. Plain HTML5 canvas + JS — the layout, the triangulation (Bowyer–Watson), and the cells (half-plane clipping) are all hand-rolled, no libraries — light or dark to match the page. Source on GitHub.