Jupyter widget: zoomable heatmap

📊 Plotly Python
1

Hi there,

I am working around with interactive histograms at the moment and I was wondering whether there is an event that fires when the user zooms in.

With a bit of searching, I found a solution by listening on changes to layout.xaxis and layout.yaxis, like in the example below.

N = 10
x = np.arange(N)
y = np.arange(N)
z = np.random.rand(N,N)

def heatmap(x, y, z):
    fig = go.FigureWidget(data=[go.Heatmap(x=x, y=y, z=z, zmin=-2, zmax=2)])
    
    # would like to have one callback only on zoom
    
    def handle_zoom_x(xaxis, xrange):
            # some long computation based on the selected data
    fig.layout.xaxis.on_change(handle_zoom_x, 'range')
    
    def handle_zoom_y(yaxis, yrange):
            # some long computation based on the selected data
    fig.layout.yaxis.on_change(handle_zoom_y, 'range')

    return fig

heatmap(x, y, z)

However, I would like to only listen to one event and get both the xrange and yrange as I am doing some long computation when the event is fired. I have something linke that in mind:

def heatmap(x, y, z):
    fig = go.FigureWidget(data=[go.Heatmap(x=x, y=y, z=z, zmin=-2, zmax=2)])
    
    def handle_zoom(xrange, yrange):
            # some long computation based on the selected data
    fig.layout.AXIS.on_change(handle_zoom, 'range')

    return fig

heatmap(x, y, z)

Is that possible?
Thanks for your help! =)

2

You can do that with f.layout.on_change(handle_zoom, 'xaxis.range', 'yaxis.range') since the on_change method can take an arbitrary number of arguments. See this example if you need more details.

1 Like
3

Great! Thank you very much!