Public
Edited
Jun 7, 2023
1 fork
9 stars
{
const n = 4000;
const whiteblue = d3.interpolateRgb("#eee", "steelblue");
const blueorange = d3.interpolateRgb("steelblue", "orange");
const orangewhite = d3.interpolateRgb("orange", "#eee");
const root = d3.create("div")
.style("display", "flex")
.style("flex-wrap", "wrap")
.style("padding-bottom", "10px");
const div = root
.selectAll()
.data(d3.range(n))
.join("div")
.style("width", "10px")
.style("height", "10px")
.style("margin", "1px 0 0 1px")
.style("background-color", "#eee");
div.transition()
.delay((d, i) => i + Math.random() * n / 4)
.ease(d3.easeLinear)
.on("start", function repeat() {
d3.active(this)
.styleTween("background-color", () => whiteblue)
.transition()
.delay(1000)
.styleTween("background-color", () => blueorange)
.transition()
.delay(1000)
.styleTween("background-color", () => orangewhite)
.transition()
.delay(n)
.on("start", repeat);
});
invalidation.then(() => div.interrupt());
return root.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.
