Bono tarea

En esta tarea se va visualizar las líneas de mando del Ejército Nacional. La problemática principal es que la cantidad re rangos que existen, la cantidad de oficiales y suboficiales que tiene el ejército es muy grande. Por tal motivo es difícil conocer la línea de mando completa de un o varios soldados.

What? Son ítems jerárquicos. Los cuales comúnmente se ordenan mediante árboles.

Why? Se requiere descubrir cuál en la red de datos (network data) el camino (path) de la línea de mando.

Se desea anotar y resaltar los oficiales y/o suboficiales seleccionados para encontrar una convergencia de rangos superiores.

Se permite explorar en el árbol con el fín de identificar los oficiales inferiores.

How?

Se presentarán los datos mediante un árbol en donde se pueda seleccionar y navegar entre los nodos. Además permitirá realizar búsquedas en donde se resalte la línea de comando. Un ejemplo de árbol es el siguiente (este aún no tiene la búsqueda ni resalta la línea de comando):

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

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

.found {
		fill: #ff4136;
		stroke: #ff4136;
	}
	.node text {
		font: 10px sans-serif;
	}

.link {
		fill: none;
		stroke: #ccc;
		stroke-width: 1.5px;
	}
	/*Just to ensure the select2 box is "glued" to the top*/
	.search {
	  width: 100%;
	}
</style>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css"></link>

<script type="text/javascript">

//basically a way to get the path to an object
	function searchTree(obj,search,path){
		if(obj.name === search){ //if search is found return, add the object to the path and return it
			path.push(obj);
			return path;
		}
		else if(obj.children || obj._children){ //if children are collapsed d3 object will have them instantiated as _children
			var children = (obj.children) ? obj.children : obj._children;
			for(var i=0;i<children.length;i++){
				path.push(obj);// we assume this path is the right one
				var found = searchTree(children[i],search,path);
				if(found){// we were right, this should return the bubbled-up path from the first if statement
					return found;
				}
				else{//we were wrong, remove this parent from the path and continue iterating
					path.pop();
				}
			}
		}
		else{//not the right object, return false so it will continue to iterate in the loop
			return false;
		}
	}

var div = d3.select("body")
		.append("div") // declare the tooltip div
		.attr("class", "tooltip")
		.style("opacity", 0);

var margin = {top: 20, right: 120, bottom: 20, left: 120},
		width = 960 - margin.right - margin.left,
		height = 800 - margin.top - margin.bottom;

var i = 0,
		duration = 750,
		root,
		select2_data;

var diameter = 960;

var tree = d3.layout.tree()
		.size([height, width]);

var diagonal = d3.svg.diagonal()
		.projection(function(d) { return [d.y, d.x]; });

var svg = d3.select("body").append("svg")
		.attr("width", width + margin.right + margin.left)
		.attr("height", height + margin.top + margin.bottom)
	  	.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//recursively collapse children
	function collapse(d) {
		if (d.children) {
			d._children = d.children;
			d._children.forEach(collapse);
			d.children = null;
		}
	}

// Toggle children on click.
	function click(d) {
		if (d.children) {
			d._children = d.children;
			d.children = null;
	  	}
	  	else{
			d.children = d._children;
			d._children = null;
	  	}
		update(d);
	}

d3.json("data.json", function(error,values){
		root = values;
		select2_data = extract_select2_data(values,[],0)[1];//I know, not the prettiest...
		root.x0 = height / 2;
		root.y0 = 0;
		root.children.forEach(collapse);
		update(root);
		//init search box
		$("#search").select2({
			data: select2_data,
			containerCssClass: "search"
		});
	});
	//attach search box listener
	$("#search").on("select2-selecting", function(e) {
		var paths = searchTree(root,e.object.text,[]);
		if(typeof(paths) !== "undefined"){
			openPaths(paths);
		}
		else{
			alert(e.object.text+" not found!");
		}
	})

d3.select(self.frameElement).style("height", "800px");

function update(source) {
		// Compute the new tree layout.
		var nodes = tree.nodes(root).reverse(),
		links = tree.links(nodes);

// Normalize for fixed-depth.
		nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodesâ€¦
		var node = svg.selectAll("g.node")
			.data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
		var nodeEnter = node.enter().append("g")
			.attr("class", "node")
		.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
		.on("click", click);

nodeEnter.append("circle")
		.attr("r", 1e-6)
		.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeEnter.append("text")
			.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
			.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);

// Transition nodes to their new position.
		var nodeUpdate = node.transition()
			.duration(duration)
			.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
			.attr("r", 4.5)
			.style("fill", function(d) {
				if(d.class === "found"){
					return "#ff4136"; //red
				}
				else if(d._children){
					return "lightsteelblue";
				}
				else{
					return "#fff";
				}
			})
			.style("stroke", function(d) {
				if(d.class === "found"){
					return "#ff4136"; //red
				}
		});

nodeUpdate.select("text")
			.style("fill-opacity", 1);

// Transition exiting nodes to the parent's new position.
		var nodeExit = node.exit().transition()
			.duration(duration)
			.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
			.remove();

nodeExit.select("circle")
			.attr("r", 1e-6);

nodeExit.select("text")
			.style("fill-opacity", 1e-6);

// Update the linksâ€¦
		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 diagonal({source: o, target: o});
			});

// Transition links to their new position.
		link.transition()
			.duration(duration)
			.attr("d", diagonal)
			.style("stroke",function(d){
				if(d.target.class==="found"){
					return "#ff4136";
				}
			});

// 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 diagonal({source: o, target: o});
			})
			.remove();

// Stash the old positions for transition.
		nodes.forEach(function(d) {
			d.x0 = d.x;
			d.y0 = d.y;
		  });
	}
</script>
</html>

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js