{
const svg = DOM.svg(width, height);
const c = d3.select(svg)
.attr('shape-rendering', 'geometricPrecision');
const center = [width / 2, height / 2];
const darkMode = mode === 'dark';
c.selectAll('circle').data(d3.range(numCircles)).enter().append('circle')
.attr('cx', center[0])
.attr('cy', center[1])
.attr('r', height / 4)
.attr('fill', i => d3.interpolateSinebow(i / numCircles))
.attr('stroke', darkMode ? 'transparent' : 'white')
.style('mix-blend-mode', darkMode ? 'multiply' : 'screen')
.attr('opacity', darkMode ? 0.1 : 0.75);
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')
import {radio} from '@jashkenas/inputs'
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.
