Prim’s Algorithm II

100%

Prim’s Algorithm II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 8, 2014

This example generates a maze using Prim’s algorithm and floods it with color to visualize Manhattan distance from the starting cell. As the animation progresses, a hue-changing fill pulses over frontier cells, highlighting the maze’s structure and growth pattern. The maze is drawn to a Canvas 2D context, with each cell and connecting wall filled via `fillRect`. The implementation uses D3 v3’s `d3.timer` for animation and `d3.hsl` for color encoding, while the maze generation relies on a custom binary heap for priority-based frontier expansion.

AI-generated description

This maze is generated using Prim’s algorithm and then flooded with color. Hue encodes Manhattan distance from the starting cell. (This is not an optimal visual encoding, but it suffices and is pretty.)

Color is useful to visually compare the structure of mazes; without color, the black and white alternating cells are too noisy to offer any pre-attentive comparisons. Compare a maze generated by Prim’s algorithm to random traversal, randomized depth-first traversal and Wilson’s algorithm.

See this color flood applied directly to the pixel grid.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Prim’s Algorithm III

The visualization shows a spanning tree of the canvas generated with Prim’s algorithm, then flooded with color from the root; hue encodes Manhattan distance, creating a distinctive gradient pattern. A Web Worker computes the maze structure using a custom binary min-heap priority queue, while the main thread animates the flood fill via `d3.timer` and writes pixel data directly into a Canvas `ImageData` object. The animation cycles through hues by incrementing a distance counter and calling `context.putImageData` each frame.

Mmbostock

89% match

Loading thumbnail…

Prim’s Algorithm V

A maze-like spanning tree fills a canvas, with its cells colored by a continuously cycling cubehelix color scale based on tree depth. The scale’s periodicity shifts over time, alternately emphasizing fine-grained local details and broader structural patterns. The visualization uses a Web Worker to generate the maze via Prim’s algorithm, then renders the result to a Canvas 2D context using `putImageData`, with animation driven by `d3.timer`.

Mmbostock

88% match

Loading thumbnail…

Prim’s Algorithm IV

The visualization displays an animated spanning tree generated by Prim’s algorithm on a maze, with colors cycling through a cubehelix color scale to highlight the tree's structure. The maze is computed asynchronously in a worker thread using a min-heap priority queue. The animation renders to a Canvas via `putImageData`, updating pixel colors every 20 milliseconds based on each cell's distance from the start, while rotating the hue through 360 degrees. D3.js (v3) provides the cubehelix interpolation and animation timing.

Mmbostock

87% match

Loading thumbnail…

Prim’s Algorithm IV

This example visualizes a random maze as a tree, generated using Prim’s algorithm with a randomized priority queue. The path from the root (bottom-right cell) to every other cell branches into a tidy, non-crossing layout produced by the D3 tree layout (`d3.layout.tree`). Links are drawn as straight SVG paths from each parent to its child. The maze itself is built by a custom `minHeap` implementation that selects edges with random weights, ensuring a uniformly random spanning tree.

Mmbostock

83% match

Loading thumbnail…

Randomized Depth-First II

A maze is generated using randomized depth-first traversal, then flooded with color to reveal its structure. Hue encodes the Manhattan distance from the starting cell, making the maze’s branching patterns visually comparable. The animation is rendered on a Canvas 2D context, drawing cells and passages incrementally as the flood expands. The code uses D3’s `d3.timer` to drive the animation loop and `d3.hsl` to cycle hue over time, while a custom `generateMaze` function builds the maze and `fillRect` calls paint each cell and connecting corridor.

Mmbostock

83% match

Loading thumbnail…

Random Traversal II

A maze is generated by random traversal and then flooded with colored light. Hue encodes the Manhattan distance from the starting cell, creating a vibrant gradient that reveals the maze’s branching structure. The animation uses a canvas, with `d3.timer` driving the flood fill, while `context.fillRect` paints each cell and corridor. The maze itself is built from an edge-bit array, and the color progression cycles through the HSL spectrum via `d3.hsl`.

Mmbostock

81% match

Loading thumbnail…

Randomized Depth-First III

A spanning tree of the canvas is generated using randomized depth-first traversal and then flooded with color, where hue encodes Manhattan distance from the root. The animation runs in a web worker, with each frame painting new frontier cells via Canvas `putImageData` and `createImageData`. The visualization uses D3’s `d3.timer` and `d3.hsl` for color cycling, while the maze structure is built incrementally by shuffling frontier edges in the worker’s `generateMaze` function.

Mmbostock

79% match

Loading thumbnail…

Prim’s Algorithm

Prim’s Algorithm visualizes the construction of a minimum spanning tree on a grid of randomly weighted edges. A magenta frontier expands from the bottom-left corner, with d3.timer driving the step-by-step animation. Each iteration pops the lowest-weight edge from a custom minHeap, adds it to the tree, and updates the frontier on a canvas. The rendering uses manual Canvas 2D fillRect calls to draw cells and connections, with black indicating unexplored space and white showing the growing tree.

Mmbostock

78% match