"treemapping" refers to a visual representation of hierarchically structured data within a limited space (like a computer screen). The representation is done using rectangles arranged on top of each other. Each branch in the tree is represented by a rectangle that is, in turn, "tiled," with additional rectangles representing sub-branches. Each rectangle is proportional to the dimension of the data. For example, rectangles representing longer wait times will be larger than those representing shorter wait times. Color is another representation used, corresponding to a different/additional dimension of the information. This method effectively displays the interfaces between structures and uses encoding based on color and size.
Treemaps allow users to compare sub-structures, even at different depths within the overall structure, to identify patterns and anomalies that appear within these patterns and generally to see the big picture. It's important to note that they are not easy to implement and are rightfully considered the "Wild West" of interface design, obeying a few rules and breaking many others in the process. Treemaps were first designed in the 1990s by Ben Shneiderman and have continued to evolve since then. Here are some tips for implementing such maps:
Choose the right dimensions to represent through size and color: The box size should represent a quantitative dimension, so a ratio, date, or any dimension that cannot be displayed in a pie chart cannot be displayed here either. Color, on the other hand, can represent performance measurements or changes over time, such as revenue growth, customer satisfaction, and more.
Labels should add value: Inserting labels into the map can be challenging, and if not careful, they can create a mess. When displaying many squares, we may only see their beginnings or sometimes even a single letter. Therefore, consider how necessary it is to add a label and whether it can be displayed visually in a way that allows it to be seen and thus provides added value.
Labels should stand out against map colors. One way to address this issue and avoid a color mess is to create emphasis around the text.
Self-explanatory legend: Ensure that the legend explains the meaning of color and size.
The color range should match the information: In cases where the results are bidirectional, both positive and negative (for example, growth over a period), it is recommended to use two color scales. However, it's better to use a single scale when the measurement starts from zero.
A simple display of unit details: When hovering over a unit, it's recommended that its full details be shown via a tooltip.
Sources:
Kommentarer