Using multiple sliders to manipulate curves in a single graph

Question

I created the following Jupyter Notebook. Here three functions are shifted using three sliders. In the future I would like to generalise it to an arbitrary number of curves (i.e. n-curves). However, right now, the graph updating procedure is very slow and the graph itself doesn't seem to be fixed in the corrispective cell . I didn't receive any error message but I'm pretty sure that there is a mistake in the update function. Here is the the code

from ipywidgets import interact
import ipywidgets as widgets
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
from IPython.display import display


x = np.linspace(0, 2*np.pi, 2000)
y1=np.exp(0.3*x)*np.sin(5*x)
y2=5*np.exp(-x**2)*np.sin(20*x)
y3=np.sin(2*x)

m=[y1,y2,y3]

num_curve=3


def shift(v_X):
    v_T=v_X
    vector=np.transpose(m)
    print(' ')
    print(v_T)
    print(' ')
    curve=vector+v_T
    return curve

controls=[]
o='vertical'
for i in range(num_curve):
    title="x%i" % (i%num_curve+1)
    sl=widgets.FloatSlider(description=title,min=-2.0, max=2.0, step=0.1,orientation=o)
    controls.append(sl)
Dict = {} 
for c in controls:
    Dict[c.description] = c  
uif = widgets.HBox(tuple(controls))


def update_N(**xvalor):
    xvalor=[]
    for i in range(num_curve):
        xvalor.append(controls[i].value)
    curve=shift(xvalor)
    new_curve=pd.DataFrame(curve)
    new_curve.plot()
    plt.show()

outf = widgets.interactive_output(update_N,Dict)
display(uif, outf)

score 0 · Answer 1 · answered Sep 19 '18 at 20:39

Your function is running on every single value the slider moves through, which is probably giving you the long times to run you are seeing. You can change this by adding continuous_update=False into your FloatSlider call (line 32).

sl=widgets.FloatSlider(description=title,
                       min=-2.0, 
                       max=2.0, 
                       step=0.1,
                       orientation=o, 
                       continuous_update=False)

This got me much better performance, and the chart doesn't flicker as much as there are vastly fewer redraws. Does this help?

Using multiple sliders to manipulate curves in a single graph

1 Answers1