Panel basics

Panel is designed to make plots interactive. To create an interactive dashboard we need a few elements. We need widgets to allow the user to change the view. We need layouts (Panel objects) to arrange and order visuals. And we need a function(s) that generates the visuals with the input parameters generated from the widgets. And we need the interact function to generate the interactive user interface. The interactive dashboard can be deployed to a html page by using the panel object .show() method.

Notebook display

The interactive dashboards can be showed in your notebook. However, the panel.extension first has to be loaded to initialize the required JavaScript in the notebook context.

pn.extension()

Widgets

Widgets allow the user to change the view of the plot by making selections, clicking buttons and typing into textboxes. Panel supports different type of widgets. Widgets such as radiobuttons, autocomplete input, Date or numeric sliders bounded by a start and end value, Boolean buttons like a toggle, Datetime pickers, Textinputs, Colorpickers and even widgets that interact with dataframes. All the widget options can be found here: https://panel.holoviz.org/user_guide/Widgets.html

Functions

The function should be a function that generates a visual, for instance a plot and that takes arguments as input for creating the visual. It is wise to use default arguments to generate a default visual in case nothing is selected or set by the user

def flowers_plot(x='sepal_length', y='sepal_width', c='species'): 
   return flowers.hvplot.scatter(x,y, c=c)

Layouts

Panel layout objects allow combining plots into a Row, Column, Tabs or a Grid .

There are four main types of Panel layout objects:

• Row: A Row arranges a list of components horizontally.

• Column: A Column arranges a list of components vertically.

• Tabs: A Tabs object lays out a list of components as selectable tabs.

• GridSpec: A GridSpec lays out components on a grid.

# creating an interactive user interface object 
explorer, flower_plot = pn.interact(flowers_plot, x=columns, y=columns)

# create a row with two columns, the x,y explorer and the plot
row = pn.Row(pn.Column("Iris Explorer", explorer), 
             flower_plot)

interactive plot in a row layout

#create a grid
flowergrid = pn.GridSpec(sizing_mode='stretch_both', max_height=800)
flowergrid[0,0] = explorer
flowergrid[0,1] = flower_plot
flowergrid[1,0] = pn.pane.DataFrame(flowers)
flowergrid[1,1] = "image.jpg"

interactive plot in a grid layout

Interact function

The interact function (panel.interact) automatically creates user interface controls for exploring code and data interactively. It combines the function with the input by calling the interact method with the function and input.

pn.interact(visualization_function, input_from_a_widget)

see also https://panel.holoviz.org/user_guide/Interact.html

If no widget is specified it will generate automatically a widget from the input parameters of the given function

def find_outliers(variable='Temperature', window=30, sigma=10, view_fn=mpl_plot):
    avg = data[variable].rolling(window=window).mean()
    residual = data[variable] - avg
    std = residual.rolling(window=window).std()
    outliers = (np.abs(residual) > std * sigma)
    return view_fn(avg, avg[outliers])
    
pn.interact(find_outliers)

interactive plot with generated value sliders for windows and sigma parameters

Deployment

.show()

The .show() method starts a bokeh server instance then opens a browser tab to point to it

Launching server at http://localhost:53908

You can also deploy the dashboard from a for other users viewable server see the documentation https://panel.holoviz.org/user_guide/Server_Deployment.html or https://panel.holoviz.org/user_guide/Deploy_and_Export.html

Putting it all together

Putting it all together we can use the following as a base for a dashboard

# import visualization libraries
from matplotlib.figure import Figure
from matplotlib.backends.backend_agg import FigureCanvas
import panel.widgets as pnw
import panel as pn 
import hvplot.pandas


#import dataset
from bokeh.sampledata.iris import flowers

#get the columns with the features
columns = list(flowers.columns[:-1])

#create the function
def flowers_plot(x='sepal_length', y='sepal_width', c='species'):
    return flowers.hvplot.scatter(x,y, c=c)


#create the interactive elements
explorer, flower_plot = pn.interact(flowers_plot, x=columns, y=columns)

#define the grid layout
flowergrid = pn.GridSpec(sizing_mode='stretch_both', max_height=800)
flowergrid[0,0] = explorer
flowergrid[0,1] = flower_plot
flowergrid[1,0] = pn.pane.DataFrame(flowers)
flowergrid[1,1] = "image.jpg"

#deploy
flowergrid.show()