Go to Google Home
A data-code-compute resource for research and education in information visualization
InfoVis Home Learning Modules Software Databases Compute Resources References

Learning Modules > Visualizing Tree Data

Description | Usage Hints | Learning Task | Discussion | References | Acknowledgments


Many data sets come in tree format. There are family trees, organizational charts, classification hierarchies, and directory structures. The figure below shows an inheritance tree by Ernst Haeckel ((Stammbaum) in German). Read also To Draw a Tree by Pat Hanrahan.

Click image for larger version

A tree graph is a set of straight line segments (edges) connected at their ends containing no closed loops (cycles). You can also call it a simple, undirected, connected, acyclic graph (or, equivalently, a connected forest). A tree with n nodes has n-1 graph edges. All trees are bipartite graphs.

Many trees have a root node and are called rooted trees. Trees without a root node are called free trees. Subsequently, we will only consider rooted trees. In rooted trees, all nodes except the root node have only one parent node. Nodes which have no children are called leaf nodes. All other nodes are referred to as intermediate nodes.

Usage Hints

Read How to Install, Compile, and Run the XML Toolkit and start the toolkit. The window below will open.


To visualize a tree click 'File > Open' and select the 'persisted_radialtree.xml' in the '/IVR/data' directory. This file contains the complete directory structure of the IVR repository.

The XML toolkit comprises three tree visualization algorithms: Radial Tree, Hyperbolic Tree, and Treemap. Please follow the links from http://iv.slis.indiana.edu/sw/ for a detailed explanation of these layout algorithms.

To display the tree file using a radial tree, click 'Visualization > Radial Tree' and a new window will open inside the IV Toolkit window showing the tree in radial tree layout. Click on any node to bring it into the center of the display.

Alternatively, you can click 'Visualization > Hyperbolic Tree' and another window will appear that shows the exact same tree data in hyperbolic tree layout. Using the mouse, you can select and drag any node to the center or to the periphery.

screen 2

Try also 'Visualization > Treemap' to visualize the exact same data set in hyperbolic tree layout. You will find out that the 'persisted_matrix' file takes up most of the space in this directory.

Learning Task

The XML toolkit comes with converters that help you to generate data in the XML TreeModel format that the XML Toolkit can read.

Read File Directories
For example, if you like to visualize an arbitrary file directory then go to the main IVR directory and type

ant -Darg0="src/edu" -Darg1="data/tree.xml" converter

This will run a converter program that reads out a directory structure starting at 'src/edu' and saves the directory tree into the file 'tree.xml' in the '/IVR/data' directory. This file can now be loaded into the XML toolkit via 'File > Open'. The toolkit recognizes that the input is in TreeModel format and all tree visualization algorithms can be used to display it.

The converter you just called resides in the '/IVR/iu/iv/util/converter' directory. In order to compile it, the subsequent lines had to be added to the 'build.xml' file in the 'IVR' directory:

  <target name="converter" depends="compile">
    <java classname='edu.iu.iv.util.converter.Converter'
      <classpath refid='project.classpath' />
      <arg value="${arg0}" />
      <arg value="${arg1}" />

This is explained in more detail in How to Extend the XML Toolkit (coming soon).

Read Tree Files
The converter program can also be used to convert a flat text file of the format


Into a properly formatted TreeModel file. Simply call the convert program with

ant -Darg0="data/tree.du" -Darg1="data/tree.xml" converter

where 'tree.du' is the tree data set you would like to convert. Acceptable delimiters are /,-

Hence the converter that takes a file name, opens and reads the file, chooses an appropariate processor and converts it into an xml format that can be read into the toolkit. If no output file name is given, then the converter saves the result as 'data/My_Output_File.xml'.


The discussed tree algorithms differ in the way

  • Trees are represented: Hyperbolic tree and radial tree clearly show the structure of a tree. Treemap represents the structure as nested rectangles.
  • Node features are represented: The treemap let's you easily detect the file or directory that uses most of the space on your disk. Color or size coding could be used to represent this node features in a hyperbolic tree or a radial tree. However, it would only be noticable if this node is in the focus of attention.
  • Users interact with them: The current version of the radial tree code lets users select a node and this node will move to the center of the display. The hyperbolic tree enables one to continuously drag a node in and out of focus. The current implementation of the treemap is static but try the treemap code by the University of Maryland for an highly interactive experience.

The hyperbolic tree uses a -> distortion technique.



This documentation was compiled by Katy Börner and Bruce William Herr.

Information Visualization Cyberinfrastructure @ SLIS, Indiana University
Last Modified May 10, 2004