Equivalent of "plt.imshow": zoomable + movable + selection of region-of-interest


This allows to plot a 2D array with values:

import streamlit as st
import numpy as np
a = np.random.random((200, 200))
st.image(a, caption='Test')

Does Streamlit already include ways to:

  • zoom in the plot
  • move in the plot
  • display a colorbar
  • + be able to draw a selection rectangle for a specific Region Of Interest (ROI)

a bit like matplotlib’s pyplot plt.imshow(...) for the 3 first points.


Not with matplotlib but plotly can do the trick. Only drawback is that it is pretty slow for larger images.

import streamlit as st
import numpy as np
import plotly.express as px

im = np.random.random((200, 200))

labels = {
        'x':"X Axis Title",
        'y':"X Axis Title" ,
        'color':'Z Label'      
fig = px.imshow(im,aspect='equal',labels = labels)  


Thanks a lot @ksxx.

Would you also know how to run this code direction from Python, maybe with something like:

# or


In my case it’s not very handy to have to run it from terminal

streamlit run test.py

I prefer to run a Python script directly with

python test.py

That’s the way a streamlit script is started… You can however put the line in a windows bat file or similar as a shortcut.

Thanks @ksxx.
Is it imposible with the altair renderer? It seems so, I tried this:

import altair as alt, numpy as np, pandas as pd
x, y = np.meshgrid(range(-5, 5), range(-5, 5))
z = x ** 2 + y ** 2
source = pd.DataFrame({'x': x.ravel(), 'y': y.ravel(), 'z': z.ravel()})
alt.Chart(source).mark_rect().encode(x='x:O', y='y:O', color='z:Q').interactive().save('test2.html')

The produced test2.html is not interactive.

Solution, it’s possible: Heatmaps are non interactive · Issue #2712 · altair-viz/altair · GitHub.

Would anyone know for the “region of interest” selection rectangle part?