Skip to main content
SimilarExport ZIP
100%

Prim’s Algorithm IV

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on May 12, 2014

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.

AI-generated description

Applying a tree layout on Prim’s algorithm.

gpl-3.0 Licensed

Similar vizzes

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
86% 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
83% match
Loading thumbnail…

Prim’s Algorithm II

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.

Mmbostock
83% 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
81% match
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
79% match
Loading thumbnail…

Random Traversal IV

This example shows a tree layout applied to a recursively generated maze, producing a branching structure of connected cells. The maze is created using a randomized depth-first traversal that records edge connections, and the resulting tree is rendered as a set of black link paths. The code uses `d3.layout.tree` to compute node positions from the maze’s traversal tree, then draws each link as an SVG path with `M` and `L` commands. The visualization is built with D3 v3 and SVG, with the maze generation logic implemented in plain JavaScript.

Mmbostock
79% match
Loading thumbnail…

Randomized Depth-First IV

A maze is generated on a 40x40 grid using a randomized depth-first traversal, then converted into a tree structure. The tree layout from D3 is applied to position the nodes, and SVG paths draw the links between parent and child nodes. The code uses `d3.layout.tree`, `d3.select`, and SVG path elements to render the final hierarchical visualization. The tree’s branching pattern visually reflects the maze’s corridors and dead ends, with each node representing a cell and each link a passage.

Mmbostock
78% match
Loading thumbnail…

Maze Tree

A maze, generated as a uniform spanning tree via Wilson’s algorithm, is drawn on a black canvas. The tree layout repositions each maze cell from its grid coordinates into a Reingold–Tilford tree, animating the transition over 2.5 seconds with d3 transitions and tweens. The code uses d3.layout.tree, d3.timer, and the Canvas 2D API to redraw links each frame, with nodes sorted by depth.

Mmbostock
72% match