Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
Jan 27, 2021
{
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", "steelblue")
.text(d => d),
update => update.attr("fill", "orange")
)
.attr("x", (d, i) => i * 16);
yield svg.node();
await Promises.tick(2500);
}
}
function randomLetters() {
return d3
.shuffle("abcdefghijklmnopqrstuvwxyz".split(""))
.slice(0, Math.floor(6 + Math.random() * 10))
.sort();
}
{
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", 33)
.attr("viewBox", `0 -20 ${width} 33`);
while (true) {
svg
.selectAll("text")
.data(randomNumbers(), d => d)
.join("text")
.attr("x", (d, i) => i * 80)
.text((d, i) => `i=${i} 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 t = svg.transition().duration(1000);
svg
.selectAll("text")
.data(randomNumbers(), d => d)
.join(
enter =>
enter
.append("text")
.attr("fill", "steelblue")
.attr("x", (d, i) => i * 80)
.attr("y", -30)
.text(d => d)
.call(enter => enter.transition(t).attr("y", 0)),
update =>
update
.attr("fill", "orange")
.attr("y", 0)
.call(update => update.transition(t).attr("x", (d, i) => i * 80)),
exit =>
exit.attr("fill", "red").call(exit =>
exit
.transition(t)
.attr("y", 30)
.remove()
)
);
yield svg.node();
await Promises.tick(2500);
}
}
function randomNumbers() {
return d3
.shuffle("0123456789".split(""))
.slice(0, Math.floor(3 + Math.random() * 8))
.sort();
}
d3 = require("d3@6")
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.
