はじめに #
Jupyter Bookで作成したサイトにPlotlyのインタラクティブなグラフを埋め込む方法を解説します。
Jupyter Bookは、JupyterLabのファイル (.ipynb) をウェブサイトに変換できるライブラリです。また、Plotlyはインタラクティブなグラフを扱えるPythonライブラリです。
実際にPlotlyを埋め込んだウェブページは以下になります。 JupyterLabでPlotlyのグラフを表示する — Pythonグラフ入門
検証環境は以下の通りです。
- Windows 10 Home 22H2
- Python 3.12.4
- JupyterLab 4.3.4
- Plotly 5.24.1
- Pandas 2.2.3
- Jupyter Book 1.0.3
ライブラリのインストール #
pipで必要なライブラリをインストールします（必要に応じて仮想環境を作成してください）。
pip install jupyterlab plotly pandas jupyter-book
Jupyter Bookのプロジェクト作成 #
以下のコマンドを実行してJupyter Bookプロジェクトのテンプレートファイルを作成します。
jupyter-book create <book-name>
<book-name>には任意の名前を指定します。<book-name>と同じ名前のフォルダが作成され、その中に以下のファイルがあります。
<book-name>
intro.md
logo.png
markdown-notebooks.md
markdown.md
notebooks.ipynb
references.bib
requirements.txt
_config.yml
_toc.yml
Jupyterファイルの作成 #
ここでは新しいJupyterファイルを作成します。 以下のコマンドを実行してJupyter Labをブラウザで開きます。
jupyter-lab
新しいNotebookを作成して、<book-name>フォルダの下に保存します。
ここでは、ファイル名をplotly-test.ipynbとします。
まず、最初のセルをMarkdownモードにして以下を入力します。これは、Jupyter Bookを使用して変換したときのHTMLページのタイトルになります。
# Plotlyのテスト
その下のセルはCodeモードにして、以下のPythonコードを入力します。
import plotly.express as px
fig = px.bar(x=["a", "b", "c"], y=[1, 3, 2])
fig.show()
Notebookを実行して、Plotlyのインタラクティブな棒グラフが表示されることを確認します。
Jupyter Bookのビルド設定 #
_toc.ymlを開き、- file: plotly-testを以下のように追記します。これで、Jupyter Bookがplotly-test.ipynbを変換するようになります。
format: jb-book
root: intro
chapters:
- file: markdown
- file: notebooks
- file: markdown-notebooks
- file: plotly-test
次に、_config.ymlを開いて以下を追記します。
sphinx:
config:
html_js_files:
- https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js
ビルド #
以下のコマンドを実行して、Jupyter Bookプロジェクトのファイル一式をビルドします。
jupyter-book build <book-name>
以下の警告が出るかもしれませんが、同じコマンドをもう一回実行します。
notebooks.ipynb: WARNING: Executing notebook failed: CellExecutionError [mystnb.exec]
notebooks.ipynb: WARNING: Notebook exception traceback saved in: XXX\_build\html\reports\notebooks.err.log [mystnb.exec]
plotly-test.ipynb:20002: WARNING: skipping unknown output mime type: application/vnd.plotly.v1+json [mystnb.unknown_mime_type]
ビルドが完了すると、<book-name>/_build/html/の下にHTMLファイルが生成されます。
その中のplotly-test.htmlを開き、Plotlyのインタラクティブな棒グラフが表示されることを確認します。
参考 #
この記事はQiita Python Advent Calendar 2024の22日目の記事です。
