Fixing axis of one subplot

[iacisme]

Hi;

I have an issue when I’m displaying a grey scale image in a subplot. Some images come out upside like this:

I created a checkbox to flip the image, but when I do, it also flips the histogram like this:

Does anyone know how to set it so that the histogram y-axis stays fixed, and only the image y-axis changes?

Here is the code I’m using in the callback to display these images:

@widgets.interact(
    imageIndex = imageSelector_dropDown,
    enableAutoRange = autoRange_checkbox
)
def inspectImageArray(imageIndex, enableAutoRange):
    # Create a figure object to hold subplots
    fig = go.Figure().set_subplots( 
        rows = 1,
        cols = 2,
        horizontal_spacing = 0.1
    )

    # A plotly heatmap is used to display greyscale images
    fig.add_trace(
        go.Heatmap(
            z = image_list[imageIndex], 
            colorscale = "gray",
            reversescale = False,
        ),
        row = 1,
        col = 1
    );

    # Use the checkbox to flip the image
    # if upside down
    if enableAutoRange == True: 
        fig.update_yaxes(
            autorange = "reversed"
        ); 

    # Create a histogram of pixel values
    fig.add_trace(
        go.Histogram(
            x = image_list[imageIndex].ravel(),
            xbins = dict(
                start = 0,
                end = 255,
                size = 1
            ),
            marker_color = 'black',
        ),
        row = 1,
        col = 2
    );
    
    # Updates the displayed size of the image
    fig.update_layout(height = 500, width = 1100);
    fig.update_xaxes(matches = None, showticklabels = True)
    fig.update_yaxes(matches = None, showticklabels = True)

    # Display the image
    fig.show()

Can anyone suggest how I could do this? The only other option that I can think of is reversing the order of the numpy array before it’s read by the histogram?

Thank you!

[Berbere]

Hey @iacisme,

You may want to try from plotly.subplots import make_subplots instead of go.Figure().set_subplots()

You can find more about subplots here.

Cheers!

[Harsh2]

Hello @iacisme
Try using the code below to help orient the axis in your desired orientation.

fig.update_yaxes(autorange="reversed")

[AIMPED]

Hi @iacisme the magic you are searching for is the selector parameter.

By using

fig.update_yaxes(
    autorange = "reversed"
)

You are reversing all y- axes. Keep in mind that by using subplots, you have several y-axes. By using

fig.update_yaxes(
    {"autorange": "reversed"},
    selector=0
)     

you are reversing the first y-axis only.

An example:

import plotly.graph_objects as go
import numpy as np

# create image
black = np.zeros(shape=(10,20))
white = np.ones_like(black)
img = np.concatenate((black, white))

# create figure
fig = go.Figure().set_subplots( 
    rows = 1,
    cols = 2,
    horizontal_spacing = 0.1
)

# add traces, the image is the same for both traces
fig.add_trace(
    go.Heatmap(
            z = img, 
            colorscale = "gray",
            reversescale = False,
        ),
        row = 1,
        col = 1
    )
fig.add_trace(
    go.Heatmap(
            z = img, 
            colorscale = "gray",
            reversescale = False,

        ),
        row = 1,
        col = 2
    )

# reversing only the first axis by selector argument 0
fig.update_yaxes({'autorange': "reversed"}, selector=0)

mrep reverse axes

[iacisme]

@AIMPED

fig.update_yaxes(
    {"autorange": "reversed"},
    selector=0
)   

Thank you! This solved my issue.

I appreciate your help. Yesterday I tried reading a bunch of plotly API literature with no luck.

Cheers!

[AIMPED]

There’s a lot of knowledege bundled in the forums

You’re welcome!