Skip to main content
SimilarExport ZIP
100%

sin wave and move

✓ Published0🌍 Public
JJetlinZ
Last edited Jun 2, 2022
Created on Jun 2, 2022
Forked from D3 Scatter Plot

This example animates a set of 15 circles that move along a sine wave across the screen, with the wave’s phase shifting over time. Each circle’s y-position is computed from the sine of its index plus a time variable, updated every second using a `setInterval`. The visualization uses D3’s `select`, `range`, and data-join with `.join('circle')` to create and update SVG circles, while styling is handled by inline CSS attributes. The animation runs on an SVG canvas sized to the full browser window.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

moving sine

This example shows 15 circles moving in a sine wave pattern across the screen, with their vertical positions oscillating smoothly over time. A static green square sits in the corner as a fixed reference point. Built with D3 version 7 and rendered as SVG, the animation updates every 1000/60 milliseconds using `setInterval`. Each circle’s y-coordinate is calculated as `250 - Math.sin(d * 0.5 + t) * 220`, and its radius varies via `Math.sin(d.i * t / 20)`. The visualization uses D3’s `select`, `range`, and `.join` API to manage the dynamic circle elements efficiently.

Ccniekel
87% match
Loading thumbnail…

Sine Wave Circles

A grid of 30 circles animates in a sine wave pattern, with each circle’s vertical position oscillating over time to create a flowing, wavelike motion across the screen. The wave’s frequency and amplitude are driven by a time-based function, with circles shifting smoothly as the animation progresses. Built with D3 v7, the visualization uses an SVG container and selects all circles to update their `cy` attributes via D3’s `timer` and `range` APIs. The example is a direct port of a p5.js sine wave demonstration, rendered entirely with SVG elements.

HHeisenberg
86% match
Loading thumbnail…

sin_wave_circles

A radial burst of circles emanates from the center of an SVG canvas, with each circle positioned along a sine-wave path to create a rippling, wave-like pattern. The visualization uses React components to render the SVG elements, while D3.js utilities handle the underlying data manipulation and coordinate calculations. The code loads CSS named color data via D3's fetching methods, though the current implementation focuses on the geometric arrangement of circles rather than color mapping, with the static SVG output measuring 960 by 500 pixels.

TTanmay Bishnoi
84% match
Loading thumbnail…

D3 practice

An animated wave of circles moves across the screen, with fifteen evenly spaced circles rising and falling in a smooth sinusoidal pattern. Each circle is rendered as an SVG element, with its vertical position recalculated at 60 frames per second using a time-based sine function. The code uses D3’s `select`, `range`, and `join` methods to bind data and update the circle positions, while a `setInterval` drives the animation loop, updating a time variable that shifts the wave phase.

Aaidarshafeev1@gmail.com
84% match
Loading thumbnail…

Sin graph

An animated sine wave is rendered as a series of circles that grow and shrink in radius as they move along the curve. The visualization updates every second, adding or removing circles based on the current sine value, creating a dynamic, pulsing pattern across the full browser viewport. The code uses React 18.2.0 and D3 v7.6.1, with D3’s `select`, `range`, and the `.join()` API to handle the SVG circle elements and their animated attributes. The graph is drawn in SVG, and the animation is driven by a `setInterval` loop that recalculates circle positions and radii.

Ddeebanks77
84% match
Loading thumbnail…

Sine Wave Circles

A grid of 30 circles animates vertically in a sine wave pattern, with each circle’s vertical position determined by its index and a continuously advancing time parameter. The D3 version of the Math Sine Wave P5.js example uses `d3.range` to create the circles, `d3.timer` to drive the animation loop, and SVG circle elements with `cx`, `cy`, and `r` attributes. The sine function from the JavaScript `Math` library calculates the y-coordinate, while a fixed frequency and viewport height shape the wave’s amplitude and period.

CCurran Kelleher
84% match
Loading thumbnail…

refactoring the sin animation

Fifteen animated circles move in a sinusoidal wave across an SVG canvas, with each circle’s vertical position and radius oscillating over time. The animation runs on a 60 FPS interval, updating data from `makeData` and rendering via D3’s `selectAll().data().join()` pattern. D3 v7 and React manage the state and DOM updates, creating a rhythmic, pulsing visual pattern.

SSamuele Greco
84% match
Loading thumbnail…

Sine Wave Circles

A row of white circles animates vertically to form a flowing sine wave. The visualization uses D3 v4 to bind an array of 40 numbers to SVG circle elements, positioning each along the x-axis. A `d3.timer` continuously updates each circle’s y-coordinate based on the sine of its index plus elapsed time, creating the wave effect. The circles are evenly spaced with a fixed radius, rendered on a black background.

CCurran Kelleher
84% match