{
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(3)}`)
// .textTween(() => t => `t = ${t.toFixed(6) * 2}`)
.end();
}
}
{
const div = d3
.create("div")
.style("font-family", "var(--sans-serif)")
.style("font-variant-numeric", "tabular-nums")
.property("_current", random);
debugger; // check div._group[0][0]._current
while (true) {
yield div.node();
debugger; // check div.datum(random) // div._group[0][0]._current
await div
.datum(random)
.transition()
.duration(5000)
.textTween(function(d) { // d is the random number produced from datum(random)
debugger; // knowing d and this._current, try i(0.0001) and i(0.9999)
const i = d3.interpolate(this._current, d);
return function(t) {
this._current = i(t);
return `
t = ${format(t)},
d = ${format(d)},
format(i(t)) = ${format(i(t))},
this._current = ${format(this._current)}`;
};
})
.end();
}
}
format = d3.format(".2s") // https://github.com/d3/d3-format/blob/v1.4.2/README.md#d3-format
random()
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) // this delay is to display "before"
.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") // creat a subdiv to display "after"
.style("position", "absolute") //
.style("top", 0)
.style("left", 0)
.style("bottom", 0)
.style("right", 0) // the 5 lines above is to make the second div fully overlap with the first div
.style("background-color", "white") // use its white background to cover up "before"
.style("opacity", 0) // to make after opac so that "before" can be displayed
.text("after")
.transition()
.delay(1250) // make sure "before" displayed for 1.25s
.duration(2500) // let the transition from opacity 0 to 1 lasting for 2.5s
.style("opacity", 1)
.transition()
.duration(1250) // after "after" reappear, make it continue to last for 1.25s before end
.end();
}
}
d3 = require("d3@^5.14.1")
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.
