gcd-viz

100%

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on May 19, 2015

The visualization animates the Euclidean algorithm as it computes the greatest common divisor of two random integers, revealing the recursive subtraction steps as nested square blocks. It shows how each division step’s quotient and remainder tile a rectangle, with the final GCD emerging from the arranged squares. The code uses D3.js with SVG and transitions to fade in colored square groups sequentially, while text spans display the intermediate division equations. Random inputs are regenerated after the animation completes, looping the process. The `d3.range` and `transition.delay` orchestrate the cascading reveal, and the colors cycle through a palette per step.

AI-generated description

Similar vizzes

Loading thumbnail…

Euclid algorithm

This example demonstrates the Euclidean algorithm by computing the greatest common divisor of two numbers and displaying the result in the browser console. The visualization renders three circles in an SVG using D3 v7, with the `select` API from the d3 module to append SVG elements. The circles are bound to a static array of values, positioned horizontally with fixed radii, while the algorithm’s output is logged rather than visualized directly on the page. The page uses simple HTML and CSS for layout, with no interactive elements present.

NNita

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

70% match

Loading thumbnail…

Shoot Straight - HTML/D3

This example visualizes the recursive integer sequence A133058, where each term depends on the greatest common divisor (GCD) of its index and the previous term, producing a pattern of scattered points across 850 iterations. A dark circle marks each (n, a) pair, with all points initially converging at the chart’s center before animating outward to their final positions via staggered transitions. The visualization uses D3 v5 with linear scales and SVG circles, computing the GCD with a custom Euclidean algorithm function to generate the data. Axis generation relies on `d3.axisBottom` and `d3.axisLeft`, while the animation applies chained `.transition()` and `.delay()` methods.

WWill Carter

69% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

69% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

68% match

Loading thumbnail…

Gist 0e347a46041a01aa3c4f

This example visualizes the Collatz conjecture by mapping each integer from 0 to 5199 to a small square, where the fill color encodes the number of cycles to reach 1 and the stroke color encodes the maximum value reached during the sequence. The squares are arranged in a grid, and hovering over a square updates a text label to show the exact cycle count and maximum for that number. The visualization uses D3.js (version 3.5.5) to compute the Collatz sequences, bind the data to SVG rectangles, and apply linear color scales with HSL interpolation for the two attributes. The layout positions squares sequentially in rows of fixed width, and the code notes that changing the width parameter alters the grid pattern.

CCBasis

68% match

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

67% match

Loading thumbnail…

Gist c7122eee6247b95dba09

This example generates a continuously evolving abstract animation by drawing Voronoi polygons in alternating black and white. It shows a recursive process where each polygon’s edges are traced with short, sequential line segments that slowly shrink the polygon’s boundary, creating a spiral-like contraction. The animation uses D3’s `d3.geom.voronoi()` with a clip extent to create the polygons from random points, and then employs Canvas 2D API calls like `beginPath`, `lineTo`, and `stroke` to draw each step. A queue (`queue.js`) schedules the drawing of each polygon, and the code alternates stroke colors (`#000` and `#fff`) after each full pass, repeating indefinitely.

11wheel

67% match