Fork of Sine function-a little animation

Fork of D3 SIN Animation

This fork of the D3 SIN Animation displays a series of moving circles whose horizontal positions, vertical offsets, and radii oscillate according to a sine wave over time. The animation updates sixty times per second, with each frame generating new data based on an increasing time variable. It renders as an SVG element sized to the browser window, and the `vizData` function uses D3’s data-join API to update existing circle elements with new coordinates and radii. The code imports `select`, `range`, and `scaleLinear` from the D3 library.

TToly

Fork of Sine Wave Circles

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.

PPeiyang Li

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

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

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

Ppeter@attachmentdivision.com

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.

Sine function-a little animation

This visualization displays the sine function as a series of animated circles, each positioned vertically according to its sine value and horizontally by index. The circles transition their vertical positions over three seconds, creating a wave-like motion. The code uses d3.select, d3.range, and d3’s transition API to animate SVG circle elements, with random values for radius, color, and final placement. The data is generated directly from the sine of each index, and the rendering is SVG-based within a full-window canvas.

NNita

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