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 and ZingChart brings these rectangular treemaps to life.

tree image for treemaps
We recently read The Book of Trees by Manuel Lima to get some insight into how treemaps have been used over time, and how different industries employ rectangular treemaps in their specific applications.

The story of the treemap algorithm

The big change in the use of treemaps occurred in 1990. According to Lima, a computer science professor changed the way treemaps were used: from actual tree-like forms, to rectangles.

"While trying to resolve the problem of a filled hard disk, Ben Shneiderman decided to abandon the traditional node-link approach and instead explore a space-filling technique using a series of nested rectangles.”

This new algorithm used rectangles for branches, and smaller, nested rectangles for sub-branches. Lima credits this breakthrough for inspiring creativity that led to other modern dataviz changes.

Treemaps have become tools for computer science, math, and other fields. Now there are all sorts of variations, including vertical treemaps (icicle), radial, and hyperbolic. These variations have all been expanded in use by the addition of interactive features, as well.

Rectangular treemaps

Although a formal algorithm was still about 150 years away, Lima found examples of rectangular treemaps from the 1840’s.

example of one of the first rectangular treemaps from the 1800

But 1991 was the year when Professor Ben Shneiderman’s treemap algorithm emerged and more broad use of rectangular treemaps followed. Lima explains that Shneiderman was overtaken with the concept of a compact visualization for directories, to see where and how space was being used.

“After trying a few node-link diagrams, he decided to explore ways of fitting a tree into a space-constrained layout.”

The ultimate solution to his dataviz problem eliminated blank space and overlapping designs.

the first modern rectangular treemap, made in 1991

It was, “a strategy of splitting the screen into rectangles in alternating horizontal and vertical directions while navigating down the various hierarchical levels.”

Financial treemaps

One cool example in the book is “Fund of funds analysis dashboard.” We especially liked this because it is intended to be used online with interactivity.

By showing the size of assets and using color to express statistical values, this is a great application for treemaps in the financial industry.

Treemaps in ZingChart

Treemaps have been a staple of the ZingChart library for quite some time. In addition, we’re continually making updates and improvements to our treemap module.

Treemaps are easily and intuitively configured in ZingChart, with each node automatically sized and shaded based on the value of each node object. You can also manually set these attributes if you please.

Recently, we also made another update to enhance the usability of treemaps. We updated the treemap module to include the ability to 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.

Gradient fills in treemaps

Lima shares an interesting example of color in treemaps with “SequoiaView.” This is another data visualization of a hard disk. But in this treemap, the authors used a new technique called cushioning to give each rectangle a specific type of shading. This adds another dimension of hierarchy to the visualization.

The recent update to our library also introduced a similar feature in ZingChart. Now there are 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, E.G.:

"options":{  
   "aspect-type": myfunc()  
}  


Inside the function, complex color 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 the Sequoia View treemaps.

In the example above, we used the following set of rules: gist.github.com/NMastracchio/735ff8305008b9db5bee

Other variations on treemaps in ZingChart

Treemaps are not just rectangular. The Book of Trees shows examples of other types of modern treemaps.

Sunbursts

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.” But in these visualizations, ranking is emphasized by placement near the the center.

ZingChart can accommodate these types of visualizations with the chart type “nested pie.”

We turned the value boxes on in the example above to show you how these charts work in ZingChart. Series values are displayed across rings.

Branch out

We know rectangular treemaps are a popular chart type right now. Why not tell us about what sort of projects you’re working on? We’d be happy to help with charting, visualization, or any other considerations.