Animated heatmap

📊 Plotly Python
1

I’m using Python 3.7 and plotly 4.9.0 in a Jupyter Notebook 6.0.2 and I would like to create an animated heatmap.

I have ten different dataframes, each has the shape of (343,900) and a datetimeindex. The ten dataframes represent data from ten consecutive days and I would like that the heatmaps of each day are shown in a progressive animation, when clicking the play button, e.g. heatmap day1 - heatmap day2 - heatmap day3 etc.

This is a sample dataframe:

                            A          B       C
    2020-05-15 12:01:00   -16.66       0.0    12.13
    2020-05-15 12:02:00    -2.42      10.3     9.34
    2020-05-15 12:03:00    -6.66      19.0     3.63
    2020-05-15 12:04:00    11.11      -4.1     1.01
    2020-05-15 12:05:00    -6.66       0.0     0.85

I’m using Python 3.7 and plotly 4.9.0 in a Jupyter Notebook 6.0.2 and I would like to create an animated heatmap.

I have ten different dataframes, each has the shape of (343,900) and a datetimeindex. The ten dataframes represent data from ten consecutive days and I would like that the heatmaps of each day are shown in a progressive animation, when clicking the play button, e.g. heatmap day1 - heatmap day2 - heatmap day3 etc.

This is a sample dataframe:

                             A          B       C
    2020-05-15 12:01:00   -16.66       0.0    12.13
    2020-05-15 12:02:00    -2.42      10.3     9.34
    2020-05-15 12:03:00    -6.66      19.0     3.63
    2020-05-15 12:04:00    11.11      -4.1     1.01
    2020-05-15 12:05:00    -6.66       0.0     0.85

This is the code I have so far:

#customized colorscale
colorscale_transparent = [
    [0.0, 'rgba(255, 0, 0, 0.0)'],
    [0.40, 'rgba(255, 0, 0, 0.0)'],

    [0.401, 'rgb(0, 76, 153)'],
    [1, 'rgb(255, 255, 0)'],
]

#ten dataframes - preprocessing:

z1 = df_day1.transpose() #values
x1 = df_day1.index       #datetimindex
y1 = df_day1.columns     #columnnames
#same procedure for all ten dataframes



#heatmap

fig = go.Figure(
    data=[go.Heatmap(
    x=x1, y=y1, z=z1, coloraxis="coloraxis")],
    layout = go.Layout(
        xaxis=dict(title_text="time"),
        yaxis=dict(title_text="column name"),
        title="Animated heatmap",
        coloraxis=dict(colorscale=colorscale_transparent),
        coloraxis_colorbar=dict(title="dB")))

fig.update_layout(
    updatemenus=[
        dict(type="buttons", visible=True,
        buttons=[dict(label="Play", method="animate", args=[None])]
            )])

#each frame should have the data of one dataframe
frames =[go.Frame(data=[go.Heatmap(x=x2, y=y2, z=z2)]),
             go.Frame(data=[go.Heatmap(x=x3, y=y3, z=z3)]),
             go.Frame(data=[go.Heatmap(x=x4, y=y4, z=z4)]),
             go.Frame(data=[go.Heatmap(x=x5, y=y5, z=z5)]),
             go.Frame(data=[go.Heatmap(x=x6, y=y6, z=z6)]),
             go.Frame(data=[go.Heatmap(x=x7, y=y7, z=z7)]),
             go.Frame(data=[go.Heatmap(x=x8, y=y8, z=z8)])
            ]
fig.show()

I tried to follow the examples in https://plotly.com/python/animations, the problem is that heatmap1 is created but when I press play for the animation, no data is shown. The only thing that changes is the colorscale, so I assume some kind of frames-data is processed.

I don’t really know where the problem is, my code, Jupyter notebook…

Thanks for your help!

2

Hi @lisnux welcome to the forum! I think you just need to add the frames to your figure, which is not done in the code you shared. See for example the minimal code below

import plotly.graph_objects as go
import numpy as np
N = 20
heatmaps = [np.random.random((20, 20)) for i in range(N)]
fig = go.Figure(data=go.Heatmap(z=heatmaps[0]),
               frames=[go.Frame(data=go.Heatmap(z=heatmaps[i])) for i in range(N)])
fig.update_layout(
    updatemenus=[
        dict(type="buttons", visible=True,
        buttons=[dict(label="Play", method="animate", args=[None])]
            )])
fig.show()
3

Thanks @Emmanuelle!
Yes I thought that the integration of the frames is the root of the problem. But I have a datetimeindex, which I would to be on the x-axis. This datetimeindex, however, is different for every frame, so I am not sure how to integrate this information? The code example you shared uses a list object as frame input, but i have pandas dataframes.
Should I just use the value information of the dataframes and also create a list object?
e.g.:

z = (dfA.to_numpy()).transpose() #numpy array
z1=z.tolist()

Or is there any other way to keep the datetimeinformation?