Fork of D3 Selections Explorations

Fork of D3 Selection Exploration

Animated circles move in a sinusoidal wave across an SVG canvas, with their vertical position and radius oscillating over time to create a flowing, generative pattern. The visualization demonstrates D3's data join and selection mechanisms by continuously updating the `x`, `y`, and `r` attributes of circle elements at 60 frames per second. Using D3 v6's `select`, `range`, and `join` APIs, the code generates fresh data points each frame from mathematical sine functions and applies them to the existing SVG selection, showing how D3 efficiently syncs data to DOM elements.

SSam Hege

Fork of D3 Selection Exploration

A dynamic swarm of circles undulates across the screen, with each circle’s position and radius shifting over time based on sine-wave functions. The visualization demonstrates D3’s data-join pattern, using `selection.selectAll`, `.data()`, and `.join('circle')` in the `vizData.js` module to bind and update SVG elements. Data is generated procedurally by `makeData.js`, which uses `d3.range` and `d3.scaleLinear`. An animation loop runs at 60 frames per second via `setInterval`, calling the visualization with freshly computed values, producing a smooth, organic motion without explicit transitions.

JJetlinZ

Fork of D3 Selection Exploration

This example demonstrates a set of animated circles whose vertical positions and radii oscillate smoothly over time, creating a wave-like pattern across the screen. The visualization uses the D3.js library (v6.6.2) to create an SVG canvas and a custom `join` operation for incremental updates. A timer-driven loop in JavaScript updates the data every 60 frames per second, while the `makeData` function generates new values using trigonometric functions (sine and cosine) based on a time variable. The code leverages D3's `select` and `range` utilities to manage the dynamic rendering, though the circles simply move continuously without any direct user interaction.

FFelicity Wu

Fork of D3 Selection Exploration

Roughly 15 circles, each with a radius of 100, are initially positioned at x=400 by a D3 v3 selection bound to an array of indices. The visualization then repeatedly updates these SVG circles using `vizData`, which employs `selection.join('circle')` to bind new data from `makeData`, a function that computes circle positions, radii, and y-coordinates based on a sine wave and a time parameter t. This creates an animated, undulating pattern across the screen. The page is styled with a hidden overflow, and the circles' attributes are set directly via `attr` calls without CSS transitions.

YYingkai Song

Fork of D3 Selection Exploration

This example demonstrates animated data-driven circles that flow in a sine wave pattern across the screen. The visualization updates at 60 frames per second, with each circle's position and radius changing over time based on a mathematical function. The implementation uses the D3.js library's `select`, `selectAll`, and `.data().join()` API to efficiently bind array data to SVG circle elements. The `vizData` function applies `attr` calls for the `r`, `cx`, and `cy` properties, while a separate `makeData` module generates the dynamic dataset with trigonometric calculations.

Bbarryhillier

Fork of D3 Selection Exploration

Ten animated circles move vertically and pulse in size along a sine wave, while a black line connects their centers to show the waveform’s shape. The visualization runs at 60 frames per second, updating each frame with new data generated from trigonometric functions in `makeData.js`. It uses the D3.js API, specifically `select`, `append`, `range`, and the `join` method on SVG groups to create and update circles and paths. The rendering is SVG-based, with animations driven by a JavaScript `setInterval` loop.

Mmsarkeshi

Fork of D3 Selection Exploration

An animated visualization renders a dynamic set of circles whose positions and radii oscillate using a sine wave, driven by a continuous timer. The scene updates every frame, re-binding new data to the existing DOM elements without a transition. The code uses D3 v6's `select` and `join` APIs to manage circle enter-update-exit cycles, with data generated by custom `makeData` and rendered as SVG. A small YouTube embed displays related source material alongside the live example.

AAlberto Ferrero

Fork of Fork of D3 Selection Exploration

This example demonstrates a generative animation of circles that smoothly undulate across the screen, with each circle's position and radius oscillating over time. Built using the D3.js library, the visualization runs a continuous loop at 60 frames per second, recomputing the dataset based on a sine wave that controls both the number of circles and their lateral and vertical movement. The rendering relies on D3's selection and join API to update `<circle>` SVG elements, while the data is generated by a custom `makeData` function.

MMichael Bergerson