Interactive control of graphics with Panel

---

# Colab setup ------------------
import os, sys, subprocess
if "google.colab" in sys.modules:
    cmd = "pip install --upgrade bebi103 watermark"
    process = subprocess.Popen(cmd.split(), stdout=subprocess.PIPE, stderr=subprocess.PIPE)
    stdout, stderr = process.communicate()
# ------------------------------

import numpy as np
import pandas as pd

import scipy.stats as st

import bebi103

import holoviews as hv

import panel as pn

pn.extension()

hv.extension("bokeh")
bebi103.hv.set_defaults()

---

Because it is all about interactive plotting that requires a running Python engine, you really should download this notebook and run it on your machine. Note that Panel will not work on Google Colab as of October 2020.

Dashboarding with Panel

Data dashboards allow you to display your data with interactive controls. The viewer can adjust the controls to change what data you plot, change scales, zoom in on the data, etc. Panel is an open-source library that helps you create interactive dashboards, and has lots of useful widgets. Take a look at the Panel User Guide for more explanation on how to use Panel. You can find some cool examples of apps demonstrating Panel features here and a list of possible widgets and panes here.

We will begin our demonstration of use of Panel with….

A simple example

As an example of how you can build interactive dashboards, we will start by plotting the PDF of the Normal distribution.

def plot_gaussian_pdf(mu=0, sigma=1):
    x = np.linspace(-10, 10, 200)
    y = st.norm.pdf(x, loc=mu, scale=sigma)
    return hv.Curve(data=(x, y), kdims=["x"], vdims=["f(x ; µ, σ)"])


plot_gaussian_pdf()

Looks good, but what if we want to examine how the PDF changes with µ and σ? We can use Panel to create interactive sliders using the FloatSlider widget.

mu_slider = pn.widgets.FloatSlider(name="µ", start=-5, end=5, step=0.1, value=0)
sigma_slider = pn.widgets.FloatSlider(name="σ", start=0.1, end=5, step=0.1, value=1)


@pn.depends(mu_slider.param.value, sigma_slider.param.value)
def plot_gaussian_pdf(mu, sigma):
    x = np.linspace(-10, 10, 200)
    y = st.norm.pdf(x, loc=mu, scale=sigma)

    return hv.Curve(data=(x, y), kdims=["x"], vdims=["f(x ; µ, σ)"])


widgets = pn.Column(
    pn.Spacer(height=30), mu_slider, pn.Spacer(height=15), sigma_slider, width=300
)
pn.Row(plot_gaussian_pdf, pn.Spacer(width=15), widgets)

The sliders for µ and σ help us visualize how the Normal PDF depends on each variable.

Let’s go through each component. First, we define our widgets, mu_slider and sigma_slider. When building more complicated dashboards, we can look at the Panel documentation to choose which widgets we want to use.

Next, we define our plotting function, plot_gaussian_pdf(). Here we use Holoviews for simplicity. Notice the @pn.depends function decorator. This links the input from the widget to the computation in the function, so every time we change the interactive widget, the output of the function updates.

Finally, we set the layout of our dashboard. We can define rows and columns through pn.Row and pn.Column respectively. We can set their heights and widths and add spaces through pn.Spacer. You may have to play around a bit to get it in the format that looks best to you.

Computing environment

%load_ext watermark
%watermark -v -p numpy,scipy,pandas,bokeh,holoviews,panel,bebi103,jupyterlab

CPython 3.8.5
IPython 7.18.1

numpy 1.19.1
scipy 1.5.0
pandas 1.1.3
bokeh 2.2.3
holoviews 1.13.4
panel 0.9.7
bebi103 0.1.1
jupyterlab 2.2.6