Skip to main content
SimilarExport ZIP
100%

181202_05_Nested circles

✓ Published0🌍 Public
LLudovicGouverneur
Last edited Dec 3, 2018
Created on Dec 2, 2018

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circles and rectangles grid

A grid of green rectangles is punctuated by circles that animate on top of them. Each circle transitions its position, moving from its initial coordinate to the center of its corresponding rectangle, then changes fill color to yellow with partial opacity. Built with D3 v5, the example uses SVG elements and chained `transition().duration()` calls to sequence the movement and color changes across the entire grid simultaneously.

NNita
84% match
Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita
82% match
Loading thumbnail…

circles

Three concentric circles rotate continuously around a shared center, with red and green fills determined by radius and blue radial lines indicating rotation. The visualization uses D3 version 6 to append SVG `circle` and `line` elements inside `g` groups, updating their `transform` style via a JavaScript `setInterval` timer. A CSS `@keyframes` animation on hover triggers an additional 360-degree rotation. The code demonstrates D3’s declarative selection and merging API with `d3.select`, `enter`, and `merge` on an SVG canvas sized to viewport dimensions.

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

Circles Test

A grid of 1,000 semi-transparent circles animates and repositions itself every second. The circles vary in radius and color, and clicking one turns it black. Built with D3.js and the D3Kit Skeleton library, the visualization uses a linear scale for positioning and a category20 scale for colors. Data is generated randomly, with circle transitions handled by D3's `.transition()` method.

BBrideau
80% match
Loading thumbnail…

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.

11wheel
80% match
Loading thumbnail…

squares-around-circles

The animation shows a grid of small circles, each surrounded by four square outlines that continuously expand and rotate. The squares appear to “breathe,” pushing outward and then resetting in a cyclical loop, creating a pulsing, geometric pattern across the screen. The code uses D3.js with SVG paths, leveraging the `transition` and `attrTween` methods for smooth movement. Each square’s position and orientation are calculated from its center point and a side number, updated via functions like `pushLinesOut` and `pointToPath`. The data is generated procedurally, with no external dataset.

11wheel
80% match
Loading thumbnail…

Untitled

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

Jjesramyep1263
80% match