Fork of Bouncy Wave

100%

Fork of Bouncy Wave

✓ Published2🌍 Public

Last edited Apr 23, 2021

Created on Apr 23, 2021

This interactive visualization renders a sine wave as a sequence of thick-stroked, white-filled circles connected by a black path, all drawn as SVG. The animation updates at 60 frames per second, with the number of circles oscillating between 5 and 15 and each circle’s vertical position, radius, and the connecting line’s shape shifting based on a time parameter. The code uses the d3 `select`, `range`, and `line` APIs to generate data and append SVG elements, with the `selection.join` method synchronizing the changing dataset to the rendered shapes.

AI-generated description

See here: https://vizhub.com/forum/t/episode-5-d3-selections/163/12?u=floatingpurr

ISC Licensed

Similar vizzes

Loading thumbnail…

Fork of Bouncy Wave

This example visualizes a bouncing wave of circles in an SVG animation. It uses React and D3.js to generate and update the data with the `makeData` function, which computes circle positions, radii, and a connecting line based on a sine wave. The rendering is handled via D3's `select`, `line`, and `join` APIs to draw the animated path and circles, with the animation loop driven by `setInterval` at 60 frames per second.

JJMeltzer92

92% match

Loading thumbnail…

Fork of Fork of Bouncy Wave

This example shows a dynamic wave animation composed of circles connected by a line, where both the circles’ positions and radii oscillate sinusoidally over time. The visualization continuously updates at 60 frames per second using `setInterval`. The code builds the dataset with `d3.range` and `Math.sin`, then renders SVG elements via D3’s `selectAll` and `join` pattern. It uses `d3.line` to generate the connecting path and updates circle attributes such as `cx`, `cy`, and `r` on each tick.

BBharath Vijay

92% match

Loading thumbnail…

Fork of Bouncy Wave

A smoothly animated sine wave bounces across the full screen, drawn as a single curved line whose height oscillates continuously. The wave is generated from 100 data points calculated per frame, with each point’s y-coordinate and circle radius varying by a time increment. Using D3’s `line` generator with `curveNatural` interpolation, the SVG path is updated every 16 milliseconds via `setInterval`. The visualization relies on D3 selections and the `visData` module, though React is included as a dependency but not actively used.

LLewis Ward

92% match

Loading thumbnail…

Fork of Bouncy Wave

This example shows a dynamically animated wave of circles that continuously shift position, size, and color as time progresses. The animation updates at 60 frames per second using `setInterval`, with each frame generating a new dataset via the `makeData` function that calculates x, y, and radius based on sine waves. The visualization uses D3’s `selectAll` and `join` pattern to bind data to SVG `circle` elements, and also draws a line path connecting the points using `d3.line`. The entire scene is rendered in a full-window SVG element, with React dependencies available but not actively used in the current visualization logic.

CCurran Kelleher

92% match

Loading thumbnail…

Fork of Bouncy Wave (harnessing the group element)

This example shows a bouncy wave formed by a series of circles whose vertical positions and radii oscillate over time, while a line path traces through their centers. It demonstrates how to efficiently update a visualization by reusing a single group element via `selection.join()`, binding new data each frame. The animation runs through `setInterval`, updating a time variable that drives the data generation in `makeData`. The code uses D3 v6 APIs such as `select`, `line`, and `.join()` to append and update circles and a path within an SVG.

AAndrea Mignone

89% match

Loading thumbnail…

Fork of D3 selection exploration - Wavy Animation

A continuous sine wave of circles animates across the screen, with vertical positions oscillating and the number of circles subtly fluctuating between around 95 and 105 in a smooth, looping motion. The visualization uses D3.js’s `select`, `range`, and `selectAll().join()` APIs to bind simulated data to SVG circles, updating positions every frame via a `setInterval` callback. Each frame regenerates an array of x/y coordinates using trigonometric functions, directly manipulating the `cx` and `cy` attributes of the rendered SVG elements at 60 frames per second, creating a fluid, wavy effect.

SSidney Oluoch

87% match

Loading thumbnail…

Fork of HTML Starter

A wave-like pattern of 15 circles oscillates across the screen, moving vertically in a sine wave that shifts over time. The visualization uses D3's `select` and `range` functions to generate the data, and the `join` method to bind it to SVG circle elements. Each frame updates the `cx` and `cy` attributes based on the current time value `t`, which increments by 0.01. The animation runs continuously via `setInterval` at 60 frames per second, rendering in an SVG canvas sized to the browser window.

Ffdrigui

86% match

Loading thumbnail…

Bouncy Wave

A bouncy wave of circles connected by a smooth line animates across a full-screen SVG. The visualization updates 60 times per second, with `setInterval` advancing a time variable that drives the vertical positions, radii, and the number of circles via `Math.sin`. The `visData` function uses D3’s `line` generator and `selectAll().join()` to render the path and circles, reading data from `makeData`. React is included as a dependency but is not directly used in the code.

AAdil Zeshan

85% match