Published
Edited
Sep 15, 2021
2 forks
1 star
md`# D3 circle animation`
chart = {
const width = 1000
const height = 500
const svg = d3.select(DOM.svg(width, height));
const circle = svg.append('circle')
.attr('cx', Math.random() * 900)
.attr('cy', Math.random() * 400)
.attr('r', Math.random() * 80)
.attr('fill', `#${randomColour()}`)
.call(animate)
return svg.node();
}
function animate(circle) {
circle
.transition()
.duration(2000)
.attr('cx', Math.random() * 900)
.attr('cy', Math.random() * 400)
.attr('r', Math.random() * 80)
.attr('fill', `#${randomColour()}`)
.on('end', () => circle.call(animate))
}
function randomColour() {
return Math.floor(Math.random()*16777215).toString(16)
}
d3 = require("d3@5")
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.
