VisDock in Circle Packing

This Circle Packing example shows the hierarchical organization of datapoints with circle packing representing nodes. The VisDock toolkit has been integrated into the Circle Packing example built with D3.js (found here) by Mike Bostock. Using selection and other tools, users can query the leaf nodes while leaving higher nodes intact. For more information about VisDock, cick on the link.

<!DOCTYPE html>
<meta charset="utf-8">
<link href="visdock.css" rel="stylesheet" type="text/css"/>
<style>

.Circ {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 0.5;
}

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>

var diameter = 960,
    format = d3.format(",d");

VisDock.init("body", {width: 1000, height: 1000});
var viewport = VisDock.getViewport();
viewport.attr("class", "chart");

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

var svg = viewport;
d3.json("circle.json", function(error, root) {
  VisDock.startChrome();
  var node = svg.datum(root).selectAll(".node")
      .data(pack.nodes)
    .enter().append("g")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("title")
      .text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });

node.append("circle")
      .attr("class", "Circ")
      .attr("r", function(d) { return d.r; });

node.filter(function(d) { return !d.children; }).append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.name.substring(0, d.r / 3); });
  VisDock.finishChrome();
});

VisDock.eventHandler = {
    getHitsPolygon: function(points, inclusive){
	
		var shapebound = new createPolygon(points);
		return shapebound.intersectEllipse(d3.selectAll(".leaf").select("circle")[0], inclusive)

},
    getHitsEllipse: function(points, inclusive){

var shapebound = new createEllipse(points);
		return shapebound.intersectEllipse(d3.selectAll(".leaf").select("circle")[0], inclusive)

},
    getHitsLine: function(points, inclusive){

var shapebound = new createLine(points);
		return shapebound.intersectEllipse(d3.selectAll(".leaf").select("circle")[0], inclusive)

},
    setColor: function(hits){
		QueryManager.layers[num - 1] = [];
		for (var i=0;i<hits.length;i++){
			var str = d3.select(hits[i].parentNode).selectAll("text")[0][0].innerHTML;
			var r = hits[i].getAttributeNS(null, "r")
			d3.select(hits[i].parentNode).selectAll("text").remove();
			QueryManager.layers[num - 1][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){
		for (var i=0;i<query.length;i++){
		    var visibility = query[i].attr("style").split("opacity:")[1].split(";")[0]
		    query[i].attr("style","opacity:" + visibility + ";fill: " +color)
		}
    },
    changeVisibility: function(vis, query, index){
		for (var i=0;i<query.length;i++){
		    var color = query[i].attr("style").split("fill: ")[1].split(";")[0];
		    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("height", "1000px");
d3.select(self.frameElement).style("width", "1000px");
</script>

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

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js to a secure url

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

https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js