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 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]]
Treemap chart settings and usage.
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.
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).
It is possible to use any number of rows.
Last modified 8mo ago