Random Circle!

by Jeff Wen

HTML

<Button>
Hi there!
</Button>
<div id="viz_container"></div>

CSS

#viz_container {
    margin:10px;
}
svg {
    border: 1px solid gray;
}

circle {
    fill: coral;
    stroke: dodgerblue;
    stroke-width:3px
}

JavaScript

var h = 400;
var w = 500;

var original_data = [{'cx':getRandom(0,500),'cy':getRandom(0,400),'r':getRandom(10,150)}];


function getRandom(min, max) {
  return Math.random() * (max - min) + min;
};

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

var circle = svg.append('circle').data(original_data)
.attr('cx',function(d){return d.cx})
.attr('cy',function(d){return d.cy})
.attr('r',function(d){return d.r});
//.attr('id','circle');

d3.select("Button").on("click", function() {
var new_data = [{'cx':getRandom(0,500),'cy':getRandom(0,400),'r':getRandom(10,150)}];
var t = svg.select('circle');
t.data(new_data)
.attr('cx',function(d){return d.cx})
.attr('cy',function(d){return d.cy})
.attr('r',function(d){return d.r});});
//.attr('cx',getRandom(0,500))
//.attr('cy',getRandom(0,400))
//.ease('bounce')
//.style('fill','dodgerblue')
//.style('stroke','coral')
//.attr('r',100);});