Treemaps for Charting

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

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

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.

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

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/

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()”

}

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.

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.

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