how to show numpy array imshow plotly as frames?

Question

Create an array and make a picture out of it

xg = np.random.rand(100, 22400)
fig = px.imshow(a,aspect="auto", color_continuous_scale='gray')
out1.show()

The problem is that the array is long and the graph does not work correctly, is it possible to display the array in frames (since each value is already a pixel)?

Answer 1

• you can use animations to split into frames
• have sliced numpy array to create frames

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)
]

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)
                 ],
        }],
)