Public
Edited
Aug 29, 2023
Insert cell
Insert cell
data = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"]
Insert cell
data.slice(0, 5)
Insert cell
// randomSample = {
// while (true) {
// yield d3.shuffle(data.slice())
// .slice(Math.floor(Math.random() * 10) + 5)
// .sort(d3.ascending);
// await Promises.delay(3000);
// }
// }
Insert cell
reservoirSample = {
for (let sample of reservoirSampling(data)) {
yield sample;
await Promises.delay(1000);
}
}
Insert cell
function* reservoirSampling(data) {
const K = 5;
let R = data.slice(0, K);
for (let i = K; i < data.length; i++) {
const j = Math.floor(Math.random() * i);
if (j < K) {
R[j] = data[i];
}
yield R;
}
}
Insert cell
diagram = {
const node = d3
.create("div")
.style("width", "100px")
.style("height", "200px");
let data_spans = node.append("div").style("margin", "10px").selectAll("span");

return Object.assign(node.node(), {
update(data) {
const t = node.transition().duration(1500);
const t_exit = node.transition().duration(3000);
data_spans = data_spans
.data(data, (d) => d)
// .join("span")
.join(
(enter) =>
enter
.append("span")
.style("padding", "10px")
.style("margin", "10px")
.style("background", "green")
.style("border", "1px solid")
.text((d) => d),
(update) => update,
(exit) =>
exit.call((text) =>
text.transition(t).remove().style("background", "red")
)
)
.call((text) => text.transition(t).style("background", "white"));
}
});
}
Insert cell
diagram.update(reservoirSample)
Insert cell

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.
Learn more