D3 Examples - change colors

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg{
    border: 5px gray solid;
}   
</style>
​
<body>
<svg width="400" height="200">
    <circle cx="100" cy="100" r="30" style="fill:orange;"></circle>
    <circle cx="200" cy="100" r="30" style="fill:orange;"></circle>
    <circle cx="300" cy="100" r="30" style="fill:orange;"></circle>    
</svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
​
function update(data){
    circle = d3.selectAll('circle')
        .data(data);
    
    circle.transition().duration(500)
    .style('fill',function(d){return d;})
}
​
function newColors(){
    colorrgb = []
    for (var i=0; i<3; i++){
        colorrgb.push(Math.floor(Math.random()*256))
    }
    color = 'rgb('+colorrgb.toString()+')'
    return [color,color,color]
};
    
setInterval(function(){
    update(newColors())},
    1500);
​
</script>
</html>
    