By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
SmartData Collective
  • Analytics
    AnalyticsShow More
    data analytics in sports industry
    Here’s How Data Analytics In Sports Is Changing The Game
    6 Min Read
    data analytics on nursing career
    Advances in Data Analytics Are Rapidly Transforming Nursing
    8 Min Read
    data analytics reveals the benefits of MBA
    Data Analytics Technology Proves Benefits of an MBA
    9 Min Read
    data-driven image seo
    Data Analytics Helps Marketers Substantially Boost Image SEO
    8 Min Read
    construction analytics
    5 Benefits of Analytics to Manage Commercial Construction
    5 Min Read
  • Big Data
  • BI
  • Exclusive
  • IT
  • Marketing
  • Software
Search
© 2008-23 SmartData Collective. All Rights Reserved.
Reading: 10 Lessons in Treemap Design
Share
Notification Show More
Latest News
data analytics in sports industry
Here’s How Data Analytics In Sports Is Changing The Game
Big Data
data analytics on nursing career
Advances in Data Analytics Are Rapidly Transforming Nursing
Analytics
data analytics reveals the benefits of MBA
Data Analytics Technology Proves Benefits of an MBA
Analytics
anti-spoofing tips
Anti-Spoofing is Crucial for Data-Driven Businesses
Security
ai in software development
3 AI-Based Strategies to Develop Software in Uncertain Times
Software
Aa
SmartData Collective
Aa
Search
  • About
  • Help
  • Privacy
Follow US
© 2008-23 SmartData Collective. All Rights Reserved.
SmartData Collective > Business Intelligence > 10 Lessons in Treemap Design
Business Intelligence

10 Lessons in Treemap Design

JuiceAnalytics
Last updated: 2009/02/18 at 3:17 AM
JuiceAnalytics
10 Min Read
SHARE

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

More Read

ai in ppc advertising

5 Proven Tips for Utilizing AI with PPC Advertising in 2023

5 Ways AI Technology Has Disrupted Website Development
Fortifying Enterprise Digital Security Against Hackers Weaponizing AI
10 Ways How Artificial Intelligence Is Changing the Content Writing Landscape
How IoT Can Be Connected to Business Intelligence

Each box in a treemap can show two measures:

  • Size of the boxes should be a quantity measure. The…

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.

Smart Money's Map of the Market

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.

LabEscape Treemap

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.

Macrofocus treemap

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.

ILOG Elixir treemap

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

Juice treemap labels

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.

NY Times treemap legend

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).

The Hive Group treemap

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.

Many Eyes treemap

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.

Juice stimulus plan 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).

MIX online 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.

ILOG Elixir detail

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.

Panopticon treemap

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?

 Link to original post

JuiceAnalytics February 18, 2009
Share this Article
Facebook Twitter Pinterest LinkedIn
Share

Follow us on Facebook

Latest News

data analytics in sports industry
Here’s How Data Analytics In Sports Is Changing The Game
Big Data
data analytics on nursing career
Advances in Data Analytics Are Rapidly Transforming Nursing
Analytics
data analytics reveals the benefits of MBA
Data Analytics Technology Proves Benefits of an MBA
Analytics
anti-spoofing tips
Anti-Spoofing is Crucial for Data-Driven Businesses
Security

Stay Connected

1.2k Followers Like
33.7k Followers Follow
222 Followers Pin

You Might also Like

ai in ppc advertising
Artificial Intelligence

5 Proven Tips for Utilizing AI with PPC Advertising in 2023

10 Min Read
ai in web design
Artificial Intelligence

5 Ways AI Technology Has Disrupted Website Development

7 Min Read
Digital Security From Weaponized AI
Security

Fortifying Enterprise Digital Security Against Hackers Weaponizing AI

11 Min Read
AI-powered content writing tools
Artificial Intelligence

10 Ways How Artificial Intelligence Is Changing the Content Writing Landscape

8 Min Read

SmartData Collective is one of the largest & trusted community covering technical content about Big Data, BI, Cloud, Analytics, Artificial Intelligence, IoT & more.

ai in ecommerce
Artificial Intelligence for eCommerce: A Closer Look
Artificial Intelligence
giveaway chatbots
How To Get An Award Winning Giveaway Bot
Big Data Chatbots Exclusive

Quick Link

  • About
  • Contact
  • Privacy
Follow US

© 2008-23 SmartData Collective. All Rights Reserved.

Removed from reading list

Undo
Go to mobile version
Welcome Back!

Sign in to your account

Lost your password?