Published
Edited
Mar 28, 2020
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 800, 33])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.style("display","block")
return Object.assign(svg.node(), {
update(letters) {
let t = d3.transition().duration(2000)
let text = svg.selectAll("text")
text = text
.data(letters, d => d)
.join(
enter => enter.append("text")
.text(d => d)
.attr("y",-7)
.attr("x", (d,i) => i*17),
update => update,
exit => exit
.transition(t)
.remove()
.attr("y", 41)
)
.transition(t)
.attr("y", 17)
.attr("x", (d,i) => i*17)
return "Animation in progress"
}
})
}
chart.update(randomLetters)
d3 = require("d3@5")
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.
