{
var nbr_circles = 100;
var radius = 10;
var new_fall_delay = 1000;
var circles_per_fall = 5;
var duration = 20000;
var data = [];
for (let i = 0; i < nbr_circles; ++i) {
data.push({
x: Math.random()*width,
y: height/10
});
}
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
function draw_circles() {
console.log(data);
svg
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.style('fill', d => color(d.x))
.attr("r", radius)
}
var sim = d3.forceSimulation(data)
.force("y", d3.forceY(0.9*height))
.force("collide", d3.forceCollide(radius))
.force("limits", forceLimit.forceLimit().radius(radius).y1(0.9*height).x0(0).x1(width))
sim.on('tick', function() {
svg
.selectAll("circle")
.attr('cx', d => d.x)
.attr('cy', d => d.y);
});
function add_circles(elapsed_time) {
if (elapsed_time < duration) {
for (let i = 0; i < circles_per_fall; ++i) {
data.push({
x: Math.random()*width,
y: height*0.1,
vx: 0,
vy: 0,
});
}
draw_circles();
sim.nodes(data).alpha(1).restart();
}
}
draw_circles();
d3.interval(add_circles, new_fall_delay);
return svg.node()
}
height = 400
color = d3.scaleSequential(d3.interpolateSinebow).domain([0,width])
color(Math.random()*width)
forceLimit = require("d3-force-limit")
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.
