# 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).

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FBnIOthEPtcJbfFysmdxA%2FImagotype%20heatmap.png?alt=media&#x26;token=60cb0fab-cbb2-47a7-854d-bcd6242727ca" alt=""><figcaption><p>Imagotype of shimoku drawn with a heatmap</p></figcaption></figure>

### The Method To Use

The method is `s.plt.heatmap()`

It must contain the following input variables:

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

Accepts the following input variables as optional:

```python
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 <a href="#examples" id="examples"></a>

### 1. Default Configuration <a href="#id-1.-default-configuration" id="id-1.-default-configuration"></a>

Using this sample of data:

```python
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:

```python
s.plt.heatmap(
    data=data, 
    x='xAxis', y='yAxis', 
    values='value', order=0
)
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FFznbJY7VNFvx9aZeH9W1%2FHeatmap.png?alt=media&#x26;token=a1ac4824-c2c8-4497-a195-bcde45278753" alt=""><figcaption><p>Default configuration result </p></figcaption></figure>

### 2.  Customization And Context <a href="#id-1.-default-configuration" id="id-1.-default-configuration"></a>

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:

```python
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"
)
```

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FcowTYSZeH89laWn2d2yY%2FHeatmap%20Configured.png?alt=media&#x26;token=005fa2ad-f16b-4d66-bb64-e81920b9dda6" alt=""><figcaption><p>Custom configuration result</p></figcaption></figure>

## Variants

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

{% tabs %}
{% tab title="Clean" %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FWfZODeObvgJKsMfdiF30%2Fimatge.png?alt=media&#x26;token=68a2f11d-0afd-4543-ba39-af4bc2ab8567" alt=""><figcaption><p>variant="clean"</p></figcaption></figure>
{% endtab %}

{% tab title="Minimal" %}

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FhXcOoys7ElUrXZyW9SIA%2Fimatge.png?alt=media&#x26;token=f5ff6de3-0da8-4254-90ab-53982ea8aeb0" alt=""><figcaption><p>variant="minimal"</p></figcaption></figure>
{% endtab %}
{% endtabs %}

## Interesting Usages  <a href="#id-1.-default-configuration" id="id-1.-default-configuration"></a>

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.

<div><figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FSrRSePE1JjQVrxrgXKOE%2FChurn%20not%20acumulated.png?alt=media&#x26;token=c4c57495-4e9c-4916-995e-b5787e2aab91" alt=""><figcaption><p>Churn rate by subscription month</p></figcaption></figure> <figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FYiNdsp24m4OMetP4k9w0%2FChurn%20acumulated%20mean.png?alt=media&#x26;token=37ef7e31-5a73-4de6-b556-f7ffe197b8e0" alt=""><figcaption><p>Churn rate mean by subscription month</p></figcaption></figure></div>

* Perlin noise visualization:&#x20;

  In this example is very clear how it can be useful in heat-like visualizations.

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FZZk7ZbbZY6rgXuWAKVjc%2FPerlin%20noise%20heatmap.png?alt=media&#x26;token=5468d0fc-3796-490b-85de-b95f8d3151fa" alt=""><figcaption><p>Perlin noise is a wave-like random number generation algorithm. </p></figcaption></figure>

{% hint style="info" %}

### Featured Content

[changing-the-menu-path](https://docs.shimoku.com/dev/building-web-app/menu/changing-the-menu-path "mention")\
The `menu_path` can be modified.<br>

[using-the-grid](https://docs.shimoku.com/dev/building-web-app/grid/using-the-grid "mention")

It is possible to use any number of rows.
{% endhint %}