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.
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.
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.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install