The Walk of PI

100%

The Walk of PI

✓ Published0🌍 Public

Last edited Dec 20, 2015

Created on Dec 16, 2015

The Walk of PI visualizes the first 2216 digits of pi in base 8 as a continuous path on an SVG canvas. It shows the digits as a walk where each digit (0-7) determines one of eight directional steps from the previous point, creating a dense, meandering line. The visualization uses D3.js (v3) to render the path and circles, with hover interactions revealing individual digits. It includes zoom and pan via D3’s zoom behavior, plus buttons to redraw the animation or reset the view. The data comes from a static string of pi’s octal digits, processed sequentially to build the path.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 0f0c45136069ee6e7366afef684f3373

This animation cycles through the digits of pi, displaying each digit one at a time in a console. The digits are sourced from a remote JSON file containing the mathematical constant. The code uses the `fetch` API to retrieve the data, `console.clear()` and `console.log()` for output, and a `setInterval` timer to control the pace of the digit display.

MMAKIO135

70% match

Loading thumbnail…

Data Folowing a Path

A collection of pink circles animates along a fixed black path, each circle traveling from the path’s start to its end in sequence. The visualization shows how data points can follow a predefined geometric route, with each circle representing a discrete step. The code uses D3 v5’s `scaleLinear` to map indices to path lengths, and `transition.attrTween` with `getPointAtLength` to move each circle along the SVG path. The animation uses `d3.easeCircleInOut` for smooth acceleration and deceleration, with the path defined by a complex Bézier string.

HHalian Vilela

66% match

Loading thumbnail…

The Walk of Genes

The Walk of Genes visualizes gene sequences as an animated circular gene map. Each gene (HBA1 and COL1A1) is represented by a spiral or ring of small colored segments, with each segment corresponding to a DNA base pair. The animation sequentially reveals the genes' nucleotide sequences, with colors encoding the four DNA bases (A, T, C, G). Rendered in SVG, the visualization uses smooth transitions to trace the genetic "walk," allowing viewers to observe sequence composition and length at a glance. The piece emphasizes the rhythm and scale of genomic data through motion and color.

GGerardoFurtado

65% match

Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica

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

65% match

Loading thumbnail…

Pan & Zoom III

This example shows a dense phyllotaxis spiral of 2,000 points that can be panned and zoomed interactively. The points are generated on the fly from a mathematical formula, with each point placed at a radius and angle derived from the golden angle, creating a uniform spiral distribution across the SVG canvas. A transparent overlay rect captures all pointer input and applies a d3.zoom behavior, which clamps the scale between 0.5x and 4x and updates a group element’s transform attribute on every zoom event. The code uses d3.zoom and d3.select to bind the behavior, while the SVG circles remain static and are transformed collectively.

PPhilippe Rivière

65% match

Loading thumbnail…

pie

A pie chart displays eight proportional segments with values from the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21). D3 v4’s `d3.pie()` computes the arc angles, while `d3.arc()` generates the SVG path for each slice with an inner radius of 0 and outer radius of 100. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns categorical colors, and white strokes separate the segments. The chart is rendered as static SVG elements, translated to position (200, 200) within the viewport.

EEranM6

64% match

Loading thumbnail…

Hilbert paths

A colorful, animated SVG visualization of Hilbert curves traces a path through a 512×512 grid, with the curve segmented into randomly sized, color-coded strokes. A white outline shows the full curve while seven white circles jump along it, updating their positions and a coordinate readout via `d3.interval`. The code uses `d3.scaleOrdinal` for color, `d3.range` for path generation, and custom `d2xy` and `xy2d` functions to map between Hilbert curve indices and 2D coordinates. Built with d3.v4 and SVG.

PPhilippe Rivière

64% match