biiTree.js

/* THE TREE REPRESENTATION */
function biiTree(data, element) {
	THAT = this;
	var root = graphProcess(data);
	var margin = {top: 20, right: 120, bottom: 20, left: 120},
		width = 960 - margin.right - margin.left,
		height = 600 - margin.top - margin.bottom,
		diameter = 300;

	var node_index = 0,
		dep_index = 0,
		DURATION = 500,
	    duration = DURATION,
	    spacing = 100;
	var indent = false;

	var treeLayout = {
		"lineal": {
			tree: d3.layout.tree().size([height, width]),
			diagonal: d3.svg.diagonal()
				.projection(function(d) { return [d.y, d.x];}),
	    	transform: function(d) {d.position = [d.y, d.x]; return d3Translate(d.position);},
	    	transform0: function(d) {d.position0 = [d.y0, d.x0]; return d3Translate(d.position0);},
	    	inverse: function(pos) { return [pos[1], pos[0]]; }
		},
		"radial": {
			tree: d3.layout.tree().size([360, diameter / 2 - 120])
	    		.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }),
		    diagonal: d3.svg.diagonal.radial()
 				.projection(function(d) { return [d.y, d.x / 180 * Math.PI];}),
	    	transform: function(d) {
	    		var angle = (Math.PI/180)*(d.x-90);
	    		d.position = [Math.cos(angle)*d.y, Math.sin(angle)*d.y];
	    		console.log(d3Rotate(d.x-90) + d3Translate(d.y))
	    		return d3Rotate(d.x-90) + d3Translate(d.y);
	    	},
	    	transform0: function(d) {
	    		var angle = (Math.PI/180)*(d.x0-90);
	    		d.position0 = [Math.cos(angle)*d.y0, Math.sin(angle)*d.y0];
	    		console.log(d3Rotate(d.x0-90) + d3Translate(d.y0))
	    		return d3Rotate(d.x0-90) + d3Translate(d.y0);
	    	},
	    	inverse: function(pos) { return [180-(180/Math.PI)*Math.atan2(pos[0], pos[1]), Math.sqrt(pos[1]*pos[1]+pos[0]*pos[0])]; }
		}
	};

	/* IMPORTANT VARIABLES FOR TREE TREPRESENTATION: */
	var LAYOUT = treeLayout["lineal"];	// initial layout
	/* Layout-specific functions */
	THAT.setLayout = function(layout) {
		LAYOUT = treeLayout[layout];
		update();
	};
	
	var zm = d3.behavior.zoom()
	    		.scaleExtent([.2,2])
	    		.on("zoom", function() {
	    			var vector = d3.event.translate;
	    			vector[0]+=margin.right;
	    			vector[1]+=margin.top;
	    			svg.attr("transform", d3Translate(vector) + d3Scale(d3.event.scale));
	    		});
	var svg = d3.select(element)
				.style("width", width+margin.left+margin.right+"px")
	    		.style("height", height+margin.top+margin.bottom+"px")
			.append("svg")
		    	.attr("width", width + margin.right + margin.left)
		    	.attr("height", height + margin.top + margin.bottom)
		    	.on("dblclick", function() {
		    		zm.translate([0,0]);
		    		zm.scale(1);
		    		zm.event(svg);
		    	})		    	
		    	.call(zm)
		    	.on("dblclick.zoom", null)
		  	.append("g")
		    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	var show = {
		i: .3,
		e: .3,
		s: .3,
		u: .3,
		v: .3
	}
	root.x0 = height / 2;
	root.y0 = 0;
	root.children.forEach(collapse);
	var nodes, links, deps;
	update(root);

	THAT.doIndent = function(do_indent) {
		indent = do_indent;
		update(root);
	};
	THAT.showDepType = function(type, show_type) {
		show[type] = show_type ? .3 : 0;
		update(root);
	};

	THAT.expand = function() {

	};
	THAT.collapse = function() {

	};
	
	/* main graph update function */
	function update(source) {
		// Projected position of source node:
		function updateNodes() {
			function typeCell(t) {
				return  (t=="cpp")||(t=="python")||(t=="js")||(t=="java")||(t=="fortran")||
						(t=="text")||(t=="image")||(t=="sound")||(t=="html")||(t=="xml")||
						(t=="sys")||(t=="unknown");
			}
			function typeFolder(t) { return t=="folder"; }
			function typeBlock(t) { return t=="block"; }
			function typeContainer(t) { return !typeCell(t) && !typeFolder(t) && !typeBlock(t); }
			var node = svg.selectAll("g.node")
			  	.data(nodes, function(d) { return d.id || (d.id = ++node_index); });
			// Enter any new nodes at the parent's previous position.
			var nodeEnter = node.enter().append("g")
				.attr("class", function(d) { return "node " + d.type; })
				.attr("transform", function(d) { return LAYOUT.transform0(source); })
				.call(d3.behavior.drag()
					.on("dragstart", function(d) {
						d3.event.sourceEvent.stopPropagation();
						d3.event.sourceEvent.preventDefault();
						duration = 0;
					})
					.on("drag", function(d) {
						d3.event.sourceEvent.stopPropagation();
						d3.event.sourceEvent.preventDefault();
						var mousePos = LAYOUT.inverse(d3.mouse(svg.node())) ;	// current mouse position
						if (d3.event.sourceEvent.shiftKey) {
							deltaX = mousePos[0]-d.x;
							deltaY = mousePos[1]-d.y;
							(function propagateDrag(aNode) {
								aNode.x+=deltaX; aNode.y+=deltaY;
								if (aNode.children) aNode.children.forEach(propagateDrag);
							})(d);
						} else {
							d.x = mousePos[0];
							d.y = mousePos[1];
						}
						console.log(d);
						console.log(d.x, d.y);
						updateSVG();
						stagPositions();
					})
					.on("dragend", function(d) {
						d3.event.sourceEvent.stopPropagation();
						d3.event.sourceEvent.preventDefault();
						duration = DURATION;
					})
				);

			nodeEnter.on("click", click);
			// Node name:
			nodeEnter.append("text")
				.attr("x", function(d) {
					var dist = d.size+5;
					return d.children || d._children ? -dist : dist; })
				.attr("dy", ".35em")
				.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
				.text(function(d) { return d.name; })
				.style("fill-opacity", 1e-6);

			var nodeCellEnter = nodeEnter.filter(function (d) { return typeCell(d.type); });
			var nodeFolderEnter = nodeEnter.filter(function (d) { return typeFolder(d.type); });
			var nodeBlockEnter = nodeEnter.filter(function (d) { return typeBlock(d.type); });
			var nodeContainerEnter = nodeEnter.filter(function (d) {return typeContainer(d.type); });
			// CELLS
			nodeCellEnter.append("polygon")
				.attr("class", "meta")
				.attr("points", function(d) {return d3PolyPath(d.size, 6);})
				.attr("stroke", function(d) {return d.block.color})
			nodeCellEnter.append("polygon")
				.attr("class", "content")
				.attr("points", function(d) {return d3PolyPath(d.size-3, 6);})
				.attr("fill", function(d) {return d.color})
			// FOLDERS
			nodeFolderEnter.append("path")
				.attr("d", function(d) {return d3FolderPath(d.size);})
				.attr("fill", function(d) {return d._children ? d.block.colorDark : d.block.color;})
				.attr("stroke", function(d) {return "#fff";});
			// BLOCKS
			nodeBlockEnter.append("polygon")
				.attr("points", function(d) {return d3PolyPath(d.size, 4);})
				.attr("fill", function(d) {return d._children ? d.colorDark : d.color;})
				.attr("stroke", function(d) {return d.colorDark;});
			// CONTAINERS:
			nodeContainerEnter.append("circle")
				.attr("r", 1e-6)
				.style("fill", function(d) { return d._children ? d.color : "#fff"; })
				.attr("stroke", function(d) {return d.colorDark;});
			
			// Transition nodes to their new position.
			var nodeUpdate = node.transition()
				.duration(duration)
				.attr("transform", LAYOUT.transform);
			nodeUpdate.select("text")
				.style("fill-opacity", 1);

			var nodeFolderUpdate = nodeUpdate.filter(function (d) { return typeFolder(d.type); })
				.select("path")
				.attr("fill", function(d) {return d._children ? d.block.colorDark : d.block.color;})
			var nodeBlockUpdate = nodeUpdate.filter(function (d) { return typeBlock(d.type); })
				.select("polygon")
				.attr("fill", function(d) {return d._children ? d.colorDark : d.color;});
			var nodeContainerUpdate = nodeUpdate.filter(function (d) {return typeContainer(d.type); });
			nodeContainerUpdate.select("circle")
				.attr("r", function(d){return d.size})
				.style("fill", function(d) { return d._children ? d.color : d.colorBright; });
			
			// Transition exiting nodes to the parent's new position.
			var nodeExit = node.exit().transition()
				.duration(duration)
				.attr("transform", function(d) { return LAYOUT.transform(source); })
				.remove();
			nodeExit.select("circle")
				.attr("r", 1e-6);
			nodeExit.select("text")
				.style("fill-opacity", 1e-6);
			// NOW THE EVENTS:
			node
				.on("mouseover", function(d,i) {
					if ((!d.parent)||(!d.parent.children)) return;		// cells being collapsed (animated) must not trigger this function
					if (!typeCell(d.type)) return;
					svg.selectAll("path.dep")
						.filter(function(dep) {
							return dep.source==d || dep.target==d;
						})
						.style("opacity", .85);
					svg.selectAll("path.link")
						.attr("opacity", .2);
					svg.selectAll(".node")
						.attr("opacity", .2);
					svg.selectAll(".node")
						.filter(function(node) {
							if (node==d) return true;
							for (var i=0; i<d.depArray.length; i++){
								if (node==d.depArray[i].target) return true;
							}
							if (!node.children)
								for (var i=0; i<node.depArray.length; i++){
									if (d==node.depArray[i].target) return true;
								}
							return false;
						})
						.attr("opacity", 1)
						.transition()
						.duration(100)
						.attr('transform', function(d) {
							return LAYOUT.transform(d) + d3Matrix([1.5,0,0,1.5,0,0]);
						});
					})
				.on("mouseout", function(d,i) {
					if ((!d.parent)||(!d.parent.children)) return;		// cells being collapsed (animated) must not trigger this function
					if (!typeCell(d.type)) return;
					svg.selectAll("path.dep").style("opacity", .3);
					svg.selectAll("path.link")
						.attr("opacity", 1);
					svg.selectAll(".node")
						.attr("opacity", 1);
					svg.selectAll(".node")
						.filter(function(node) {
							if (node==d) return true;
							for (var i=0; i<d.depArray.length; i++){
								if (node==d.depArray[i].target) return true;
							}
							if (!node.children)
								for (var i=0; i<node.depArray.length; i++){
									if (d==node.depArray[i].target) return true;
								}
							return false;
						})
						.transition()
						.duration(100)
						.attr('transform', function(d) {
							return LAYOUT.transform(d);
						});
				});
		};
		function updateTreeLinks() {
			var link = svg.selectAll("path.link")
				.data(links, function(d) { return d.target.id; });
			// Enter any new links at the parent's previous position.
			link.enter().insert("path", "g")
				.attr("class", "link")
				.attr("d", function(d) {
					var o = {x: source.x0, y: source.y0};
					return LAYOUT.diagonal({source: o, target: o});
				});
			// Transition links to their new position.
			link.transition()
				.duration(duration)
				.attr("d", LAYOUT.diagonal);
			// Transition exiting nodes to the parent's new position.
			link.exit().transition()
				.duration(duration)
				.attr("d", function(d) {
					var o = {x: source.x, y: source.y};
					return LAYOUT.diagonal({source: o, target: o});
				})
				.remove();
		};
		function updateDepLinks() {
			// Filter types to be shown
			deps = deps.filter(function(d) {return show[d.type];});
			var _dep = svg.selectAll("path.dep")
				.data(deps, function(d) { return d.id; });
			// Enter any dep links at the parent's previous position.
			_dep.enter().insert("path", "g")
				.attr("class", function(d) { return "dep " + d.type})
				.attr("d", function(d) {
					return d3DependencyPath(source.position0,source.position0);
				})
				.style("opacity", 0);
			// Transition links to their new position.
			_dep.transition()
				.duration(duration)
				.attr("d", function (d) { return d3DependencyPath(d.source.position, d.target.position); })
				.style("opacity", function(d){return show[d.type]});
			// Transition exiting nodes to the parent's new position.
			_dep.exit().transition()
				.duration(duration)
				.attr("d", function(d) {
					return d3DependencyPath(source.position,source.position);
				})
				.style("opacity", 0)
				.remove();
		};
		function updateSVG() {
			updateNodes();
			updateTreeLinks();
			updateDepLinks();
		}
		// Compute the new tree layout.
		nodes = LAYOUT.tree.nodes(root).reverse();
		links = LAYOUT.tree.links(nodes);
		// reset dependencies levels
		deps = computeDeps(nodes);
		// Normalize for fixed-depth.
		nodes.forEach(function(d, i) { d.y = (indent ? d.level : d.depth) * spacing; });
		updateSVG();
		// Stash the old positions for transition.
		function stagPositions() {
			nodes.forEach(function(d) {
				d.x0 = d.x;
				d.y0 = d.y;
				d.position0 = d.position;
			});	
		};
		stagPositions();
	};
	// Toggle children on click.
	function click(d) {
		if (d3.event.defaultPrevented) return; // click suppressed when dragging
		if (d.children) {
	    	d._children = d.children;
	    	d.children = null;
		} else {
			d.children = d._children;
			d._children = null;
		};
		update(d);
	};
	function collapse(d) {
		if (d.children) {
	  		d._children = d.children;
	  		d._children.forEach(collapse);
	  		d.children = null;
		}
	};
};

d3.helpers.js

function d3Translate(vector) {
	return " translate(" + vector + ")";
};
function d3Scale(scale) {
	return " scale(" + scale + ")";
};
function d3Rotate(rot) {
	return " rotate(" + rot + ")";
};
function d3Matrix(matrix) {
	return " matrix("+matrix.join(",")+")"
}
function d3ContainerPath(open) {
	if (open) return "M6.325,6.325c-1.733,1.733-3.834,2.6-6.3,2.6c-2.5,0-4.617-0.866-6.35-2.6c-1.733-1.733-2.6-3.851-2.6-6.351c0-2.466,0.867-4.566,2.6-6.3c1.733-1.733,3.85-2.6,6.35-2.6c2.466,0,4.567,0.867,6.3,2.6s2.6,3.833,2.6,6.3C8.925,2.475,8.059,4.592,6.325,6.325z";
	return "M8.675-3.325h-17.3c0.367-1.5,1.133-2.833,2.3-4c1.733-1.733,3.85-2.6,6.35-2.6c2.466,0,4.567,0.867,6.3,2.6C7.491-6.158,8.275-4.825,8.675-3.325z M8.675-1.075c0.093,0.357,0.159,0.724,0.2,1.1c0.033,0.343,0.05,0.692,0.05,1.05c0,2.5-0.866,4.617-2.6,6.351s-3.834,2.6-6.3,2.6c-2.5,0-4.617-0.867-6.35-2.6c-1.733-1.733-2.6-3.851-2.6-6.351c0-0.357,0.017-0.707,0.05-1.05c0.041-0.376,0.107-0.743,0.2-1.1c0.011-0.05,0.02-0.1,0.025-0.15h17.3C8.655-1.175,8.663-1.125,8.675-1.075z";
};
function d3PolyPath(r, n) {
	var points = [],
        alfa = Math.PI/n,	// initial angle
        delta = alfa*2;
    do {
    	points.push([r*Math.cos(alfa), r*Math.sin(alfa)].join(","));
    	alfa += delta;
    } while (alfa < 2*Math.PI);
    return points.join(" ");
};
function d3FolderPath(r, n) {
	var width = r,
		height = r*.8;
	var path = 	"M" + [-width,height].join(",") + 
				"L" + [-width,-height].join(",") + 
				"L" + [0,-height].join(",") + 
				"L" + [0,-height*.8].join(",") + 
				"L" + [width,-height*.8].join(",") + 
				"L" + [width,height].join(",") + 
				"Z";
	return path;
;}

function d3DependencyPath(source, target) {
	var width = 8;
	var ini1 = {x: source[0], y: source[1]+width};
		ini2 = {x: source[0], y: source[1]-width},
		end = {x: target[0], y: target[1]};
	var controlX = (end.x-ini1.x)/2;
	// nodes in the same vertical:
	if (Math.abs(controlX)<30) controlX = -100;
	var path = 	"M" + [ini1.x, ini1.y].join(",") + 
				"C" + [ini1.x+controlX, ini1.y, ini1.x+controlX, end.y, end.x, end.y].join(",") +
				"C" + [ini1.x+controlX, end.y, ini1.x+controlX, ini2.y, ini2.x, ini2.y].join(",") + 
				"Z";	// and close the path
	return path;
};

/* Generate tree data structure */
function graphProcess(data) {
	var options = { 
		hive: {r:20, c: "#c4c9d8"},
		block: {r:18},
		system: {r:18, c: "#cfcd74"},
		src: {r:18, c: "#6967a0"},
		dep: {r:18, c: "#54965d"},
		folder: {r: 12},

		sys: {r:10, c: "#cfcd74"},
		cpp: {r: 10, c: "#ffaa00"},
		text: {r: 10, c: "#ddd"},
		image: {r: 10, c: "#8af1f3"},
		sound: {r: 10, c: "#0023f3"},
		html: {r: 10, c: "#f35fd2"},
		xml: {r: 10, c: "#ca80f3"},
		python: {r: 10, c: "#78d26c"},
		js: {r: 10, c: "#38f880"},
		java: {r: 10, c: "#f37f59"},
		fortran: {r: 10, c: "#c3dff3"},
		unknown: {r: 10, c: "#666"}
	};
	function makeColor() {
		this.colorMaker = d3.scale.category20(),	// color generator for blocks
		this.colorIndex = 0;
		var THAT = this;
		this.color = function() {
			return THAT.colorMaker(THAT.colorIndex++);
		}
	};
	var color = new makeColor();
	/* Creates a default node */
	function createNode(name, type, parent) {
		var node = {
			"name": name, 		// Node name
			"type": type, 		// node type (hive, src, dep, sys, block, folder, cpp...)
			"parent": parent,
			"children": {}, 
			"mains": 0, 
			"virtuals": 0, 
			"unresolved": 0, 
			"ncells": {"total": 0},
			"depArray": []
		};
		if (type == "block") node.color = (name=="unresolved") ? "#666" : color.color();
		else node.color = options[type].c;
		node.colorDark = d3.rgb(node.color).darker().toString();
		node.colorBright = d3.rgb(node.color).brighter().toString();
		node.size = options[type].r;
		return node;
	};
	function createCellNode(cell, cellName, block, depArray) {
		cell.type = cell.type.toLowerCase();
		cell.color = options[cell.type].c;
		cell.colorDark = d3.rgb(cell.color).darker().toString();
		cell.colorBright = d3.rgb(cell.color).brighter().toString();
		cell.size = options[cell.type].r;
		// cell specifics
		cell.name = cellName;
		cell.block = block;
		cell.depArray = depArray;
		return cell;
	}
	/* Updates a node with contained cells info */
	function updateParentNode(node, cell) {
		node.cells++;
		if (cell.has_main) node.mains++;
		if (cell.is_virtual) node.virtuals++;
		if (!cell.resolved) node.unresolved++;
		node.depArray = node.depArray.concat(cell.depArray);
		node.ncells.total++;
		node.ncells[cell.type] = node.ncells[cell.type]+1 || 1;
	};
	function makeArrays(node) {
		// d3js needs arrays, not objects
		if (node.children) {
			for (var item in node.children) makeArrays(node.children[item]);
			node.children = d3.values(node.children);
		};
		return node;
	};
	var _hive = createNode("Your Hive", "hive");
	var _src = _hive.children["source"] = createNode("source", "src", _hive);
	var depIndex = 0;
	for (var blockName in data) {
		var block = data[blockName];	// all cells of this block
		var _container = null;
		var _block = null;
		if (blockName == "system") {
			_block = _container = _hive.children["system"] || (_hive.children["system"] = createNode("system", "system", _hive));
		} else {
			if (!block.src)	// dependency block
				_container = _hive.children["dependencies"] || (_hive.children["dependencies"] = createNode("dependencies", "dep", _hive));
			else 
				_container = _src;
			_block = _container.children[blockName] || (_container.children[blockName] = createNode(blockName, "block", _container));
		}
		var cells = block.cells;
		for (cellName in cells) {
			var cell = cells[cellName];
			var path = cellName.split("/");
			var where = _block;
			// Dependencies computation
			var depArray = [];				// array of dependencies for each node
			for (dt in cell.dep) {			// all dependencies
				var deps = cell.dep[dt];	// all deps of type dt
				// For all deps in this type...
				for (var d=0; d<deps.length; d++) {
					var target = data[deps[d][0]].cells[deps[d][1]];
					// insert  dependency link
					var newDep = { source: cell, target: target, type: dt };
					newDep.id = depIndex++;
					depArray.push(newDep);
				}
			}
			cell = createCellNode(cell, path[path.length-1], _block, depArray);
			updateParentNode(_hive, cell);
			updateParentNode(_container, cell);
			updateParentNode(_block, cell);
			// add folders:
			for (var p=0; p<path.length-1; p++) {
				updateParentNode(where, cell);
				var nodeName = path[p];
				// var	nodeID = blockName + "/" + path.slice(0,p+1).join("/");
				where = where.children[nodeName] ||
						(where.children[nodeName] = createNode(nodeName, "folder", where));
				where.block = _block;
			}
			cell.parent = where;
			where.children[cellName] = cell;	// the new cell
		}
	}
	var result = makeArrays(_hive);
	return result;
};

function computeDeps(nodes) {
	function findVisibleParent(node) {
		var _node = node, _chain = [];
		do { 
			_chain.push(_node);
			_node = _node.parent;
		} while (_node.parent);
		for (var n=_chain.length-1; n>=0; n--) {
			if (!_chain[n].children) return _chain[n];
		}
	};
	function updateLevel(target, source) {
		if (target==source) return;
		// if (node.level!=new_level) return;	// check this
		target.level = Math.max(target.level, source.level+1);
		if (node.children) {
			node.children.forEach(function(n) { updateLevel(n, node); });	
		}
	};
	nodes.forEach(function(d) {d.level = d.depth;});
	/* Update the level of a node and all it's children */
	var _deps = [];
	// For all nodes in layout...
	for (var n=0; n<nodes.length; n++) {
		var node = nodes[n];
		node.level = node.depth;
		if (node.children || node.type=="hive") continue;
		var deps = node.depArray;
		if (!deps) continue;
		// For all dependencies types...
		for (var d=0; d<deps.length; d++) {
			var dep = deps[d];
			var source = node;
			var target = findVisibleParent(dep.target);
			if (source == target) continue;	// avoid printing auto-deps
			// update dependencie level:
			if (dep.type!="i") updateLevel(target, source);
			// insert  dependency ink
			_deps.push({source: source, target: target, id: dep.id, type: dep.type});
		}
	}
	return _deps;
};

graph.css

/* http://meyerweb.com/eric/tools/css/reset/ 
  v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end reset */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);


body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300px;
	color: #555;
	padding: 20px;
}

h1 {
	font-size: 40px;
	margin: 10px 0;
	font-weight:  300;
}

h2 {
	font-size: 28px;
	margin: 10px 0;
}

/* Common styles */
.clearer:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
}

#graph {
	border: 1px solid #ddd;
	border-radius: 3px;
}

/* Tree graph */
.node {
	cursor: pointer;
}

.node circle {
	stroke-width: 1.5px;
}

.node polygon {
	stroke-width: 2px;
}
.node path {
	stroke-width: 2px;
}
.node .meta {
	fill: #fff;
	stroke-width: 2px;
}

.node text {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 12px;
	text-shadow: #fff 0 1px 0,#fff 0 -1px 0,#fff -1px 0 0,#fff 1px 0 0;
}

path.link {
	fill: none;
	stroke: #c8c8c8;
	stroke-width: 1px;
}
path.dep {
	opacity: .3;
	stroke-width: 1px;
}
.dep.e {
	fill: #6ad3f0;
	stroke: #56aec7;
}
.dep.i {
	fill: #f0422e;
	stroke: #cf3728;
}
.dep.s {
	fill: #f0ed85;
	stroke: #cfcd74;
}
.dep.u {
	fill: #666;
	stroke: #444;
}
.dep.v {
	fill: #7ef0b5;
	stroke: #68c998;
}


/* Toolbar */ 

.tools {
	padding-top: 20px;
	position: fixed;
	top: 0;
	right: 8px;
}

a.btn {
	margin-right: 5px;
	border-radius: 3px;
	background-color: #ddd;
	color: #333;
	text-decoration: none;
	padding: 5px;
	font-size: 12px;
	cursor: pointer;
	display: inline-block;
	border-bottom: 3px solid #bbb;
	position: relative;
}
a.btn span.info {
	text-align: right;
	position: absolute;
	right: 0;
	top: -15px;
	width: 500px;
	color: #333;
	display: none;
}
a.btn:hover {	
	background-color: #bbb;
	border-color: #999;
}
a.btn:active {	
	background-color: #999;
	border-color: #888;
}

a.btn:hover span.info {
	display: block;
}
a.btn.on {
	background-color: #3FABDA;
	border-bottom-color: #348CB2;
	color: #fff;
}
a.btn.modesel {
	background-color: #000;
	color: #fff;
}

#legend, #legend svg {
	background-color: #fff;
	position: fixed;
	right: 0;
	border: 1px solid #ccc;
	top: 50px;
	height: 0;
	opacity: 0;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
#legend.on, #legend.on svg {
	height: 450px;
	opacity: 1;
}

graph.js

var data = data_use_use_hello;
var tree = new biiTree(data, "#graph");

d3.select("#indent-btn").on("click", function() {
	tree.doIndent(toggleButton(this));
});
d3.select("#explicit-btn").on("click", function() {
	tree.showDepType("e", toggleButton(this));
});
d3.select("#implicit-btn").on("click", function() {
	tree.showDepType("i", toggleButton(this));
});
d3.select("#system-btn").on("click", function() {
	tree.showDepType("s", toggleButton(this));
});
d3.select("#unresolved-btn").on("click", function() {
	tree.showDepType("u", toggleButton(this));
});
d3.select("#legend-btn").on("click", function() {
	var legend = document.getElementById("legend");
	legend.className = toggleButton(this) ? "on" : "";
});
d3.select("#lineal-btn").on("click", function() {
	tree.setLayout("lineal");
});
d3.select("#radial-btn").on("click", function() {
	tree.setLayout("radial");
});

function toggleButton(element) {
	var cls = element.className;
	var isOn = cls.match(" on");
	if (isOn) {
		element.className = cls.replace(" on", "");
	} else element.className += " on";
	return !isOn;
}

graph_legend.svg

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" type="text/css" href="graph.css">
  <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
  <!-- sample data file : -->
  <script type="text/javascript" src="sample_data.js"></script>
  
  <!-- Libs -->
  <script type="text/javascript" src="d3.helpers.js"></script>
  <script type="text/javascript" src="biiTree.js"></script>
</head>

<body>
	<h1>Hive dependencies</h1>
  <div class="tools clearer">
    <a id="lineal-btn" class="btn modesel">MODEL LINEAL<span class="info">Lineal layout.</span></a>
    <a id="radial-btn" class="btn modesel">MODE RADIAL<span class="info">Radial layout.</span></a>

    <a id="indent-btn" class="btn">indent<span class="info">Indent elements by dependency level.</span></a>
    <a id="explicit-btn" class="btn on">explicit<span class="info">Hide/Show explicit dependencies</span></a>
    <a id="implicit-btn" class="btn on">implicit<span class="info">Hide/Show implicit dependencies</span></a>
    <a id="system-btn" class="btn on">system<span class="info">Hide/Show system dependencies</span></a>
    <a id="unresolved-btn" class="btn on">unresolved<span class="info">Hide/Show unresolved dependencies</span></a>
    <a id="legend-btn" class="btn">legend<span class="info">Shapes and colors information</span></a>
  </div>

  <img id="legend" src="graph_legend.svg">
  <div id="graph" style="width: 960px; height: 600px;"></div>
  <script type="text/javascript" src="graph.js"></script>

</body></html>

sample_data.js

var data_use_use_hello = {'luispedraza/hello': {'cells': {'hello1.cpp': {'dep': {'e': [['luispedraza/hello',
                                                               'hello1.h']],
                                                        's': [['system',
                                                               'iostream']]},
                                                'has_main': false,
                                                'is_virtual': false,
                                                'resolved': true,
                                                'type': 'CPP'},
                                 'hello1.h': {'dep': {'i': [['luispedraza/hello',
                                                             'hello1.cpp']]},
                                              'has_main': false,
                                              'is_virtual': false,
                                              'resolved': true,
                                              'type': 'CPP'},
                                 'hello2.cpp': {'dep': {'e': [['luispedraza/hello',
                                                               'hello2.h']],
                                                        's': [['system',
                                                               'iostream']]},
                                                'has_main': false,
                                                'is_virtual': false,
                                                'resolved': true,
                                                'type': 'CPP'},
                                 'hello2.h': {'dep': {'i': [['luispedraza/hello',
                                                             'hello2.cpp']]},
                                              'has_main': false,
                                              'is_virtual': false,
                                              'resolved': true,
                                              'type': 'CPP'},
                                 'hello3.cpp': {'dep': {'e': [['luispedraza/hello',
                                                               'hello3.h']],
                                                        's': [['system',
                                                               'iostream']]},
                                                'has_main': false,
                                                'is_virtual': false,
                                                'resolved': true,
                                                'type': 'CPP'},
                                 'hello3.h': {'dep': {'i': [['luispedraza/hello',
                                                             'hello3.cpp']]},
                                              'has_main': false,
                                              'is_virtual': false,
                                              'resolved': true,
                                              'type': 'CPP'},
                                 'hello4.cpp': {'dep': {'e': [['luispedraza/hello',
                                                               'hello4.h']],
                                                        's': [['system',
                                                               'iostream']]},
                                                'has_main': false,
                                                'is_virtual': false,
                                                'resolved': true,
                                                'type': 'CPP'},
                                 'hello4.h': {'dep': {'i': [['luispedraza/hello',
                                                             'hello4.cpp']]},
                                              'has_main': false,
                                              'is_virtual': false,
                                              'resolved': true,
                                              'type': 'CPP'},
                                 'hello5.cpp': {'dep': {'e': [['luispedraza/hello',
                                                               'hello5.h']],
                                                        's': [['system',
                                                               'iostream']]},
                                                'has_main': false,
                                                'is_virtual': false,
                                                'resolved': true,
                                                'type': 'CPP'},
                                 'hello5.h': {'dep': {'i': [['luispedraza/hello',
                                                             'hello5.cpp']]},
                                              'has_main': false,
                                              'is_virtual': false,
                                              'resolved': true,
                                              'type': 'CPP'}},
                       'dep': {'system': {}},
                       'level': 2,
                       'src': false},
 'luispedraza/use_hello': {'cells': {'use_all.cpp': {'dep': {'e': [['luispedraza/hello',
                                                                    'hello4.h'],
                                                                   ['luispedraza/hello',
                                                                    'hello1.h'],
                                                                   ['luispedraza/hello',
                                                                    'hello3.h'],
                                                                   ['luispedraza/hello',
                                                                    'hello5.h'],
                                                                   ['luispedraza/hello',
                                                                    'hello2.h']],
                                                             's': [['system',
                                                                    'iostream']]},
                                                     'has_main': false,
                                                     'is_virtual': false,
                                                     'resolved': true,
                                                     'type': 'CPP'},
                                     'use_all.h': {'dep': {'i': [['luispedraza/use_hello',
                                                                  'use_all.cpp']]},
                                                   'has_main': false,
                                                   'is_virtual': false,
                                                   'resolved': true,
                                                   'type': 'CPP'}},
                           'dep': {'luispedraza/hello': {}, 'system': {}},
                           'level': 1,
                           'src': false},
 'luispedraza/use_use_hello': {'cells': {'img/kitten.jpg': {'dep': {},
                                                            'has_main': false,
                                                            'is_virtual': false,
                                                            'resolved': true,
                                                            'type': 'IMAGE'},
                                         'main.cpp': {'dep': {'e': [['luispedraza/use_hello',
                                                                     'use_all.h']]},
                                                      'has_main': true,
                                                      'is_virtual': false,
                                                      'resolved': true,
                                                      'type': 'CPP'},
                                         'use_hello.cpp': {'dep': {'e': [['luispedraza/hello',
                                                                          'hello1.h']]},
                                                           'has_main': true,
                                                           'is_virtual': false,
                                                           'resolved': true,
                                                           'type': 'CPP'}},
                               'dep': {'luispedraza/hello': {},
                                       'luispedraza/use_hello': {}},
                               'level': 0,
                               'src': true,
                               'track': 'luispedraza/use_use_hello(luispedraza/master): 1'},
 'system': {'cells': {'iostream': {'type': 'SYS'}},
            'dep': {},
            'level': 3,
            'src': false}};