On this page

Plot With Columns#

Download this notebook from GitHub (right-click to download).


import panel as pn
import hvplot.pandas

from bokeh.sampledata.autompg import autompg_clean

pn.extension(sizing_mode="stretch_width")

This example demonstrates how to combine multiple columns of widgets into an overall layout.

quant = [None, 'mpg', 'cyl', 'displ', 'hp', 'weight', 'yr']
cat = [None, 'origin', 'mfr', 'yr']
combined = quant+cat[1:]

x = pn.widgets.Select(name='x', value='mpg', options=combined)
y = pn.widgets.Select(name='y', value='cyl', options=combined)
color = pn.widgets.Select(name='color', options=combined)
facet = pn.widgets.Select(name='facet', options=cat)

@pn.depends(x, y, color, facet)
def plot(x, y, color, facet):
    cmap = 'Category10' if color in cat else 'viridis'
    return autompg_clean.hvplot.scatter(
        x, y, color=color or 'green', by=facet, subplots=True, padding=0.1,
        cmap=cmap, responsive=True, min_height=500, size=100
    )

settings = pn.Row(pn.WidgetBox(x, y, color, facet))
pn.Column(
    '### Auto MPG Explorer', 
    settings,
    plot,
    width_policy='max'
)

App#

Lets wrap it into nice template that can be served via panel serve dynamic_widget_values.ipynb

pn.template.FastListTemplate(
    site="Panel", title="Auto MPG Explorer", sidebar=[settings], 
    main=["This example demonstrates **how to combine multiple columns of components into an overall layout**.", plot]
).servable();
This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).