News

ObjectLab Open Source News

Grab this Headline Animator

How to represent a tree in a map?

How to represent and visualize a lot of information at a glance is a hot topic in IT. A Treemap, also known as Heatmap, is an important tool for this. A TreeMap graphically represents a hierarchical structure. Typically, the hierarchy will involve a tree of nodes of different sizes and different colours.

Digg! A Heatmap/Treemap is great to see a lot of information in one glance. It can be interactive and allow you to drill down into some section of the hierarchy. More on treemapping on Wikipedia.

  • Each box on the chart may be contained in another box (e.g. Microsoft and Sun in the Technology box, CitiGroup in Banking, etc hence the hierachical view.
  • The size is usually determined by the relative size of a parameter in comparison to the full size of the chart (i.e. the 'bigger' X, the bigger it is on the chart).
  • The colour shows another dimension in the parameters, like a movement in time (i.e. conventionally the greener, the bigger the increase; the 'redder', the bigger the decrease!).

A tree structure may includes more or less important elements. For example, in a tree structure of files, there can be big files or small files. It can be then interesting to know which directory is the biggest on a hard disk, at a glance!. But, in a treeview, we can't distinguish the significant elements. Treemap makes it possible to represent each element in a rectangle of more or less big size according to its importance in the tree structure. Moreover, we can add a code color which makes it possible to introduce new information into the representation of the tree structure.

For example, you can use Treemap to see :

  • which is the most important directory on your hard disk.
  • if your portfolio of stocks is well distributed between the various industry sectors.
  • the map of the entire stock market (smartmoney.com)

So, what is on offer?

We believe that JTreemap is the only java, open-source and maintained library for treemapping. JTreeMap components are released under the business-friendly Apache 2.0 license.

JTreeMap releases 2 components:

  • a Java Swing component JTreeMap and a demo app.
  • a SWT/Eclipse Plugin component, KTreeMap

Furthermore, the JTreeMap library contains an applet that could be used out of the box as it can read data in from a file on the web site, see this example.

Which JDK?

1.5+, get over it :-)

Is there a maven repository?

Yes, we'll be trying to add our library to the official maven repository but in the meantime, you can point Maven to:

This is the official repository for ObjectLab Open Source Projects.

UML?

We are using yDoc to generate a 'javadoc-like' documentation per module with the added twist of UML diagrams:

How do I use it?

You have 2 options: as an application or as a demo.

As an application

JTreeMap releases a basic demo application, you can open XML and TM3 files. The application can be launched via (see WebStart) or this way: java -jar jtreemap-1.1.0.jar

The accepted file formats are: XML of the following format:

    <?xml version='1.0' encoding='ISO-8859-1'?>
    <!ELEMENT root (label,(branch |leaf)*)>
    <!ELEMENT branch (label,(branch|leaf)*)>
    <!ELEMENT leaf (label,weight,value) >
    <!ELEMENT label (#PCDATA) >
    <!ELEMENT weight (#PCDATA) >
    <!ELEMENT value (#PCDATA) >

XML Example:

<?xml version='1.0' encoding='ISO-8859-1'?>
<!DOCTYPE root SYSTEM "TreeMap.dtd" >
<root>
  <label>Root</label>
  <branch>
    <label>branch1</label>
    <branch>
	<label>branch11</label>
	<leaf>
	  <label>leaf111</label>
	  <weight>1.0</weight>
	  <value>0.5</value>
	</leaf>
    </branch>
    <branch>
	<label>branch12</label>
	<leaf>
	  <label>leaf121</label>
	  <weight>1.0</weight>
	  <value>1.0</value>
	</leaf>
	<leaf>
	  <label>leaf122</label>
	  <weight>2.0</weight>
	  <value>5.0</value>
	</leaf>
    </branch>
   </branch>
</root>

In the field of treemapping, there is also a standard file format called TM3, which is TAB delimited:

Length (Miles)	Traffic Lights	Speed Limit	Repairs per week
FLOAT	INTEGER	INTEGER	FLOAT
12.5	4	40	2.3		Roads	Highway	Route 1
11.2	3	45	1.4		Roads	Highway	Route 5
35.7	0	65	5.3		Roads	Interstate	I-300
201.4	0	65	11.4		Roads	Interstate	I-234
1.3	5	25	0.1		Roads	Street	Main St.
3.4	7	35	0.4		Roads	Street	Broad St.

As an component in your application

The library provided allows you to integrate the treemap in your java app


//
// Build the Tree with JTreeMap classes
//
TreeMapNodeBuilder builder = new TreeMapNodeBuilder();
TreeMapNode buildingRoot = builder.buildBranch("branch1", null);

TreeMapNode box1 = builder.buildBranch("box1", buildingRoot);

double currentValue = 50;
double previousValue = 40;
TreeMapNode leaf1 = builder.buildLeaf("leaf1", currentValue, new ValuePercent(currentValue / previousValue), box1);
...

TreeMapNode root = builder.getRoot();

//
// Build the JTreeMap
//
JTreeMap jTreeMap = new JTreeMap(root);
jTreeMap.setFont(new Font(null, Font.BOLD, 10));
jTreeMap.setPreferredSize(new Dimension(600, 400));
jTreeMap.setBorder(BorderFactory.createEtchedBorder(EtchedBorder.LOWERED));

// add a popup menu to zoom the JTreeMap
new ZoomPopupMenu(jTreeMap);

final HSBTreeMapColorProvider provider = new HSBTreeMapColorProvider(jTreeMap,
	HSBTreeMapColorProvider.ColorDistributionTypes.Log, Color.GREEN, Color.RED);
jTreeMap.setColorProvider(provider);

//
// put in a tree view with a JTree on the left and a JTreeMap on the right
//
JPanel view = new JPanel();

JSplitPane splitPaneCenter = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT);
view.add(splitPaneCenter, BorderLayout.CENTER);

JScrollPane jScrollPane1 = new JScrollPane();
splitPaneCenter.setLeftComponent(jScrollPane1);
splitPaneCenter.setRightComponent(jTreeMap);

DefaultTreeModel treeModel = new DefaultTreeModel(root);
final JTree treeView = new JTree(treeModel);
jScrollPane1.getViewport().add(treeView);
jScrollPane1.setPreferredSize(new Dimension(140, jTreeMap.getRoot().getHeight()));
treeView.addTreeSelectionListener(new TreeSelectionListener() {
    public void valueChanged(TreeSelectionEvent e) {
	// for each selected elements ont the treeView, we zoom the JTreeMap
	TreeMapNode dest = (TreeMapNode) treeView.getLastSelectedPathComponent();

	// if the element is a leaf, we select the parent
	if (dest != null && dest.isLeaf()) {
	    dest = (TreeMapNode) dest.getParent();
	}
	if (dest == null) {
	    return;
	}

	jTreeMap.zoom(dest);
	jTreeMap.repaint();
    }
});
...