Bubble Chart

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="src.js"></script>
    <div id="chart"></div>

var data = [];

var categories = ["A", "B", "C", "D", "E", "F"];

for (var i = 0; i < 7; i++) {
  data.push({
    radius: i,
    color: categories[Math.floor(Math.random()*categories.length)],
  });
}

var ext = d3.extent(data, function(d) { return d.radius; });

var bubbles = charts.bubble()
                      .width(500)
                      .height(500)
                      // .rValue(30)
                      .r(d3.scale.sqrt().domain(ext).range([5,30]))
                      .colors(d3.scale.category20())
                      .outline(.8)
                      .force(d3.layout.force()
                                        .gravity(1)
                                        // .charge(function(d) { return -Math.pow(d.r,2)/6; })
                                        );
// d3.timer(function() { bubbles.force().resume(); });

bubbles.nameValue(bubbles.colorValue())
        .typeValue(bubbles.colorValue());

d3.select("#chart")
    .datum(data)
    .call(bubbles);

d3.select("#chart")
    .datum(data)
    .call(bubbles);
}, 3000);

</script>
  </body>
</html>

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

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