Treemap

Treemaps are used to display hierarchical data. The information is displayed as a cluster of rectangles varying in size and color, depending on their data value. The size of each rectangle represents a quantity, while the color can represent a number value or a category.

The Method To Use

The method is s.plt.treemap()

It must contain the following input variables:

order: int
data: Union[str, Dict, List[Dict]]

And can be personalized with the input variable:

radial: bool 
vertical: bool
title: Optional[str]
padding: Optional[List[int]]
rows_size: Optional[int] 
cols_size: Optional[int]
option_modifications: Optional[Dict]

Video demonstration of the treemap chart

Examples

1. Default Configuration

data = [{
    'name': 'root',
    'value': 500,
    'children': [
        {
            'name': 'Child A',
            'value': 150,
            'children': [
                {'name': 'Child A1', 'value': 100},
                {'name': 'Child A2', 'value': 30},
                {'name': 'Child A3', 'value': 20},
            ],
        },
        {
            'name': 'Child B',
            'value': 250,
            'children': [
                {'name': 'Child B1', 'value': 150},
                {'name': 'Child B2', 'value': 70},
                {'name': 'Child B3', 'value': 30},
            ],
        },
        {
            'name': 'Child C',
            'value': 100,
            'children': [
                {'name': 'Child C1', 'value': 70},
                {'name': 'Child C2', 'value': 20},
                {'name': 'Child C3', 'value': 10},
            ],
        },
    ],
}]

s.plt.treemap(data=data, order=0)

The chart has tooltips, showed when you hover the mouse over the figure. The area of each rectangle is proportional to that number.

2. Customization And Context

data = [{
    'name': 'WebStore',
    'value': 500,
    'children': [
        {
            'name': 'Info Tech',
            'value': 150,
            'children': [
                {'name': 'tablets', 'value': 100},
                {'name': 'laptops', 'value': 30},
                {'name': 'printers', 'value': 20},
            ],
        },
        {
            'name': 'Electronics',
            'value': 250,
            'children': [
                {'name': 'Camera', 'value': 150},
                {'name': 'Cell Phone', 'value': 70},
                {'name': 'GPS', 'value': 30},
            ],
        },
        {
            'name': 'Heating',
            'value': 100,
            'children': [
                {'name': 'Temp Control', 'value': 70},
                {'name': 'Filters', 'value': 20},
                {'name': 'Sensors', 'value': 10},
            ],
        },
    ],
}]

s.plt.treemap(
    data=data, order=0,
    title='Total Sales by Department - Webstore',
    rows_size=2, cols_size=10, padding='0,0,0,2',
)

Changing the Menu Path The menu_path can be modified.

Using the Grid

It is possible to use any number of rows.

Last updated