Public
Edited
Oct 26, 2023
4 forks
18 stars
Insert cell
Insert cell
Insert cell
{
const div = d3.create("div")
.style("font-family", "var(--sans-serif)")
.style("font-variant-numeric", "tabular-nums");

while (true) {
yield div.node();
await div.transition()
.duration(5000)
.textTween(() => t => `t = ${t.toFixed(6)}`)
.end();
}
}
Insert cell
Insert cell
Insert cell
{
const div = d3.create("div")
.style("font-family", "var(--sans-serif)")
.style("font-variant-numeric", "tabular-nums")
.property("_current", random);

while (true) {
yield div.node();
await div
.datum(random)
.transition()
.duration(5000)
.textTween(function(d) {
const i = d3.interpolate(this._current, d);
return function(t) { return format(this._current = i(t)); };
})
.end();
}
}
Insert cell
format = d3.format(".3s")
Insert cell
random = d3.randomUniform(1e5, 1e7)
Insert cell
Insert cell
{
while (true) {
const div = d3.create("div")
.style("font-family", "var(--sans-serif)")
.text("before");

yield div.node();
await div.transition()
.delay(2500)
.duration(2500)
.text("after")
.end();
}
}
Insert cell
Insert cell
{
while (true) {
const div = d3.create("div")
.style("font-family", "var(--sans-serif)")
.style("position", "relative")
.text("before");

yield div.node();
await div.append("div")
.style("position", "absolute")
.style("top", 0)
.style("left", 0)
.style("bottom", 0)
.style("right", 0)
.style("background-color", "white")
.style("opacity", 0)
.text("after")
.transition()
.delay(1250)
.duration(2500)
.style("opacity", 1)
.transition()
.duration(1250)
.end();
}
}
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