You are reading a MIX Online Opinion. In which we speak our minds. Hans Hugli Meet Hans Arrow

Lab Notes

4Comment Retweet


Apr 9, 2009 In Development By Hans Hugli

In working on Descry we wanted to have one of the samples show a TreeMap infographic that displayed some data in an interesting way. Since the elections were occurring right at the time of the Descry launch, Nishant suggested that we show inaugural data in our TreeMap. This TreeMap shows the incidence of occurrence of particular words or phrases grouped in the TreeMap visualization.

When we originally wrote the TreeMap code, I had ported the TreeMap control from a Windows Presentation Foundation sample in the WPF Bag o’ tricks that was a single tiered implementation of a Squarified TreeMap. What is a Squarified TreeMap? Historically TreeMaps tended to sort items ascending by their children’s weights; i.e. items are listed in decreasing order of size, but this leads to the problem of children becoming increasingly thin vertically or horizontally as ever more children are added to a TreeMap, and makes it difficult to get a sense of relative size and also is not very esthetically pleasing. This article written by Jonathan Hodgson explains the problem very clearly and graphically, and it also points to the original research that was done to dramatically improve the effectiveness of the TreeMap to communicate information. I found it to be very interesting, and I wanted to be sure to pass it along.

Though our inaugural sample shows data in a single tier, the TreeMap implementation supports the nesting n-tiers of data; i.e. where TreeMaps contain other TreeMaps, this enables display of tiered or nested data such as a hard drive directory or any kind of data that has a hierarchal tree signature.

Tim Heuer just recently pointed out some very timely financial information that is well suited for a TreeMap control. He was referring to Department of the Treasury funded transactions of the Capital Purchase Program (CPP). The government site shows a U.S. map that displays the sum total of transactions per state on a mouse over and a list of the transactions per state when you click on a particular state.

I need to step back a moment and say that the purpose of a visualization is to answer a question. In the CPP case the question that the author most likely ask was: What is the sum of transactions for a given state? The map infographic answers that question well, but suppose we wanted to ask: Which state is getting most of the money? The map infographic does not answer this well since you would need to literally mouse over every single state to find the largest dollar amount.

One of the ways to answer our new question is to use a TreeMap control since it can give a sense of how large the transactions are for a given state relative to one another. To make this possible the data needs to be grouped by state, and then by institution. The above government site provided a link to the XML source that was used to generate their graphic, so I thought I’d try to quickly put this data into a TreeMap infographic.

I find that getting data into a format that a particular type of visualization such as a TreeMap can consume,is typically the most time consuming part of creating a visualization or infographic. There are two routes,in my mind. Write the visualization control in a smart and generic way so that it can consume many types of data sources, or alternately write it so that it will only accept one type of data source (such as a specific XML format) and put the burden of munging that data into that specific format, on the user. Which one is more useful depends on what arena you come from; for a developer doing XML transforms is not too uncommon, but for someone less technical, a generic control would  be more useful. It seems with flexibility comes complexity.

For this case I did the later; I reformatted the XML to allow the TreeMap control to consume the CPP data. The infographic is posted, click on the image to see it.

A TreeMap Sample

View the sample, and download the source for this sample here available via the Descry project on CodePlex.

What are your thoughts about creating reusable infographics? What have you found to be effective? Let us know in a comment or you can always contact me, or Subscribe to our twitter feed if you’d like to stay in touch with us.

Follow the Conversation

4 comments so far. You should leave one, too.

Keith J. Farmer said on Apr 9, 2009

I''d take this the direction that the charting controls are going. IE, create a TreeMapSeries. It''s not terribly hard to define PropertyPaths to pull out label and weight information from the bound data. I wrote something similar, myself, a few months ago.

But, seriously, this should be compatible with the charting controls.

Karsten Januszewski said on Jun 23, 2009

BTW, this code ports to WPF. There is one line that you need to change if you grab the .zip Hans posted:
line 61 of TreeMapItem.cs should be:
typeof(TreeMapPanelItem), null

However, if you grab it from you should be good to go...

Luis Luis said on Dec 29, 2009

I’ve found treemaps to be incredibly useful for visualizing large sets of data as well. Unfortunately, my data isn’t always in a standard format (like XML). However, I’ve found a service that will automatically create treemaps for you…directly from my Excel or Google spreadsheets! I thought you guys might find this kind of thing useful…the service is from and is free for seven days.

Hans Hugli Hans Hugli said on Jan 1, 2010

Thank you for the link @Luis. Very nice!