Diagram layouts for hierarchical data

October 07, 2015

Here some of the layouts (or topologies) for presenting non-numerical tree-like data structure. All diagrams display the same set of data with option to select: Large (150 nodes), Medium (100 nodes) or Small (50 nodes) dataset.

All tree datasets are based on the same source, fetched from dbpedia, by looking connected information for page Internet, here is a script code used to fetch the data.

Radial tree

Very compact layout, when labels are rotated as well, but this makes it difficult to read, also large number of child objects can screw whole graph.


Uses all the space available, but only shows leaf elements.

Forced Tree

Looks interesting and more natural.

Circle Packing

A lot of space is wasted and looks massive. Also, it's hard to show anything bellow level 3. The diagram can be useful to show size of each element (in this example sizes are randomly assigned at runtime, since they are not present in the dataset).

Tree Cluster

Looks really boring with large number of nodes, also a lot of space if wasted this way. Showing tree vertically may help when displaying small dataset. Easy to read though.


Probably one of the best looking diagrams.


Just to compare, the simple list is shown with the same data options. The scroll bar has to be used, otherwise it may get too long. The main advantage - simple implementation, easy to display on mobile screens. And it's very easy to read.