Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Sine Wave Circles

Public visualization

Viewing a saved revision (read-only)

4d8f4109ad2645b6b1835d1b99a493c5

Fork of Sine Wave Circles

0 stars0🌍 Public
Ppeter@attachmentdivision.com
Last edited Jan 4, 2023
Created on Jan 4, 2023
Forked from 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.

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.