Is there a way to display multiple images for comparison pusporse?

📊 Plotly Python
1

Hi everyone, I browsed through the documentation and tried google searched but have not yet found a way to display multiple images in the same plot like matplotlib. I would appreciate it if you can show me how. Thanks!

For example here’s the output from matplotlib:

plotlyq
plotlyq987×255 130 KB

Below is the code I used to generate the above plots

fig = plt.figure(figsize=(15,10))
ax = fig.add_subplot(1,2,1)
ax.imshow(images_samples[0])
ax.set_title('Image')
ax1 = fig.add_subplot(1,2,2)
ax1.imshow(gt_colors[0])
ax1.set_title('Ground Truth')
2

Hi @tnguyen2921,

Yes, you can compare two images, including them in subplots:

from plotly.subplots import make_subplots
import plotly.graph_objects as go
from skimage import io
img = io.imread('https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Crab_Nebula.jpg/240px-Crab_Nebula.jpg')
fig = make_subplots(
    rows=1, cols=2)
fig.add_trace(go.Image(z=img), 1, 1)
fig.add_trace(go.Image(z=img), 1, 2)
2 Likes
3

Thanks for your prompt reply. I’m using Jupyter Notebook and cannot reproduce the plots using your codes. Is there any additional set up I need to have for plotly to output figures in Jupyter Notebook?

4

I’m using Jupyter Notebook, too, and Plotly version 4.6.0.

You can also set the horizontal_spacing to display the images closer or shared_yaxes=True, to display yaxis ticks only for the leftmost image:

fig = make_subplots(rows=1, cols=2,
                    horizontal_spacing=0.01, 
                    shared_yaxes=True)

What error is displayed when you are running the above code?

images
images700×450 107 KB

2 Likes
5

I think I figured out the problem. I needed to restart Jupyter Notebook as I downloaded the package when my notebook session was still on. Thank you very much for the help!

6

Can you also have two and more imshow displayed on the same grid?
imshow are more than just an image, they have some additional features like hovers and stuff hence my question.

7

@matan3 Sure, you can do that. Both, px.imshow()and go.Image() can be used to show images.

1 Like
8

Thanks, managed to do that!

1 Like