Matplotlib + Ipywidgets Interact Example#

Thebe can display interactive plots using matplotlib and ipywidget’s interact.


Be sure to load require.min.js and Font Awesome 4 before any of your thebe activation code, it is required for the widget and its icons to work:

<link rel="stylesheet" href="" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" />
<script src=""></script>

Configure thebe and load it:

<script type="text/x-thebe-config">
    requestKernel: true,
    binderOptions: {
      repo: "matplotlib/ipympl",
      ref: "0.6.1",
      repoProvider: "github",
<script src=""></script>

Create a button to activate thebe:

<button id="activateButton" style="width: 120px; height: 40px; font-size: 1.5em;">
var bootstrapThebe = function() {
document.querySelector("#activateButton").addEventListener('click', bootstrapThebe)

Now add code cells between these HTML tags:

<pre data-executable="true" data-language="python"></pre>


Press the “Activate” button below to connect to a Jupyter server:

Here is a simple interactive sine plot example:

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

x = np.linspace(0,10)

def sine_func(x, w, amp):
    return amp*np.sin(w*x)

@widgets.interact(w=(0, 4, 0.25), amp=(0, 4, .1))
def update(w = 1, amp = 1):
    plt.ylim(-4, 4)
    plt.plot(x, sine_func(x, w, amp))