Visualization is all about taking data and turning it into useful information. The technique is glaringly useful and widely used. Consider the following situation: you want to display the profiles of the population of a country, divided by age.
Age Group | Number of People |
0-18 | 1,452,382 |
18-35 | 1,231,987 |
35-50 | 842,427 |
50+ | 692,120 |
This type of presentation requires more thinking to get a grip on the data than it should. This is the kind of processing that the computer should be doing for you. For instance, the computer could make this easier on the end user by changing the raw figures into percentages.
Age Group | Percentage of Population |
0-18 | 42% |
18-35 | 39% |
35-50 | 11% |
50+ | 8% |
| Figure 1: This pie chart represents the data even more accessibly. |
The percentages tell a better story. But understanding could be enhanced even further if the data were drawn as a pie-chart, as in Figure 1.
From the size of the slices on the pie, end users can more easily interpret the data and turn it into useful information.
But what happens when you’ve got a lot of data to visualize? Bar charts and scatter charts, while useful, are limited in the number of data points that they can render.
Making the Case for Advanced Visualization
What would happen if you wanted to view data from every country in the world, broken down in the same way? Would you have a page showing hundreds of pie charts? How would these pie charts relate to each other?
These are the problems that the treemap visualization has been designed to solve. The treemap allows you to render a complex, hierarchical dataset in a relational view. It is capable of plotting many data points and keeping it visually consistent. An example of a treemap in commercial use is SmartMoney.com’s Market Map, which takes the instruments that are in the S&P 500 index of stocks and creates a treemap.
On this treemap, the market is divided into sectors. Each sector has a number of stocks. The area of the sector is divided up into a number of rectangles with the size of the rectangle being directly proportional to the market cap of the company (the market cap is the number of shares available times the price of a share). The color of the rectangle shows the current change in price. Hovering over a rectangle shows more detail on the company in question.
As you can see, a vast amount of information is presented to the user:
- Company placement by sector
- Market cap of every company in the index
- Current status of the stock (up/down) every company
- Overall view of the market today
- Overall view of every sector today
This is an incredibly useful tool. On any given day, you can easily see which sectors and companies are doing well, and which are doing badly.
In this article, you’ll use a similar visualization technique to build an application that renders whatever data you like.
Various Java Treemap Visualizations
| Figure 2: This is the University of Maryland Treeview visualization. |
The homepage of the original Treemap work is at Ben Schneidermann’s at the University of Maryland, and it may be found here. His implementation, which generates a treemap of the contents of a specific directory on your hard drive may be downloaded from this site. Figure 2 shows a screenshot of the output of this treemap.
In addition to this one there are a couple of excellent open source offerings available on www.sourceforge.net. This Java Treemap, for instance, provides some excellent options on how to present your treemap. A screenshot from this version is shown in Figure 3.
| Figure 3: Here is the Java Treemap screen capture. |
JTreemap is another available open source Treemap application. Though written in French, it’s very flexible and easy to use. In the sourcecode for this article, I have included a version of its XML instance document and schema translated into English, as well as one of the Java modules of the original download. If you aren’t comfortable with the French software, you can use these versions.
Building a Treemap Application with JTreemap
The JTreemap project makes it very simple to build a treemap. Indeed, if you structure your XML according to the DTD that is provided, the application will automatically render a treemap for you.
This XML format is very straightforward, and consists of a nested tree of data which the data item nodes containing a value, a weight and a label. An example of the XML is shown in the code below. The full XML document is available here.
50 2 . . 300.0 11.0 22.0 -5.0 | Figure 4: This shows JTreemap’s visualization of population data. |
Figure 4 shows what happens when the application is run with the above data. The visualization draws a treemap with boxes representing the size of the population of the country (specified using the ‘weight’ node), colors representing the delta of the population (specified using the ‘value’ node) and a label associated with the country (specified using the label node).
Visualization Equals Data Simplification
This method is an incredibly useful way of looking at data. It allows for a much better overview of complex data than you get with traditional visualizations. The JTreemap Applet provides an easy way to implement this technology. Use the basics you have gleaned here to explore the next level and add value to your data applications.
