Skip to main content
100%

collatz conjecture

✓ Published0🌍 Public
Aandressarg
Last edited Aug 15, 2018
Created on Aug 15, 2018

The visualization maps the Collatz conjecture for integers 0 through 5199, encoding each number’s stopping time as a fill color and its maximum reached value as a stroke color. Hovering over a square reveals the integer, cycle count, and peak value. Built with D3.js (v3), it renders 5,200 SVG rectangles in a grid, using `d3.scale.linear` with HSL interpolation to create the color gradients. The underlying `collatz` function calculates cycle counts and maxima for each input.

AI-generated description

forked from <a href='http://bl.ocks.org/trinary/'>trinary</a>'s block: <a href='http://bl.ocks.org/trinary/9011649d262c27c6774b'>collatz conjecture</a>

mit Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Reverse Collatz

This visualization animates the reverse Collatz conjecture, building a radial tree that shows which numbers lead to a given value through the inverse of the rule (odd numbers become 3n+1, evens are halved). Starting from 1, each level adds the possible predecessors, revealing the branching structure of the conjecture. The code uses `d3.layout` from D3 v5 to compute the hierarchical layout, with SVG circles and text labels rendered in a radial arrangement. An interactive slider and play button control the depth of the tree, with smooth transitions via D3's `transition()` API as new levels unfold.

MMTR
79% match
Loading thumbnail…

Reverse Collatz

This interactive visualization renders the Collatz Conjecture as a radial tree, with the root at 1 and each node branching outward through its reverse operations: doubling and, when applicable, the (x−1)/3 step. Red nodes indicate numbers divisible by three, while black nodes mark others. An orbit-length slider and play/stop buttons animate the graph’s expansion level by level, with smooth transitions between states. Built with D3’s tree layout and jQuery UI controls, it uses SVG for rendering and D3 transitions to animate nodes and links.

MMTR
78% match
Loading thumbnail…

Reverse Collatz odd 3 multiples

This interactive visualization displays the Collatz Conjecture as a radial tree, showing how numbers connect through the reverse Collatz sequence up to a user-controlled orbit length. A slider adjusts the depth of the tree, revealing the branching structure of odd multiples of 3 (highlighted in red) and their even predecessors. Built with jQuery UI for the slider and play/stop controls, it uses D3’s `d3.layout.tree()` to compute the radial layout and animates transitions between depth levels with `transition().duration()`. The code computes the reverse Collatz graph in JavaScript, mapping parent-child relationships and rendering nodes as circles with text labels.

MMTR
77% match
Loading thumbnail…

State

This interactive visualization illustrates the Collatz conjecture, a sequence where even numbers are halved and odd numbers are tripled and incremented, continuing until reaching 1. A user enters a starting number and presses a button, which triggers a step-by-step animated traversal through six circular state nodes displayed on a grid. Each node highlights and the current value is shown in a text output as the sequence progresses. The visualization uses plain HTML, CSS Grid for the state layout, and the Web Audio API to optionally generate a triangle-wave tone on each step, with the frequency varying based on whether the current number is even or odd. JavaScript timers (setTimeout) control the sequential highlighting of the nodes.

MMTR
68% match
Loading thumbnail…

Transitioning Numbers

Three rows of nested colored squares represent random three-digit numbers, with each row displaying hundreds, tens, and ones as large, medium, and small rectangles in a shared color palette. Every three seconds, new random values replace the previous ones, and the squares animate their positions and sizes via D3 v4 transitions, growing from zero or shrinking to nothing as they enter or exit. The SVG rendering uses `d3.select`, data joins with `selection.merge`, and chained `transition` calls to smoothly update the layout, which is computed from each digit’s value and arranged in compact grids.

Aandrew-reid
68% match
Loading thumbnail…

advent-of-code-05

Each row of the visualization is a horizontal line representing an element in the puzzle's input array. As the algorithm jumps through the array, darker values indicate lower numbers, and the x-axis tracks progress over time. Purple vertical columns show the rate of visits each position receives per roughly 30,000 jumps. The code uses `d3.scaleLinear` for color encoding and draws rectangles to both a Canvas and an SVG layer via `d3.conventions`.

11wheel
67% match
Loading thumbnail…

Untitled

This example shows the cumulative running total of a dataset from 1884 to 2010, with values increasing from 1 to over 160,000. The visualization renders as a solid red rectangular SVG area, though the code does not yet plot the data points. It uses D3 v6.5.0 to select the SVG element and apply a background color via inline styling. The data is loaded from a CSV file containing two columns: year and running_total. The page includes a tutorial video and basic setup for a homework assignment.

Jjeffgallini
66% match