seed, teach, grow
{
const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
const svg = initSVG();
function update(data) {
// DATA JOIN
// Join new data with old elements, if any.
let text = svg.selectAll("text")
.data(data);
// UPDATE
// Update old elements as needed.
text.attr("fill", "#333");
// ENTER
// Create new elements as needed.
//
// ENTER + UPDATE
// After merging the entered elements with the update selection,
// apply operations to both.
text.enter().append("text")
.attr("fill", "green")
.attr("x", (d,i) => i * 32)
.attr("dy", ".35em")
.merge(text)
.text(d => d);
// EXIT
// Remove old elements as needed.
text.exit().remove();
}
// The initial display.
update(alphabet);
// Grab a random sample of letters from the alphabet, in alphabetical order.
d3.interval(function() {
update(d3.shuffle(alphabet)
.slice(0, Math.floor(Math.random() * 26))
.sort());
}, 1500);
return svg.node()
}
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.
