Random Walk USA

100%

Random Walk USA

✓ Published0🌍 Public

Last edited Feb 5, 2016

Created on Feb 5, 2016

A random walk draws lines across a map of the United States, with each state’s shape filled by an organic, procedural scribble. The walker starts at each state’s centroid and moves in a random direction, using a point-in-polygon test to stay within the state’s boundaries. Use the mousewheel or the GUI controls to adjust the angle, density, scale, and smoothness of the walk, producing effects ranging from geometric grids to fluid sketches. Rendered on canvas with D3’s AlbersUSA projection, the example also offers preset styles such as Sketch, Geom, Squares, Triangles, and Random, plus a colorful palette to distinguish states.

AI-generated description

Created by Christopher Manning

Summary

This is an experiment using a random walk to draw shapes. Adjusting theta results in a very organic or procedural drawing. The random walk stays in the geometry by using a point in polygon test.

Controls

Use the mousewheel to adjust the angle

References

forked from <a href='http://bl.ocks.org/christophermanning/'>christophermanning</a>'s block: <a href='http://bl.ocks.org/christophermanning/8203750'>Random Walk USA</a>

Similar vizzes

Loading thumbnail…

Scribble map

A randomized scribble map of U.S. states, where each state is filled with hand-drawn-style hatch lines in varied colors. The scribbling fuzzes boundary points after generating grid-based hatch patterns, producing a looser, sketch-like effect that works best on convex shapes but leaves gaps at sharp angles like the Oklahoma panhandle. Built with D3.js and TopoJSON, it uses d3.line with curveCardinal for splines, d3.polygonArea for fuzz scaling, and topojson.neighbors for greedy color assignment. The SVG renders U.S. state boundaries from the us-10m.json TopoJSON dataset.

TThomasG77

76% match

Loading thumbnail…

Paint by Numbers

A coloring-book-style map of the United States lets visitors paint individual states by clicking or dragging, with a palette of nine colors selectable via mouse or number keys. The visualization uses d3.geo.albersUsa and d3.geo.path to render state boundaries from TopoJSON, while d3.behavior.drag manages interactive painting. Merged regions are drawn as SVG paths, and the current color assignments are encoded in the URL hash for sharing.

Mmbostock

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

73% match

Loading thumbnail…

random

The example defines two static JavaScript arrays—one mapping state names to regions and another mapping names to postal abbreviations—but renders no visualization. It sets up a minimal D3 v4 environment in an HTML page, importing the library via a CDN and applying a full-viewport margin reset. The code includes placeholder data for Arizona, Virginia, and Florida but contains no drawing, scaling, or interaction logic. It demonstrates only the initial data structuring step, leaving all subsequent visualization work unimplemented.

Aalexhoke

72% match

Loading thumbnail…

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

CCoola85

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

71% match

Loading thumbnail…

Branched Random Walk

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.

Mmbostock

71% match

Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall

71% match