Skip to main content
SimilarExport ZIP
100%

Sine Wave Circles

✓ Published0🌍 Public
CCurran Kelleher
Last edited Feb 17, 2017
Created on Feb 17, 2017

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.

AI-generated description

A D3 version of the Math Sine Wave P5.js example.

Built with blockbuilder.org.

mit Licensed

Similar vizzes

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
91% 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
89% match
Loading thumbnail…

Fork of Sine Wave Circles

A row of 30 circles animates vertically in a sine wave pattern across an SVG canvas. The animation continuously updates each circle’s y-coordinate using a time-based sine function, producing a smooth, undulating wave effect. The example uses D3 v7’s `timer` and `range` methods along with the JavaScript `Math.sin` function. Circles are appended via `selectAll`, and their positions are calculated based on the viewport width and height, with a frequency parameter controlling the wave’s oscillation.

Ddan815
89% match
Loading thumbnail…

Fork of Sine Wave Circles

A row of 30 circles animates vertically to form a traveling sine wave across the SVG canvas. Each circle’s y-position is computed from the sine of its index, producing a smooth, continuous oscillation over time. The visualization uses D3 v7’s `range` to generate the circle data, `timer` to drive the animation loop, and `Math.sin` to calculate wave displacement. All elements are rendered as SVG `<circle>` nodes, with the wave frequency fixed and the height normalized relative to the viewport.

Ool.ritter@web.de
89% match
Loading thumbnail…

Fork of Sine Wave Circles

A D3.js animation renders a field of 100 white circles that oscillate vertically in a sine wave pattern across a black SVG canvas. Each circle's vertical position is calculated using the sine of its horizontal index divided by five, plus a time-based increment from the `d3.timer` callback, producing a smooth, continuous wave motion. The circles are evenly distributed horizontally based on the SVG width and sized proportionally. The example, a port of the P5.js Math Sine Wave, demonstrates D3's core selection and attribute-updating APIs, leveraging SVG circles as the primary rendering primitive for the animated visualization.

Jjmmoser7
89% match
Loading thumbnail…

Fork of Sine Wave Circles

A row of 20 circles animates vertically to form a moving sine wave across the SVG canvas. Each circle’s y-position is computed from its index using the sine function, with time passed to the D3 timer shifting the phase. The code uses d3.select, range, and timer, along with Math.sin, to update the circle’s cy attribute on each tick. The circle radius is derived from the SVG width divided by the number of circles, and the stroke and fill use default black.

Ppeter@attachmentdivision.com
88% match
Loading thumbnail…

Sine Wave Circles Playground

A grid of 300 white circles forms a static horizontal row that animates vertically as a sine wave, creating a fluid, undulating pattern across a black background. The animation uses D3 v7's `d3.timer` to continuously update each circle's `cy` attribute based on the sine of its index and elapsed time. Written in ES6 and ported from an older bl.ocks.org example, this SVG-based playground demonstrates how math functions can drive simple shapes into organic motion.

AAndre J Denais
87% match
Loading thumbnail…

Fork of Sine Wave Circles

A uniform field of 300 white circles on a black background forms a horizontal sine wave that undulates vertically over time. The animation is driven by a `d3.timer` callback, which updates each circle’s `cy` attribute using its index and elapsed time inside a `Math.sin` expression. The D3 code uses `selectAll`, `data`, `enter`, and `append` to create the SVG circles, with `cx` and `r` derived from the total width and circle count. This example is a port of a classic p5.js math demonstration, implemented for D3 v7.

SSabás Mendívil
87% match