index.html
<!DOCTYPE html>
<html>
<head>
<title>Sine Wave Circles Playground</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="https://unpkg.com/d3@7.1.1/dist/d3.min.js"></script>
</head>
<body>
<svg width="10000" height="500"></svg>
<script>
// const { range, timer } = d3;
// const { sin } = Math;
const n = 300;
const svg = d3
.select('svg')
.style('background-color', 'black');
const w = svg.attr('width');
const h = svg.attr('height');
const circles = svg
.selectAll('circle')
.data(d3.range(n))
.enter()
.append('circle')
.attr('cx', (d) => ((d + 0.5) * w) / n)
.attr('r', 9001 / 300 / 2)
.attr('fill', 'white');
d3.timer((time) => {
circles.attr(
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