hypnodots

##Hypnodots

Featuring: enter() and exit() selections, updates, transitions, easing functions, and more, resulting in an utterly hypnotizing bunch of collapsing and expanding dots.

This has lots of convenient variables to play with if you care to fork and tweak on the jsfiddle version

<!DOCTYPE html>
<meta charset="utf-8">
 
<style>

svg{
    border: 2px 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 = 800
var rad = 20
var margin = 10
var centerx = w/2
var centery = h/2
var max_side = 5
var xdelta = (centerx-margin-rad)/max_side
var dur = 750
var update_interval = dur*2
var eeze = 'sin' //'quad'//'bouncy'//'elastic'//'circle'

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);
    
    circle.transition().duration(dur)
        .ease(eeze)
        .attr('cx',centerx)
        .style('fill',function(d){return d.color;})
    
    circle.enter().append('circle')
        .attr('cy',centery)
        .attr('cx',centerx)
        .attr('r',rad);

circle.transition()
        .delay(dur)
        .duration(dur)
        .ease(eeze) //'elastic','
        .style('fill',function(d){return d.color;})
        .attr('cx',function(d,i){
            return centerx+(Math.pow(-1,i)*d.dx);});

circle.exit().transition().duration(dur)
        .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()+')'
};

</script>

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

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