advent-of-code-05

100%

advent-of-code-05

✓ Published0🌍 Public

Last edited Dec 5, 2017

Created on Dec 5, 2017

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`.

AI-generated description

Day 5 of Advent of Code, Part Two

The puzzle loads an array of numbers and jumps through them, using the current position's value as the next index. It stops when it jumps out of the array. After a visit, numbers less then three are incremented and numbers greater than or equal to three are decremented.

Here the, each element in the array is shown as horizontal line. Darker values show lower numbers. The x position shows progression of the algorithm. After a position is repeatedly visited, it's value gets closer and closer to three until it isn't drawn anymore.

The purple lines show the rate of visits each position gets over time; each column represents about 30,000 jumps.

gpl-3.0 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…

Gist 2bba23d8eda3ce767e87a6a491773372

The visualization is a scatterplot-style mosaic representing a 1000x1000 grid, plotting the positions and sizes of 234 rectangular claims from an Advent of Code puzzle. Overlapping rectangles accumulate, creating a dense heatmap-like field of colored blocks on a dark background. Built with Processing, the sketch loads the claim data from `aoc3_1.txt` and renders each rectangle using `rect()`, varying color intensity based on overlap count. The code uses `loadStrings()` to parse the input file and calls `noLoop()` to draw the static result once.

BBBischof

68% match

Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

68% match

Loading thumbnail…

DS Aug, Code 6

This visualization animates the dive-by-dive performance of a synchronized springboard team, using flowing, color-coded circles to represent the execution scores of each athlete across their routine. The code renders to both a Canvas, for the animated flow lines, and an SVG, using d3.v4 scales and lodash for data processing. Each circle's radius maps to the dive's difficulty via `d3.scaleLinear`, while its path is generated through a recursive midpoint-displacement algorithm adapted from a Dan Gries tutorial. The animation length and rotation are tied to the dive’s raw score and total, with gradients reflecting the athlete’s country and gender.

PPatrick Wojda

68% match

Loading thumbnail…

todo

A simple game rendered on a Canvas element, controlled by clicking the window to launch a magenta square upward against gravity. Obstacles, rendered as green blocks, continuously scroll from right to left; the score increments every frame the player avoids them, and resets upon collision. The game loop uses a custom `d3.timer` to update physics and redraw the canvas, while a separate `div` element displays the score. The code applies basic geometry for collision detection and movement, with the D3.js library handling selection and layout conventions.

11wheel

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

67% match

Loading thumbnail…

181202_05_Nested circles

A grid of nested circles and rectangles animates into place on an SVG canvas. The visualization builds a parametric layout of 91 cells, each containing concentric circles with decreasing radii and a grey rectangle that expands during the transition. The code uses D3 v5 selection and range modules to generate and position elements, with the `transition().duration()` API animating the circles from the center outward and rectangles from zero size. Hover effects change fill colors to black.

LLudovicGouverneur

67% match

Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged

66% match