barchart = Plot.barY(data, {
x: (d, i) => i,
fill: (d) => d,
render: (i, s, v, d, c, next) => {
const g = next(i, s, v, d, c);
c.ownerSVGElement.update = (values) =>
d3
.select(g)
.selectAll("rect")
.transition()
.duration(750)
.attr("height", (i) => s.y(0) - s.y(values[i]))
.attr("y", (i) => s.y(values[i]))
.attr("fill", (i) => s.color(values[i]));
return g;
}
}).plot({
y: { domain: [0, 10] },
color: { scheme: "bupu", domain: [-2, 10] }
})
data = Array.from({ length: 10 }, d3.randomInt(1, 10))
{
await Promises.delay(5000);
do {
const newValues = data.map(d3.randomInt(1, 10));
yield newValues;
await barchart.update(newValues).end();
await Promises.delay(1300);
} while (true);
}
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.
