Updating multiple plots in Jupyter notebook when a slider value changes

Question

I want to update multiple imshow plots in a jupyter notebook when an IntSlider value changes. What is wrong with by code?

Those are the versions I am using

import ipywidgets as widgets
import matplotlib.pyplot as plt
import matplotlib
import numpy as np

print( 'versions: ipywidgets = ', widgets.__version__)
print( '          matplotlib = ', matplotlib.__version__)
print( '          numpy      = ', np.__version__)

This is the corresponding output

versions: ipywidgets =  8.0.4
          matplotlib =  3.5.0
          numpy      =  1.20.3

And here is the code

def plot_image(ax, seed=0):
    np.random.seed(0)
    data2plot = np.random.rand(5,5)
    img = ax.imshow(data2plot)

fig = plt.figure( figsize=(12,6) )
ax1 = fig.add_subplot(1,2,1)
ax2 = fig.add_subplot(1,2,2)

plot_image(ax1)
plot_image(ax2)

plt.show()

slider = widgets.IntSlider(value=0, min=0, max=100, step=1)

# callback function for the slider widget
def update(change):
    plot_image(ax1, seed=0)
    plot_image(ax2, seed=change.new)
    fig.canvas.draw()

# connect update function to slider widget using the .observe() method, observing changes in value attribute
slider.observe(update 'value')
slider

There is a slider, see the screenshot, and I can change its value, but it has no effect. What am I missing?

Answer 1

Putting together your code what Markus suggested with addressing two other issues with your implementation, this should work:

%matplotlib ipympl
import ipywidgets as widgets
import matplotlib.pyplot as plt
import matplotlib
import numpy as np

def plot_image(ax, seed=0):
    np.random.seed(seed)
    data2plot = np.random.rand(5,5)
    img = ax.imshow(data2plot)

fig = plt.figure( figsize=(12,6) )
ax1 = fig.add_subplot(1,2,1)
ax2 = fig.add_subplot(1,2,2)

plot_image(ax1)
plot_image(ax2)

plt.show()

slider = widgets.IntSlider(value=0, min=0, max=100, step=1)

# callback function for the slider widget
def update(change):
    plot_image(ax1, seed=0)
    plot_image(ax2, seed=change.new)
    fig.canvas.draw()

# connect update function to slider widget using the .observe() method, observing changes in value attribute
slider.observe(update, 'value')
slider

Details:

• Markus covered the np.random.seed(seed).
• Syntax error: slider.observe(update 'value') should read slider.observe(update, 'value')
• As detailed here, you need the interactive matplotlib backend. See the basic example in the documentation where you need %matplotlib ipympl.

Answer 2

I guess the problem is that the value of seed is never used within the function plot_image. The first line of this function should probably be np.random.seed(seed) instead of np.random.seed(0). With this change, the second subplot should update when the slider is moved (the first panel will stay the same, since the seed is 0 independent of the slider value).