Shimoku docs
Search…
Treemap chart
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 shimoku.plt.treemap()
It must contain the following input variables:
data: Union[str, DataFrame, List[Dict]]
menu_path: str
order: int
And can be personalized with the input variable:
filters: Optional[List[str]]
rows_size: Optional[int]
cols_size: Optional[int]
padding: Optional[List[int]]

Video demonstration of the treemap chart

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},
],
},
],
}]
shimoku.plt.treemap(
data=data_,
menu_path='test/treemap-1',
order=0,
rows_size=2, cols_size=12,
)
The result is:
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. Title for the chart, changing data, size and padding

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},
],
},
],
}]
shimoku.plt.treemap(
data=data_,
menu_path='test/treemap-2',
order=0,
rows_size=2, cols_size=10,
padding='0,0,0,2',
title='Total Sales by Department - Webstore',
)
The result is:
Hovering over the chart one can see, for instance, the number of sales of tablets (100).
Changing menu_path The menu_path can be modified.
It is possible to use any number of rows.
Copy link
On this page
The method to use
Examples