D3 Examples - Bubble Chart

Bubble Chart

The Bubble Chart organizes hierarchical data into groups of circles. Each circle represents a datapoint with size, color and text. Users may query datapoints using various selection tools. Once datapoints are selected and new SVG layers are created, the text of the datapoint is brought to front so that the newly created layers do not block the view. The VisDock toolkit has been integrated into the Bundle Chart example built with D3.js (found here) by M. Bostock.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
text {
  font: 10px sans-serif;
}
​
</style>
<body>
<link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/2d.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/intersectionutilities.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.utils.js"></script>
<script>
​
​
VisDock.init("body", {width: 1000, height: 1000});
var viewport = VisDock.getViewport();
​
var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20c();
​
var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);
​
var svg = viewport;
​
d3.json("flare.json", function(error, root) {
  VisDock.startChrome();
  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 + ")"; });
​
  node.append("title")
      .text(function(d) { return d.className + ": " + format(d.value); });
​
  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return color(d.packageName); });
​
  node.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.className.substring(0, d.r / 3); });
  VisDock.finishChrome();
});
​
// 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); });
    else classes.push({packageName: name, className: node.name, value: node.size});
  }
​
  recurse(null, root);
  return {children: classes};
}
​
VisDock.eventHandler = {
    getHitsPolygon: function(points, inclusive){
        var shapebound = new createPolygon(points);
        return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)
    },
    getHitsEllipse: function(points, inclusive){
        var shapebound = new createEllipse(points);
        return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)
    },
    getHitsLine: function(points, inclusive){
        var shapebound = new createLine(points);
        return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)
    },
    setColor: function(hits){
        QueryManager.layers[num] = [];
        for (var i=0;i<hits.length;i++){
            var str = d3.select(hits[i].parentNode).selectAll("text")[0][0].innerHTML;
            d3.select(hits[i].parentNode).selectAll("text").remove();
            var r = hits[i].getAttributeNS(null, "r")
            QueryManager.layers[num][i] = d3.select(hits[i].parentNode).append("circle")
                .attr("r", r).attr("style", "fill: " + VisDock.color[num - 1] + "; opacity: 1; pointer-events: none")
            d3.select(hits[i].parentNode).append("text")
                    .attr("dy", ".3em")
                    .style("text-anchor", "middle")
                    .text(str)
        }
    },
    changeColor: function(color, query, index){
    var visibility = VisDock.utils.getQueryVisibility(index);   
        for (var i=0;i<query.length;i++){
            query[i].attr("style","opacity:" + visibility + ";fill: " +color)
        }
    },
    changeVisibility: function(vis, query, index){
        var color = VisDock.utils.getQueryColor(index);
        for (var i=0;i<query.length;i++){
            query[i].attr("style","opacity:" + vis + ";fill: " +color)
        }
    },
    removeColor: function(hits, index){
        for (var i=0;i<hits.length;i++){
            hits[i].remove();
        }
    }
}
BirdView.init(viewport, 1000, 1000)
d3.select(self.frameElement).style("width", "1000px")
d3.select(self.frameElement).style("height", "1000px")
</script>
    