Published
Edited
Jul 9, 2019
3 stars
svg = {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// .attr("viewBox", `0 -20 ${width} 33`);
while (true) {
// const t = svg.transition()
// .duration(750);
svg.selectAll("circle")
.data(randomBalls(), (d, i) => i)
.join(enter, update, exit);
// svg.selectAll("circle")
// .data(randomBalls(), (d, i) => i)
// .join(
// enter => enter.append("circle")
// .attr("fill", "green")
// .attr("x", (d, i) => d.x)
// .attr("y", (d, i) => d.y)
// .call(enter => enter.transition(t)
// .attr("r", (d, i) => d.r)),
// update => update
// .attr("fill", "yellow")
// .call(update => update.transition(t)
// .attr("r", (d, i) => d.r)
// .attr("x", (d, i) => d.x)
// .attr("y", (d, i) => d.y)),
// exit => exit
// .attr("fill", "red")
// .call(exit => exit.transition(t)
// .attr("r", (d, i) => 0)
// .remove())
// );
yield svg.node();
await Promises.tick(delay);
}
}
// .join(
// enter => enter.append("text")
// .attr("fill", "green")
// .attr("x", (d, i) => i * 16)
// .attr("y", -30)
// .text(d => d)
// .call(enter => enter.transition(t)
// .attr("y", 0)),
// update => update
// .attr("fill", "black")
// .attr("y", 0)
// .call(update => update.transition(t)
// .attr("x", (d, i) => i * 16)),
// exit => exit
// .attr("fill", "brown")
// .call(exit => exit.transition(t)
// .attr("y", 30)
// .remove())
// );
function enter(s) {
return s.append("circle")
.attr("stroke", "black")
.attr("fill", "green")
.attr("stroke-width", "1")
.attr("cx", function(d, i) {
return d.x;
})
.attr("cy", (d, i) => d.y)
.attr("r", (d, i) => 0)
// .call(s.transition().delay(750)
.call(s => s.transition().duration(delay)
.attr("r", (d, i) => d.r));
}
function update(s) {
return s.call(s => s.transition().duration(delay)
.attr("fill", "yellow")
.attr("r", (d, i) => d.r)
.attr("cx", (d, i) => d.x)
.attr("cy", (d, i) => d.y));
}
function exit(s) {
return s.call(s => s.transition().duration(delay-100)
.attr("fill", "red")
.attr("r", (d, i) => 0)
.remove());
}
// exit => exit
// .attr("fill", "brown")
// .call(exit => exit.transition(t)
// .attr("y", 30)
// .remove())
function randomBalls() {
let balls = [];
let nBalls = bs(Math.random());
for (let i=0; i<=nBalls; i++){
let x = xs(Math.random());
let y = ys(Math.random());
let r = rs(Math.random());
balls.push({x:x, y:y, r:r});
}
return balls;
}
r = rs(Math.random());
bs = d3.scaleQuantize().domain([0, 1]).range([minBalls, maxBalls]);
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.
