How to update X axis when scrolling plotly slider?

Question

The code splits a long image into frames. The goal is to make the y-axis values ​​real

import numpy as np
import plotly.graph_objects as go
import plotly.express as px

xg = np.random.rand(100, 22400)
# xg = np.random.rand(10, 1200)

base = px.imshow(xg, aspect="auto", color_continuous_scale="gray")
frameSize = 400

frames = [
    go.Frame(
        data=px.imshow(
            xg[:, x : x + frameSize], aspect="auto", color_continuous_scale="gray"
        ).data,
        name=x,
    )
    for x in range(0, xg.shape[1], frameSize)
]

base=go.Figure(data=frames[0].data, frames=frames, layout=base.layout).update_layout(
    updatemenus=[{
        "buttons": [{"args": [None, {"frame": {"duration": 500, "redraw": True}}],
                    "label": "▶",
                    "method": "animate",
                },],
        "type": "buttons",
        }],
    sliders=[{
        "steps": [{"args": [[d],
                            {"frame": {"duration": 0, "redraw": True},
                             "mode": "immediate",},],
                    "label": d,
                    "method": "animate",
                  }
                  for d in range(0, xg.shape[1], frameSize)
                 ],
        }],
)

base.show()

And another question, is it possible to change the values ​​of the Y axis. (I need to multiply all the values ​​of the Y axis by 0.4)

Answer 1

• layout can be specified per frame, so this technique can be used https://plotly.com/python/tick-formatting/#tickmode--array
• same approach used for scaling y-axis as well, just needs to be done on figure not each frame

import numpy as np
import plotly.graph_objects as go
import plotly.express as px

xg = np.random.rand(100, 22400)
# xg = np.random.rand(10, 1200)

base = px.imshow(xg, aspect="auto", color_continuous_scale="gray")
frameSize = 400

frames = [
    go.Frame(
        data=px.imshow(
            xg[:, x : x + frameSize], aspect="auto", color_continuous_scale="gray"
        ).data,
        layout={"xaxis":{"tickmode":"array","tickvals":[v for v in range(0, frameSize, frameSize//8)],
                        "ticktext":[v+x for v in range(0, frameSize, frameSize//8)]}},
      name=x,
    )
    for x in range(0, xg.shape[1], frameSize)
]

go.Figure(data=frames[0].data, frames=frames, layout=base.layout).update_layout(
    updatemenus=[{
        "buttons": [{"args": [None, {"frame": {"duration": 500, "redraw": True}}],
                    "label": "▶",
                    "method": "animate",
                },],
        "type": "buttons",
        }],
    sliders=[{
        "steps": [{"args": [[d],
                            {"frame": {"duration": 0, "redraw": True},
                             "mode": "immediate",},],
                    "label": d,
                    "method": "animate",
                  }
                  for d in range(0, xg.shape[1], frameSize)
                 ],
        }],
).update_layout(yaxis={"tickmode":"array", "tickvals":[v for v in range(0, xg.shape[0], xg.shape[0]//5)],
                      "ticktext":[round(v*.4,2) for v in range(0, xg.shape[0], xg.shape[0]//5)]})

using JPEG as a source

import skimage.io, skimage.color

image_filename = "https://www.termitnjak.com/en/media/logos/python.jpeg/@@images/image.jpeg"
image_numpy = skimage.io.imread( image_filename )
xg = skimage.color.rgb2gray(image_numpy)
xg = np.tile(xg, 10)