Published
Edited
May 11, 2022
1 fork
1 star
chart = {
const height = length * 25;
const margin = { top: 20, right: 10, bottom: 10, left: 10 };
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-family", "sans-serif")
.attr("font-size", "large");
let text = svg.selectAll("text");
const x = d3.scaleLinear().domain([0, 0]).range([margin.left, margin.left]);
const y = d3
.scaleLinear()
.domain([0, length - 1])
.range([margin.top, height - margin.bottom]);
return Object.assign(svg.node(), {
update(data) {
const t = svg.transition().duration(750);
text = text
.data(data, (d) => d)
.join(
(enter) =>
enter
.append("text")
.attr("x", x(0))
.attr("y", (d, i) => y(i))
.text((d) => d),
(update) =>
update.call((text) => text.transition(t).attr("y", (d, i) => y(i))),
(exit) => exit
);
}
});
}
mutable length = 0
data = {
let arr = Array.from({ length: 5 }, (_, i) => i);
mutable length = arr.length;
yield arr;
while (true) {
await Promises.delay(1000);
arr.push(arr.shift());
yield arr;
}
}
chart.update(data);
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.
