Circles

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 16, 2011

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Untitled

A tiny SVG viewport shows 1,000 randomly placed circles bouncing and wrapping around its edges, with a live frames-per-second counter in the corner. The animation runs through `d3.timer`, updating each circle’s `cx` and `cy` attributes based on randomized velocity values. All rendering uses SVG elements and D3’s data join, with positions recalculated on every tick to keep the motion continuous.

KKanishk Mamgain

85% match

Loading thumbnail…

Random Circles

Fifty randomly positioned and sized circles drift across the browser viewport in this d3.v6 example. Each circle's location updates on a timer, shifting by small random increments at every tick, creating a subtle Brownian-like motion. The visualization uses the `d3.range` function to generate the initial dataset, `d3.select` to create the SVG canvas, and the `d3.timer` API to drive the animation loop. Circles are styled as steelblue fills via CSS, with a light gray page background.

Mmbooch22

85% match

Loading thumbnail…

Fork of Random Circles

This example shows a field of 50 randomly placed circles that drift continuously across the screen through a series of small random steps. Each circle’s position updates on every tick of a d3.timer, while the SVG attributes for cx and cy are rebound to reflect the changing data. The visualization uses D3 v6 for selection, data binding, and animation, with circles styled in steelblue via a CSS class. A React wrapper is present, though the core rendering and movement are handled entirely by the D3 code in circles.js.

Mmbooch22

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

83% match

Loading thumbnail…

swirling circles

Hundreds of small, semi-transparent circles continuously stream inward from the top and bottom edges, converging at the center before dispersing outward again in a looping, decorative motion. The animation is generated entirely with D3 v3, using chained `transition()` calls over 2-second durations to animate each circle’s `cx` and `cy` attributes with a linear ease, then removing each element after its animation completes. Random colors are assigned via a custom `colorPicker` function, while circle starting positions and target offsets are determined by `Math.random()`. A `setInterval` spawns a new circle every 20 milliseconds, capped at 1,000 total per loop, which then repeats indefinitely.

EEfratVil

82% match

Loading thumbnail…

Fork of Circles with D3

A fixed full-screen visualization renders seven multi-colored circles on a soft green background. Each circle’s position, size, and color come from a hard-coded data array, drawn using D3’s data join and `attr` methods. A `setInterval` then drives a continuous animation, using D3 transitions with a 1000-millisecond duration to shift each circle’s center and radius in a smooth sine/cosine wave pattern. The result is a lively, looping motion that continuously warps the static layout.

BBismark Kofi Owusu Sarfo

82% match

Loading thumbnail…

A simple rectangle

This example shows a set of circles moving randomly within an SVG canvas, with their positions and radii changing every 500 milliseconds. The visualization uses D3.js version 3 to generate random data points and animate the circles through the `transition()` API, while CSS styles define the circles’ blue fill with partial opacity and red stroke. The animation runs continuously via `setInterval`, creating an ever-shifting pattern of overlapping translucent circles.

JJn1532

82% match

Loading thumbnail…

A tweetable d3 animation

A single animated SVG visualization shows 100 circles arranged in a shifting radial pattern. The code uses a `d3.timer` loop to update circle positions, with each circle’s radius and angle computed via sine and cosine functions. The circles are drawn with D3’s `selectAll` and `data` join, appended to an SVG group element. Styling is minimal, with unfilled circles stroked in dark gray on a light background. The animation continuously couples each circle’s distance from the center to time, creating a pulsating, spiral-like effect.

CColinEberhardt

82% match