Jam session

100%

✓ Published1🌍 Public

Last edited Sep 14, 2025

Created on Sep 13, 2025

A dynamic SVG animation renders a row of circles that slide vertically in a wave-like pattern. The number of circles oscillates between 5 and 15 over time, driven by a sine function. Using D3 v6, the code generates data with `range` and applies a data join with `selectAll` and `join('circle')` to update positions each animation frame. The `setInterval` callback updates the scene at 60 frames per second, shifting each circle's `cy` attribute based on its index and the current time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

JavaScript Arrays

A row of circles animates continuously, with each circle bobbing vertically and pulsing in radius as the total count fluctuates between five and fifteen. The example demonstrates dynamic data joins in D3.js 7, using `d3.select`, `d3.range`, and `selection.join` to bind and update SVG circle elements at 60 frames per second. A sine-wave based `setInterval` loop drives the positions, radii, and count, rendering directly to an SVG canvas sized to the browser window.

MMark D. Clements

84% match

Loading thumbnail…

JS arrays

A wave of circles moves across the screen, oscillating vertically in a sine-like pattern as their count fluctuates over time. The animation uses D3’s data join to update SVG circle elements on a 60-frame-per-second interval, with `selectAll`, `data`, and `join` binding new arrays generated from `range` and trigonometric functions. The number of circles changes dynamically based on a time variable, while each circle’s position is recalculated from its index and the current time step.

IIgorGorin00

84% match

Loading thumbnail…

JS arrays

This example animates a set of circles connected by a line, with the circles moving in a wave-like pattern. The number of circles oscillates between 5 and 15, and their vertical positions and radii change over time, creating a fluid, dynamic visualization. The animation runs at 60 frames per second using `setInterval`, updating the scene with each tick. It leverages D3’s `select` and `range` to generate data, and D3’s `line` generator to draw the connecting path, while react manages the updates through SVG elements.

GGbemiga Atolagbe

83% match

Loading thumbnail…

D3-Arrays

Fifteen black circles undulate in a vertical sine-wave pattern across a full-screen SVG. Each circle updates its vertical position based on a time-incremented angular offset, creating a smooth, animated wave. The example uses D3 v7's `select`, `range`, and `symbol` APIs, with a JavaScript `setInterval` driving the animation loop. Data is generated on the fly as an array of position objects, bound to circle elements via D3's data join, while SVG attributes are updated each tick.

Gg1g10

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

82% match

Loading thumbnail…

D3 selection exploration

Ten animated circles form a sine wave pattern across the screen, with their vertical positions shifting continuously to create a smooth undulating motion. Using D3 v7's `select` and `range` functions, the code binds an array of ten data points to SVG circle elements via the `join` method, updating each circle's `cx` and `cy` attributes every frame at 60 frames per second. The example demonstrates both the data-join pattern and the newer `join` syntax as an alternative to the older `enter`/`merge` approach, with the animation driven by a `setInterval` timer that increments a time variable.

SSidney Oluoch

82% match

Loading thumbnail…

Javascript Arrays

This example animates a dynamic set of circles whose positions oscillate vertically based on a sine wave, creating a flowing wave-like pattern across the screen. It demonstrates D3’s data join pattern using `selectAll`, `data`, `enter`, `merge`, and `exit` to add and remove circles as the dataset size changes over time with `range` and `Math.sin`. The visualization uses D3 v7 in a React-less HTML setup, rendering to SVG on a full-window canvas, with `setInterval` driving the animation at 60 frames per second.

Nnicolekevans

81% match

Loading thumbnail…

D3 Selection Exploration

Fifteen circles animate vertically in a sine wave across the screen, their positions updating every frame in a loop. Using D3 v6, the code demonstrates the `.join()` method to bind new data arrays to existing SVG circle elements, updating their `cx` and `cy` attributes. The animation runs via `setInterval`, and the source includes commented-out alternative approaches using `.enter()`, `.merge()`, and `.exit()` for comparison.

AAndre J Denais

81% match