Visualizing version-controlled hierarchical data

Question

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...)

Answer 1

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:

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

Now consider the following graph:

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:

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.

Hierarchies

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:

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:

Answer 2

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.