小部件和交互式输出#
Jupyter Notebooks 支持多种交互式输出。这些在 MyST-NB 中都应该通过自动传递输出 HTML 来支持。本页提供了一些常见示例。[1]
首先，将下载一些数据并显示其结构：
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 |
绘图库#
Altair#
交互式输出将在其生成的输出具有自包含 HTML 的假设下工作，无需加载任何外部依赖项。请参阅 Altair 安装说明 以设置 Altair。以下是一些示例输出。
import altair as alt
alt.Chart(data=data).mark_point().encode(
x="sepal_width",
y="sepal_length",
color="species",
size='sepal_length'
)
Plotly#
Plotly 是另一个提供高级 API 进行可视化的交互式绘图库。请参阅 Plotly JupyterLab 文档 以在笔记本中开始使用 Plotly。
以下是一些示例输出。
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
重要
您可能需要为 plotly 提供 require.js 以显示；在您的 conf.py 中：
html_js_files = ["https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"]
Bokeh#
Bokeh 提供了多种交互式可视化选项，并且是 PyViz 生态系统的一部分。请参阅 Bokeh 与 Jupyter 文档 以开始使用。
以下是一些示例输出。
from bokeh.plotting import figure, show, output_notebook
output_notebook()
p = figure()
p.circle(data["sepal_width"], data["sepal_length"], fill_color=data["species"], size=data["sepal_length"])
show(p)
ipywidgets#
备注
IPyWidgets 使用特殊的 JS 包 @jupyter-widgets/html-manager 来在笔记本之外渲染 Jupyter 小部件。myst-nb 加载了此包的特定版本，可能与您安装的 IPyWidgets 不兼容。如果是这种情况，您可能需要指定适当的 nb_ipywidgets_js 配置值，例如对于 0.20.0：
sphinx:
recursive_update: true
config:
nb_ipywidgets_js:
# Load IPywidgets bundle for embedding.
"https://cdn.jsdelivr.net/npm/@jupyter-widgets/html-manager@0.20.0/dist/embed-amd.js":
"data-jupyter-widgets-cdn": "https://cdn.jsdelivr.net/npm/"
"crossorigin": "anonymous"
要确定需要哪个版本的 @jupyter-widgets/html-manager，请在 ipywidgets 仓库 中找到 html-manager JS 包，并确定其版本。
您还可以在文档中运行 Jupyter Widgets 的代码，交互式 HTML 输出将嵌入到您的页面中。请参阅 ipywidgets 文档 了解如何在您自己的环境中进行设置。
以下是一些渲染的简单小部件元素。
import ipywidgets as widgets
widgets.IntSlider(
value=7,
min=0,
max=10,
step=1,
description='Test:',
disabled=False,
continuous_update=False,
orientation='horizontal',
readout=True,
readout_format='d'
)
tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']
children = [widgets.Text(description=name) for name in tab_contents]
tab = widgets.Tab()
tab.children = children
for ii in range(len(children)):
tab.set_title(ii, f"tab_{ii}")
tab
您可以在 jupyter-widgets 文档 中找到 可能的 Jupyter 小部件列表。