VisDock Delaunay Triangulation

The VisDock toolkit has been integrated into the Delaunay Triangulation example built with D3.js (found here) by M. Bostock. Using selection tools, multiple points (circles) may be queried. The queried objects can be re-located with mouse-click and drag-and-drop when the pointer option is selected.

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

path {
  fill: yellow;
  stroke: #000;
}

circle {
  fill: #fff;
  stroke: #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 type="text/javascript" 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: 1200, height: 700});
var viewport = VisDock.getViewport();
var circle_query = [];
var mouse_click = [];
var mouse_loc = [];
var vertices = d3.range(100).map(function(d) {
  return [Math.random() * width, Math.random() * height];
});

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];
}

var svg = viewport
var path = svg.append("g").selectAll("path");

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

redraw();

VisDock.eventHandler = {
	getHitsPolygon : function(points, inclusive) {
		var shapebound = new createPolygon(points);
		return find(shapebound,inclusive);
	},
	getHitsLine : function(points, inclusive) {
		var shapebound = new createLine(points);
		return find(shapebound,inclusive);
	},
	getHitsEllipse : function(points, inclusive) {
		var shapebound = new createEllipse(points);
		return find(shapebound,inclusive);
	},
	setColor : function(hits) {
		for (var i = 0; i < hits.length; i++) {
			VisDock.utils.addEllipseLayer(hits[i], "fill: " + VisDock.color[num - 1] + "; opacity: 0.8", num-1);
			QueryManager.layers[num - 1][i][0][0].setAttributeNS(null, "id", "delauney" + (num - 1))
			QueryManager.layers[num - 1][i][0][0].setAttributeNS(null, "transform", hits[i].getAttributeNS(null, "transform"))
		}
		mouse_click[num - 1] = 0;
		click_event();
	},
	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();
		}
	},
	QueryClick : function(query, index) {

}
}

d3.select(self.frameElement).style("height", "730px")
d3.select(self.frameElement).style("width", "1250px")
</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