wheels on wheels on wheels

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

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.

Rotating Disks

This example shows a cluster of rotating color wheels built from CSS named colors loaded via d3.csv from a GitHub gist. Each wheel is composed of four concentric rings, rendered as SVG pie arcs using d3.arc and d3.pie, with React components creating the ring structure. The rotation is driven by d3.timer, updating a rotation state that applies different rotation speeds and directions to each ring via transform attributes. Twelve ring components are arranged in a triangular grid around a central point, creating a dynamic, layered visual pattern.

Yyuzhang21

linked-gears

This example shows a system of linked gears rotating in continuous animation, rendered with D3.js as SVG. Each gear is composed of layered shapes—sun, planet, center, moon, and star—each with its own fill color, suggesting a stylized solar system or mechanical model. The visualization demonstrates hierarchical, orbiting motion: the center drives the planets, which in turn carry moons, all constrained by a ratio that makes the gears mesh. User interaction is limited to the form element, which is empty in this case.

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.

Rota2

A black circular canvas contains eight white lines radiating from the center, dividing the circle into sixteen equal sectors. A single rotating group, animated with SVG `<animateTransform>`, spins one set of eight white dots around the center while counter-rotating on its own axis. The dots trace paths determined by the combination of these two rotations, creating a dynamic, hypnotic pattern. The entire composition is rendered in static SVG with inline animation declarations.

AArturo Guevara

expanding-circles

Expanding circles continuously appear across the screen, growing from tiny dots to large rings with random fill and stroke colors. The animation generates a new batch of circles every second, each positioned on a grid spanning the full viewport. The code uses D3’s selection, data join, and chained transitions with `transition.attr('r')` to animate radius, while leveraging `d3.shuffle` to randomize drawing order. The SVG rendering relies on D3’s `append` and `translate` helpers from the d3-starterkit, with colors generated by a custom `randColor` function.