Public
Edited
Dec 5, 2022
<div id="animation"></div>
h = 600 - margin.top - margin.bottom
margin = ({ top: 20, right: 20, bottom: 60, left: 100 })
{
// Import the necessary D3 modules
// import {select} from "d3-selection";
// import {easeLinear} from "d3-ease";
// Define the size of the animation
const width = 800;
const height = 600;
const container = d3
.create("svg")
.attr("height", h + margin.top + margin.bottom)
.attr("width", width);
// Define the circle's starting position
const x = 0;
const y = height / 2;
// Define the circle's radius
const r = 50;
// Create a selection for the circle
const circle = d3
.select("#animation")
.append("circle")
.attr("stroke","black")
.attr("cx", x)
.attr("cy", y)
.attr("r", r);
// Define the duration of the animation
const duration = 5000;
// Define the animation function
const animate = () => {
// Use D3's transition() method to animate the circle
circle
.transition()
.duration(duration)
.ease(d3.easeLinear)
.attr("cx", width)
.on("end", animate);
};
return container.node()
}
d3 = require("d3@7")
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.
