Skip to main content
SimilarExport ZIP
100%

Basic Laberinth

✓ Published1🌍 Public
IIan Newby
Last edited Dec 18, 2025
Created on Nov 29, 2020

This interactive D3 maze generator creates a 15x15 tile-based labyrinth. Players navigate by clicking directional arrows along the board’s edges to slide entire rows or columns of tiles, demonstrating a classic sliding-puzzle mechanic. The visualization uses SVG paths and gradients for the stone-textured board and colored tiles, with a redundant spare tile that moves as rows and columns shift. The code employs D3 selections and event handlers, including `select`, `range`, and custom `touch` logic, to manage tile state and animation on user input.

AI-generated description

Basic map generator for labyrinth type game

MIT Licensed

Similar vizzes

Loading thumbnail…

Random Search

This visualization animates a random search algorithm solving a maze, which was itself generated via random traversal. A magenta path highlights the best-known route from the top-right corner to the bottom-left, updating as the search progresses. The code uses D3 v3's timer API to drive the animation and a Canvas context for all drawing. The underlying maze and search logic are implemented directly with JavaScript arrays and bitwise operations to represent cell connections.

Mmbostock
73% 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
72% 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
72% match
Loading thumbnail…

Maze Hover

A maze rendered on a Canvas element fills the viewport, with a red path tracing the route from the top-left cell to the current mouse position. As the pointer moves over the grid of cells, the highlighted path updates dynamically, always showing the unique parent-child connection from the hovered cell back to the starting corner. The code uses D3 v3’s `d3.select` and `d3.mouse` to handle pointer events, while `generateMaze` builds the maze with a loop-erased random walk and `computeParents` derives each cell’s predecessor for path reconstruction. The black background and white maze structure are drawn with `fillRect`, with the red overlay repainted on every `mousemove`.

Mmbostock
72% 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
71% 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
71% 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
71% 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
69% match