circle hop

###circle hop

hey, don't poke me. I'm sensitive.

jsfiddle version for forking/tweaking

<!DOCTYPE html>
<meta charset="utf-8">

h = 410;
w = 920;

var svg = 
  d3.select("#svg_container")
    .append("svg")
    .attr("id","svg")
    .attr('height',h)
    .attr('width',w);

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js