Data Designer and Content Creator
Public
Edited
Apr 20, 2023
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 33)
.attr("viewBox", `0 -20 ${width} 33`);
while (true) {
svg.selectAll("text")
.data(randomLetters(), d => d)
.join(
enter => enter.append("text")
.attr("fill", "green")
.text(d => d),
update => update
.attr("fill", "gray")
)
.attr("x", (d, i) => i * 16);
yield svg.node();
await Promises.tick(1500);
}
}
randomLetters()
// function to generate random letters
function randomLetters() {
return d3.shuffle("abcdefghijklmnopqrstuvwxyz".split(""))
.slice(0, Math.floor(6 + Math.random() * 20))
.sort();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
