What would be the best way to visualize versioned hierarchical data in an interactive application?

Let's say we have the following hierarchical data, where the capital letters identify the enitities, and each entity has a value of type "color".

Rules are:

  1. Each node has exactly one parent.
  2. Nodes can be added and removed. But not moved!
  3. The values of nodes can be changed.

For instance, in Version2 below, D was added to B and C changed its value from green to orange:

and now, in Version3, B was deleted (thus deleting its child D) and E, F and G were added to C:

The user should be able to see any version "as it was" (what's easy), but also the overall picture of the change log (what's exactly what I'm failing to elaborate).

Adding links to "previous version" and "next version" somehow misses the point, because the user would still have the task of building this big picture in his mind, as she browses through version's snapshots.

What would be a nice way to display the change log?

p.s.: In Googling for "hierarchical versioned data, I've found about the "Tree Rings Metaphor", but it fails to support the rules 1 (single parent) and 3 (changes in node values).

Edit. I've tried to formulate the question as generic as possible, so that the knowledge shared in the replies could be more useful to others. But here is my specific scenario:

In my case, the hierarchy would be never deeper than 3 levels, and every node is expected to have dozens (but not hundreds) of siblings.

The value the nodes hold ("red", "green", "orange".. in the example) are lines of text (with around 30 characters). That is, discrete data.

One can think of the nodes as being companies, their departments and sub-departments. The value of each node is just the company/department name.

My user wants to see the historic of company's and (sub-)department's creation, extinction and name changes. (We can forget about company's merges and department swapping...)

  • This is a very tough question, but is it not possible to adapt the tree rings metaphor to your problem here in some way?
    – Michael Lai
    Sep 15, 2014 at 21:51

2 Answers 2


What are the user needs?

It is next to impossible to answer the question without more information.

Primarily, why would users need such feature to begin with? What I have in mind is that if there are 1000 versions, involving 500 objects (490 of which may have been deleted) you'll be showing so much information that the visualisation will be impossible to interpret, and would users really want to see 490 deleted objects?

So as a users, what tasks such a visualisation will help me with?

In addition, aspects such as maximum hierarchy depth, maximum colours, etc. can play a big part here.

Mathematically it cannot be done

Consider the following graph:

A graph showing simple speed over time graph

This is a 2D graph involving 2 axis (speed, time), both of which involve continuous values.

Now consider the following graph:

A speaker directivity chart, 2D display with colour providing the 3rd dimension

Despite being plotted on a 2D surface, colour are used to denote the 3rd dimension values. Again, all 3 variables are continuous.

Another version of a 3D graph:

A 3D waterfall graph showing how frequencies decay over time

Despite being 3D and having colours, the colours are redundant to the time axis. So it is, in essence, a 3D graph with all variables being continuous.

Also notice that this kind of plot only works if something has decayed over time - had the magnitude grew after its decay the new information would hide what's behind.


To be easy to interpret, visualisation of an hierarchy will require 2 dimensions, and mathematically the variables are of discrete nature. Now by introducing a time axis, you have 3 dimensions, but both the discrete nature of the hierarchy, the fact that connections has to be drawn, and the (assumed) non-decaying nature of the data mean data in front will hide data behind and the whole thing will be unreadable.

Possible solutions?

Again, without knowing the actual user needs, this is just a guess, but a visualisation similar to the one on Apple's Time Machine may be acceptable:

A screenshot showing Apple's Time Machine state stacks

Just replace the window with your hierarchy, and possibly use animation to show what's had been delete as the user moves from one version to another.

Another option is to present the hierarchy in 1D (which obviously makes it way harder to interpret), depending on the nature of data, something like this may be worth considering:

Nodes are presented on a single line, with arrows linking between them. Sets show change over time.

  • Animation, in the end, is just a fancier implementation of the "next version" and "previous version" links.
    – bruno
    Sep 16, 2014 at 14:51
  • That wasn't what I meant by animation. You'd have to have some timeline control - either a scroller or a next/previous buttons. What I meant is that as you move between one version and another, instead of changes happening straight away, a transition animation will allow users to see better what has changed.
    – Izhaki
    Sep 16, 2014 at 15:24
  • Exactly. Instead of seeing "the whole picture", the user needs to interact to see the different snapshots. Animation may soften the changes, but it still fails to portray the whole time-elapsed information.
    – bruno
    Sep 16, 2014 at 18:28

Git and other code versioning systems might be a solid start. Maybe some highlighting of the main/current branch and displaying more or less information about each version.

code version system screenshot

Large navigational systems might be helpful. Try underground plans for big cities and Japan Rail Pass map, they have a nasty amount of Shinkansen stations.

  • 1
    I don't think Git would be a solid start - Git blobs (objects) can have more than one parent (like on a 3-way merge commit).
    – Izhaki
    Sep 15, 2014 at 22:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.