Treemap


Others
Comparisons, Hierarchy, Part-to-a-whole, Proportions

What is it?

Treemaps are an alternative way of visualising the hierarchical structure of a https://datavizcatalogue.com/methods/tree_diagram.html while also displaying quantities for each category via area size. Each category is assigned a rectangle area with the subcategory rectangles nested inside.

When a quantity is assigned to a category, its area size is in proportion to that quantity and any other quantities within the same parent category in a part-to-whole relationship. Also, the area size of the parent category is the total of its subcategories. If no quantity has been assigned to a subcategory, then its area is divided equally amongst the other subcategories within the parent category.
The way rectangles are divided and ordered into sub-rectangles depends on the tiling algorithm used. Many tiling algorithms have been developed, but the “squarified algorithm”, which keeps each rectangle as square-like as possible is the one commonly used.
Ben Shneiderman originally developed Treemaps as a way of visualising a vast file directory on a computer, without taking up too much space on the screen. This makes Treemaps a more compact and space-efficient option for displaying hierarchies, that can give a quick overview of the hierarcal structure. Treemaps are also great at comparing the proportions between categories via their area size.
The downside to Treemaps is that they doesn’t show the hierarchal levels as clearly as other charts that visualise hierarchal data (such as a Tree Diagram or https://datavizcatalogue.com/methods/sunburst_diagram.html).

When to use it?

 

Tools to create the Charts

Code-based:
https://www.amcharts.com/demos/drill-down-treemap/https://docs.anychart.com/Basic_Charts/Treemap_Charthttps://echarts.apache.org/examples/en/index.html#chart-type-treemaphttps://d3-graph-gallery.com/treemap.htmlhttps://jsfiddle.net/fusioncharts/dhauz809/?utm_source=visualisingdata&utm_medium=websitehttps://developers.google.com/chart/interactive/docs/gallery/treemaphttps://www.highcharts.com/demo/treemap-large-datasethttps://support.softwarefx.com/jChartFX/article/2501514#!2501218https://jscharting.com/examples/chart-types/treemap/cushion-shading/https://observablehq.com/@d3/treemaphttps://plotly.com/javascript/treemaps/https://www.python-graph-gallery.com/treemap/https://r-graph-gallery.com/treemap.htmlhttps://vega.github.io/vega/examples/treemap/https://live.yworks.com/demos/layout/treemap/index.htmlhttps://www.zingchart.com/docs/chart-types/treemap

Webapp:
https://datamatic.io/https://www.datylon.com/product/chart-library/treemaphttps://flourish.studio/https://docs.google.com/https://infogram.com/create/treemaphttps://plotdb.com/chart/1006/https://www.rawgraphs.io/learning/how-to-make-a-treemaphttps://slemma.com/https://vizzlo.com/create/treemap

Desktop App:
Microsoft Office
https://help.tableau.com/current/pro/desktop/en-us/buildexamples_treemap.htm

 

Similar Charts : Circle Packing (Data%20Visualisation%20cfe04a5761eb434cace32c6033e3a4e3/Circle%20Packing%20c1e2fc01f4a04057beac20ac935ab03f.csv), Sunburst Diagram (Data%20Visualisation%20cfe04a5761eb434cace32c6033e3a4e3/Sunburst%20Diagram%20564c9912b0b24583ac8d9a76a6e500d1.csv), Marimekko Chart (Data%20Visualisation%20cfe04a5761eb434cace32c6033e3a4e3/Marimekko%20Chart%2074a2ad2616994e5e87f34c73ff56c66d.csv)