Update app.py

app.py

@@ -1,19 +1,47 @@
 import panel as pn
+import hvplot.pandas
 
-pn.extension()
+# Load Data
+from bokeh.sampledata.autompg import autompg_clean as df
 
-x = pn.widgets.Select(name='x', options=cols)
-y = pn.widgets.Select(name='y', options=cols, value='bill_depth_mm')
-n_clusters = pn.widgets.IntSlider(name='n_clusters', start=2, end=5, value=3)
+# Make DataFrame Pipeline Interactive
+idf = df.interactive()
 
-explanation = pn.pane.Markdown(...)
+# Define Panel widgets
+cylinders = pn.widgets.IntSlider(name='Cylinders', start=4, end=8, step=2)
+mfr = pn.widgets.ToggleGroup(
+    name='MFR',
+    options=['ford', 'chevrolet', 'honda', 'toyota', 'audi'], 
+    value=['ford', 'chevrolet', 'honda', 'toyota', 'audi'],
+    button_type='success')
+yaxis = pn.widgets.RadioButtonGroup(
+    name='Y axis', 
+    options=['hp', 'weight'],
+    button_type='success'
+)
 
-def plot(x, y, n_clusters):
-    ...
+# Combine pipeline and widgets
+ipipeline = (
+    idf[
+        (idf.cyl == cylinders) & 
+        (idf.mfr.isin(mfr))
+    ]
+    .groupby(['origin', 'mpg'])[yaxis].mean()
+    .to_frame()
+    .reset_index()
+    .sort_values(by='mpg')  
+    .reset_index(drop=True)
+)
 
-interactive_plot = pn.bind(plot, x, y, n_clusters)
+# Pipe to hvplot
+ihvplot = ipipeline.hvplot(x='mpg', y=yaxis, by='origin', color=["#ff6f69", "#ffcc5c", "#88d8b0"], line_width=6, height=400)
 
-pn.Row(
-    pn.WidgetBox(x, y, n_clusters, explanation),
-    interactive_plot
-)
+# Layout using Template
+template = pn.template.FastListTemplate(
+    title='Interactive DataFrame Dashboards with hvplot .interactive', 
+    sidebar=[cylinders, 'Manufacturers', mfr, 'Y axis' , yaxis],
+    main=[ihvplot.panel()],
+    accent_base_color="#88d8b0",
+    header_background="#88d8b0",
+)
+template.servable()