First, we need to have the data that is going to be used for the visualization. We need to get the tree.json file that is part of the examples for this recipe.

We will write the HTML and the backing JavaScript code that should generate data from a JSON file:

The line d3.layout.tree() creates a new tree layout with default settings, where it is assumed that each input in the data element has a child array.

With d3.svg.diagonal(), we create a generator with default accessor functions. The returned function can generate the path data for a cubic Bézier connecting the nodes where we have tangents for smoothing the line.

As we wanted to have the tree from left to right instead of the the default, which is from top to bottom, we need to change the default behavior by doing a projection:

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

The function will use [d.y, d.x] instead of the default [d.x,d.y]. One thing that you may have noticed is the .append("g") function that adds the SVG g element, which is a container element used for grouping together various related elements. We can have multiple nested elements inside, one within another, to an arbitrary depth, allowing us to create groups on various levels:

<g>
      <g>
      <g>
       </g>
     </g>
   </g>

To read the JSON data we've used the following:

d3.json("tree.json", function(json) { … }

That does an AJAX call to the tree.json resource.

We then automatically map the data from the JSON file with tree.nodes(json), where some assumptions are made on what we have inside the data; for example, we can have a parent node or children nodes.

After that, we selected all the path.link using W3C selectors that resemble a lot like the jQuery ones:

vis.selectAll("path.link")

Using .data, we bind them with link information that is returned by tree.links:

.data(tree.links(nodes))

What happens in the background is that D3's tree layout has a links function that accepts an array of nodes, and returns an array of objects representing the links from parent to child for each of these nodes. Links for the leafs will not be created. The information stored in the returned object has a source or the parent node and target or the child node. Now, in the following part, there is the .enter() function that's very much D3 magic. What happens is that, for every element in the array that is part of .data([theArray]) and has no corresponding DOM element found in the selection, it simply "enters inside the data" allowing us to use .append, .insert, .select, or .empty operators. In our case, we want to create SVG path elements having a CSS class of link and a d attribute calculated using the diagonal function we previously defined:

           .enter()
           .append("path")
           .attr("class", "link")
           .attr("d", diagonal)

So, for each data element, it will create <path class='link' d='dataCalucatedByDiagonal' />.

The SVG path element is a concept used to represent a line drawing that we would do with a pen, for example, having various types of geometry and representation. The d attribute contains the path data designated with moveto(M), lineto(L), curve( cubic and quadratic besiers), arc(A), closepath(Z), vertical lineto (V), and so on.

It's good to know what is generated by D3 for us in order to understand more completely how it works. Let's say we want to display a simple line:

The SVG code would be as follows:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g style="stroke: red; fill: none;">
    <path d="M 10 30 L 200 10"/>
 </g>
</svg>

Examining the path data values, we can see that it means move pen(M) to (10,30) and draw line(L) to (200,10).

In our example with the tree, we have the lines drawn using paths, so the next step would be to draw the nodes. We apply the same procedure where we select all the old g.node elements and enter the node data, but instead of creating the <path/> element, we just append "g" and additionally add an <a> element with the <xlink:href> attribute:

…
            .append("a")
            .attr("xlink:href", function(d) {
                 return d.url;
              })

As we are already automatically iterating all the data nodes, we can access d.url, retrieving the URL for each node and setting it as a link to all the inner elements that we are going to add later.

Don't forget that we need to rotate the coordinates, because we want the tree to be displayed from left to right:

            .attr("transform", function(d) {
                return "translate(" + d.y + "," + d.x + ")";
              });

After this, we can append other elements to each of the elements, so in order to create the circle, we add the following:

    node.append("circle")
            .attr("r", 20);

That creates an SVG circle with radius of 20px, also, we append the <text/> element that will display the distribution name:

   node.append("text")
            .attr("dx", -19)
            .attr("dy", -19)
             ...

Notice that we are moving the text element with (-19,-19) in order to avoid overlapping with the circle and the lines, and that is it.

The first thing you must do is play around with the values that are constant, such as the image size or text offset. This will help you better understand how changes affect the layout. There are various different functions to generate the layout, you can create it in a radial fashion or make it dendrite-like.

There are various ways to add interaction where you can have updates on certain portion of the code, make some parts animated, or even include HTML inside the SVG.