{
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(2)}`)
.end();
}
}
{
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();
}
}
{
let random = d3.randomUniform(1,100);
let format = d3.format(".2s")
const div = d3.create("div")
.style("font-family", "var(--sans-serif)")
.style("font-variant-numeric", "tabular-nums")
.property("_current", Math.round(random()));
while (true) {
let data = Math.round(random());
div
.datum(data)
.join('text')
.style('font-size', 14)
.style('font-family', 'sans-serif')
.text(d => d)
.transition()
.duration(1000)
.style("color", data%2 ==0 ? "blue": "red")
.textTween(function(d) {
const i = d3.interpolate(this._current, d);
return function(t) { return format(this._current = i(t)); };
})
yield div.node();
await Promises.tick(2000)
}
}
format = d3.format(".2s")
random = d3.randomUniform(1e5, 1e7)
{
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();
}
}
{
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();
}
}
d3 = require("d3@6")
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.
