HomeAlgorithms & AIMinimum Spanning Tree: Network Design (2D)

Minimum Spanning Tree: Network Design (2D)

Watch Prim's and Kruskal's algorithms build a minimum-cost network live on a 2D grid of sites, paired with a live distance-matrix heatmap that highlights every edge the tree keeps versus discards.

Algorithms & AI2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-minimum-spanning-tree-network-design ↗ Open standalone

Scatter a set of sites across a jittered 2D grid and watch two classic greedy algorithms — Prim's and Kruskal's — connect every one of them with the least possible total cable length, one edge at a time. This is the exact problem an engineer solves when routing fiber, power lines, or circuit-board traces between a fixed set of points: the minimum spanning tree connects everything with zero redundant links and provably minimal total cost. A live distance-matrix heatmap sits alongside the site map, its own genuinely 2D representation of the same complete graph, so you can watch the tree pick a sparse set of short, bright cells out of a dense field of long, dim ones exactly as the site map lights up green edge by edge. Toggle between the two algorithms to see how a tree that grows outward from one node (Prim's) compares edge-by-edge with one that is assembled globally from cheapest to most expensive link (Kruskal's), and track the running cable length and the percentage saved versus wiring every possible pair directly.

⚙ Under the hood

Watch Prim's and Kruskal's algorithms connect a jittered 2D grid of sites with the least total cable length, paired with a live distance-matrix heatmap that lights up green for every edge the tree keeps.

algorithmsgraph-theoryminimum-spanning-treeprimkruskalnetwork-designdistance-matrix2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)