Materials science // data interaction
Published
Edited
Nov 3, 2021
Importers
myText = ({
static: "This example is ",
dynamic: ["cool.", "reusable.", "low-key 🔥.", "maybe not the best approach for displaying really, really long strings... if you ask me... but you probably knew that already. Anyway, best of luck!"],
fontColor: "white",
backgroundColor: "#e356a2",
fontSize: "32px",
fontFamily: "monospace",
duration: 1500,
delay: 1000
})
TypewriterArray = {
const div = d3.create("div")
.style("font-family", myText.fontFamily)
.style("color", myText.fontColor)
.style("background-color", myText.backgroundColor)
.style("font-size", myText.fontSize);
let i = 0 ;
while (true) {
yield div.node();
await div.transition()
.duration(myText.duration)
.textTween(function(d) {
return function(t) {
return myText.static + myText.dynamic[i % myText.dynamic.length]
.substr(0,Math.floor(myText.dynamic[i % myText.dynamic.length].length*t+t)) + "|";}
})
.delay(myText.delay)
.end();
i++ ;
}
}
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.
