# 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: ### 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](https://3745838051-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml0CVAxeQk2qLKeK6ki%2Fuploads%2FwvTW9OkQfyKdcG7dOEBR%2FScreenshot%202021-10-17%20at%2015.14.03.png?alt=media\&token=bbae985d-2123-4e00-96a8-9aa35c8d8dc3) ```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](https://3745838051-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml0CVAxeQk2qLKeK6ki%2Fuploads%2FxYPMsTD3LSrFbouPWJ6I%2FScreenshot%202021-10-17%20at%2015.17.34.png?alt=media\&token=53451239-4085-4345-a31b-3b4a21d38b51) ### ### 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. ```python pn.interact(visualization_function, input_from_a_widget) ``` see also 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](https://3745838051-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ml0CVAxeQk2qLKeK6ki%2Fuploads%2FASH2a9qXhG86uWZxza4a%2FScreenshot%202021-10-17%20at%2015.38.51.png?alt=media\&token=b3394fd5-1d82-4e35-b239-005d5b820164) ### 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 or {% 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() ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://fennaf.gitbook.io/dataprocessing/data-visualisation/panel-basics.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.