D3 Examples - Sixty circles with a random radius

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    svg {
      background-color: #bdbdbd;
      width: 100%;
      height: 500px;
    }
    circle {
      fill: none;
      stroke: white;
    }
  </style>
</head>
<body>
<svg></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
  function getRandomR() {
    // Return a random radius
    var radius = Math.floor((Math.random() * 40));
    return radius
  }
​
  // Create the data
  var items = 60;
  var x0 = 250;
  var y0 = 250;
  var r = 200
​
  var centers = []
  for(var i = 0; i < items; i++) {
    var x = x0 + r * Math.cos(2 * Math.PI * i / items);
    var y = y0 + r * Math.sin(2 * Math.PI * i / items);
    centers.push([x, y])
  }
​
  var svg = d3.select("svg")
​
  svg.selectAll("circle")
      .data(centers)
      .enter()
      .append("circle")
      .attr("cx", function(d) {return d[0]})
      .attr("cy", function(d) {return d[1]})
      .attr("r", function() { return getRandomR()})
</script>
</html>
    