Display Content with Panes#

In this tutorial, we will learn to display objects with Panes:

  • Panes are available in the pn.pane namespace.

  • Panes take an object argument as well as other arguments.

  • Discover all Panes and their reference guides in the Panes Section of the Component Gallery.

Note

A Pane is a component that can display an object. It takes an object as an argument.

Note

You might notice a lot of repetition from the previous section regarding pn.panel. Don’t worry, it’s intentional! We’re doing this to empower you with the ability to compare and contrast. While pn.panel is incredibly user-friendly and versatile, specific Panes allow you to display output with precision and efficiency. This enables you to construct more intricate and high-performing applications.

Note

When we ask you to run the code in the sections below, you may either execute the code directly in the Panel docs via the green run button, in a cell in a notebook, or in a file app.py that is served with panel serve app.py --dev.

import panel as pn
pn.extension("echarts", "plotly", "vega", "vizzu")

Display Strings#

The Str pane can display any text.

Run the code:

import panel as pn

pn.extension()

pn.pane.Str(
    'This is a raw string that will not be formatted in any way.',
).servable()

Note

We add .servable() to the component to add it to the app served by panel serve app.py --dev. Adding .servable() is not needed to display the component in a notebook.

Note

To learn in detail how a pane like Str works, refer to its reference guide.

Click this link to the Str reference guide and spend a few minutes to familiarize yourself with its organization and content.

Display Markdown#

The Markdown pane can format and display markdown strings.

Run the code:

import panel as pn

pn.extension()

pn.pane.Markdown("""\
# Wind Turbine

A wind turbine is a device that converts the kinetic energy of wind into \
[electrical energy](https://en.wikipedia.org/wiki/Electrical_energy).

Read more [here](https://en.wikipedia.org/wiki/Wind_turbine).
""").servable()

Tip

It’s key for success with Panel to be able to navigate the Component Gallery and use the reference guides.

Click this link to the Panes Section of the Component Gallery. Identify the Markdown Reference Guide and open it. You don’t have to spend time studying the details right now.

Display Alerts#

The Alert pane can format and display markdown strings inside a nicely styled Alert pane.

Run the code:

import panel as pn

pn.extension()

pn.pane.Alert("""
## Markdown Sample

This sample text is from [The Markdown Guide](https://www.markdownguide.org)!
""", alert_type="info").servable()

Display Plots#

Pick a plotting library below.

Run the code below.

import altair as alt
import pandas as pd
import panel as pn

pn.extension("vega")

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

fig = (
    alt.Chart(data)
    .mark_line(point=True)
    .encode(
        x="Day",
        y=alt.Y("Wind Speed (m/s)", scale=alt.Scale(domain=(0, 10))),
        tooltip=["Day", "Wind Speed (m/s)"],
    )
    .properties(width="container", height="container", title="Wind Speed")
)

pn.pane.Vega(fig, sizing_mode="stretch_width", height=400).servable()

Note

Vega is the name of the JavaScript plotting library used by Altair.

We must add "vega" as an argument to pn.extension in the example to load the Vega Javascript dependencies in the browser.

If we forget to add "vega" to pn.extension, then the Altair figure might not display.

Run the code below.

import panel as pn

pn.extension("echarts")

config = {
    'title': {
        'text': 'Wind Speed'
    },
    "tooltip": {},
    'xAxis': {
        'data': ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    'yAxis': {},
    'series': [{
        'name': 'Sales',
        'type': 'line',
        'data': [7, 4, 9, 4, 4, 5, 4]
    }],
}
pn.pane.ECharts(config, height=400, sizing_mode="stretch_width").servable()

Note

We must add "echarts" as an argument to pn.extension in the example to load the ECharts Javascript dependencies in the browser.

If we forget to add "echarts" to pn.extension, then the ECharts figure might not display.

Run the code below.

import hvplot.pandas
import numpy as np
import pandas as pd
import panel as pn

pn.extension()

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

fig = data.hvplot(x="Day", y="Wind Speed (m/s)", line_width=10, ylim=(0,10), title="Wind Speed")

pn.pane.HoloViews(fig, sizing_mode="stretch_width").servable()

Note

hvPlot is the easy to use plotting sister of Panel. It works similarly to the familiar Pandas .plot api. hvPlot is built on top of the data visualization library HoloViews. hvPlot, HoloViews, and Panel are all part of the HoloViz family.

Run the code below.

import matplotlib
import matplotlib.pyplot as plt
import pandas as pd
import panel as pn

matplotlib.use("agg")

pn.extension()

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

fig, ax = plt.subplots(figsize=(8,3))
ax.plot(
    data["Day"], data["Wind Speed (m/s)"], marker="o", markersize=10, linewidth=4
)
ax.set(
    xlabel="Day",
    ylabel="Wind Speed (m/s)",
    title="Wind Speed",
    ylim=(0, 10),
)
ax.grid()
plt.close(fig)  # CLOSE THE FIGURE TO AVOID MEMORY LEAKS!

pn.pane.Matplotlib(fig, dpi=144, tight=True, format="svg", sizing_mode="stretch_width").servable()

Note

In the example, we provide the arguments dpi, format and tight to the Matplotlib pane.

The Matplotlib pane can display figures from any framework that produces Matplotlib Figure objects like Seaborn, Plotnine and Pandas .plot.

We can find more details in the Matplotlib Reference Guide.

Run the code below.

import pandas as pd
import panel as pn
import plotly.express as px

pn.extension("plotly")

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

fig = px.line(data, x="Day", y="Wind Speed (m/s)")
fig.update_traces(mode="lines+markers", marker=dict(size=10), line=dict(width=4))
fig.update_yaxes(range=[0, max(data['Wind Speed (m/s)']) + 1])
fig.layout.autosize = True

pn.pane.Plotly(fig, height=400, sizing_mode="stretch_width").servable()

Note

We must add "plotly" as an argument to pn.extension in the example to load the Plotly JavaScript dependencies in the browser.

If we forget to add "plotly" to pn.extension, then the Plotly figure might not display.

Run the code below.

import pandas as pd
import panel as pn

pn.extension("vizzu")

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 5), ('Sunday', 4)], columns=['Day', 'Wind Speed (m/s)']
)

pn.pane.Vizzu(
    data, config={'geometry': 'line', 'x': 'Day', 'y': 'Wind Speed (m/s)', 'title': 'Wind Speed'},
    duration=400, height=400, sizing_mode='stretch_width', tooltip=True
).servable()

Note

We must add "vizzu" as an argument to pn.extension in the example to load the Vizzu JavaScript dependencies in the browser.

If we forget to add "vizzu" to pn.extension, then the Vizzu figure might not display.

Display a DataFrame#

Run the code:

import pandas as pd
import panel as pn

pn.extension()

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 4), ('Sunday', 4)], columns=['Day', 'Orders']
)
pn.pane.DataFrame(data).servable()

Note

If we want to display larger dataframes, customize the way the dataframes are displayed, or make them more interactive, we can find specialized components in the Component Gallery supporting these use cases. For example, the Tabulator widget and Perspective pane.

Display any Python object#

Provides Panes to display (almost) any Python object.

Run the code below

import panel as pn

pn.extension()

pn.Column(
    pn.pane.JSON({"Wind Speeds": [0, 3, 6, 9, 12, 15, 18, 21], "Power Output": [0,39,260,780, 1300, 1300, 0, 0]}),
    pn.pane.PNG("https://assets.holoviz.org/panel/tutorials/wind_turbine.png", height=100),
    pn.pane.Audio("https://assets.holoviz.org/panel/tutorials/wind_turbine.mp3"),
).servable()

Recap#

In this guide, we have learned to display Python objects with Panes:

Resources#

Tutorials#

How-to#

Explanation#