heatmap

100%

✓ Published0🌍 Public

Last edited Aug 5, 2024

Created on Aug 5, 2024

This animated visualization shows five circles of varying sizes and colors moving across a black canvas, each expanding from a point of zero radius to its full size before settling into its final position. The circles are drawn with distinct neon hues, including blue and magenta, and are positioned at different coordinates throughout the frame. The animation is implemented using the D3.js library, specifically leveraging the `select`, `transition`, and `easeLinear` APIs to manage the enter, update, and exit states of each circle as the data changes. The data is hardcoded in the script, and the circles transition over a two-second duration with a delayed stagger effect.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hot Circles

Twelve colorful circles pulse outward from their stored coordinates, each expanding to a uniform radius against a black background. Using D3's data join with enter, update, and exit selections, the visualization animates circle growth with slow transitions while rapid updates reposition elements. The circles use `mix-blend-mode: screen` in CSS to blend overlapping colors, rendering CSV-derived data through D3's `select` and `transition` APIs.

CCurran Kelleher

81% match

Loading thumbnail…

Fork of Hot Circles

Animated circles in vivid colors pulse and drift across a black canvas, blending via screen mode for luminous overlaps. The visualization reads a static CSV dataset of circle positions and radii, rendering each as an SVG element with a 2-second growth transition. D3’s selection joins handle enter, update, and exit states, while `transition` with `easeLinear` animates movement and resizing. Data coordinates drive the layout, with opacity set for subtle layering.

Bbianca cheng costanzo

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

78% match

Loading thumbnail…

Moving Circles - using JOIN v1

Fifteen circles animate in a wave-like pattern across the screen, their vertical positions and radii oscillating sinusoidally over time. The visualization uses D3 v6’s `selectAll`, `data`, and `join` methods to bind and update circle elements on an SVG canvas, with a `setInterval` driving the animation at 60fps. Data is generated procedurally via `range` and trigonometric functions, demonstrating the core update pattern of D3’s data-join without explicit enter or exit handling.

Ddan.tinoco@gmail.com

77% match

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

77% match

Loading thumbnail…

circle popup

Six colored circles of varying sizes pop into view on a light green background, each growing from a radius of zero to its assigned size over an eight-second staggered transition. The circles remain static once fully expanded, with no further movement or interaction. The visualization uses D3.js selection joins with enter, update, and exit handlers, applying the `transition` API with `easeLinear` for the fast update phase. Hardcoded data defines each circle's position, radius, and fill color, with opacity set to 0.708 for a translucent effect.

NNeeraj Kumar

77% match

Loading thumbnail…

Exercise v2

This example animates five circles on a black background, each starting at radius 0 and expanding to its target size while updating its position. The circles use distinct colors and opacity, with staggered entrance delays and a faster linear transition for position updates. Built with D3 v7, it employs `transition`, `easeLinear`, and data joins via `selection.join()` to handle enter, update, and exit states. The visualization is a reproduction of a Sol LeWitt art piece, with the code defining explicit x, y, and radius values for each circle and rendering them as an animated SVG.

Aalexis

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

77% match