Circles Test

100%

✓ Published0🌍 Public

Last edited Feb 28, 2016

Created on Feb 28, 2016

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.

AI-generated description

A tweak of the D3Kit Circles example to fix some transition bugs it had, and to add, well, a ton of circles.

Similar vizzes

Loading thumbnail…

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

84% match

Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

NNick Hogle

82% match

Loading thumbnail…

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

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

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…

Circles

This visualization presents a list of names as hyperlinks on a black background, accompanied by animated red and blue circles that drift and pulse. The cursor and a smaller mouse follower are custom-styled elements that respond to mouse movement, with the follower scaling in size based on a frame counter. The name list skews horizontally when the mouse moves far from the center. The implementation uses vanilla JavaScript with `requestAnimationFrame`, CSS animations with `@keyframes`, and DOM manipulation via `querySelector` and `style.transform`.

Aanniehoshi18

80% match

Loading thumbnail…

simple animation

This example demonstrates an interactive scatterplot of 1,000 randomly generated circles. The data is created on the fly and rendered as SVG circles within a full-window visualization. Using the D3.js library (version 7.8.5), the code applies linear scales to map random values to screen coordinates and circle radii. Hovering over a circle triggers a transition via the `transition` API, animating the circle to a new random position over one second with an elastic easing effect.

NNeeraj Kumar

80% match

Loading thumbnail…

D3 Selection Exploration

A grid of ten circles undulates vertically in SVG, their radii and positions governed by sine waves. This animation explores D3's data joins by using `d3.selectAll`, `data`, and `.join('circle')` to bind an array generated with `range` to the circles. The setInterval-driven loop updates positions every 100ms, demonstrating how enter, update, and exit selections work, with the circle count oscillating between five and fifteen.

Rroyable88

80% match