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 s.plt.heatmap()

It must contain the following input variables:

order: int
x: str
y: str
values: str
data: Union[List[Dict], pd.DataFrame, str]

Accepts the following input variables as optional:

color_range: Optional[Tuple[int, int]]
x_axis_name: Optional[str]
y_axis_name: Optional[str]
title: Optional[str]
padding: Optional[List[int]]
rows_size: Optional[int]
cols_size: Optional[int]
calculate_color_range: Optional[bool]
continuous: Optional[bool]
option_modifications: Optional[Dict]
variant: Optional[str]

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', 
    values='value', order=0
)

Default configuration result

2. Customization And Context

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, title="Heatmap",
    x='xAxis', y='yAxis', values='value',
    order=0, rows_size=3, cols_size=10,
    padding="0,0,0,1", x_axis_name="Day", y_axis_name="Hour"
)

Custom configuration result

Variants

By setting the parameter variant to the following values the appearance of the chart can be changed:

Clean

variant="clean"

Minimal

variant="minimal"

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.

Featured Content

Changing the Menu Path The menu_path can be modified.

Using the Grid

It is possible to use any number of rows.