Fork of Messing around with Sine Wave Circles

index.js

//add the SVG element to the DOM

const SVG = document.createElementNS(

'http://www.w3.org/2000/svg',

'svg'

);

SVG.setAttribute('width', '960');

SVG.setAttribute('height', '500');

document.body.prepend(SVG);

const svg = d3

.select('svg')

.style('background-color', '#0fa6cf

');

const width = svg.attr('width');

const height = svg.attr('height');

const n = 200;

const circles1Container = svg

.append('g')

.attr('class', 'circleContainer');

const circles2Container = svg

.append('g')

.attr('class', 'circleContainer');

const circles3Container = svg

.append('g')

.attr('class', 'circleContainer');

const circles4Container = svg

.append('g')

.attr('class', 'circleContainer');

const circles1 = circles1Container

.selectAll('circle')

.data(d3.range(n))

.enter()

.append('circle')

.attr('cx', (d) => ((d + 0.5) * width) / n)

.attr('r', width / n / 3) //3 was orginally 2

Last edited Apr 25, 2023

Created on Aug 11, 2022

MIT Licensed