d3.js Tree: most simple sample

Learning d3.js might not be as easy as some other tools because there are no step-by-step instructions to get started on a hello-world level. The samples on the d3.js site are bit too complex for a noob. But browsing through the example folder of the d3.js download helps, and usually you learn most dissecting by re-assembling sample code from other people. Another great source is gist.github.com, a code snippet repository. Look for d3.js ! With bl.ocks.org you can even “run” the snippets.

The treeview is a classic visualization but one of my favorites, specifically if you spice it up with interaction and allow the user to dive into a subtree of his choice. But what is the most simple tree layout ? I want to understand the physics behind it. So let me share my compiled (of different samples) most simple version without any fancy features or interaction.

Simlpe Tree Layout

Here my bl.ocks.org version with code or here to copy and paste:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Tree Demo</title>
    <script type="text/javascript" src="lib/d3.js"></script>
    <script type="text/javascript" src="lib/d3.layout.js"></script>
<style>

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 4.5px;
}
</style>

  </head>
  <body>

    <div id="viz"></div>

    <script type="text/javascript">

      //JSON object with the data
      var treeData = {"name" : "A", "info" : "tst", "children" : [
			{"name" : "A1" },
			{"name" : "A2" },
			{"name" : "A3", "children": [
			      {"name" : "A31", "children" :[
			{"name" : "A311" },
			{"name" : "A312" }
	]}] }
      ]};

      // Create a svg canvas
      var vis = d3.select("#viz").append("svg:svg")
	  .attr("width", 400)
	  .attr("height", 300)
	  .append("svg:g")
	  .attr("transform", "translate(40, 0)"); // shift everything to the right

      // Create a tree "canvas"
      var tree = d3.layout.tree()
	.size([300,150]);

      var diagonal = d3.svg.diagonal()
	  // change x and y (for the left to right tree)
	  .projection(function(d) { return [d.y, d.x]; });

      // Preparing the data for the tree layout, convert data into an array of nodes
      var nodes = tree.nodes(treeData);
      // Create an array with all the links
      var links = tree.links(nodes);

      console.log(treeData)
      console.log(nodes)
      console.log(links)

      var link = vis.selectAll("pathlink")
	  .data(links)
	  .enter().append("svg:path")
	  .attr("class", "link")
	  .attr("d", diagonal)

      var node = vis.selectAll("g.node")
	  .data(nodes)
	  .enter().append("svg:g")
	  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

      // Add the dot at every node
      node.append("svg:circle")
	  .attr("r", 3.5);

      // place the name atribute left or right depending if children
      node.append("svg:text")
	  .attr("dx", function(d) { return d.children ? -8 : 8; })
	  .attr("dy", 3)
	  .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
	  .text(function(d) { return d.name; })

    </script>
  </body>
</html>

Interesting to have a look at the raw data and the nodes/link data array

Tree Data structure

Advertisements

3 thoughts on “d3.js Tree: most simple sample

  1. Very nice illustration of the overall steps to put together a D3-based program!
    However, Can you please add some more comments in the code to explain other things like, link, node, etc.

  2. Pingback: d3.js – From tree to cluster and radial projection | The JavaDude Weblog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s