Tree Diagram

by Colin White

HTML

<svg></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.node {
  cursor: pointer;
}

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

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

JavaScript

var data = [
		/* Declare REGIONS */
    { "name" : "World", "parent":"null" },
    { "name" : "Europe", "parent":"World" },
    { "name" : "Asia", "parent":"World" },
    { "name" : "Middle East", "parent":"World" },
    { "name" : "Australasia", "parent":"World" },
		/* Delcare COUNTRIES */
		{ "name" : "Czech Republic", "parent": "Europe" },
		{ "name" : "Hungary", "parent": "Europe" },
    { "name" : "Serbia Montenegro", "parent": "Europe" },
    /* Declare Country CODES */
 		{ "name" : "320", "parent": "Czech Republic" },
    { "name" : "321", "parent": "Czech Republic" },
		{ "name" : "322", "parent": "Hungary" },
    { "name" : "325", "parent": "Serbia Montenegro" }       
    ];

    
    
// *********** Convert flat data into a nice tree ***************
// create a name: node map
var dataMap = data.reduce(function(map, node) {
	map[node.name] = node;
	return map;
}, {});

// create the tree array
var treeData = [];
data.forEach(function(node) {
	// add to parent
	var parent = dataMap[node.parent];
	if (parent) {
		// create child array if it doesn't exist
		(parent.children || (parent.children = []))
			// add node to child array
			.push(node);
	} else {
		// parent is null or missing
		treeData.push(node);
	}
});

// ************** Generate the tree diagram	 *****************
var margin = {top: 20, right: 120, bottom: 20, left: 120},
	width = 750 - margin.right - margin.left,
	height = 250 - margin.top - margin.bottom;
	
var i = 0;

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 + ")");

root = treeData[0];
  
update(root);

function update(source) {

  // Compute the new tree layout.
  var nodes = tree.nodes(root).reverse(),
	  links =...