Visualzing digits

100%

Visualzing digits

✓ Published0🌍 Public

Last edited Jul 13, 2020

Created on Jul 13, 2020

This visualization animates the sequence of digits in a constant (such as π) by drawing curved, color-coded transitions between each consecutive digit pair around a circular clock-like layout. As frames advance, it reveals bars whose radial length encodes the cumulative frequency of each digit transition, while optional dots highlight repeated identical digits. Built with Julia and Luxor, it uses `arc2r` for the circular digit ring, `BezierPathSegment` with `setblend` for gradient transition curves, and `poly` for the frequency bars, sourced from parsed BigFloat digits or prime numbers.

AI-generated description

Similar vizzes

Loading thumbnail…

Something a bit more visually appealing

This visualization displays the frequency of digits 0 through 9 in Josh's bank account using a bar chart. The chart renders as two SVG canvases—one for navigation and one for the main display—created with D3 v3, using an ordinal xScale and linear yScale to map the dataset. Hovering over a rectangle turns it orange and reveals a tooltip with the digit’s value and frequency. The page includes styled text elements, such as a green title, and references blockbuilder.org as the source.

VVanBantam

70% match

Loading thumbnail…

Something a bit more visually appealing

This example displays the frequency of digits 0 through 9 in a fictional bank account balance as a bar chart. The visualization uses D3 v3 with SVG rendering, employing `d3.scale.ordinal` for the x-axis bands and `d3.scale.linear` for the y-axis heights. Two separate SVG canvases are created for navigation and main display areas, with hover effects that turn bars orange and a tooltip showing the digit and its frequency. The page also includes experimental text elements and styling that are not part of the final chart.

VVanBantam

68% match

Loading thumbnail…

The Walk of PI

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.

GGerardoFurtado

67% match

Loading thumbnail…

Transition each

This visualization animates a scatterplot of a numeric sequence, transitioning each point from a centralized starting position to its final (n, a) coordinate, where the sequence is generated by a recursive GCD-based rule. The animation uses D3 v4’s `transition` with staggered delays, while also randomizing each circle’s radius, opacity, and fill color from a categorical palette. Points are rendered as SVG circles via `d3.selectAll('circle')`, with axes added using `d3.axisBottom` and `d3.axisLeft`. The data is computed in code, referencing the Numberphile and OEIS A133058 sources.

WWill Carter

66% match

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

64% match

Loading thumbnail…

Viz - Bar - transition

The example visualizes ten vertical bars whose heights are determined by random-value pairs, with each bar showing both a base value and an incremental second value. Every two seconds, a new random dataset replaces the old one and the bars smoothly animate to their updated heights. Built with D3 v4 and the viz.js library, the code constructs the chart using `viz.bar()` and triggers updates via `bar.data()` combined with a `transition()` call on an SVG group element. The bars themselves are styled with a steelblue fill, and the entire process loops continuously using `setInterval`.

NNPashaP

63% match

Loading thumbnail…

Multicolored Clock

The Multicolored Clock visualizes time as a nested set of seven animated arc segments, each representing seconds, minutes, hours, day, date, month, and a static credit ring. The arcs smoothly transition every second using elastic easing, with colors interpolating across an HSL spectrum based on each unit’s current value via a linear scale. Built with D3 v3, it uses `d3.svg.arc`, `attrTween` for value interpolation, and `textPath` to label each ring. Data is generated live from the JavaScript `Date` object, rendered as SVG with continuous animation.

MManinder Singh

63% match

Loading thumbnail…

Bars

Fifteen vertical bars of varying heights animate smoothly against a dark background, each pulsing up and down in a wave-like pattern. The bars shift in height based on a sine function, producing a continuous, flowing motion that changes over time. Using D3.js v7, the visualization renders SVG rectangles with a band scale for positioning and an ordinal color scale with pastel tones, while a `setInterval` loop drives the animation at 60 frames per second.

EErik Sundahl

63% match