circle hops

by Laurie Skelly

HTML

<div id="svg_container"></div>

<button id="heybutton" onclick=update()>hey</button>

CSS

#svg_container {
    margin:10px;
}
svg {
    border: 1px solid gray;
}
button {
    margin-left:10px;
}

JavaScript

h = 400;
w = 500;

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})