swirling circles

Just for fun, swirling circles.

Inspired from @mtaptich's block - 8f8c955a7bcaa3ac2b2f

<!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>

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>

https://d3js.org/d3.v3.min.js