Search code examples
chartstreemap

What is the name of this chart?


Is there a specific name for this kind of charts ? What JavaScript Charting Library has it ?

enter image description here


Solution

  • Look up treemaps / treemapping. This is how Wikipedia describes them:

    "In information visualization and computing, treemapping is a method for displaying hierarchical data by using nested rectangles. […]

    Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension of the data."

    One notable tool which utilizes this technique is WinDirStat. Their website also refers to this kind of visualization as a treemap.

    Given this term, you should be able to easily find a JavaScript library that can produce them by simply performing a web search. (I cannot recommend any of the following, since I haven't used them, but the linked Google search finds jsTreemap, Plotly.js, Google Charts, and a few others, on the very first result page.)

    If you're curious about the algorithm(s) behind these diagrams, these papers might be of interest: