Bubble Chart

Test

by ninachroscicka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>

CSS

text {
  font: 16px sans-serif;
}

JavaScript

var root = {
  "name": "flare",
  "children": [{
    "name": "value1",
    "size": 50
  }, {
    "name": "value2",
    "size": 70
  }, {
    "name": "value3",
    "size": 90
  }, {
    "name": "value4",
    "size": 100
  }, {
    "name": "value5",
    "size": 77
  }]
};

var diameter = 320,
  format = d3.format(",d"),
  color = d3.scale.category20c();

var bubble = d3.layout.pack()
  .sort(null)
  .size([diameter, diameter])
  .padding(120.5);

var svg = d3.select("body").append("svg")
  .attr("width", diameter)
  .attr("height", diameter)
  .attr("class", "bubble");

//d3.json("flare.json", function(error, root) {
var node = svg.selectAll(".node")
  .data(bubble.nodes(classes(root))
    .filter(function(d) {
      return !d.children;
    }))
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

var data = d3.selectAll("g")[0].map(function(d) {
        return d3.select(d).data()[0]
      })
        

node.append("title")
  .text(function(d) {
    return d.className + ": " + format(d.value);
  });



node.append("rect")
	.attr("width", function(d) {
	return d.r *4;
        })
  .attr("x", function(d) {
          return d.r * -1;
        })
  .attr("y", function(d) {
          return d.r * -1;
        })
  .attr("height", function(d) {
          return d.r *2;
        })
		.attr("rx", function(d) {
          return 15;
        })
        .attr("ry", function(d) {
          return 15;
        })
   .style("fill", function(d) {
          return color(d.packageName);
        });

node.append("text")
  .attr("dy", ".2em")
  .style("text-anchor", "right")
  .text(function(d) {
    return d.className.substring(0, d.r );
  });
//});

// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
  var classes = [];

  function recurse(name, node) {
    if (node.children) node.children.forEach(function(child) {
      recurse(node.name, child);
    });
 ...