> For the complete documentation index, see [llms.txt](https://fennaf.gitbook.io/dataprocessing/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fennaf.gitbook.io/dataprocessing/data-visualisation/panel-basics.md).

# 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. 

```python
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

```python
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.

```python
# 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](/files/4ouUAnNdKJgx5HiKIf0Z)

```python
#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](/files/ZQGe3cW6w8uWIGGXafZg)

###

### 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.&#x20;

```python
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

```python
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](/files/e38TvTMZHcPcXDdHusuS)

### 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
> ```

{% hint style="info" %}
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>
{% endhint %}

### Putting it all together

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

```python
# 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()

```