Add slider to plotly heatmap animation- python

Question

I want to add a slider to the heatmap animation. I have five different data frames (each for one frame). The data frame is as below:

	a	b
a	530	300
b	NaN	200
c	NaN	100
d	100	444

Each frame is actually time data. For simplicity, I used the count. This is my code so far. The animation works so does the play and pause button. I am able to create a slider but it doesn't work. Am I missing something? Can anyone help?

  # Convert the dictionaries to dataframes
    df = {}
    frames = 0
    for i in caller_callees:
        df[i] = pd.DataFrame(dict[i], dtype=int).T
        frames += 1

    fig = go.Figure(
        data=[go.Heatmap(z=df[0].values, x=df[0].columns, y=df[0].index)],
        layout=go.Layout(
            # autosize=True,
            height=800,
            yaxis={"title": 'callers'},
            xaxis={"title": 'callees', "tickangle": 45, 'side': 'top'},
            title="Frame 0",
            title_x=0.5,
            updatemenus=[
                dict(
                    type="buttons",
                    buttons=[dict(label="Play",
                                  method="animate",
                                  args=[None]
                                  ),
                             dict(label="Pause",
                                  method="animate",
                                  args=[None,
                                        {"frame": {"duration": 0, "redraw": False},
                                         "mode": "immediate",
                                         "transition": {"duration": 0}}],
                                  )
                             ],
                ),

            ],

        ),
        frames=[go.Frame(data=[go.Heatmap(z=df[i])],
                         layout=go.Layout(title_text=f"Frame {i}"))
                for i in range(0, frames)]
    )

    # finally create the slider
    fig.update_layout(
        sliders=[{"steps": [{"args": [
                                        [f],
                                        {"frame": {"duration": 0, "redraw": False},
                                         "mode": "immediate",
                                         "transition": {"duration": 300}
                                         },
                                    ],
                             "label": f, "method": "animate", }
                            for f in range(0, frames)],
                  }],
    )

score 2 · Accepted Answer · answered Aug 07 '21 at 10:06

generated list of data frames that correspond to what you describe
key use of name in go.Frames() constructor and sliders when defining args

import pandas as pd
import numpy as np
import plotly.graph_objects as go

dfs = [pd.DataFrame(index=list("abcd"), columns=list("ab"),
                    data=np.where(np.random.randint(1, 8, [4, 2]) == 1,
                                  np.nan, np.random.randint(1, 500, [4, 2]),)
                   )
       for i in range(10)]

# generate the frames. NB name
frames = [
    go.Frame(data=go.Heatmap(z=df.values, x=df.columns, y=df.index), name=i)
    for i, df in enumerate(dfs)
]

go.Figure(data=frames[0].data, frames=frames).update_layout(
    updatemenus=[
        {
            "buttons": [{"args": [None, {"frame": {"duration": 500, "redraw": True}}],
                         "label": "Play", "method": "animate",},
                        {"args": [[None],{"frame": {"duration": 0, "redraw": False},
                                          "mode": "immediate", "transition": {"duration": 0},},],
                         "label": "Pause", "method": "animate",},],
            "type": "buttons",
        }
    ],
    # iterate over frames to generate steps... NB frame name...
    sliders=[{"steps": [{"args": [[f.name],{"frame": {"duration": 0, "redraw": True},
                                            "mode": "immediate",},],
                         "label": f.name, "method": "animate",}
                        for f in frames],}],
    height=800,
    yaxis={"title": 'callers'},
    xaxis={"title": 'callees', "tickangle": 45, 'side': 'top'},
    title_x=0.5,

)

Add slider to plotly heatmap animation- python

1 Answers1