Test force directed

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

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

</style>
<body>
</body>
<link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>

VisDock.init('body', {width: 1000, height: 800});
AnnotatedByData.layerTypes = ["circle"];

var viewport = VisDock.getViewport();

var width = 960,
    height = 500;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30)
    .size([width, height]);

/*var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);*/
var svg = viewport;

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

var link = svg.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

node.append("title")
      .text(function(d) { return d.name; });

force.on("tick", function() {
  	//VisDock.updateLayers();
  	for (var i = 0; i < num; i++){
  		findConvex(QueryManager.layers[i], VisDock.color[i], i);
  	}

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("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });
});

VisDock.eventHandler = {
		getHitsPolygon : function(points, inclusive) {
			var shapebound = new createPolygon(points);
			return shapebound.intersectEllipse(d3.selectAll(".node")[0], inclusive)
		},
		getHitsEllipse : function(points, inclusive) {
			var shapebound = new createEllipse(points);
			return shapebound.intersectEllipse(d3.selectAll(".node")[0], inclusive)						
		},
		getHitsLine : function(points, inclusive) {
			var shapebound = new createLine(points);
			return shapebound.intersectEllipse(d3.selectAll(".node")[0], inclusive)
		},
		setColor : function(hits) {
			//var circleObjects = d3.selectAll("circle")[0];
			QueryManager.layers[num - 1] = hits;
			//for (var i = 0; i < hits.length; i++) {
			//	VisDock.utils.addEllipseLayer(hits[i], null, num - 1);
			//}
			findConvex(hits, VisDock.color[num-1], num-1);
		},
		changeColor : function(color, query, index) {
		},
		changeVisibility : function(vis, query, index) {
		},
		removeColor : function(hits, index) {
			for (var i = 0; i < hits.length; i++) {
				hits[i].remove();
			}
		},
	}

function findConvex(hits, color, id){
			var theta0 = 0;
			var done = 0;
			var index = -1;
			var xprev;
			var yprev;
			var connect = [];
			var count = 0;
			var cas = 0;
			while (done == 0 && count < 1000){
				count++;
				if (index == -1){
					var x = 1000000;
					for (var j = 0; j < hits.length; j++){
						if (parseFloat(hits[j].getAttribute("cx")) < x){
							x = parseFloat(hits[j].getAttribute("cx"));
							index = j;
						}
					}
					connect.push(index);
					xprev = parseFloat(hits[index].getAttribute("cx"));
					yprev = 1*parseFloat(hits[index].getAttribute("cy"));
					theta0 = Math.atan((yprev/xprev));

} else if (connect.length == 1){
					var theta;
					var theta_min = 100000000;
					var dx, dy;
					for (var j = 0; j < hits.length; j++){
						if (j != connect[0]){
							dy = 1*(parseFloat(hits[j].getAttribute("cy")) - yprev);
							dx = (parseFloat(hits[j].getAttribute("cx")) - xprev);
							theta = Math.atan((dy/dx));
							
							if ((theta) < (theta_min)){
								theta_min = theta;
								index = j;
								var dx2 = dx;
								var dy2 = dy;
							}
							
						}						
					}
					if (dx2 <= 0 && dy2 >= 0){
						cas = 1;							
					} else if (dx2 <= 0 && dy2 <= 0){
						cas = 2;
					} else if (dx2 >= 0 && dy2 <= 0){
						cas = 3;
					} else if (dx2 >= 0 && dy2 >= 0){
						cas = 4;
					}		
					theta_n = Math.abs(Math.atan(dy2/dx2));			
					xprev = parseFloat(hits[index].getAttribute("cx"));
					yprev = 1*parseFloat(hits[index].getAttribute("cy"));					
					connect.push(index);					
				} else if (connect.length > 1){
					var n = connect.length - 1;
					var theta;
					//var theta_n = 0;
					var theta_min = 100000000;
					var dx, dy;
					for (var j = 0; j < hits.length; j++){
						if (j == connect[0] || connect.indexOf(j) == -1){
							if (j != connect[connect.length-2]){
								if (j != connect[n]){
									dy = 1*(parseFloat(hits[j].getAttribute("cy")) - yprev);
									dx = (parseFloat(hits[j].getAttribute("cx")) - xprev);
									theta = Math.atan((dy/dx));
									//theta += Math.PI + theta0;
									if (dx <= 0 && dy >= 0){ // case 1
										if (cas == 1){
											theta = Math.PI + theta_n - Math.abs(theta);
										} else if (cas == 2){
											theta = Math.PI + theta_n + Math.abs(theta);
										} else if (cas == 3){
											if (Math.abs(theta) > theta_n){
												theta = theta_n - Math.abs(theta) + 2*Math.PI; 
											} else{
												theta = -1*theta_n + Math.abs(theta) + 2*Math.PI; 
											}
											
										} else if (cas == 4){
											theta = 2*Math.PI - theta_n - Math.abs(theta); 
										}
									} else if (dx <= 0 && dy <= 0){ // case 2
										if (cas == 1){
											theta = Math.PI + theta_n + Math.abs(theta);
										} else if (cas == 2){
											theta = Math.PI - theta_n + Math.abs(theta);
										} else if (cas == 3){
											theta = 2 * Math.PI - Math.abs(theta) - theta_n; 
										} else if (cas == 4){
											if (Math.abs(theta) > theta_n){
												theta = 2*Math.PI + theta_n - Math.abs(theta); 
											} else {
												theta = 2*Math.PI - theta_n + Math.abs(theta); 
											}
											
										}
									} else if (dx >= 0 && dy <= 0){ // case 3
										if (cas == 1){
											if (Math.abs(theta) > theta_n){
												theta = 2*Math.PI + theta_n - Math.abs(theta);
											} else {
												theta = 2*Math.PI - theta_n + Math.abs(theta);
											}
											
										} else if (cas == 2){
											theta = 2*Math.PI - theta_n - Math.abs(theta);
										} else if (cas == 3){
											theta = Math.PI + theta_n - Math.abs(theta); 
										} else if (cas == 4){
											theta = Math.PI + theta_n + Math.abs(theta); 
										}
									} else if (dx >= 0 && dy >= 0){ // case 4
										if (cas == 1){
											theta = 2*Math.PI - theta_n - Math.abs(theta);
										} else if (cas == 2){
											if (Math.abs(theta) > theta_n){
												theta = 2*Math.PI + theta_n - Math.abs(theta);
											} else {
												theta = 2*Math.PI - theta_n + Math.abs(theta);
											}
											
										} else if (cas == 3){
											theta = Math.abs(theta) + theta_n + Math.PI; 
										} else if (cas == 4){
											theta = Math.PI - theta_n + Math.abs(theta); 
										}
									}
																
									if ((theta) < (theta_min)){
										theta_min = theta;
										index = j;
										var dx2 = dx;
										var dy2 = dy;
									}
								}
							}							
						}
						
					}
					if (connect.indexOf(index) == -1 || index == connect[0]){
						if (connect.length != 2 || connect.indexOf(index) == -1){
							connect.push(index);
							xprev = parseFloat(hits[index].getAttribute("cx"));
							yprev = parseFloat(hits[index].getAttribute("cy"));
							theta0 = theta_min;
							theta_min = 10000000;
							theta_n = Math.abs(Math.atan(Math.abs(dy2/dx2)));
							if (dx2 <= 0 && dy2 >= 0){
								cas = 1;							
							} else if (dx2 <= 0 && dy2 <= 0){
								cas = 2;
							} else if (dx2 >= 0 && dy2 <= 0){
								cas = 3;
							} else if (dx2 >= 0 && dy2 >= 0){
								cas = 4;
							}						
						}
					}

if (index == connect[0] && connect.length != 2){
						done = 1;
					}
				}
			}
			var points = "";
			for (var i = 0; i < connect.length; i++){
				var cx = parseFloat(hits[connect[i]].getAttribute("cx"));
				var cy = parseFloat(hits[connect[i]].getAttribute("cy"));
				points = points + cx + "," + cy + " ";
			}
			if (d3.select("#v" + id)[0][0] == null){
				svg.append("polygon")
					.attr("id", "v" + id)
					.attr("points", points)
					.attr("stroke-width", 2)
					.attr("fill", color)
					.attr("pointer-events", "none")
					.attr("opacity", "0.2");
			} else {
				d3.select("#v" + id)
					.attr("points", points)
			}
				
			var check;
		}
		d3.select(self.frameElement).style("height", "800px");
		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