# 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 <a href="#the-method-to-use" id="the-method-to-use"></a>

The method is `s.plt.treemap()`

It must contain the following input variables:

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

And can be personalized with the input variable:

```python
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 <a href="#video-demonstration-of-the-treemap-chart" id="video-demonstration-of-the-treemap-chart"></a>

{% embed url="<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-LBNMftc>" %}
Treemap chart settings and usage.
{% endembed %}

## Examples <a href="#examples" id="examples"></a>

### 1. Default Configuration <a href="#id-1.-default-configuration" id="id-1.-default-configuration"></a>

```python
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.](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FzgyxvKZmQU80odGAqntV%2FTreemap.png?alt=media\&token=fb058349-6c10-49d4-a5b9-a571a06e9a32)

{% hint style="info" %}
The chart has tooltips, showed when you hover the mouse over the figure. The area of each rectangle is proportional to that number.
{% endhint %}

### 2. Customization And Context <a href="#id-2.-title-for-the-chart-and-changing-data" id="id-2.-title-for-the-chart-and-changing-data"></a>

```python
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](https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FhEVGtWOlfkP89H7xmhp9%2FTreemap%20Configured.png?alt=media\&token=3c2d1187-2763-403e-94fe-a1d658a8b6b5)

{% hint style="info" %}

### Featured Content

[changing-the-menu-path](https://docs.shimoku.com/dev/building-web-app/menu/changing-the-menu-path "mention")\
The `menu_path` can be modified.<br>

[using-the-grid](https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid "mention")

It is possible to use any number of rows.
{% endhint %}