Public
Edited
Dec 18, 2023
Insert cell
Insert cell
zoomable_lottie = {
// The desired size of the result
let s = 500;

// Viewbox dimensions
let w = 180;
let h = 180;

let container = d3
.create("svg")
.attr("viewBox", [0, 0, w, h])
.style("width", `${s}px`)
.style("height", `${s}px`);
let g = container.append("g");
container.call(
d3
.zoom()
.extent([
[0, 0],
[w, h]
])
.scaleExtent([0.2, 5])
.duration(500)
.on("zoom", function (evt) {
g.attr("transform", evt.transform);
})
);
yield container.node();
lottie.loadAnimation({
container: g.node(),
renderer: "svg",
loop: true,
autoplay: true,
path
});
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more