hh

In [2]:

JS_FUNCTION = """

  function interactUpdate(div){
     var outputs = div.getElementsByTagName("div");
     var controls = div.getElementsByTagName("input");

     var value = "";
     for(i=0; i
       if((controls[i].type == "range") || controls[i].checked){
         value = value + controls[i].getAttribute("name") + controls[i].value;
       }
     }

     for(i=0; i
       var name = outputs[i].getAttribute("name");
       if(name == value){
          outputs[i].style.display = 'block';
       } else if(name != "controls"){
          outputs[i].style.display = 'none';
       }
     }
  }

"""

In [3]:

WIDGETS = """

 

   
1: one (I)
 
 

   
2: two (II)
 
 

   
3: three (III)
 
 

   
4: four (IV)
 

<input type="range" name="num" min="1" max="4", step="1" style="width:200px", onchange="interactUpdate(this.parentNode);" value="1">
</div>
"""

In [4]:

%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt
import matplotlib as mpl
from ipywidgets import interact, FloatSlider, RadioButtons

amplitude_slider = FloatSlider(min=0.1, max=1.0, step=0.1, value=0.2)
color_buttons = RadioButtons(options=['blue', 'green', 'red'])
# decorate the plot function with an environment from the UIs:
@interact(amplitude=amplitude_slider, color=color_buttons)
def plot(amplitude, color):
    fig, ax = plt.subplots(figsize=(4, 3),
                       subplot_kw={'axisbg':'#EEEEEE',
                                   'axisbelow':True})

    ax.grid(color='w', linewidth=2, linestyle='solid')
    x = np.linspace(0, 10, 1000)
    ax.plot(x, amplitude * np.sin(x), color=color,
        lw=5, alpha=0.4)
    ax.set_xlim(0, 10)
    ax.set_ylim(-1.1, 1.1)

In [ ]: