JTreeMap

Benoit Xhenseval JTreeMap

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.

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)

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.

1.5+, get over it :-)

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

Maven 1: http://objectlabkit.sourceforge.net/m1-repo
Maven 2: http://objectlabkit.sourceforge.net/m2-repo

This is the official repository for ObjectLab Open Source Projects.

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

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

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.

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();
    }
});
...