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

https://api.media.atlassian.com/file/3d2b59fd-b7a5-4b74-b22e-8121a30b9e23/artifact/video_1280.mp4/binary?client=acb7ab48-9de5-4698-bc3e-5e7ecb6bc0a7&collection=contentId-455770115&max-age=2592000&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhY2I3YWI0OC05ZGU1LTQ2OTgtYmMzZS01ZTdlY2I2YmMwYTciLCJhY2Nlc3MiOnsidXJuOmZpbGVzdG9yZTpjb2xsZWN0aW9uOmNvbnRlbnRJZC00NTU3NzAxMTUiOlsicmVhZCJdfSwiZXhwIjoxNjQ3NDM0MTIwLCJuYmYiOjE2NDc0MzExODB9.BwkrX-v-Jvkg7oXcWTO4tfgmvBCMM3dmh3r-LBNMftcapi.media.atlassian.com

Treemap chart settings and usage.

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 treemap chart is in the default configuration.

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',
)

Custom treemap

Featured Content

Changing the Menu Path The menu_path can be modified.

Using the Grid

It is possible to use any number of rows.