akinetic hypnodots

##Akinetic hypnodots

100% less bouncing. Easier to see what is going on. Lots of fun/maddening ways to play with the spacing of the dots. See if you can figure out how it figures out where the new circles go.

Forkable, tweakable jsfiddle version

<!DOCTYPE html>
<meta charset="utf-8">
 
<style>
svg{
    border: 5px gray solid;
}
</style>
 
<body>
 
<svg id="svg"></svg>
 
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">

var svg = d3.select("#svg")
var h = 200
var w = 600
var rad = 20
var margin = 10
var centerx = w/2
var centery = h/2
var max_side = 4
var xdelta = (centerx-margin-rad)/max_side
var dur = 600
var update_interval = dur*2
var eeze = 'quad' //'quad'//'bouncy'//'elastic'//'circle'//'linear'

svg.attr('height',h).attr('width',w)

svg
    .append('circle')
    .attr('cx',centerx)
    .attr('cy',centery)
    .attr('r',rad)
    .style('fill','orange')

function update(data){
    var circle = svg.selectAll('circle')
    .data(data);
    
    var sidedness = Math.floor(Math.random()*2)
    
    circle.enter().append('circle')
        .attr('cy',centery)
        .attr('cx',function(d,i){
            return centerx+(Math.pow(-1,i+sidedness)*d.dx);
        })
        .attr('r',rad)
        .style('fill-opacity',1e-6);
//    circle
  //      .style('fill',function(d){return d.color;})

circle.transition()
        .duration(dur)
        .ease(eeze) //'elastic','
        .style('fill',function(d){return d.color;})
        .style('fill-opacity',1)

circle.exit().transition().duration(dur).delay(dur/2)
        .style('fill-opacity','1e-6')
        .remove();
}

function randomcolor(){
    colorrgb = []
    for (var i=0; i<3; i++){
        colorrgb.push(Math.floor(Math.random()*256))
    }
    return 'rgb('+colorrgb.toString()+')'
};

Modified http://d3js.org/d3.v3.min.js to a secure url

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