I Make Circles

Circles

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.

Mmbostock

80% match

Circles

Twenty colored circles of varying sizes move through a rectangular chart, bouncing off the edges and reacting to user clicks. The example demonstrates a reusable chartlet built with D3 v4 and the d3Kit library, using `d3.scaleLinear` for positioning and radius, plus `d3.scaleOrdinal` for color. Circles animate via D3 transitions and toggle to black when clicked.

663anp3ca

79% match

D3: Adding values and elements to a chart

A button click triggers animated transitions for a set of circles plotted against linear x- and y-axes. The chart initially displays points from a fixed data array, then swaps their coordinates and colors in two sequential transitions, cycling in a loop. Built with D3 v4, it uses SVG circles, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with chained `transition` calls and delays to orchestrate the repeating visual update.

SS-trunk

79% match

circle dance

Two buttons trigger the animation of three red circles to new positions. The circles move between two predefined sets of coordinates over a two-second duration, demonstrating basic data updates in D3.js. The visualization uses D3 v4’s SVG rendering and the `transition()` method with a duration parameter to animate the changes. The code defines two data arrays containing `x`, `y`, and `r` properties for the circles, and the buttons call the `updatePoints` function to apply the new data.

78% match

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

circle dance end

Two buttons trigger the same animated update for a small set of circles, moving each circle’s center and radius to new values over two seconds. The visualization shows three red circles on an SVG canvas, with the animation smoothly interpolating their positions and sizes via D3’s `.transition()` and `.attr()` methods. The data consists of hardcoded JavaScript arrays of `x`, `y`, and `r` values, and the code uses D3 v4’s selection `.enter()`, `.merge()`, and `.transition().duration()` to handle the state change.

circle dance end

circle dance end