Plotly: Relabelling animation tick marks on the slider bar

Question

I'm using a slider bar to display a heatmap animation and wish to relabel the tick marks appearing on the slider bar.

There are 50 frames in my animation, and each matrix in the heatmap has dimension 7-by-7, where the seven rows/columns correspond to the list,labels=['A','B','C','D','D','F','G']. Moreover, each frame corresponds to a 5-second window in my application, so, for example, frame 3 corresponds to 15 seconds. Here's my simple example so far, where I'm mimicking the documentation at https://plotly.com/python/sliders/

import numpy as np
import plotly.graph_objs as go

N = 50
M = np.random.random((N, 7, 7))
labels=['A','B','C','D','D','F','G']
window_length=5

fig = go.Figure()

for step in range(N):
      fig.add_trace(
            go.Heatmap(x=labels,y=labels,z=M[step]))

fig.data[1].visible = True


# Create and add slider
steps = []
for i in range(len(fig.data)):
    step = dict(
        method="update",
        args=[{"visible": [False] * len(fig.data)},
        {"title": "Time: " + str(window_length*i)+' sec'}],)
    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    steps.append(step)


sliders = [dict(
    active=0,
    currentvalue={"prefix": "Time "},
    pad={"t": 5},
    steps=steps
)]


fig.update_layout(
    sliders=sliders)

fig.show()

This works fine and I get the image below for one of my frames:

I want to make two adjustments:

1. In the lower left corner, replace "Time-step 4" with the corresponding value in seconds, in that case "Time-20 seconds."
2. Relabel the ticks on the slider bar to be in seconds as well, e.g. the tick mark label "step-3" is replaced by "15"

I think my problem is that I quite understand is accomplished by

sliders = [dict(
        active=0,
        currentvalue={"prefix": "Time "},
        pad={"t": 5},
        steps=steps
        )]

Answer 1

In general, update slider labels and tick-marks by implementing an index2label method, as in:

def index2label(i:int) -> str:
    """Implement a map from label index to the label text here"""
    return f"Example Label {i}"

# Update the slider labels
fig.update_layout(
    sliders=[
        dict(
            currentvalue=dict(prefix="prefix: ", suffix="suffix: "),
            steps=[dict(label=index2label(i)) for i in range(len(fig.data))],
        )
    ]
)

In your case, update the prefix and suffix for the currentvalue dict, then use the following index2label method:

def index2label(i:int) -> str:
    return str(window_length * i))

Answer 2

• To show the seconds on the slider's tick labels you can set label=str(window_length * i) in the dictionary used to create the slider's steps.

• To show "Time: 20 seconds" above the slider you can set currentvalue={"prefix": "Time: ", "suffix": " seconds"} in the dictionary used to create the slider itself.

import numpy as np
import plotly.graph_objs as go

N = 50
M = np.random.random((N, 7, 7))
labels = ["A", "B", "C", "D", "D", "F", "G"]
window_length = 5

fig = go.Figure()

for step in range(N):
      fig.add_trace(go.Heatmap(x=labels,y=labels,z=M[step]))

fig.data[1].visible = True

steps = []
for i in range(len(fig.data)):
    step = dict(
        method="update",
        args=[{"visible": [False] * len(fig.data)},
        {"title": "Time: " + str(window_length * i)+" seconds"},],
    label=str(window_length * i))
    step["args"][0]["visible"][i] = True
    steps.append(step)

sliders = [dict(
    active=0,
    currentvalue={"prefix": "Time: ", "suffix": " seconds"},
    pad={"t": 5},
    steps=steps
)]

fig.update_layout(sliders=sliders)

fig.show()