# Visualisation of hierarchical data by tiles with height as metric and adjacency as connections

I want to represent hierarchical data of uniform depth as a horizontal tree of tiles in a box. The x-axis would represent hierarchy levels and the y-axis the visualised metric. On the extreme left would be the highest level represented as a single tile occupying the entire height of the box. Next would be a stack of tiles representing the next hierarchical level, with tile height proportional to the share of each tile. Next would be a stack of smaller tiles representing the subdivisions of the previous stack of tiles, etc.

It would be similar to

1) an icicle tree graph, but horizontal and of uniform depth (hence no "icicles" sticking out),

2) a treemap, but non nested and with tiles of uniform width but variable height,

3) a table representation of the hierarchy from left to right, with proportional cell height.

Here's a prototype:

What would you call such a diagram ?

Related question: Is there an R package for this? (I realise the question may not be for this forum.)

(I just realised including level 1 is probably useless, but that doesn't change the general idea.)

• I've seen this called a "partition layout" or "partition table" in D3.js.
– syre
Commented Oct 2, 2017 at 8:14
• Old question, but it sounds like you were looking for a Sankey diagram. Here is an example: upload.wikimedia.org/wikipedia/commons/e/e0/… Note that the size of each node is proportional to the quantity it represents. Is it what you were looking for, or does it miss some important features you needed? Commented Nov 22, 2023 at 17:58
• @J-J-J Very cool, thanks! I knew about Sankey diagrams but never made the connection.
– syre
Commented Nov 23, 2023 at 19:40
• you're welcome. I'll turn that into an answer then! Commented Nov 23, 2023 at 20:44

Your prototype was on a good track, as it's partly the idea behind a Sankey diagram (also known as alluvial diagram, or parallel set diagram).

Using some made up data similar to what is shown in your prototype table, it would like this:

The nodes do have size proportional to the value they represent.

Compared to your prototype, a strength of Sankey diagrams (besides the fact they are better known) is that they offer more flexibility. For instance if you're in a situation where some nodes share the same "sub-node", a Sankey diagram will allow you to visualize that, while a table couldn't do that:

As well, if some nodes do not have subnodes contrary to their "siblings", this can be easily visualized with a Sankey diagram, while it could be confusing with the table format you suggest:

There are several R packages offering this, as it's a relatively famous visualization, available in many software and programming languages. I used network3D to generate the graphs above, but other packages include ggalluvial, alluvial, plotly, and certainly many others.

• I guess my diagram belongs to the subset of Sankey diagrams with equally-sized starts and ends and no gaps between branches!
– syre
Commented Dec 28, 2023 at 16:16
• @syre Yes. I wonder if the gaps are actually useful (or not) for an audience; it could be interesting to conduct a small study on that. Without gaps, it might require to be careful with colors, to avoid possible confusion with a treemap (en.wikipedia.org/wiki/Treemapping ) Commented Dec 28, 2023 at 16:34