How to Show Hierarchical Data with Information Visualization

| 8 min read
797 shares

Hierarchical data is essentially a specialized form of network data – in that while entities within the dataset do not have dependent relationships; they are all related to each other by the principle of containment. They, unlike standard data networks, do not use the principle of connection.

A hierarchy begins with a root entity. This might be the CEO of a company, the name of a book, the title of a folder, etc. and then the root entity has at least one “child node” and every further child node has zero or more children.

An entity which comes below another is a child node to the entity above. Similarly, an entity which comes above another is a parent node to the node below.

Hierarchical data is shown in tree graphs; so called because of their similarity to a tree’s structure (though a tree which has been turned upside down so that the root is at the top and the branches form below it).

Author/Copyright holder: MaEr. Copyright terms and licence: Public Domain.

Above we see a simple tree diagram for the structure of a mafia family. The root entity is the boss of the family and the underboss is the first child entity. This is a very basic hierarchical relationship and it is possible to map much more complex hierarchies using information visualization techniques.

This diagram also includes a “sibling node” in the form of a consigliere who is not the boss of the organization but whose authority is equal to that of the boss.

The term “tree diagram” was coined by Noam Chomsky in his 1965 work; Aspects of the Theory of Syntax.

1. The File and Folder System

One of the most common hierarchies, which many of us deal with daily, is the computer file system. There is a root directory which then has a selection of child folders, which in turn have child folders, and in some or all of these folders there are files to be found.

The file tree is normally rendered in a visual format by the operating system. To provide a certain level of familiarity it uses images of the classic paper folder to connect the viewer with the property of the abstract file system used on the disc drive. This tree is interactive in nature and clicking on any given folder enables the user to determine what is inside that folder. However, it is also possible to use the command shell of an operating system to present this information textually too.

The Windows file system above is essentially a hierarchical tree and one with which many of us are already incredibly familiar with.

2. Cone Tree Diagram

A cone tree is a 3-D hierarchy model which was developed at Xerox PARC in the 1990s. It was designed to enable the representation of hierarchies with large multiples of nodes. The 3D means that the physical limitations of displaying complexity on a flat screen can, to some extent, be overcome.

It works by beginning with a root node and then arranging all the child nodes of that root equidistant from the parent. This forms a cone with some transparency. The process is then performed again and again for each set of child nodes and the diameter of the cone is reduced at each level of the hierarchy.

In general cone tree diagrams are generated using software which enables interactivity and a useful property of these diagrams is the ability to rotate them so that a particular child is occluded (hidden) by another child.

You can also get an idea of the numbers of child entities on any parent simply by observing the density of shading on any given cone. (The edges used to define the cone are properties of the children).

3. The Botanical Tree Diagram

The botanical tree diagram was invented by researchers at Eindhoven University of Technology in the Netherlands. They had noticed that the limitation of tree diagrams was that they can quickly become too complex to be functional and then they noticed that real trees had leaves. They also saw that it didn’t matter how many leaves and branches there were on a tree – these were always distinct entities visually. So they extended the concept of tree diagrams by adding leaves and branches.


4. The Treemap Diagram

The treemap was invented by Ben Shneiderman of the University of Maryland in 1990. It represents hierarchies by using all the available space and in the form of nested rectangles.

The rectangles can be defined in proportion to the “space” that they take up within the data set. These information visualizations can be very useful for comparing nodes and see patterns within them.

The math involved to create a treemap is quite complex but the good news is that you don’t have to do that math; there are plenty of software packages available that can do this for you.

Above is a treemap of market share for different soft drinks. Comparing Coke, Coke Light, Ice Tea, Fanta and Dr. Pepper.

When Al Shalloway, the founder and CEO of Net Objectives, said; “Visualizations act as a campfire around which we gather to tell stories.” we wonder if he had envisioned such complex stories?

The Take Away

Representing hierarchical information is quite straightforward; in the majority of cases the information designer will either use a tree diagram (or a variant of a tree diagram) or a treemap to display the data in an efficient format for the user.

References & Where to Learn More:

Botanical Visualization of Huge Hierarchies

Learn about Ben Shneiderman.

Hero Image: Author/Copyright holder: Jurgen Appelo. Copyright terms and licence: CC BY 2.0

797 shares

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

Interaction Design Foundation - IxDF. (2018, October 23). How to Show Hierarchical Data with Information Visualization. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,662 designers enjoy our newsletter—sure you don’t want to receive it?

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
316,662 designers enjoy our newsletter—sure you don’t want to receive it?