Shimoku docs
Search…
Tree chart
Tree charts or maps are primarily used to display data that is grouped and nested in a hierarchical (or tree-based) structure.

The method to use

The method is shimoku.plt.tree()
It must contain the following input variables:
data: Union[str, DataFrame, List[Dict]
menu_path: str
order: int
And accepts the following input variable as optional:
title: Optional[str]
rows_size: Optional[int]
cols_size: Optional[int]
padding: Optional[List[int]]

Video demonstration of the tree chart

Tree chart settings and usage.

Examples

1. Default configuration

data_ = [{
'name': 'root',
'value': 35,
'children': [
{
'name': 'Child A',
'value': 9,
'children': [
{'name': 'Child A1', 'value': 23},
{'name': 'Child A2', 'value': 72},
{'name': 'Child A3', 'value': 93},
],
},
{
'name': 'Child B',
'value': 56,
'children': [
{'name': 'Child B1', 'value': 39},
{'name': 'Child B2', 'value': 61},
{'name': 'Child B3', 'value': 71},
],
},
{
'name': 'Child C',
'value': 100,
'children': [
{'name': 'Child C1', 'value': 19},
{'name': 'Child C2', 'value': 66},
{'name': 'Child C3', 'value': 47},
],
},
],
}]
shimoku.plt.tree(
data=data_,
menu_path='test/tree-1',
order=0,
rows_size=2, cols_size=12,
)
The result is:
The tree chart is in the default configuration. Note the use of a tooltip.
The chart has tooltips, when you hover the mouse over the figure, for example in the figure, root: Child B.Child B3 71.

2. Title for the chart, changing data, size, and padding

data_ = [{
'name': 'Central Plant',
'value': 300,
'children': [
{
'name': 'Mach A',
'value': 100,
'children': [
{'name': 'Working', 'value': 95},
{'name': 'Maintenance', 'value': 5},
],
},
{
'name': 'Mach B',
'value': 150,
'children': [
{'name': 'Working', 'value': 135},
{'name': 'Maintenance', 'value': 15},
],
},
{
'name': 'Mach C',
'value': 50,
'children': [
{'name': 'Working', 'value': 40},
{'name': 'Maintenance', 'value': 10},
],
},
],
}]
shimoku.plt.tree(
data=data_,
menu_path='test/tree-2',
order=0,
rows_size=2, cols_size=10,
padding='0,0,0,2',
title='Status of Machines at Central Plant',
)
The result is:
The tree chart fully customized, note the space before the component using padding='0,0,0,2', and cols_size=10.
Hovering over the chart one can see, for instance, the number of machines of type B (150).
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