Branched Random Walk

100%

Branched Random Walk

✓ Published0🌍 Public

Last edited Nov 15, 2016

Created on Oct 17, 2016

This example visualizes a branching random walk on a canvas. A single black main walk of 1,000 steps runs horizontally, and from every other point along it, multiple short colored branch walks emerge, each with fading opacity. Clicking the canvas regenerates the entire composition. The code uses d3.randomNormal to generate step offsets, d3.scaleSequential with d3.interpolateRainbow for branch colors, and the Canvas 2D API with globalCompositeOperation set to "multiply" to blend overlapping strokes.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

random-walk-merge

Hundreds of colored squares perform a synchronized random walk across a canvas, leaving fading trails as they drift. A mouse position controls the minimum square size and the step change magnitude, making the motion more chaotic near the bottom and right edges. The visualization uses `d3.interval` for timed updates and the Canvas 2D API with a semi-transparent white overlay to create a persistent, ghosting effect. Squares periodically merge when they land in the same horizontal position, incrementing a counter that determines their color via `d3.scaleOrdinal`.

11wheel

77% match

Loading thumbnail…

aRandom_walk?...

A gray–blue random walk unfolds across a black workspace, building a path as a timer iterates through 256 steps. Each step’s radius and color are determined by a random threshold, with the dominant color tracked and displayed in a live tally. The animation uses d3.v7 with SVG rendering and a `setInterval` loop, updating a text node to show counts, percentage progress, and the current lead.

Bblockmarket

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

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

73% match

Loading thumbnail…

d3 selection exploration

This example demonstrates a generative, interactive line chart within a black canvas. As a timer progresses, the visualization automatically appends points to a path, creating a random walk from the bottom of the screen upward. A semi-transparent radial gradient follows the user's mouse cursor, acting as a spotlight that reveals the chart's details. The implementation relies on D3 v7's selection and `.join()` operations to efficiently manage SVG elements, with mouse events updating a circle and text label in real time.

Bblockmarket

71% match

Loading thumbnail…

word random walk

The visualization displays a grid of small points that drift randomly across a dark canvas, forming a continuously evolving network of connected lines. It first renders the word “words” as a rasterized text mask using Canvas `getImageData` to identify which grid points lie inside the letters, then animates those active points with a random-walk motion. The animation, driven by `d3.timer`, updates each point’s position with slight random jitters, while drawing connections between neighboring points when they are within a Manhattan-distance threshold. Mouse movement repels nearby points, and clicking flips the entire grid horizontally or vertically, showcasing real-time interaction with the underlying point system.

11wheel

70% match

Loading thumbnail…

Tree Fractal with Randomness

This interactive tree fractal grows recursively from a trunk, splitting into branches whose length and angle change with mouse position. The Canvas API renders the structure, while a seeded pseudo-random number generator introduces stochastic variation, causing some branches to continue straight while others bifurcate. The drawing updates on mousemove events, with horizontal position controlling branch length ratio and vertical position adjusting angle difference. The code scales the canvas for high pixel density displays using devicePixelRatio.

CCurran Kelleher

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

70% match