Dashboards#
So far in this tutorial, we have seen how to generate plots with .plot
or .hvplot
, how to compose these plots together into layouts and overlays, how to link selections between these plots, and how to control visualizations with Panel widgets using .interactive
. In this notebook, we will learn how to put all these pieces together to display (and serve) these components in a dashboard using Panel.
Panel pane
objects#
So far we have only seen Panel used as a source of widgets, but Panel also offers pane objects that can display various types of data (including output from just about any plotting library). First let’s import Panel and load the extension:
import pathlib
import pandas as pd
import panel as pn
import xarray as xr
import holoviews as hv
pn.extension('tabulator', template='material', sizing_mode='stretch_width')
import colorcet as cc
import hvplot.xarray # noqa
import hvplot.pandas # noqa
Here, we have enabled some optional functionality from Panel, specifically the tabulator
extension, and selected a default template controlling the overall look and feel of the final app. We also configured how plots should be sized by default (stretching to fit the width available). We’ll come back to the idea of a template later. Here, let’s look at a simple pane, e.g. a Markdown pane that displays Markdown-format text:
pn.pane.Markdown('## Earthquake Dashboard')
logo_path = pathlib.Path('../assets/usgs_logo.png')
The PNG
pane can display PNG images:
pn.pane.PNG(logo_path, height=130)
Using pn.panel
#
Instead of having to select the pane type explicitly, you can use the pn.panel
function that tries to guess the appropriate representation given the input. For instance, here we generate the same two panels using pn.panel
and grab handles on the resulting objects:
dashboard_title = pn.panel('## Earthquakes')
usgs_logo = pn.panel(logo_path, height=130)
Exercise#
Confirm that these two objects are of type Markdown
and PNG
respectively by using the type
built-in. Explore using different markdown syntax such as italic, bold or adding bullet points. Finally, try displaying your own PNG image with a PNG
pane, using either a local filename or URL.
Panel
objects#
In addition to pane
objects, Panel offers containers of type panel
which allow you to position your components into various layouts. For instance, we can put a small version of our title and logo into a Panel Row
layout:
header = pn.Row(dashboard_title, pn.pane.PNG(logo_path, height=40))
header
Next let us load the earthquake dataset and make a basic plot of the sort we have seen earlier on in the tutorial:
%%time
df = pd.read_parquet(pathlib.Path('../data/earthquakes-projected.parq'))
df = df.set_index('time').tz_convert(None).reset_index()
small_df = df.sample(frac=.01)
CPU times: user 5.99 s, sys: 2.72 s, total: 8.71 s
Wall time: 8.74 s
%%time
ds = xr.open_dataarray(pathlib.Path('../data/raster/gpw_v4_population_density_rev11_2010_2pt5_min.nc'))
cleaned_ds = ds.where(ds.values != ds.nodatavals).sel(band=1)
cleaned_ds.name = 'population'
CPU times: user 298 ms, sys: 133 ms, total: 431 ms
Wall time: 460 ms
sample_points = small_df.hvplot.points(x='longitude', y='latitude', c='mag', cmap=cc.CET_L4, responsive=True)
rasterized_pop = cleaned_ds.hvplot.image(rasterize=True, logz=True, clim=(1, None), responsive=True, min_height=400).opts(bgcolor='black')
earthquake_example = rasterized_pop * sample_points
Now we can combine this plot with our header in a pn.Column
:
mini_dashboard = pn.Column(header, earthquake_example)
mini_dashboard