VisDock in Labeled Force Layout

The VisDock toolkit has been integrated into the Labeled Force Layout example built with D3.js (found here) by Mike Bostock. Using selection and other tools, users can query rectangular elements that enclose icons in force directed layout, and explore the plot closely using Pan & Zoom tools. For more information about VisDock, cick on the link.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
  stroke: #ccc;
}

.node text {
  pointer-events: none;
  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 width = 960,
    height = 500

VisDock.init('body', {width: 1100, height: 700});
AnnotatedByData.layerTypes = ["rect"];
var viewport = VisDock.getViewport();

var svg = viewport;

var force = d3.layout.force()
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

d3.json("graph.json", function(error, json) {
  VisDock.startChrome();	
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link");

var node = svg.selectAll(".node")
      .data(json.nodes)
    .enter().append("g")
      .attr("class", "node")
      .call(force.drag);

node.append("rect")
      .attr("class", "enclosure")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16)
      .attr("style", "fill: white; opacity: 0.5")

node.append("image")
      .attr("xlink:href", "https://github.com/favicon.ico")
      .attr("x", -8)
      .attr("y", -8)
      .attr("width", 16)
      .attr("height", 16);

node.append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.name });

force.on("tick", function() {
    VisDock.startChrome();
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    VisDock.updateLayers();
    AnnotatedByData.update();
    VisDock.finishChrome();
  });
  VisDock.finishChrome();
});

VisDock.eventHandler = {
		getHitsPolygon : function(points, inclusive) {
			var shapebound = new createPolygon(points);
			return shapebound.intersectPolygon(d3.selectAll(".enclosure")[0], inclusive)
		},
		getHitsLine : function(points, inclusive) {
			var shapebound = new createLine(points);
			return shapebound.intersectPolygon(d3.selectAll(".enclosure")[0], inclusive)
		},
		getHitsEllipse : function(points, inclusive) {
			var shapebound = new createEllipse(points);
			return shapebound.intersectPolygon(d3.selectAll(".enclosure")[0], inclusive)
		},
		setColor : function(hits) {
			for (var i = 0; i < hits.length; i++) {
				VisDock.utils.addPolygonLayer(hits[i], "fill: " + VisDock.color[num - 1] + "; opacity: 0.5", num - 1)
			}
		},
		changeColor : function(color, query, index) {
			for (var i = 0; i < query.length; i++) {
				var vis = query[i][0][0].getAttributeNS(null, "style").split(";")[1] 
				 "; "+ query[i][0][0].getAttributeNS(null, "style").split(";")[2]
				query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; " + vis)
			}
		},
		changeVisibility : function(vis, query, index) {
			
			for (var i = 0; i < query.length; i++) {
				var style = query[i][0][0].getAttributeNS(null, "style").split("opacity")[0]
				query[i][0][0].setAttributeNS(null, "style", style + "; opacity: " + vis)
			}
		},
		removeColor : function(hits, index) {
			for (var i = 0; i < hits.length; i++) {
				hits[i].remove();
			}
		},
		QueryClick : function(query, index) {

}
	}
BirdView.init(viewport, 1100, 700)
d3.select(self.frameElement).style("width", "1100px");
d3.select(self.frameElement).style("height", "700px");
</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