D3 Examples - circle hop

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style>
svg{
    border: 2px gray solid;
}
button{
    margin-left:20px;
}
#svg_container {
    margin:20px;
}
</style>
​
<body>
<div id="svg_container"></div>
<button id="heybutton" onclick=update()>hey</button>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
​
h = 410;
w = 920;
​
var svg = 
  d3.select("#svg_container")
    .append("svg")
    .attr("id","svg")
    .attr('height',h)
    .attr('width',w);
​
var new_data = function(){
    centerx = Math.floor(Math.random()*w);
    centery = Math.floor(Math.random()*h);
    size = Math.floor(Math.random()*(Math.min(h,w)/2));
    colorrgb = []
    for (var i=0; i<3; i++){
        colorrgb.push(Math.floor(Math.random()*256))
    }
    color = 'rgb('+colorrgb.toString()+')'
    return [{'cx':centerx,'cy':centery,'r':size,'color':color}];
};
​
update = function(){
    some_data = new_data()
    console.log(some_data)
​
    d3.select("#svg")
    .selectAll('circle')
    .data(some_data)
    .transition()
    .duration(250)
    .ease('circle')
    .attr('cx',function(d){return d.cx})
    .attr('cy',function(d){return d.cy})
    .attr('r',function(d){return d.r})
    .style('fill',function(d){return d.color})
      
};
​
initial_data = new_data()
​
d3.select("#svg")    
    .selectAll('circle')
    .data(initial_data)
    .enter().append('circle')
    .attr('cx',function(d){return d.cx})
    .attr('cy',function(d){return d.cy})
    .attr('r',function(d){return d.r})
    .style('fill',function(d){return d.color})
​
</script>
    