setInterval change colors independent

by Laurie Skelly

HTML

<svg width="400" height="200">
    <circle cx="100" cy="100" r="30" style="fill:cyan;"></circle>
    <circle cx="200" cy="100" r="30" style="fill:magenta;"></circle>
    <circle cx="300" cy="100" r="30" style="fill:yellow;"></circle>    
</svg>

CSS

svg{
    border: 5px gray solid;
}

JavaScript

function update(data){
    circle = d3.selectAll('circle')
        .data(data);
    
    circle.transition().duration(500)
    .style('fill',function(d){return d;})
}

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

function newColors(){
    return [randomcolor(),randomcolor(),randomcolor()]
};
    
setInterval(function(){
    update(newColors())},
    1500);