Public
Edited
Apr 25
viewof myCircleTransition = {
const svg = d3.select(DOM.svg(500, 500));
// Create a circle within the SVG container
const circle = svg
.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 50);
// Transition/Animation of the SVG image
circle
.transition()
.duration(1000) // Faster duration
.delay(500) // Reduced delay
.attr("fill", "blue")
.transition()
.attr("cx", 350)
.attr("cy", 100)
.attr("fill", "black")
.transition()
.attr("cx", 350)
.attr("cy", 350)
.attr("fill", "blue")
.transition()
.attr("cx", 100)
.attr("cy", 350)
.attr("fill", "red")
.transition()
.attr("cx", 100)
.attr("cy", 100)
.attr("fill", "blue");
return svg.node();
}
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.
