VisDock in Voronoi Tessellation

The VisDock toolkit has been integrated into the Voronoi Tessellation example built with D3.js (found here) by Mike Bostock. Using selection and other tools, users can query path elements, move the queried elements by mouse drag and drop and update the tesselation. For more information about VisDock, cick on the link.

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

path {
  stroke: #fff;
}

path:first-child {
  /*fill: yellow !important;*/
}

circle {
  fill: #000;
  pointer-events: none;
}

.q0-9 { fill: rgb(197,27,125); }
.q1-9 { fill: rgb(222,119,174); }
.q2-9 { fill: rgb(241,182,218); }
.q3-9 { fill: rgb(253,224,239); }
.q4-9 { fill: rgb(247,247,247); }
.q5-9 { fill: rgb(230,245,208); }
.q6-9 { fill: rgb(184,225,134); }
.q7-9 { fill: rgb(127,188,65); }
.q8-9 { fill: rgb(77,146,33); }

</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>

var width = 960,
    height = 500;
    
VisDock.init("body", {width: 1200, height: 800});
var viewport = VisDock.getViewport();
var svg = viewport;

var vertices = d3.range(100).map(function(d) {
  return [Math.random() * width, Math.random() * height];
});

var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]);

var mouse_click = [];
var mouse_loc = [];
var circle_query = [];
var mouse = [];

var path = svg.append("g").selectAll("path");
var circ = svg.append("g").selectAll("circle");
circ = circ.data(vertices.slice(0))
circ.enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 1.5);

redraw();
var vertices_original = [];
for (i=0;i<vertices.length;i++){
	vertices_original[i] = [];
	vertices_original[i][0] = vertices[i][0];
	vertices_original[i][1] = vertices[i][1];
}

function redraw() {
  VisDock.startChrome();
  path = path
      .data(voronoi(vertices), polygon);

d3.selectAll("circle").remove();
  circ.exit().remove();

path.exit().remove();

circ.enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 1.5);

path.enter().append("path")
      .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
      .attr("d", polygon)
      .on("click", function(){alert("CDSKJL")});

path.order();
  for (i=0;i<circle_query.length;i++){
  	for (k=0;k<circle_query[i].length;k++){
		var n = circle_query[i][k];
		var str_d = path[0][n].getAttributeNS(null,"d") 							
		QueryManager.layers[i][k][0][0].setAttributeNS(null,"d", str_d)
  	}
  }  
  VisDock.finishChrome();
}

function polygon(d) {
  return "M" + d.join("L") + "Z";
}

VisDock.eventHandler = {
	getHitsPolygon : function(points, inclusive) {
		var hits = [];
		circle_query[num] = [];
		
		var shapebound = new createPolygon(points);
		for (i=0;i<path[0].length;i++){
			var captured = shapebound.intersectPath([path[0][i]], inclusive)
			if (captured.length == 1){
				hits.push(captured[0])
				circle_query[num].push(i);
			}
		}
		return hits;
		},
	getHitsLine : function(points, inclusive) {
		var shapebound = new createLine(points);
		return shapebound.intersectPath(d3.selectAll("Path")[0], inclusive)
		},
	getHitsEllipse : function(points, inclusive) {
		var shapebound = new createEllipse(points);
		return shapebound.intersectPath(d3.selectAll("Path")[0], inclusive)
	},
	setColor : function(hits) {
		for (var i = 0; i < hits.length; i++) {
			VisDock.utils.addPathLayer(hits[i], "fill: " + VisDock.color[num - 1] + "; opacity: 0.8");
			QueryManager.layers[num - 1][i][0][0].setAttributeNS(null, "id", "voronoi" + (num - 1))
		}
		mouse_click[num - 1] = 0;
		d3.selectAll("#voronoi" + (num-1)).on("mousedown", function(){
			var str = this.getAttributeNS(null,"id").split("voronoi")[1];
			mouse_click[parseInt(str)] = 1;
			if (mouse_loc[parseInt(str)] == undefined) mouse_loc[parseInt(str)] = d3.mouse(d3.selectAll("svg")[0][0]);
			})
			.on("mousemove", function(){
				var str = this.getAttributeNS(null,"id").split("voronoi")[1];
				if (mouse_click[parseInt(str)] == 1){
					var displace_x = d3.mouse(d3.selectAll("svg")[0][0])[0] - mouse_loc[parseInt(str)][0];
					var displace_y = d3.mouse(d3.selectAll("svg")[0][0])[1] - mouse_loc[parseInt(str)][1];
				
					for (k=0;k<circle_query[parseInt(str)].length;k++){
						var displace_x2 = d3.mouse(d3.selectAll("svg")[0][0])[0] - vertices[k][0];
						var displace_y2 = d3.mouse(d3.selectAll("svg")[0][0])[1] - vertices[k][1];							
						var n = circle_query[parseInt(str)][k];
						vertices[n][0] = vertices_original[n][0] + displace_x;
						vertices[n][1] = vertices_original[n][1] + displace_y;
					}
					redraw();
				}
			})
			.on("mouseup", function(){
				var str = this.getAttributeNS(null,"id").split("voronoi")[1];
				mouse_click[parseInt(str)] = 0;
			})
		
		circ.data(vertices.slice(0))
		circ.remove()
		
		circ.enter().append("circle")
   			.attr("transform", function(d) { return "translate(" + d + ")"; })
   			.attr("r", 1.5);
		},
	changeColor : function(color, query, index) {
		var vis = VisDock.utils.getQueryVisibility(index);
		for (var i = 0; i < query.length; i++) {
			query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis)
		}
	},
	changeVisibility : function(vis, query, index) {
		var color = VisDock.utils.getQueryColor(index);
		for (var i = 0; i < query.length; i++) {
			query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis)
		}
	},
	removeColor : function(hits, index) {
		for (var i = 0; i < hits.length; i++) {
			hits[i].remove();
		}
	}
}
BirdView.init(viewport, 1200, 800)
d3.select(self.frameElement).style("width", "1200px");
d3.select(self.frameElement).style("height", "800px");
</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