Tree map

A tree map displays nested hierarchical categories with their size represented by the size of a rectangle. The data accepted by treemap looks like this:

<treemap
    data='{
    "name": "root",
    "children": [
            { "name": "A", "value": 10 },
            { "name": "B", "value": 20 },
            { "name": "C", "children": [
                { "name": "C1", "value": 10 },
                { "name": "C2", "value": 5 },
                { "name": "C3", "value": 15 }
            ]},
            { "name": "D", "value": 40 }
        ]
    }
    '>
</treemap>

and looks like this:

The treemap allows drilling down into deeper levels of a hierarchy by clicking once to go down a level and once to return to the previous level.