How did treemaps first enter data visualization? How can we make them better? ZingChart presents a brief book review of The History of Trees and explains how to make interactive rectangular treemaps for better dataviz.

1. Treemaps for Charting

2. History of treemaps
Treemaps for charting2
http://www.bookoftrees.info/bt/
Figurative tree maps have been around for more
than 700 years.
But as computers have evolved in the 20th
century, a new type of treemap has emerged as
a way to represent hierarchical data.
The Book of Trees by Manuel Lima offers insight
into how treemaps:
• Have been used over time
• Are used by different industries

3. Rectangular treemap algorithm
Treemaps for charting3
According to Lima, a computer science professor changed the way treemaps were
used in 1990: from actual tree-like forms, to rectangles.
New algorithm: rectangles for branches, and smaller, nested rectangles for
subbranches.
Example of a treemap from the 1800’s

4. Shneiderman’s treemap
Treemaps for charting4
In 1991, Professor Ben Shneiderman’s treemap algorithm emerged and
more broad use of rectangular treemaps followed.
Lima says Shneiderman was making a compact visualization for directories.
“After trying a few node-link diagrams, he decided to explore ways of fitting
a tree into a space-constrained layout.”
His solution eliminated blank space and overlapping designs.

5. Financial treemaps
Treemaps for charting5
“A strategy of splitting the screen into rectangles in alternating horizontal
and vertical directions while navigating down the various hierarchical
levels.”
By showing the size of assets and using color to express statistical
values, this is a great application for treemaps in the financial industry.
View this video at:
https://www.youtube.com/w
atch?v=xy8tIqGbQ9c

6. Treemaps in ZingChart
Treemaps for charting6
Treemaps are easily configured in ZingChart. Each node is sized and shaded based
on the value of each node object. You can manually set these attributes.
Treemaps can also retrieve the full parent → child path of a node when a click event
is fired, based on a request from a client. Now, the node_click event returns a “path”
array, containing information about each of the clicked node’s parents.
View interactive example at:
http://www.zingchart.com/demos/kitche
n-sink-demo/

7. Gradient fills in treemaps
Treemaps for charting7
Lima example: “SequoiaView” is a data visualization of a hard disk.
In this treemap, the authors used a technique called cushioning to give each
rectangle a specific type of shading. This adds another dimension of hierarchy.
ZingChart offers JavaScript rules for styling treemap nodes. The “aspect-type”
attribute, which previously accepted the values “transition”, “random”, and
“palette”, will now accept a JavaScript function call:
“options”:{
“aspect-type”:”myfunc()”
}

8. Gradient shading
Treemaps for charting8
Ccolor gradients can be calculated based off of the values of each node.
Or you can simply return an object with fixed style attributes.
If you’re feeling saucy, you could probably come pretty close to emulating SequoiaView.

9. Other types of treemaps
Treemaps for charting9
Sunbursts are also known as:
• Radial treemaps
• Fan charts
• Nested pie charts
According to Lima, “Sunbursts
normally start with a central root, or
top level of hierarchy, with the
remaining ranks expanding outward
from the middle.”
Ranking is emphasized by
placement near the the center.

10. More on treemaps
Treemaps for charting10
Read More:
http://www.zingchart.com/blog/2015/03/10/treemaps-
charting/
Try treemaps with your data:
http://www.zingchart.com/try