D3 Examples - Bubble Chart

xxxxxxxxxx
 
<!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>
​
    <script>
​
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);
​
​
var inter = 0;
setInterval(function() {
  // ENTER
  if (inter === 0) {
    data.push({
      radius: Math.random()*25+25,
      color: "F"
    });
    inter++;
  }
  // UPDATE
  else if (inter === 1) {
    data[0].radius = 0;
    data[0].color = "NEW WORD";
    inter++;
  }
  // DELETE
  else {
    data.pop();
    inter = 0;    
  }
​
  d3.select("#chart")
    .datum(data)
    .call(bubbles);
}, 3000);
​
    </script>
  </body>
</html>
​
    