D3 Examples - hypnodots

xxxxxxxxxx
 
<!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()+')'
};
​
function newData(){
    data = []
    num_elements = 1+2*Math.ceil(Math.random()*5);
    for(var i=0; i< num_elements; i++){
        datum = {
            'color':randomcolor(),
            'dx': Math.ceil(i/2)*xdelta
        }        
        data.push(datum)
    }
    return data;
};
    
setInterval(function(){
    update(newData())},
    update_interval);
​
 
</script>
    