To fly is to be frustrated. If you've been traveling for long, you no doubt have your opinions about what airlines and airports are the biggest sources of suffering. Whether it is weather delays, getting stuck on the tarmac due to air traffic, maintenance problems, or missing a connection, it all feels outside of your control.

But a little knowledge can help. The Bureau of Transportations has maintained a giant database of air traffic information for decades of flights -- point of origin, flight times, flight delays, type of delay, etc. It is 72 gigabytes of data...just the type of data that needs some visualization. JuiceKit to the rescue.

We've put together a pair of visualizations that can make this data accessible to your average non-data-monkey traveler:

• Treemap uses size to represent the number of flights by airline and by point of origin. The color is used to show delay time -- we've got all sorts of delay metrics, each of which tells an interesting story.

• US map uses size to represent the number of flights and the color to display delay time. Filtering by airline yields additional details.

There are some interesting insights that pop-out when you build a visualization this data.

• The different airline strategies are quickly apparent in the treemap. Hub-and-spoke airlines (Delta, Continental) have one or two dominant boxes (origin location), surrounded by lots of small locations. A point-to-point airline like Southwest looks entirely different with lots of similarly sized boxes.

• Flipping between delay types uncovers some unexpected results. For example, you might expect weather delays to be heavily correlated by airport. The data shows something a little different: Comair appears to be abnormally impacted by weather delays -- as if a dark cloud chases around their airplanes. While Comair might be overstating weather delay data to prevent paying for meal vouchers, a more reasonable Wikipedia investigation suggests that Comair flies smaller weather-susceptible Bombardier airplanes.

A few details about this demo for our technical audience:

For those of you following JuiceKit development, this is a demo of some of the newer features available in our open source Juicekit 1.2 distribution, and some of the features that will be coming to the 1.3 version. Treemap styling is now elegant, crisp, and allows for white borders, fixing a couple rendering bugs. There is a new tree-level depth feature that can make it easier to navigate treemaps with lots of layers. The airports map demonstrates a geographic layout built using GeoLayout JuiceKit and Flare components. A major improvement demonstrated by the airline-selector dropdown is the ability to keep nodes consistent between data reloads. This allows us to animate the nodes even though they are generated by our new LiveQuery component.

We were excited to see that Federal CIO Vivek Kundra and his team used our open-source JuiceKit treemap on the recently released Federal IT Spending Dashboard.

While Tim O'Reilly mistakenly gave credit for all the visualizations to Fusion Charts, we know better. A mother always recognizes her baby. I bet Google also recognized their Motion Chart.

Now that I’ve got treemaps on the brain, I keep noticing how many things could be better understood using this visualization technique. A few examples:

We thought it would be a nice demonstration to use data from the 1997 and 2002 US Economic Census (unfortunately 2007 isn't out yet) to see what kind of stories bubble forth. The demonstration was built using a component from JuiceKit™, our recently open sourced Software Development Kit (SDK) for building Information Experience™ applications. The SDK can be used by web designers and developers to build graphically rich and interactive information displays. JuiceKit currently integrates with Adobe Flex to create components that are easy to implement and aesthetically pleasing.

Check out the treemap here.

Here are a few of the macro-trends that I found:

• The rise of CostCo, Amazon, and Home Depot: This time period saw strong growth in warehouse clubs and superstores, online retailers (“electronic shopping”), and home centers.
• From manufacturing to services economy: Most of the growth was in service sectors (financial services, healthcare, professional services) while manufacturing was shrinking.
• Productivity gains, even in adversity: For struggling sectors, the employee declines almost always outpaced the sales declines — squeezing more sales per employee.
• Demographic shifts: Homes and services for the elderly were among the strongest areas of growth in the category of “healthcare and social assistance.”

And there were lots of little insights as well:

• No wonder hospital TV shows are so popular: Hospitals are the largest single employer as a business-type.
• Starbucks and Krispy Kreme steal the unhealthy food dollar: Cookies and frozen yogurt retail saw a rapid decline while coffee and donut shops flourished.
• Goodbye stand-alone pump: Gas stations with convenience stores overtook the just-plain gas station.
• It can’t last, can it?: Mortgage broker payroll up 177%.

Once you understand how to read treemaps, they are great for exploring data like this: hierarchical with both quantity and quality-type measures. In a true testament to their power, my wife admitted this visualization was “kinda interesting.”

In the information visualization world, treemaps are on the rise…and justifiably so. Treemaps simultaneously show the big picture, comparisons of related items, and allow easy navigation to the details.

However, treemaps aren’t easy to get right. In contrast to basic charts where Stephen Few, Edward Tufte, and the Chart Chooser have laid down the law, treemaps roam the Wild West of interface design, obeying few rules, breaking many, and contributing to much infovis lawlessness.

Over the last year or so we’ve been building treemaps for our clients using our (recently open-sourced) Flex-based JuiceKit™ SDK. Over the course of these projects, we’ve thought a lot about the best way to make treemaps easy to understand and use. I won’t claim we have “cracked the code,” but we have gotten a feel for what works and what doesn’t. I want to share some examples of the good and the bad in treemap design, and hopefully gather some feedback so we can continue to evolve our thinking.

1. Choose the right measures for size and color

Each box in a treemap can show two measures:

• Size of the boxes should be a quantity measure. The measures should sum up along the hierarchical structure of the data. The sum of all the elements in one branch need to sum to the value of the branch as a whole. Therefore, you can’t use ratios or dates or any other measure you wouldn’t use in a pie chart.
• Color of the boxes is best suited to a measure of performance or change such as growth over time, average conversion rate, or customer satisfaction.

The King of Treemaps — Smart Money’s Map of the Market — offers a classic set of measures: size represents market cap; color represents change in market cap.

2. Space matters

Like a pie chart, size represents value in a treemap. In the following example from LabEscape, the category labels use space -- almost as if you added slices to a pie chart for labeling. This approach distorts the values by arbitrarily using space, making it harder for the viewer to visually compare sizes.

3. Labels should add value

Labels are hard to get right in a treemap. If you aren’t careful, labels can clutter up the treemap without adding useful information. This Macrofocus treemap wasn’t careful. Notice how the majority of labels get reduced to just a few letters or simply an ellipses (“…”). It would be better to show nothing until the user rolls over a box.

4. Labels must stand-out against treemap colors

One of the unique challenges of a treemap is that the labels need to stand out against a multicolored background. The ILOG Elixir treemap chooses to put the labels in a white text box. Unfortunately these text boxes look clunky, obscure some of the data, and don’t always fit into the allotted space.

To neutralize the contrast of the label to the background and ensure legibility, we created a “glow” around the text.

5. Explanatory legends

The New York Times folks know what they are doing when it comes to visualizations and the explanations around them. Below is the legend for a treemap about automobile sales. The meaning of size and color aspects are articulated in a small space.

6. Color ranges fit the data

The nature of your color measure should determine whether you need a one-sided or two-sided color range. In situations where the color measure has both negative and positive values (e.g. period over period growth), we typically use a two-sided color range with a light grey at the middle. A one-sided color range is a better fit when the measure starts at zero. The Hive Group treemap below offers an example where a two-sided color range (red to green) doesn’t make as much sense. This treemap is using color to show geographic area rank from 1 (largest) to 195 (smallest).

7. Show correlation by highlighting

One of the nice advanced features treemaps can offer is highlighting items that meet a user-specified criteria. In the Many Eyes treemap below, a search features identifies that companies that include the selected search term. Not only does this aid the navigational capabilities of the treemap, it allow allows you to see color, size, and location correlations for the selected items.

8. Show changes with animation

When you want to show variations in the data (e.g. changing time periods, filtering, changing measures), we’ve found that animation effects can help emphasize the differences. In our stimulus plan treemap, flipping between “cost” and “votes” to size the boxes results in an animated reorganization of the boxes. The boxes that get bigger move to the upper left and those that shrink move down and to the right. The effect helps the user track where things are moving and get an understanding of the overall differences in the treemap.

9. Simple presentation of node detail

When a user selects a node in a treemap, they should see the available detail either in a tooltip window or in the sidebar. If the detail is substantial in size, it is best to push it into a sidebar as we did with our Stimulus Plan Explorer. Simpler data can show up in a tooltip box like the beautifully designed tooltip created by MIX Online (notice how it flips around to stay within the borders of the treemap).

ILOG Elixir’s demo recognizes the need to see detail, but the execution is flawed. Selecting a box in their treemap highlights rows in a table, but the rows are not consolidated so you are lucky to see only one or two rows of highlighted data. Users need to scroll through a massive table to be able to see the complete details.

10. Gradually reveal detail

Panopticon has a powerful treemap offering, but their demo treemap has some missteps in showing the detail. In particular, they choose to show as much detail as possible, but in a faint grey text. When you roll-over a box, this text becomes legible just as a redundant pop-up box appears. Detail is shown before the user has even expressed any interest in the box. Better to wait until the user rolls over or clicks on a box, then show the details. In the meantime, let the size and color do the talking.

These are just a few of the design lessons we’ve considered in our work. Treemaps offer an opportunity to make vast and complex data accessible — but they depend on thoughtful, user-friendly design.

How about you? What are some of the design features you have seen in treemaps that you think are particularly effective in making the communication of information stronger?

We’ve seen a lot of anxiety about the huge price tag of the stimulus bill winding its way through Congress. Some of the complaining is about the difficulty in understanding the contents of this complex legislation. Certainly the stimulus bill looks impenetrable if you try to sift through 700 pages of details or even a 25-page summary. In response many people evaluate it based on their gut feel.

To help out, we’ve created the Juice Stimulus Bill Explorer — a treemap visualization that summarizes the House version of the stimulus bill and let’s you vote on its pieces.

The data in this treemap comes from the 1/15/09 summary (pdf) of the House of Representatives version of the American Recovery and Reinvestment Act. Selecting any box will show a description of the individual program, the price tag, and an opportunity to express whether you like or dislike the idea. The treemap boxes are sized by the proposed cost of each program. The color is based on the average level of support for the program from user votes.

Thanks to Scott Love for encouraging us to put this together.