{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 33)
.attr("viewBox", `0 -20 ${width} 33`);
svg.selectAll("text")
.data(randomLetters())
.enter().append("text")
.attr("x", (d, i) => i * 16)
.text(d => d);
return svg.node();
}
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 33)
.attr("viewBox", `0 -20 ${width} 33`);
while (true) {
const textUpdate = svg.selectAll("text")
.data(randomLetters());
const textEnter = textUpdate.enter().append("text");
const textExit = textUpdate.exit().remove();
textEnter.merge(textUpdate)
.attr("x", (d, i) => i * 16)
.text(d => d);
yield svg.node();
await Promises.tick(2500);
}
}
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 33)
.attr("viewBox", `0 -20 ${width} 33`);
while (true) {
const textUpdate = svg.selectAll("text")
.data(randomLetters(), d => d)
.attr("fill", "gray");
const textEnter = textUpdate.enter().append("text")
.attr("fill", "green")
.text(d => d);
const textExit = textUpdate.exit().remove();
textEnter.merge(textUpdate)
.attr("x", (d, i) => i * 16);
yield svg.node();
await Promises.tick(2500);
}
}
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 33)
.attr("viewBox", `0 -20 ${width} 33`);
while (true) {
const t = svg.transition()
.duration(750);
const textUpdate = svg.selectAll("text")
.data(randomLetters(), d => d)
.attr("fill", "black")
.attr("y", 0)
.call(update => update.transition(t)
.attr("x", (d, i) => i * 16));
const textEnter = textUpdate.enter().append("text")
.attr("fill", "green")
.attr("x", (d, i) => i * 16)
.attr("y", -30)
.text(d => d)
.call(enter => enter.transition(t)
.attr("y", 0));
const textExit = textUpdate.exit()
.attr("fill", "brown")
.call(exit => exit.transition(t)
.attr("y", 30)
.remove());
yield svg.node();
await Promises.tick(2500);
}
}
function randomLetters() {
return d3.shuffle("abcdefghijklmnopqrstuvwxyz".split(""))
.slice(0, Math.floor(6 + Math.random() * 20))
.sort();
}
html`<style>
.observablehq > svg:only-child {
font: var(--mono_fonts);
display: block;
}
</style>`
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.
