D3 Examples - rain circles

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #vis { width: 100%; height: 400px; border:1px solid red }
  </style>
</head>
​
<body>
    <div id="vis"></div>
  <script>
       var width = document.getElementById("vis").clientWidth;
​
    var height = document.getElementById("vis").clientHeight;
    var svg = d3.select("#vis").append("svg")
      .attr("width", width)
      .attr("height", height)
​
var i;
    for (i = 1; i < 100; i ++) {
        var circle = svg.append("circle")
        .attr("r", 10 + Math.random() * 20)
        .style("fill", "#9a0b16")
            .style("opacity", 0.7);
       
    var move = function() {
     d3.select(this)
        .transition()
        .duration(10000 + 20000*Math.random())
        .attr("cy", height)
        .attr("cx", width*Math.random())
        .on('end',function(){
              d3.select(this).remove();
            
            var replicant = svg.append("circle")
                        .attr("r", 10 + Math.random() * 20)
                        .style("fill", "#9a0b16")
                                .style("opacity", 0.7)
                .transition()
                .delay(20*i)
                .duration(10)
                .attr("cy", 0)
                .attr("cx", width*Math.random())
                .on("end", move);
                });
    }
    
    circle.transition()
        .delay(20*i)
        .duration(10)
        .attr("cy", 0)
        .attr("cx", width*Math.random())
        .on("end", move);
};
​
  </script>
</body>
    