Published
Edited
Apr 14, 2021
svg.update(counter, duration)
function circles(svg) {
console.log('circles called');
const circle = svg
.selectAll('circle')
.data(circleArray)
.join('circle')
.attr('stroke', (d, i) => color(i))
.attr('opacity', 0.6)
.attr("fill", "none")
.attr("stroke-width", 2);
return (counter, transition) => {
const toRadians = angle => {
return angle * (Math.PI / counter);
};
circle
.transition(transition)
.attr("r", radius)
.attr("cx", d => width / 2 + Math.sin(toRadians(d)) * radiusValue)
.attr("cy", function(d, i) {
if (i < circleCount / 2) {
return height / 2 - radius + Math.cos(toRadians(d)) * radius;
} else {
return height / 2 + radius - Math.cos(toRadians(d)) * radius;
}
});
};
}
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.
