setInterval color + y

by Laurie Skelly

HTML

<svg id="svg">
</svg>

CSS

svg{
    border: 2px gray solid;
}

JavaScript

var svg = d3.select("#svg")
var h = 100
var w = 450
var rad = 12
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);