Did you know that you can navigate the posts by swiping left and right?

D3 Tree Diagram

July 11, 2017, July 11, 2017 | Comments

category: VISUALIZATION
d3 html css javascript

Similar as cluster, the tree layout by D3 produces tidy node-link diagram. In generally, tidy trees are more compact than clusters.

Since both cluster and tree are under d3-hierarchy module, you would imagine that migration between each other is quite smooth.

The only change to make is to evoke tree() function instead of cluster().

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

This is actually the only piece of code needed to be modified if you compare with previous blog.

I also put this example under my Blocks.

One last thing I would like to mention is that when I first compare the cluster and tree diagram by exactly the same data, the difference is barely observed. After reading some documents especially the example in the reference 2, I find this tiny difference at the bottom of each diagram.

Cluster:
alt text
Tree:
alt text

You can see cluster is sort of right-aligned while tree is left-aligned and because of this, tree diagram could arrange the “children” nodes and links using blank spaces but cluster couldn’t take this advantage since the last-children nodes need to be arranged on the same column as you could see from above, which makes tree more compact than cluster.

Reference:

(1). D3 API Reference, https://github.com/d3/d3/blob/master/API.md.
(2). Tidy Tree vs. Dendrogram, https://bl.ocks.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2b.