WarpTree

WarpTree provides a widget, WarpTreeView, that can display any hierarchical data set.

Download version 1.0.0 source code

• Warped space
• Features
• Examples
• Using WarpTree
• Integration in Qt Designer

Authors:

Jos van den Oever

License: LGPL

Warped space

The amount of data people are handling day to day is steadily increasing. Getting an overview of a large data sets can be a daunting task. For visualizing near-infinite data sets, one would need a near-infinite screen size. Or a convenient way of mapping the infinite screensize to a finite area. Such a methods exist. A popular method is to lay the data out in a hyperbolic plane and visualizing this on a Poincaré disk. Such a disk has a high resolution view of the plane in thecenter and a low resolution on the edges. The Poincaré disk was nice visualized by the Dutch graphic artist M.C. Escher.

Circle Limit I by MC Escher

As you can see from the drawing, this information is projected on a circle. This is a bit wasteful on standard computer screens that are usually rectangular. So if one uses a circular projection, the amount of space wasted is at least 20%. M.C. Escher wasted space in his use of the circle. In his case however, it is defendable, because the qualities of the Poincare disk are much clearer in a circle. The lines in hyperbolic space are semicircles in euclidian space which makes the entire image symmetrical and harmonic.

Because we are not artist and do not want to waste space, we came up with a different projection which we simply call 'warped'. It is the same as the projection above, but points are extended from the center of the projection to the edge of the containing rectangle. If we apply this method to 'Circle Limit I' we get this image:

Square Limit I generated with warp

QAbstractItemModel and QAbstractItemView

One of the most powerful new features in Qt4 is the introduction of a Model/View paradigm. The most important classes of this paradigm are QAbstractItemModel and QAbstractItemView. If you can present your data in QAbstractItemModel, you can use one of the implementations of QAbstractItemView classes to display the data. So the QAbstractItemModel is more or less the standard format for more complex data in Qt and it is a natural choice to implement WarpTree as a QAbstractItemView. Using QAbstractItemView really allows us be more creative with less code.

So what type of view is WarpTreeView? It is a bit like a QTreeView, but for larger data sets. The best way to understand it is to use it.

Showing the graph on a unit disc.

Showing the graph in WarpTreeView.

Features

• dynamic loading of the network
• showing labels of nodes if there is room for them regardless of position in the hierarchy
• no overlapping labels
• adaptable to different datatypes and styles by implementing a WarpNodePainter
• zooming with the mousewheel to see different levels of detail
• change the projection with cursor keys and <Home> or by dragging the tree
• show tooltips if the model provides information for them

Examples

DirView

DirView is a simple application that uses a QDirModel to browse your files. Looking at the code is very insightfull if you want to start using WarpTreeView. Here you see a screenshot of DirView. On the left you see a normal QTreeView and on the right you see the WarpTreeView. The two views share the same data model and the same selection model. This means that if you select an item in one view, it is also selected in the other view.

The way the background, the nodes and the lines are drawn can be customized by subclassing WarpNodePainter. The default WarpNodePainter does not draw a background. In DirView, an adapted WarpNodePainter is used: if the active file is a picture, ImageNodePainter draws the picture in the background of the view. This allows the user to browse for pictures while keeping an eye on the potentially large directory structure.

The DirView example application showing an image preview.

The DirView example application running under Windows XP.

The information in the view is loaded dynamically from the QAbstractItemModel so the user does not have to wait until the entire data model has been scanned. In DirView, you can see how this works, because data shows up as it is loaded into the view. This asynchronous behaviour a very important feature, because a data model might be slow or large.

The Tree of Life

The Tree of Life is a website where information is collected about the history of evolution. The tree of life describes which species evolved from which other species. This history can be seen as a big tree which is rooted in the primordial sea, the start of all life. We, humans, are but one of the leaves of this tree. The entire tree currently contains almost 100.000 species. With the WarpTreeView, you can conveniently browse this entire tree.

The program 'tol', that comes with this package, allows you to view the tree. You can start it with 'tol'. This loads a phylogeny with 88000 nodes. This is what you see:

Zoomed out view of the tree of life.

Far zoomed out view of the tree of life.

Zoomed in view of the tree of life with tooltip.

You can zoom in or out with the mouse-wheel and move around in the tree by dragging it or by using the cursor keys. By clicking on an entry, you move it to the middle of the widget and by hovering over an entry you can activate a tooltip with more information.

The data from the tree of life can be used for non-commercial use as is stated on the download website.

Using WarpTree

You can use WarpTree by instanciating a WarpTreeView and adding your data to it in the form of a QAbstractItemModel. Examples on how to do it can be found in dirview/main.cpp and treeoflife/tol.cpp.

All you need to use the widget is the dynamic library and the header 'warptreeview.h'.

Integration in Qt Designer

WarpTree comes with a plugin that, when installed, shows up in Qt Designer automatically. It appears in the widget sidebar and can be dragged onto dialogs and applicion windows like any other widget.

additional

Schema showing how the warped widget makes better use of the available space by mapping from a circle to a square.

Additional information on hyperbolic planes can be found in the hypertree project. There is a nice paper in there: article on displaying a network on a hyperbolic plane.

---