MultiTrees (Part 1)

Posted in: javascript infovis toolkit , visualization
I found this CHI 94' visualization paper on MultiTrees in the internet and I've been trying to see what type of applications and ideas I could "borrow" for the JavaScript InfoVis Toolkit.

What are MultiTrees?

A MultiTree is a type of directed acyclic graph (DAG) where each node has a tree both as parent structure and as descendants. For example, a MultiTree can be created by overlapping different tree structures on a set of nodes, as shown in the picture below: As you can see MultiTrees can have cycles if they're not directed.

Laying and Navigating MultiTrees

What's interesting about this structure is that if we take two nodes x and y such that x <= y and the path connecting them, then we can form a topological tree by adding all descendants and ancestors of each node belonging to that path in the new graph.

Implementation

I recently pushed support for a small subset of MultiTrees: those where x = y. This is just a centered node and its tree of descendants and ancestors. The tree navigation is the same as the SpaceTree:


I also implemented a way of changing the current focused node, so that when the clicked node is centered a centrifugal view from that node is adopted. This way the current selected node is set as root of the visualization. Hopefully you'll understand the difference between this navigation and the previous one. Anyway, as soon as I get this feature fully functional I'll make another post explaining how to use this stuff in the JavaScript InfoVis Toolkit.
Comments
blog comments powered by Disqus