UX Collective

We believe designers are thinkers as much as they are makers. https://linktr.ee/uxc

Follow publication

Member-only story

Using treemaps to understand hierarchical data

Kai Wong
UX Collective
Published in
7 min readApr 16, 2021

Several people walking in the dark while a several hanging lights are illuminating the rest of the room
Photo by Robynne Hu on Unsplash

I didn’t understand the point of treemaps until I worked with a large structured dataset.

As part of an extensive user research effort, we collected open-ended survey data from 130 participants. After standardizing the data and doing thematic analysis, the next topic was to try and figure out a way to visualize it.

After analyzing the data, it was a dataset with over 20 themes and several different categories of respondents. This was a much larger dataset than I was used to visualizing: what was I supposed to do?

That’s when I first started to learn about treemaps. To understand why let’s first examine why they were first created: what’s taking up all my hard drive space?

Understanding hierarchical data

In 1990, Ben Shneiderman, Human-Computer Interaction and Information Visualization pioneer, had an issue: his hard drive was full of files, but he didn’t know what was taking up so much space.

Rather than sort through several directories, he instead devised a method for visualizing the hierarchy of files by a technique called treemapping: this technique fills all available space with a hierarchy of rectangles of different sizes to represent how big a file was.

A visual representation of hard drive. It consists of large orange rectangles which represents folders of categories and smaller yellow rectangles of varying size representing files within these folders.
https://en.wikipedia.org/wiki/Treemapping

This allows you to make sense of what is on the hard drive quickly, but looking at it closely, we can see a problem: we can’t compare categories easily. To understand why let’s revisit the accuracy of visual cues.

A scale of visual cues by accuracy. Cues on the left, like length or position, are more accurate, while cues on the right, like area or volume, are considered less accurate.

According to Cleveland and McGill's research, humans can perceive specific cues more accurately than others. But looking at treemaps, we can see that it uses less accurate cues, such as area or volume, to showcase data.

This means that any comparisons we try and draw between data points are harder to see.

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Written by Kai Wong

7xTop writer in UX Design. UX, Data Viz, and Data. Author of Data-Informed UX Design: https://tinyurl.com/2p83hkav. Substack: https://dataanddesign.substack.com

Write a response