State

100%

✓ Published0🌍 Public

Last edited Sep 12, 2021

Created on Aug 25, 2021

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.

AI-generated description

Collatz .

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

69% match

Loading thumbnail…

Advent of Code

This visualization demonstrates the redistribution of memory blocks in the "Advent of Code" Day 6 challenge, tracking how many redistribution cycles occur before a state repeats. The code uses XQuery 3.1 with recursive functions `local:zero-out-highest` and `local:add-blocks` to reallocate blocks from the highest-value bank across the array, while `local:calculate-state` records each state as a hyphen-separated string and stops when a duplicate state appears. The data source is a hardcoded sequence of 16 integers representing the initial memory banks, and the output is the integer count of iterations performed until repetition, rendered as plain text. No external visualization libraries are used; the example focuses purely on algorithmic state computation.

CCliffordAnderson

60% match

Loading thumbnail…

Scoring Test

This example shows a simple interactive counter where a button click increments a numeric display. It demonstrates how to build a reactive UI using D3's selection and data join methods, with the `setState` function managing state updates. The code uses D3 v7, specifically `select`, `selectAll`, `join`, and `.on` event listeners, while styling the button and counter with flexbox in CSS. The counter text updates dynamically to reflect the current count, and the example highlights D3's role in handling both DOM manipulation and state-driven rendering.

CCurran Kelleher

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

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

57% match

Loading thumbnail…

Simple Unidirectional Data Flow

This example demonstrates a simple unidirectional data flow pattern, using a counter that increments on button click. The current count is displayed in the DOM, and each click dispatches an INCREMENT action to a reducer function, which returns a new state object. The updated state is then passed to a render function that updates the text content of the counter element. The code uses vanilla JavaScript, with plain DOM methods like `getElementById` and `addEventListener` to handle interaction and rendering.

MMark D. Clements

57% match

Loading thumbnail…

Shoot straight!

The visualization depicts a sequence of 851 points, each representing a term in a number series defined by a greatest-common-divisor rule, where each value either divides the previous term or adds the current index. It shows the resulting scatterplot of sequence values against their index, with points animating from the top-right corner down to their correct positions. The code uses D3 v4 to bind data to SVG circles, applying a linear scale for both axes and a staggered transition with a 10-millisecond delay per point. The data is generated programmatically, referencing the Numberphile video and OEIS A133058 as sources.

WWill Carter

57% match

Loading thumbnail…

Game of Life (Possibly)

A grid of 10 by 5 cells displays Conway's Game of Life, with each cell toggling between alive (yellow) and dead based on neighbor counts. The simulation updates every two seconds, using a random Bernoulli distribution (d3.randomBernoulli) to generate the initial state. React hooks manage the cell matrix state, while SVG rectangles render the grid within a VizContainer. The code implements the game rules through countNeighbors and go functions, using setInterval for animation.

WWaseem Medhat

56% match