Fork of Sine Wave Circles

100%

Fork of Sine Wave Circles

✓ Published0🌍 Public

Last edited Apr 13, 2023

Created on Apr 13, 2023

This example visualizes a sine wave as a row of 30 circles that oscillate vertically in sequence, creating an undulating wave pattern across a 960-by-500 SVG canvas. Each circle’s y-position is determined by a sine function whose phase shifts with time and varies with the circle’s index, producing a smooth, continuous wave animation. The code uses D3 v7’s `range` and `timer` APIs to drive the animation, updating circle positions via selection attributes. It is a direct port of a p5.js sine wave example, implemented with SVG elements and vanilla JavaScript.

AI-generated description

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

Ported to ES6 from an older version: bl.ocks.org: Sine Wave Circles with blockbuilder.org.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Sine Wave Circles

A sine wave is visualized as a horizontal row of 30 circles whose vertical positions oscillate over time, creating a smooth wave-like motion across the SVG canvas. The code uses D3.js v7 to bind a numeric range to circle elements, computing each circle’s y-coordinate from a sine function of its index plus a time offset from `d3.timer`. The amplitude is scaled to the SVG height, with a fixed radius derived from the width and circle count. This D3 adaptation mirrors the original p5.js example, rendering animated circles without any external data source.

Ool.ritter@web.de

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

94% match

Loading thumbnail…

Fork of Sine Wave Circles

This example shows a horizontal row of 30 equally spaced circles whose vertical positions oscillate to form a sine wave pattern. The circles move up and down smoothly, with the wave phase shifting over time. Built with D3 v7, the code uses `d3.range(n)` to generate the circle indices and `d3.timer` to drive the animation loop. Each circle’s y-coordinate is computed from a sine function combining the index, a frequency factor, and the elapsed time, with the SVG canvas fixed at 960 by 500 pixels. The rendering uses standard SVG circle elements.

AAndre J Denais

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

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

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

92% match

Loading thumbnail…

Fork of Fork of Sine Wave Circles

A row of 30 circles animates vertically in a sine wave pattern, with each circle’s vertical position controlled by a time-based oscillation. The circles are rendered as SVG elements using D3 version 7, with their `cx` positions evenly spaced across the 960-pixel-wide canvas. The `cy` attribute is updated each frame via D3’s `timer` callback, computing a sine function of the circle index, frequency, and elapsed time. The visualization is a direct port of a Processing example, adapted to ES6 and driven by the `d3.range` and `d3.select` APIs.

Ool.ritter@web.de

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

90% match