Random Traversal IV

100%

Random Traversal IV

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 12, 2014

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.

AI-generated description

Applying a tree layout on random traversal.

gpl-3.0 Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Random Traversal

A black canvas displays a maze being generated cell by cell via a random traversal algorithm. White cells mark the growing maze structure, while magenta highlights the current frontier of possible extensions. The animation progresses in steps, using the Canvas API to draw rectangles for cells and connections. The code implements the algorithm with a frontier array and popRandom selection, using d3.v3's timer for animation control.

Mmbostock

82% match

Loading thumbnail…

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.

Mmbostock

81% 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

80% match

Loading thumbnail…

Random Traversal III

A canvas spanning tree floods with color as an animation, where hue represents Manhattan distance from the root. A Web Worker generates the maze using random traversal, and the main thread colors it via a d3.timer loop, writing pixel data with Canvas `putImageData`. The code uses d3.v3 for color and timing, with bitwise direction flags to track tree edges.

Mmbostock

79% 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

79% 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

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

78% match