{
const svg = DOM.svg(width, height);
const c = d3.select(svg);
const center = [width / 2, height / 2];
c.selectAll('circle').data(d3.range(numCircles)).enter().append('circle')
.attr('cx', center[0])
.attr('cy', center[1])
.attr('r', height / 4)
.attr('fill', 'black')
.attr('opacity', 4 / numCircles);
let centered = true;
d3.interval(() => {
centered = !centered
c.selectAll('circle').transition().duration(1000).delay(i => i % 4 * 20)
.attr('cx', i => center[0] + (centered ? 0 : Math.cos(Math.PI * 2 * i / numCircles) * height / 4))
.attr('cy', i => center[1] + (centered ? 0 : Math.sin(Math.PI * 2 * i / numCircles) * height / 4))
}, 2500)
return svg;
}
numCircles = 36
height = width * aspectRatio
aspectRatio = 9 / 16
d3 = require('d3@5', 'd3-transition')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
