Did you know that you can navigate the posts by swiping left and right?
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.
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.
(1). D3 API Reference, https://github.com/d3/d3/blob/master/API.md.
(2). Tidy Tree vs. Dendrogram, https://bl.ocks.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2b.