Visualization advice for mix of graph/hierarchical data

Question

I have hierarchical data that looks like this:

I need to come up with a way to display it with the requirements I'll list momentarily. It is not a tree because there can be cycles (ignore directed-ness of edges in the image). There are parent/child relationships though and different hierarchical levels (e.g., the green nodes can only be children of white nodes and parents of red nodes).

The relations can be complicated so there can be lots of edges. I'd like a way to visualize the data without drawing edges and with the ability to filter out certain paths. E.g. if I choose n1, I want to see just n1, n5, n10, and n14.

I was thinking something like the 'Icicle' Layout provided by http://flare.prefuse.org/demo. The hierarchy view is there and no messy edges. Selecting a node can cause some stuff to be filtered out as well. The problem is that such a view implies the data is a tree. One block can't be a child of multiple parent blocks.

Are there any standard ways this type of data is viewed? In the simplest case, are there are visualization libraries that can draw an arbitrary graph and let you specify the fixed hierarchical levels shown in the image?

Answer 1

The Icicle layout seems very intuitive, but I see your dilemma with a child node having multiple parents. I would start by duplicating the multi-child for each child group, so that the same node will appear multiple times (e.g. n8 will appear three times), which isn't as accurate a representation of your graph, but solves the visualization problem.

If the user clicked the multi-child, you would have to teach the interface to redraw the graph with the multiple parents above it. And you could highlight the path chosen by the user. So for n8 there will be three paths, n2->n8, n3->n8, n4->n8. If the user selects the last choice, the redrawn subgraph will show three smaller boxes (n2,n3,n4) above the main n8 box, and you could color highlight the n4 box to indicate that this was the selected path. you could do the same for the children, highlighting those nodes on the path that was selected.

It depends of course on what the user is using this interface to do.

I think the choice of dropping arrows is a great one. To make a good visualization of a graph that has cycles and many-to-many relations will probably require duplication of items. If it's important for the use case to show the equivalence of duplicated node, that could accomplished through color or shape or a similar device. Flare looks like a fantastic tool to implement this with.