Pyplot slider not updating plot lines in Jupyter Notebook

Question

I am trying to use the 4th order Runge-Kutta method to approximate the solution to a system of 1st order ODEs. The RK4 implementation itself is correct I think, if kind of janky - the plots it produces look like the right shape anyway - but it relies on 3 constants c, d and h, and I want to see how the solution changes as I vary those constants. I could just manually change them, but I wanted to make it interactive using sliders.

I want there to eventually be a slider for each of the 3 constants; right now I can't get even a single slider, the one for c, to work correctly. It's definitely... present, I can slide it back and forth, but the graph doesn't update as the value of c changes - even though I have defined a Slider.on_changed for it and have remembered to re-call the RK4 function with the slider value and re-set the line data:

%matplotlib notebook

import matplotlib.pyplot as plt
from matplotlib.widgets import Slider, Button
import math

y_inits = [95, 5, 0]
c = 1
d = 5
fStepSize = 0.01
iLower = 0
iUpper = 1

tDerivatives = [
    lambda t, y1, y2, y3: -c*y1*y2,
    lambda t, y1, y2, y3: (c*y1*y2) - (d*y2),
    lambda t, y1, y2, y3: d*y2
]
   
tColors = ["blue", "red", "yellow", "green", "black", "purple"]
    
def RK4(c, d, fStepSize):
    
    tY_est = [ [y_inits[i]] for i in range(len(tDerivatives)) ]
    tT = [iLower]
    
    iRange = iUpper - iLower
    n = math.ceil(iRange / fStepSize)    
    
    for i in range(n+1)[1:]:
        
        fT_last = tT[i-1]
        fT_new = fT_last + fStepSize
        
        tK = []
        
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK1 = fStepSize * Derivative(fT_last, *[tY_est[k][i-1] for k in range(len(tY_est))])
            tK.append(["y'"+str(j+1), fK1])
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK2 = fStepSize * Derivative(fT_last + (fStepSize/2), *[tY_est[k][i-1] + (tK[k][1]/2) for k in range(len(tY_est))])
            tK[j].append(fK2)
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK3 = fStepSize * Derivative(fT_last + (fStepSize/2), *[tY_est[k][i-1] + (tK[k][2]/2) for k in range(len(tY_est))])
            tK[j].append(fK3)
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK4 = fStepSize * Derivative(fT_new, *[tY_est[k][i-1] + tK[k][3] for k in range(len(tY_est))])
            tK[j].append(fK4)    
        for j in range(len(tY_est)):
            fY_est_new = tY_est[j][i-1] + (( tK[j][1] + (2*tK[j][2]) + (2*tK[j][3]) + tK[j][4] )/6)
            tY_est[j].append(fY_est_new)
            
        tT.append(fT_new)

    return tT, tY_est 

fig, ax = plt.subplots()
plt.subplots_adjust(left=0.25, bottom=0.25)

tT_init, tY_est_init = RK4(c, d, fStepSize)
tPlots = [ ax.plot(tT_init, tY_est_init[i], marker=".", color=tColors[i]) for i in range(len(tDerivatives)) ]
plt.xlabel('t')
plt.ylabel('y(t)')
plt.title('h = '+str(fStepSize))

axfreq = fig.add_axes([0.25, 0.1, 0.65, 0.03])
c_slider = Slider(
    ax=axfreq,
    label='c',
    valmin=0.1,
    valmax=30,
    valinit=c,
)

def Update(val):
    tT, tY_est = RK4(c_slider.val, d, fStepSize)
    for i in range(len(tPlots)):
        tPlots[i].set_data(tT, tY_est[i])
    fig.canvas.draw()

c_slider.on_changed(Update)

No error messages are thrown.

I should note that I have used this slider demo from the matplotlib site itself as a base for my slider implementation. And their code works just fine, in that the resultant plot lines are responsive to the slider change, even in my environment - so it's not just a matter of "matplotlib isn't interactive in Jupyter Notebook".

I've also tried fiddling with the fig.canvas.draw() line in Update - maybe it's supposed to be draw_idle, or maybe I should use plt.draw(), or some other things, but none of them seem to have any effect.

What do I need to change to make the slider responsive?

EDIT: There turned out to be two problems, as discussed in the comments of Yacine's answer. Besides how the lines are being instantiated (see Yacine's answer), the other problem is that the above code defines RK4 to not actually pass the c_slider.val to the RK4 subroutines that needed them. So the graph was updating... but using the exact same global c variable every time.

The full solution, with all 3 sliders I wanted, is as follows:

%matplotlib notebook

import matplotlib.pyplot as plt
from matplotlib.widgets import Slider, Button
import math

y_inits = [95, 5, 0]
c_init = 1
d_init = 5
fStepSize = 0.01
iLower = 0
iUpper = 1

tDerivatives = [
    lambda c, d, t, y1, y2, y3: -c*y1*y2,
    lambda c, d, t, y1, y2, y3: (c*y1*y2) - (d*y2),
    lambda c, d, t, y1, y2, y3: d*y2
]
   
tColors = ["blue", "red", "yellow", "green", "black", "purple"]
    
def RK4(c, d, fStepSize):
    
    tY_est = [ [y_inits[i]] for i in range(len(tDerivatives)) ]
    tT = [iLower]
    
    iRange = iUpper - iLower
    n = math.ceil(iRange / fStepSize)    
    
    for i in range(n+1)[1:]:
        
        fT_last = tT[i-1]
        fT_new = fT_last + fStepSize
        
        tK = []
        
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK1 = fStepSize * Derivative(c, d, fT_last, *[tY_est[k][i-1] for k in range(len(tY_est))])
            tK.append(["y'"+str(j+1), fK1])
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK2 = fStepSize * Derivative(c, d, fT_last + (fStepSize/2), *[tY_est[k][i-1] + (tK[k][1]/2) for k in range(len(tY_est))])
            tK[j].append(fK2)
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK3 = fStepSize * Derivative(c, d, fT_last + (fStepSize/2), *[tY_est[k][i-1] + (tK[k][2]/2) for k in range(len(tY_est))])
            tK[j].append(fK3)
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK4 = fStepSize * Derivative(c, d, fT_new, *[tY_est[k][i-1] + tK[k][3] for k in range(len(tY_est))])
            tK[j].append(fK4)    
        for j in range(len(tY_est)):
            fY_est_new = tY_est[j][i-1] + (( tK[j][1] + (2*tK[j][2]) + (2*tK[j][3]) + tK[j][4] )/6)
            tY_est[j].append(fY_est_new)
            
        tT.append(fT_new)

    return tT, tY_est 

fig, ax = plt.subplots()
plt.subplots_adjust(left=0.25, bottom=0.25)

plt.xlabel('t')
plt.ylabel('y(t)')
plt.title('h = '+str(fStepSize))

c_slider = Slider(
    ax=fig.add_axes([0.25, 0.1, 0.65, 0.03]),
    label='c',
    valmin=0.1,
    valmax=5,
    valinit=c_init,
)
d_slider = Slider(
    ax=fig.add_axes([0.25, 0.06, 0.65, 0.03]),
    label='d',
    valmin=0.1,
    valmax=10,
    valinit=d_init,
)
h_slider = Slider(
    ax=fig.add_axes([0.25, 0.02, 0.65, 0.03]),
    label='h',
    valmin=0.001,
    valmax=0.1,
    valinit=fStepSize,
)

tPlots = [ax.plot([], [], marker=".", color=tColors[i])[0] for i in range(len(tDerivatives))]


def Update(val):
    fStepSize = h_slider.val
    tT, tY_est = RK4(c_slider.val, d_slider.val, fStepSize)
    for i in range(len(tPlots)):
        tPlots[i].set_data(tT, tY_est[i])
    fig.canvas.draw_idle()
    ax.relim()
    ax.autoscale_view()


c_slider.on_changed(Update)
d_slider.on_changed(Update)
h_slider.on_changed(Update)

tT_init, tY_est_init = RK4(c_init, d_init, fStepSize)
for i in range(len(tPlots)):
    tPlots[i].set_data(tT_init, tY_est_init[i])
ax.relim()
ax.autoscale_view()
plt.show()

I just realized the c value being passed to RK4() is never actually passed to the derivative functions, and that the derivatives are instead always just grabbing the global c variable! So I tried adding `c = c_slider.val` to the Update function, before it calls RK4 again, but that doesn't fix the problem either. — Arcaeca, Feb 15 '23 at 19:28
@Wayne fixed, it was an unnecessary line I guess I didn't fully select when going to delete it — Arcaeca, Feb 15 '23 at 20:11

score 1 · Accepted Answer · answered Feb 15 '23 at 19:10

I think the issue is that you need to set the data for the lines in the Update function. You're setting the data for the initial plot in the RK4 function, but that won't update the plot when the slider value changes.

 fig, ax = plt.subplots()
plt.subplots_adjust(left=0.25, bottom=0.25)

# create empty lists for the line data
tPlots = [ax.plot([], [], marker=".", color=tColors[i])[0] for i in range(len(tDerivatives))]

def Update(val):
    tT, tY_est = RK4(c_slider.val, d, fStepSize)
    for i in range(len(tPlots)):
        # set the data for each line
        tPlots[i].set_data(tT, tY_est[i])
    ax.relim()
    ax.autoscale_view()
    fig.canvas.draw()

# set the initial data for the lines
tT_init, tY_est_init = RK4(c, d, fStepSize)
for i in range(len(tPlots)):
    tPlots[i].set_data(tT_init, tY_est_init[i])

# add the slider
axfreq = fig.add_axes([0.25, 0.1, 0.65, 0.03])
c_slider = Slider(
    ax=axfreq,
    label='c',
    valmin=0.1,
    valmax=30,
    valinit=c,
)
c_slider.on_changed(Update)

plt.xlabel('t')
plt.ylabel('y(t)')
plt.title('h = '+str(fStepSize))
plt.show()

This changes what the plot looks like initially - basically extremely zoomed in near the beginning of one of the lines - until the slider updates for the first time. After that it still doesn't update the graph as the slider updates. — Arcaeca, Feb 15 '23 at 19:26
Hey I figured it out, your change was half of it (make the plot lines empty initially, plus the `ax.relim` and `ax.autoscale_view` additions) - the other half was that I needed to change the definition of the derivative functions to actually accept the c_slider val being passed to them, instead of always taking the same globally defined c value at the top of the script. — Arcaeca, Feb 15 '23 at 19:39
@Wayne oh okay. I edited the original post to show the full solution — Arcaeca, Feb 15 '23 at 20:04

score 0 · Answer 2 · answered Feb 15 '23 at 21:07

There's also the option of using ipywidgets' interactive and letting it handle making the connections to the sliders and being responsive. It will actually make the sliders itself when supplied by tuples of the values desired like in the examples I'll point to below; however, as you wanted the initial settings I defined the sliders here.
It should be something like this; however, I'm having a little problem putting it all together so that it makes the three lines correctly. And so for now, this just demonstrates the slider handling and isn't plotting correctly (?!?!). It does at least respond to changes in sliders:

# PLOT ISN'T WORKING RIGHT BUT SLIDERS SEEM RESPONSIVE.
from ipywidgets import interactive
import ipywidgets as widgets
import matplotlib.pyplot as plt
import numpy as np

from matplotlib.widgets import Slider, Button
import math

y_inits = [95, 5, 0]
c = 1
d = 5
fStepSize = 0.01
iLower = 0
iUpper = 1

tDerivatives = [
    lambda t, y1, y2, y3: -c*y1*y2,
    lambda t, y1, y2, y3: (c*y1*y2) - (d*y2),
    lambda t, y1, y2, y3: d*y2
]
   
tColors = ["blue", "red", "yellow", "green", "black", "purple"]
    
def RK4(c, d, fStepSize):
    
    tY_est = [ [y_inits[i]] for i in range(len(tDerivatives)) ]
    tT = [iLower]
    
    iRange = iUpper - iLower
    n = math.ceil(iRange / fStepSize)    
    
    for i in range(n+1)[1:]:
        
        fT_last = tT[i-1]
        fT_new = fT_last + fStepSize
        
        tK = []
        
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK1 = fStepSize * Derivative(fT_last, *[tY_est[k][i-1] for k in range(len(tY_est))])
            tK.append(["y'"+str(j+1), fK1])
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK2 = fStepSize * Derivative(fT_last + (fStepSize/2), *[tY_est[k][i-1] + (tK[k][1]/2) for k in range(len(tY_est))])
            tK[j].append(fK2)
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK3 = fStepSize * Derivative(fT_last + (fStepSize/2), *[tY_est[k][i-1] + (tK[k][2]/2) for k in range(len(tY_est))])
            tK[j].append(fK3)
        for j in range(len(tDerivatives)):
            Derivative = tDerivatives[j]
            fK4 = fStepSize * Derivative(fT_new, *[tY_est[k][i-1] + tK[k][3] for k in range(len(tY_est))])
            tK[j].append(fK4)    
        for j in range(len(tY_est)):
            fY_est_new = tY_est[j][i-1] + (( tK[j][1] + (2*tK[j][2]) + (2*tK[j][3]) + tK[j][4] )/6)
            tY_est[j].append(fY_est_new)
            
        tT.append(fT_new)

    return tT, tY_est 



def f(c, d, fStepSize):
    #[l.remove() for l in ax.lines]
    fig, ax = plt.subplots()
    plt.subplots_adjust(left=0.25, bottom=0.25)
    plt.xlabel('t')
    plt.ylabel('y(t)')
    plt.title('h = '+str(fStepSize))
    tPlots = [ax.plot([], [], marker=".", color=tColors[i])[0] for i in range(len(tDerivatives))]

    tT, tY_est = RK4(c, d, fStepSize)
    for i in range(len(tPlots)):
        tPlots[i].set_data(tT, tY_est[i])
    plt.grid(True) #optional grid
    plt.show()

cc=widgets.FloatSlider(min=0.1,max=5,value=1) #Create an FloatSlider such that the range is [0.1,5] and default is 1
dc=widgets.FloatSlider(min=0.1,max=10,value=5) #Create an FloatSlider such that the range is [0.1,10] and default is 5
hc=widgets.FloatSlider(min=0.01,max=1,value=0.1) #Create an FloatSlider such that the range is [0.01,1] and default is 0.1
    
interactive_plot = interactive(f, c=cc, d=dc, fStepSize=hc)
interactive_plot

This is based on here and here.

It'd be much better at selling ipywidgets' interactive if it actually made the same plot, but maybe eventually I'll see the issue and fix it.

Pyplot slider not updating plot lines in Jupyter Notebook

2 Answers2