VisDock in Zoomable Icicle

The Zoomable Icicle example is a visualization of hierarchical data structures with rectangular SVG objects representing the nodes. From the top to bottom, the hierarchy of the data goes from high to low. The VisDock toolkit has been integrated into the Zoomable Icicle example built with D3.js (found here) by Mike Bostock. Using selection and other tools, users can query rectangular elements, zoom in on particular nodes and explore. For more information about VisDock, cick on the link.

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

rect {
  stroke: #fff;
}

.icicle {
	
}

</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: 960, height: 700});
var viewport = VisDock.getViewport();

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([0, height]);

var color = d3.scale.category20c();

var partition = d3.layout.partition()
    .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
    .value(function(d) { return d.value; });

var svg = viewport;

var rect;
var nodes;
d3.json("readme.json", function(error, root) {
  VisDock.startChrome();
  rect = svg.selectAll("g")
      .data(partition(d3.entries(root)[0])).enter().append("g").attr("class", "icicle");
  var id = 0;      
  nodes = rect
    .append("rect")
      .attr("class", "node")
      .attr("id", function(){
      	return "s" + id++;
      })
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.dx); })
      .attr("height", function(d) { return y(d.dy); })
      .attr("fill", function(d) { return color((d.children ? d : d.parent).key); })
      .on("click", clicked); 
  VisDock.finishChrome(); 
});

function clicked(d) {
  VisDock.startChrome();
  x.domain([d.x, d.x + d.dx]);
  y.domain([d.y, 1]).range([d.y ? 20 : 0, height]);

nodes.transition()
      .duration(750)
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return y(d.y); })
      .attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
      .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
  VisDock.finishChrome();
}

d3.timer(function(){
	VisDock.startChrome();
	var N = d3.selectAll(".newLayer")[0];
	for (var i = 0; i < N.length; i++){
		var id = parseInt(N[i].getAttributeNS(null, "id").split("_s")[1])
		var x = d3.selectAll(".node")[0][id].getAttributeNS(null, "x");
		var y = d3.selectAll(".node")[0][id].getAttributeNS(null, "y");
		var width = d3.selectAll(".node")[0][id].getAttributeNS(null, "width");
		var height = d3.selectAll(".node")[0][id].getAttributeNS(null, "height");
		N[i].setAttributeNS(null, "x", x)
		N[i].setAttributeNS(null, "y", y)
		N[i].setAttributeNS(null, "width", width)
		N[i].setAttributeNS(null, "height", height)
	}
	VisDock.finishChrome();
})

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

},
    getHitsEllipse: function(points, inclusive){
		var shapebound = new createEllipse(points);
		return shapebound.intersectPolygon(d3.selectAll(".node")[0], inclusive)

},
    getHitsLine: function(points, inclusive){
		var shapebound = new createLine(points);
		return shapebound.intersectPolygon(d3.selectAll(".node")[0], inclusive)

},
    setColor: function(hits){
		QueryManager.layers[num - 1] = [];
		for (var i=0;i<hits.length;i++){
			QueryManager.layers[num - 1][i] = d3.select(hits[i].parentNode).append("rect").attr("class", "newLayer")
				.attr("x", hits[i].getAttributeNS(null, "x")).attr("y", hits[i].getAttributeNS(null, "y"))
				.attr("width", hits[i].getAttributeNS(null, "width")).attr("height", hits[i].getAttributeNS(null, "height"))
				.attr("style", "fill: " + VisDock.color[num - 1] + "; opacity: 1; pointer-events: none")
				.attr("id", "_" + hits[i].getAttributeNS(null, "id"))
		}
    },
    changeColor: function(color, query, index){
		for (var i=0;i<query.length;i++){
		    var vis = query[i][0][0].getAttributeNS(null, "style").split("opacity: ")[1].split(";")[0]
		    query[i].attr("style","opacity:" + vis + ";fill: " +color)
		}
    },
    changeVisibility: function(vis, query, index){
		for (var i=0;i<query.length;i++){
		    var color = query[i][0][0].getAttributeNS(null, "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, 960, 700)
d3.select(self.frameElement).style("width", "960px");
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