Widgets and interactive outputs

Jupyter Notebooks have support for many kinds of interactive outputs. These should all be supported in MyST-NB by passing the output HTML through automatically. This page has a few common examples.[1]

First off, we’ll download a little bit of data and show its structure:

import plotly.express as px
data = px.data.iris()
data.head()

	sepal_length	sepal_width	petal_length	petal_width	species	species_id
0	5.1	3.5	1.4	0.2	setosa	1
1	4.9	3.0	1.4	0.2	setosa	1
2	4.7	3.2	1.3	0.2	setosa	1
3	4.6	3.1	1.5	0.2	setosa	1
4	5.0	3.6	1.4	0.2	setosa	1

Plotting libraries

Altair

Interactive outputs will work under the assumption that the outputs they produce have self-contained HTML that works without requiring any external dependencies to load. See the Altair installation instructions to get set up with Altair. Below is some example output.

import altair as alt
alt.Chart(data=data).mark_point().encode(
    x="sepal_width",
    y="sepal_length",
    color="species",
    size='sepal_length'
)

Plotly

Plotly is another interactive plotting library that provides a high-level API for visualization. See the Plotly JupyterLab documentation to get started with Plotly in the notebook.

Below is some example output.

import plotly.io as pio
import plotly.express as px
import plotly.offline as py

df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", size="sepal_length")
fig