🕸️ Network Percolation — Giant Component Threshold
Add random edges to N nodes and watch the giant connected component emerge at p_c = 1/N (Erdős-Rényi transition). Observe the sharp phase transition in component size distribution.
About this simulation
This simulation builds an Erdős-Rényi random graph on N nodes by adding edges one at a time, each drawn uniformly at random from the shuffled list of all possible node pairs. A Union-Find (Disjoint Set Union) structure with path compression and union by rank tracks connected components in near-constant time as edges arrive. A live phase diagram plots the giant component fraction S against mean degree ⟨k⟩ = 2M/N, overlaying your simulation's current state on the theoretical curve S = 1 − e^(−⟨k⟩S). The critical threshold sits exactly at ⟨k⟩ = 1, where the largest component's growth rate abruptly changes character.
🔬 What it shows
N nodes (50–300) connected by randomly chosen edges, added one, ten, or continuously via Play. Each node is coloured by which connected component it belongs to; the largest component (the "giant component" once it forms) is highlighted in blue. A side panel plots S versus ⟨k⟩ against the theoretical curve and marks the critical point ⟨k⟩ = 1 with a dashed line, letting you watch the phase transition happen live.
🎮 How to use
Set the node count N and a target mean degree ⟨k⟩ with the sliders — moving ⟨k⟩ up adds edges immediately, moving it down triggers a full reset. Use Step +1 edge or Add 10 edges for fine control, or press Play to stream edges in continuously at the chosen speed. Watch the Edges M, mean degree ⟨k⟩, giant component fraction S, and component count update live as small clusters merge into one another.
💡 Did you know?
The Erdős-Rényi model, introduced by Pál Erdős and Alfréd Rényi in 1959–60, was one of the first rigorous demonstrations that random structures can undergo a sharp phase transition: below ⟨k⟩ = 1 every component is logarithmically small, but the instant ⟨k⟩ crosses 1, a single component suddenly spans a finite fraction of the entire graph — with no such component existing just below the threshold.
Frequently asked questions
What exactly is being randomised in this simulation?
The simulation pre-shuffles the full list of all possible node pairs (using a Fisher-Yates shuffle) and then reveals them one at a time as edges. This is equivalent to the G(N,M) Erdős-Rényi model, where exactly M edges are chosen uniformly at random from the N(N−1)/2 possible pairs, rather than including each edge independently with probability p — the two formulations converge for large N.
How does the simulation detect the giant component so quickly?
It uses a Union-Find (Disjoint Set Union) data structure. Every node starts in its own component; adding an edge calls union(a,b), which merges the two components by attaching the smaller tree's root to the larger tree's root. With path compression (flattening the tree on find) and union by rank, both operations run in almost constant time, so tracking components for hundreds of nodes and thousands of edges stays fast even in real time.
What does the mean degree ⟨k⟩ slider actually control?
⟨k⟩ is the average number of edges per node, computed as 2M/N where M is the current edge count. The slider sets a target ⟨k⟩; the simulation then computes the target edge count M = round(⟨k⟩·N/2) and either adds edges to reach it (if you increase ⟨k⟩) or performs a full reset and rebuilds from scratch (if you decrease it, since edges can't be un-added incrementally).
Why does the giant component appear so suddenly around ⟨k⟩ = 1?
Below ⟨k⟩ = 1, the random graph is a forest of small tree-like clusters, each of size O(log N), and none of them can grow into a finite fraction of the graph. As ⟨k⟩ crosses 1, the branching process describing cluster growth becomes supercritical: a cluster now has, on average, more than one new node to expand into at each step, so one cluster's growth compounds until it engulfs a fraction S of all N nodes, satisfying S = 1 − e^(−⟨k⟩S). This is a genuine second-order phase transition, not just a smooth trend.
Does the visual layout of nodes affect which nodes end up in the giant component?
No. The on-screen positions are purely cosmetic, generated by a simple force-directed repulsion layout (or a grid layout for large N) purely so nodes don't overlap visually. Which nodes join the giant component is determined entirely by the random edge order and the graph's connectivity — position on screen carries no information about degree or component membership.
Add random edges to nodes and watch the giant connected component emerge at p_c = 1/N. Observe the sharp Erdős-Rényi phase transition.
3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install