Updated cross-selector example to use Panel (#3960)

examples/gallery/apps/bokeh/crossfilter.py

@@ -1,28 +1,20 @@
 """
-An example demonstrating how to put together a crossfilter app based
-on the Auto MPG dataset. Demonstrates how to dynamically generate
-bokeh plots using the HoloViews API and replacing the bokeh plot
-based on the current widget selections.
+An example demonstrating how to put together a cross-selector app based
+on the Auto MPG dataset.
 """
 import holoviews as hv
+import panel as pn
+import panel.widgets as pnw
 
-from bokeh.layouts import row, widgetbox
-from bokeh.models import Select
-from bokeh.plotting import curdoc
 from bokeh.sampledata.autompg import autompg
 
 df = autompg.copy()
 
-SIZES = list(range(6, 22, 3))
 ORIGINS = ['North America', 'Europe', 'Asia']
 
 # data cleanup
-df.cyl = [str(x) for x in df.cyl]
 df.origin = [ORIGINS[x-1] for x in df.origin]
 
-df['year'] = [str(x) for x in df.yr]
-del df['yr']
-
 df['mfr'] = [x.split()[0] for x in df.name]
 df.loc[df.mfr=='chevy', 'mfr'] = 'chevrolet'
 df.loc[df.mfr=='chevroelt', 'mfr'] = 'chevrolet'
@@ -38,40 +30,20 @@
 continuous = [x for x in columns if x not in discrete]
 quantileable = [x for x in continuous if len(df[x].unique()) > 20]
 
-renderer = hv.renderer('bokeh')
-options = hv.Store.options(backend='bokeh')
-options.Points = hv.Options('plot', width=800, height=600, size_index=None,)
-options.Points = hv.Options('style', cmap='rainbow', line_color='black')
-
-def create_figure():
-    label = "%s vs %s" % (x.value.title(), y.value.title())
-    kdims = [x.value, y.value]
-
-    opts, style = {}, {}
-    opts['color_index'] = color.value if color.value != 'None' else None
-    if size.value != 'None':
-        opts['size_index'] = size.value
-        opts['scaling_factor'] = (1./df[size.value].max())*200
-    points = hv.Points(df, kdims=kdims, label=label).opts(plot=opts, style=style)
-    return renderer.get_plot(points).state
-
-def update(attr, old, new):
-    layout.children[1] = create_figure()
-
-x = Select(title='X-Axis', value='mpg', options=quantileable)
-x.on_change('value', update)
-
-y = Select(title='Y-Axis', value='hp', options=quantileable)
-y.on_change('value', update)
-
-size = Select(title='Size', value='None', options=['None'] + quantileable)
-size.on_change('value', update)
+x = pnw.Select(name='X-Axis', value='mpg', options=quantileable)
+y = pnw.Select(name='Y-Axis', value='hp', options=quantileable)
+size = pnw.Select(name='Size', value='None', options=['None'] + quantileable)
+color = pnw.Select(name='Color', value='None', options=['None'] + quantileable)
 
-color = Select(title='Color', value='None', options=['None'] + quantileable)
-color.on_change('value', update)
+@pn.depends(x.param.value, y.param.value, color.param.value, size.param.value) 
+def create_figure(x, y, color, size):
+    opts = dict(cmap='rainbow', width=800, height=600, padding=0.1, line_color='black')
+    if color != 'None':
+        opts['color'] = color 
+    if size != 'None':
+        opts['size'] = hv.dim(size).norm()*20
+    return hv.Points(df, [x, y], label="%s vs %s" % (x.title(), y.title())).opts(**opts)
 
-controls = widgetbox([x, y, color, size], width=200)
-layout = row(controls, create_figure())
+widgets = pn.WidgetBox(x, y, color, size, width=200)
 
-curdoc().add_root(layout)
-curdoc().title = "Crossfilter"
+pn.Row(widgets, create_figure).servable('Cross-selector')