Public
Edited
Feb 1
startLoop = {
const startLoop = () => {
d3.select("svg")
.selectAll(".rect")
.data(items, (d) => d.id)
.join(
(enter) => enter.append("rect").call(applyStyles),
(update) => update.call(applyStyles),
(exit) =>
exit.call((exit) => exit.transition().attr("opacity", 0).remove())
)
.attr("class", "rect");
return "Start";
};
invalidation.then(() => (mutable loopActive = false));
return startLoop;
async function applyStyles(selection) {
if (!loopActive || selection.empty()) return;
await selection
.transition()
.duration(1000)
.attr("opacity", 1)
.attr("y", 0)
.attr("x", startX)
.attr("width", radius)
.attr("height", radius)
.transition()
.duration(100)
.attr("fill", (d) => d.color)
.attr("opacity", 1)
.transition()
.duration(1000)
.ease(d3.easeQuadInOut)
.delay((d, i) => i * 250)
.attr("opacity", 1)
.attr("x", (d, i) => i * (radius + padding) + endX)
.attr("y", 0)
.attr("width", radius)
.attr("height", radius)
.transition()
.duration(2000)
.delay((d, i) => i * 100)
.attr("opacity", 0.2)
.on('end', (d, i) => console.log(`animation ${i + 1} completed `))
.end();
console.log(`all animations completed (${loopActive})`)
mutable items = createItems();
startLoop();
}
}
mutable items = createItems();
createItems = () => {
const randomValue = (minValue, maxValue) => Math.floor(Math.random() * (maxValue - minValue + 1)) + minValue;
const min = 3;
const max = 10;
const count = randomValue(min, max)
const elements = Array.from({length: count}, (d, i) => {
const num = randomValue(0, colors.length - 1)
return {
color: colors[num],
id: i,
}
});
return elements;
}
colors = ['yellow', 'red', 'slategrey', 'black', 'orange', 'pink', 'purple', 'green', 'blue', 'brick']
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.
