D3 Examples - swirling circles

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
    .circle{ fill-opacity: 0.4;}
</style>
<body>
  <script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
    function colorPicker(v) {
        if (v == 1) { return "#4575b4"; }
        else if (v == 2) { return "#74add1"; }
        else if (v == 3) { return "#fee08b"; }
        else if (v == 4) { return "#fdae61"; }
        else if (v == 5) { return "#f46d43"; }
        else if (v == 6) { return "#92c5de"; }
        else { return "#d73027"; }
    }
​
var margin = { top: 20, right: 10, bottom: 20, left: 10 },
    width = 900 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom,
    pace = 20, 
    n_limit = 1000;
​
var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
​
function go(){
  var ncount = 0
    interval = setInterval(function(){
      var c = svg.append('circle')
        .attr('cy', function(d){ return height - 10*Math.random() })
        .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -3 : 3) + width*0.5})
        .attr('r', function (d) { return 4 })
        .attr("opacity", 0.6)
        .style("fill", function (d) { return colorPicker(Math.ceil(6 * Math.random())) })
      
      c.transition()
        .duration(2000)
        .attr('cy', height*0.5)
        .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -3 : 3) + width*0.5})
        .ease('linear')
        .transition()
        .duration(2000)
        .attr('cy', 10)
        .attr('cx', function(d){ return 75*Math.random()*(Math.random() < 0.5 ? -3 : 3) + width*0.5})
        .ease('linear')
        .each("end", function(){ d3.select(this).remove()});
​
      ncount+=1;
      if (ncount>n_limit) clearInterval(interval)
    },pace)
}
​
  go()
​
var go_loop = setInterval(go, 4000 + pace * n_limit)
​
</script>
</body>
​
    