Messing around with Sine Wave Circles
✓ Published2🌍 Public
Four overlapping sine and cosine waves are rendered as horizontal rows of blue, crimson, turquoise, and orange circles. Each wave uses a separate D3 group and a `d3.timer` to animate the vertical positions of 50 circles per row in real time. The animation is driven by `Math.sin` and `Math.cos` functions with a shared time parameter, creating contrasting phase-shifted motion across the four color-coded sets. Circles are positioned using D3’s data join and `attr` updates, with an SVG canvas sized 960 by 500 pixels.
AI-generated descriptionA 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