Heatmaps disappearing during animation

📊 Plotly Python
1

I am trying to create an animation using plotly graph objects which has two traces. One of which being a heatmap the other being a scatter plot over the top. I am having an issue where i can only see both the scatters and the heatmap when the animation is paused. However when it plays the heatmap disappears and i can only see the scatters. Both traces work when they are on their own. I think this may have been an issue for a while and wondered if there was some fix?

2

Hi @Archie ,

Welcome to Plotly Community! :slightly_smiling_face:

If you don’t mind, can you provide us code that you have been working?
Maybe with your sample data or a dummy data, to help us reproduce your result.

Thank you.

3

Hi @farispriadi

Unfortunately i cannot share the specific code however it follows the vague lines of…

Initialize figure

Add trace for heatmap
Add trace for scattering points

Create frames by:
frame_data = [ ]
frame_data.append( go.heatmap…)
frame_data.append( go.scatter…)
return go.Frame(data=frame_data, layout=fig.layout)

fig.frames = frames

play/pause button stuff. (redraw = True)
fig.show()

4

Hi @Archie ,

I will try to refer two examples from plotly docs’s.

When I combine two traces heatmap and scatter then run play button, yes, the heatmap is disappeared.

The point that I found, why heatmap disappeared is the property duration of transition in buttons.
By setting transition duration to 0 and mode to immediate, heatmap will not disappeared.

My opinion, maybe about the limitations of heatmap that doesn’t support smooth inter-frame transition and only possible for scatter and bar.

So, when you set transition duration greater than 0, it will disappeared.

But, if you set transition duration to 0, it will just blink but not disappeared.

This limitations refer to page below:

So, this is my suggestion solution


import plotly.graph_objects as go

# this heatmap is from plotly docs's example
# https://plotly.com/python/heatmaps/#text-on-heatmap-points
heatmap_obj = go.Heatmap(
                    z=[[1, 20, 30],
                      [20, 1, 60],
                      [30, 60, 1]],
                    text=[['one', 'twenty', 'thirty'],
                          ['twenty', 'one', 'sixty'],
                          ['thirty', 'sixty', 'one']],
                    texttemplate="%{text}",
                    textfont={"size":20})


fig = go.Figure(
    data=[
    go.Scatter(x=[0, 1], y=[0, 1]),
    heatmap_obj
    ],
    layout=go.Layout(
        xaxis=dict(range=[-2, 5], autorange=False),
        yaxis=dict(range=[-2, 5], autorange=False),
        title="Start Title",
        updatemenus=[dict(
            type="buttons",
            buttons=[dict(label="Play",
                          method="animate",
                          args=[None, {
                                        "fromcurrent":True, 
                                        "transition": { 
                                                    "mode": "immediate",
                                                    "duration": 0}
                                        }
                                ])]
        )]
    ),
    frames=[go.Frame(data=[
                    go.Scatter(x=[1, 2], y=[1, 2]),
                    heatmap_obj
                ],
                traces=[0,1]
                ),
            go.Frame(data=[
                    go.Scatter(x=[1, 4], y=[1, 4]),
                    heatmap_obj
                ],
                traces=[0,1]
                ),
            go.Frame(data=[
                    go.Scatter(x=[3, 4], y=[3, 4]),
                    heatmap_obj
                ],
                traces=[0,1],
                layout = go.Layout(title="End Title")
            )])

fig.show()

Hope it can help you find best solution.

5

@farispriadi
I have tried this and i’m still having the same issue…

fig.update_layout(
        updatemenus = [
            dict(
                type="buttons",
                buttons=[
                    dict(
                        label="Play",
                        method="animate",
                        args=[
                            None,
                            {
                                "frame": {"duration": 0, "redraw": True},
                                "fromcurrent": True,
                                "transition": {"duration": 0, "easing" : "linear"},
                                "mode": "immediate"
                            },
                        ],
                    ),
                    dict(
                        label="Pause",
                        method="animate",
                        args=[
                            [None],
                            {"frame": {"duration": 0, "redraw": True}, "mode": "immediate", "transition": {"duration": 0}},
                        ],
                    )
                ],
            ),
        ],
    )
6

Hi @Archie ,

Instead of 0 you can try to change frame duration value to 500 ms
"frame": {"duration": 500, "redraw": True}.

if still doesn’t work, you can just remove "frame": {"duration": 0, "redraw": True} line, just make it default value, like my suggestion code above.

7

Hi @farispriadi

These two suggestions cause the heatmap to flicker in and out of being visible.

8

This issue persists from 2016 since Plotly animation was defined. The flickering is generated by redraw=True, because the plot is redrawn in each frame. If you set it on redraw=False, then the heatmap is displayed only before clicking the button. It’s only the Scatter plot that works in each frame without being redrawn.

9

@empet does this mean there is no way to have both the heatmap and the scatter plot showing during the animation.

10

Unfortunately, you cannot fix it. :frowning:

1 Like