greysond · February 23, 2016 22:18 · Feb 23, 2016 · Feb 23, 2016 · Feb 23, 2016 · Apr 20, 2014
diff --git a/index.html b/index.html
@@ -63,7 +63,7 @@
 	}
 });
 
-dataMap["Level 2: B"].children.push(dataMap["Daughter of A"]);
+dataMap["Level 2: B"].children = [dataMap["Daughter of A"]];
 
 // ************** Generate the tree diagram	 *****************
 var margin = {top: 20, right: 120, bottom: 20, left: 120},

diff --git a/index.html b/index.html
@@ -63,7 +63,7 @@
 	}
 });
 
-dataMap["Level 2: A"].children.push(dataMap["Daughter of A"]);
+dataMap["Level 2: B"].children.push(dataMap["Daughter of A"]);
 
 // ************** Generate the tree diagram	 *****************
 var margin = {top: 20, right: 120, bottom: 20, left: 120},

diff --git a/index.html b/index.html
@@ -63,6 +63,8 @@
 	}
 });
 
+dataMap["Level 2: A"].children.push(dataMap["Daughter of A"]);
+
 // ************** Generate the tree diagram	 *****************
 var margin = {top: 20, right: 120, bottom: 20, left: 120},
 	width = 960 - margin.right - margin.left,

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -6,8 +6,6 @@
     <title>Collapsible Tree Example</title>
 
     <style>
-
-	.node { cursor: pointer; }
 
 	.node circle {
 	  fill: #fff;

diff --git a/index.html b/index.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+
+    <title>Collapsible Tree Example</title>
+
+    <style>
+
+	.node { cursor: pointer; }
+
+	.node circle {
+	  fill: #fff;
+	  stroke: steelblue;
+	  stroke-width: 3px;
+	}
+
+	.node text { font: 12px sans-serif; }
+
+	.link {
+	  fill: none;
+	  stroke: #ccc;
+	  stroke-width: 2px;
+	}
+
+    </style>
+
+  </head>
+
+  <body>
+
+<!-- load the d3.js library -->	
+<script src="http://d3js.org/d3.v3.min.js"></script>
+
+<script>
+
+var data = [
+    { "name" : "Level 2: A", "parent":"Top Level" },
+    { "name" : "Top Level", "parent":"null" },
+    { "name" : "Son of A", "parent":"Level 2: A" },
+    { "name" : "Daughter of A", "parent":"Level 2: A" },
+    { "name" : "Level 2: B", "parent":"Top Level" }
+    ];
+
+// *********** 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 = 960 - margin.right - margin.left,
+	height = 500 - 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 = tree.links(nodes);
+
+  // Normalize for fixed-depth.
+  nodes.forEach(function(d) { d.y = d.depth * 180; });
+
+  // Declare the nodes…
+  var node = svg.selectAll("g.node")
+	  .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+  // Enter the nodes.
+  var nodeEnter = node.enter().append("g")
+	  .attr("class", "node")
+	  .attr("transform", function(d) { 
+		  return "translate(" + d.y + "," + d.x + ")"; });
+
+  nodeEnter.append("circle")
+	  .attr("r", 10)
+	  .style("fill", "#fff");
+
+  nodeEnter.append("text")
+	  .attr("x", function(d) { 
+		  return d.children || d._children ? -13 : 13; })
+	  .attr("dy", ".35em")
+	  .attr("text-anchor", function(d) { 
+		  return d.children || d._children ? "end" : "start"; })
+	  .text(function(d) { return d.name; })
+	  .style("fill-opacity", 1);
+
+  // Declare the links…
+  var link = svg.selectAll("path.link")
+	  .data(links, function(d) { return d.target.id; });
+
+  // Enter the links.
+  link.enter().insert("path", "g")
+	  .attr("class", "link")
+	  .attr("d", diagonal);
+
+}
+
+</script>
+
+  </body>
+</html>
diff --git a/readme.md b/readme.md
@@ -0,0 +1,3 @@
+This is a simple d3.js tree diagram that is generated from 'flat' data as used as an example in the book [D3 Tips and Tricks](https://leanpub.com/D3-Tips-and-Tricks).
+
+It is derived from the Mike Bostock [Collapsible tree example](http://bl.ocks.org/mbostock/4339083) but it is a VERY cut down version without the ability to update (collapse).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		This is a simple d3.js tree diagram that is generated from 'flat' data as used as an example in the book [D3 Tips and Tricks](https://leanpub.com/D3-Tips-and-Tricks).

		It is derived from the Mike Bostock [Collapsible tree example](http://bl.ocks.org/mbostock/4339083) but it is a VERY cut down version without the ability to update (collapse).