Examples¶

Explore interactive examples below. Each example auto-runs on load — expand the code to view or edit it.

Basic¶

Hello World¶

Minimal Panel app using pn.panel() and .servable(). Demonstrates the simplest panel-live usage.

HoloViz¶

hvPlot¶

Interactive line chart from a pandas DataFrame using .hvplot.line() with a CheckButtonGroup for multi-column selection. Demonstrates hvPlot's concise API for interactive visualization.

Docs: hvPlot · Panel pane: pn.pane.HoloViews

HoloViews¶

HoloViews overlay of hv.Curve and hv.Scatter with styling via .opts(). Rendered via the Bokeh backend and displayed with pn.pane.HoloViews.

Docs: HoloViews · Panel pane: pn.pane.HoloViews

Colorcet¶

Browse perceptually uniform colormaps from the colorcet library. Uses pn.widgets.Select and pn.widgets.IntSlider to explore palettes interactively.

Docs: Colorcet

PyViz¶

Altair Scatter Plot¶

Interactive scatter plot with color-coded categories using Altair's declarative grammar. Expression mode — returns the chart object as the last expression, no .servable() needed.

Docs: Altair · Panel pane: pn.pane.Vega

Bokeh Stock Ticker¶

Simulated stock price history with moving average overlay. Demonstrates time series visualization with date formatting and legend.

Docs: Bokeh · Panel pane: pn.pane.Bokeh

DeckGL 3D Heatmap¶

3D hexagonal aggregation layer using pn.pane.DeckGL with a JSON spec. Loads point data from a URL and renders extruded hexagons over a dark basemap. Expression mode — returns the deck_gl pane as the last expression.

Docs: deck.gl · Panel pane: pn.pane.DeckGL

ECharts Bar Chart¶

Apache ECharts integration via pn.pane.ECharts. Demonstrates the Panel ECharts pane with a horizontal bar chart and data zoom.

Docs: Apache ECharts · Panel pane: pn.pane.ECharts

Matplotlib¶

Pure Python with no Panel imports. The last expression (fig) is rendered automatically — no .servable() needed.

Docs: Matplotlib · Panel pane: pn.pane.Matplotlib

Plotly Grouped Bar Chart¶

Interactive Plotly bar chart with a RadioButtonGroup to switch metrics. Demonstrates pn.pane.Plotly with reactive pn.bind().

Docs: Plotly · Panel pane: pn.pane.Plotly

Seaborn Violin Plot¶

Statistical visualization using Seaborn's violinplot(). Expression mode — returns fig as the last expression, no .servable() needed.

Docs: Seaborn · Panel pane: pn.pane.Matplotlib

PyData¶

xarray¶

Create an xr.Dataset with synthetic climate data on lat/lon/time coordinates. Expression mode — xarray's rich HTML representation renders automatically.

Docs: xarray

Text¶

LaTeX Renderer¶

Interactive LaTeX equation rendering using Panel's KaTeX integration. Enter any LaTeX equation and see it rendered live.

Docs: Panel pane: pn.pane.LaTeX

Loading External Data¶

HTTP Requests¶

Standard requests.get() works in the Pyodide runtime — pyodide-http patches the requests package automatically. This example fetches the Iris CSV dataset from GitHub and displays it in a Tabulator table with species filtering.

Read CSV from URL¶

pd.read_csv("https://...") works directly — no extra imports or setup needed. This example loads the Palmer Penguins dataset from GitHub and displays it in a Tabulator table.

Read Parquet from URL¶

Loads a Parquet file from a URL using requests.get() and pd.read_parquet() with the fastparquet engine. Unlike CSV, pd.read_parquet(url) does not work directly in Pyodide because urllib is not patched for HTTPS — the workaround is to fetch the bytes via requests.get() (patched by pyodide-http) and pass a BytesIO object. Uses the HoloViz wind turbines dataset. Note: fastparquet is ~5MB, so initial load takes slightly longer than CSV examples.

Dashboards¶

KPI Dashboard¶

Multi-indicator dashboard with styled number displays and trend arrows. Shows reactive updates via pn.bind() and custom HTML styling.

Radar Chart¶

ECharts radar chart with configurable data points. Demonstrates more advanced ECharts configuration with Panel widgets.

Data Exploration¶

Product Inventory Table¶

Tabulator table with filtering and sorting. Demonstrates pn.widgets.Tabulator for interactive data exploration.

Sales Dashboard¶

Multi-widget dashboard combining sliders, selectors, and a Tabulator table. Demonstrates cross-widget filtering with pn.bind().

Data Explorer¶

Dynamic data exploration with column selection and aggregation. Demonstrates building a flexible data analysis tool with Panel.

Real-time¶

Streaming Chart¶

Real-time data streaming with pn.state.add_periodic_callback(). Demonstrates live-updating chart and table with rollover buffer.

Tools¶

Color Palette Generator¶

Uses pn.bind() to reactively generate HTML from widget values. Demonstrates RadioButtonGroup and ColorPicker.

Mini Calculator¶

Simple calculator using FloatInput widgets and a Select for the operator. Demonstrates pn.bind() with multiple widget inputs.

Unit Converter¶

Temperature, length, and weight converter using RadioButtonGroup for category selection. Demonstrates dynamic widget updates with pn.bind().

Markdown Preview¶

Live Markdown editor with real-time preview. Demonstrates pn.pane.Markdown with a TextAreaInput widget.

Layouts¶

Layout Showcase¶

Demonstrates Panel's layout system with Tabs, Card, Row, and Column. Shows how to organize widgets and outputs.

Testing¶

Print Output¶

print() statements produce visible output above the app. Useful for debugging and progress feedback.

Exception Handling Test¶

This example deliberately raises an exception to verify that errors are displayed in the output section.