Randomized Depth-First IV

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.

92% match

Randomized Depth-First

A randomized depth-first traversal generates a maze on a black canvas, with the active frontier of possible extensions highlighted in magenta. The algorithm starts in the bottom-left corner and repeatedly pops a frontier edge, carving passages in random directions while ensuring no cycles form. It renders to a 2D canvas using `d3.v3` and a `d3.timer` loop, drawing cells and corridors as white rectangles and spacing gaps. Each step redraws affected cells and frontier edges, with a shuffle applied to the frontier array to randomize the next choice.

82% match

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.

80% match

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.

78% match

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`.

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.

Wilson’s Algorithm IV

Wilson’s Algorithm IV applies D3’s tree layout to a maze generated by Wilson’s loop-erased random walk. The maze is represented as a hierarchical tree of connected cells, with SVG paths drawn as straight links between parent and child nodes. The code uses `d3.layout.tree`, `tree.nodes`, and `tree.links` to compute positions, while custom functions `generateMaze` and `generateTree` construct the maze’s spanning tree. The visualization shows the resulting tree structure with black connecting lines against a white background, using D3 v3 and SVG rendering.

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.