Shimoku docs
Search…
⌃K

Heatmap

A heatmap uses three dimensions to represent information. The first two are the vertical and horizontal axis, and the last one is the value (and color) of the entry point. It takes the shape of a table, it can be used effectively to find relations and trends between variables (f.e. the heat of a point given its coordinates, the correlation between the two axis).
Imagotype of shimoku drawn with a heatmap

The method to use

The method is shimoku.plt.heatmap()
It must contain the following input variables:
data: Union[str, DataFrame, List[Dict]]
x: str
y: str
value: str
menu_path: str
order: int
Accepts the following input variables as optional:
title: Optional[str]
x_axis_name: Optional[str]
y_axis_name: Optional[str]
rows_size: Optional[int]
cols_size: Optional[int]
padding: Optional[List[int]]

Examples

1. Default configuration

Using this sample of data:
data = [
{
"xAxis": "Lunes",
"yAxis": "12 a.m",
"value": 9
},
{
"xAxis": "Lunes",
"yAxis": "6 p.m",
"value": 10
},
{
"xAxis": "Lunes",
"yAxis": "12 p.m",
"value": 9
},
{
"xAxis": "Lunes",
"yAxis": "6 a.m",
"value": 10
},
{
"xAxis": "Martes",
"yAxis": "12 a.m",
"value": 9
},
{
"xAxis": "Martes",
"yAxis": "6 p.m",
"value": 9
},
{
"xAxis": "Martes",
"yAxis": "12 p.m",
"value": 8
},
{
"xAxis": "Martes",
"yAxis": "6 a.m",
"value": 0
},
{
"xAxis": "Miercoles",
"yAxis": "12 a.m",
"value": 2
},
{
"xAxis": "Miercoles",
"yAxis": "6 p.m",
"value": 7
},
{
"xAxis": "Miercoles",
"yAxis": "12 p.m",
"value": 0
},
{
"xAxis": "Miercoles",
"yAxis": "6 a.m",
"value": 2
},
{
"xAxis": "Jueves",
"yAxis": "12 a.m",
"value": 4
},
{
"xAxis": "Jueves",
"yAxis": "6 p.m",
"value": 0
},
{
"xAxis": "Jueves",
"yAxis": "12 p.m",
"value": 1
},
{
"xAxis": "Jueves",
"yAxis": "6 a.m",
"value": 6
}
]
And this code to call the heatmap function:
s.plt.heatmap(
data=data,
x='xAxis', y='yAxis', value='value',
menu_path="test/heatmap test",
order=0
)
The result is:
Default configuration result

2. Title, axes names, legend, size and padding

It is possible to personalize the title of the chart, name for each axis, the legend, size and space occupied. One example can be obtained, using the same data as before, by running the following code:
s.plt.heatmap(
data=data,
x='xAxis', y='yAxis', value='value',
menu_path="test/heatmap test",
order=0, rows_size=3, cols_size=10,
padding="0,0,0,1",
title="Heatmap",
x_axis_name="Day", y_axis_name="Hour"
)
The result is:
Custom configuration result

3. Filter options

For filtering to work the data must have a dedicated field that can discriminate the values we want, her is an example of a .csv that uses the column filter to separate two heatmap plots:
Filter,xAxis,yAxis,value
Option 1,Lunes,12 a.m,9
Option 1,Lunes,6 p.m,10
Option 1,Lunes,12 p.m,9
Option 1,Lunes,6 a.m,10
Option 1,Martes,12 a.m,9
Option 1,Martes,6 p.m,9
Option 1,Martes,12 p.m,8
Option 1,Martes,6 a.m,0
Option 1,Miercoles,12 a.m,2
Option 1,Miercoles,6 p.m,7
Option 1,Miercoles,12 p.m,0
Option 1,Miercoles,6 a.m,2
Option 1,Jueves,12 a.m,4
Option 1,Jueves,6 p.m,0
Option 1,Jueves,12 p.m,1
Option 1,Jueves,6 a.m,6
Option 2,Lunes,12 a.m,6
Option 2,Lunes,6 p.m,4
Option 2,Lunes,12 p.m,8
Option 2,Lunes,6 a.m,15
Option 2,Martes,12 a.m,2
Option 2,Martes,6 p.m,6
Option 2,Martes,12 p.m,7
Option 2,Martes,6 a.m,4
Option 2,Miercoles,12 a.m,2
Option 2,Miercoles,6 p.m,7
Option 2,Miercoles,12 p.m,4
Option 2,Miercoles,6 a.m,2
Option 2,Jueves,12 a.m,8
Option 2,Jueves,6 p.m,0
Option 2,Jueves,6 a.m,10
The column Filter has two values, If we select all data pointed at by one of the Options, we get a complete heatmap plot. To use it with the SDK you have to pass the parameter filters to the function call, like so:
df = pd.read_csv('heatmap.csv')
filters: Dict = {
'order': 0,
'filter_cols': ['Filter']
}
s.plt.heatmap(
data=df, x='xAxis', y='yAxis', value='value',
menu_path=menu_path,
order=1,
filters=filters
)
Executing the previous code results in:
Heatmap with filters applied

4. Interesting usages

As mentioned before this type of plot is very useful and versatile, here we present some examples of possible usages that might be of your interest.
  • Cohort analysis:
    With the heatmap function we can create the typical cohort analysis plot, the following images show how we can visualize churn rates by cohorts.
Churn rate by subscription month
Churn rate mean by subscription month
  • Perlin noise visualization:
    In this example is very clear how it can be useful in heat-like visualizations.
Perlin noise is a wave-like random number generation algorithm.
Changing menu_path The menu_path can be modified.
It is possible to use any number of rows.
Last modified 1mo ago