{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 33)
.attr("viewBox", `0 -20 ${width} 33`);
svg.selectAll("text")
.data(randomLetters())
.join("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) {
svg.selectAll("text")
.data(randomLetters())
.join("text")
.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) {
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(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);
svg.selectAll("text")
.data(randomLetters(), d => d)
.join(
enter => 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)),
update => update
.attr("fill", "black")
.attr("y", 0)
.call(update => update.transition(t)
.attr("x", (d, i) => i * 16)),
exit => 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();
}
d3 = require("d3@^5.8")
html`<style>
.observablehq > svg:only-child {
font: var(--mono_fonts);
display: block;
}
</style>`
{
const svg = d3.create("svg")
.attr("width", width)
.attr("height", 400)
.attr("viewBox", `0 -20 ${width} 70`);
while (true) {
const t = svg.transition()
.duration(750);
svg.selectAll("text")
.data(randomLetters(), d => d)
.join(
enter => enter.append("text")
.attr("fill", "red")
.attr("x", (d, i) => Math.sign(Math.floor(i * 100 / 360)) * 400 + width / 3)
.attr("y", (d, i) => Math.cos(Math.floor(i * 100 / 360)) * 400)
.text(d => d)
.call(enter => enter.transition(t)
.attr("x", (d, i) => i * 20 + width / 3)
.attr("y", 0)),
update => update
.attr("fill", "black")
.attr("y", 0)
.call(update => update.transition(t)
.attr("x", (d, i) => i * 20 + width / 3)),
exit => exit
.attr("fill", "brown")
.call(exit => exit.transition(t)
.attr("x", (d, i) => Math.sign(Math.floor(i * 100 / 360)) * 400 + width / 2)
.attr("y", (d, i) => Math.cos(Math.floor(i * 100 / 360)) * 400)
.remove())
);
yield svg.node();
await Promises.tick(1000);
}
}
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.
