※記事内に商品プロモーションを含むことがあります。

はじめに

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で必要なライブラリをインストールします（必要に応じて仮想環境を作成してください）。

1

pip install jupyterlab plotly pandas jupyter-book

Jupyter Bookのプロジェクト作成

以下のコマンドを実行してJupyter Bookプロジェクトのテンプレートファイルを作成します。

1

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をブラウザで開きます。

1

jupyter-lab

新しいNotebookを作成して、<book-name>フォルダの下に保存します。
ここでは、ファイル名をplotly-test.ipynbとします。

まず、最初のセルをMarkdownモードにして以下を入力します。これは、Jupyter Bookを使用して変換したときのHTMLページのタイトルになります。

1

# Plotlyのテスト

その下のセルはCodeモードにして、以下のPythonコードを入力します。

1
2
3

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を変換するようになります。

1
2
3
4
5
6
7

format: jb-book
root: intro
chapters:
- file: markdown
- file: notebooks
- file: markdown-notebooks
- file: plotly-test

次に、_config.ymlを開いて以下を追記します。

1
2
3
4

sphinx:
  config:
    html_js_files:
    - https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js

ビルド

以下のコマンドを実行して、Jupyter Bookプロジェクトのファイル一式をビルドします。

1

jupyter-book build <book-name>

以下の警告が出るかもしれませんが、同じコマンドをもう一回実行します。

1
2
3

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のインタラクティブな棒グラフが表示されることを確認します。

参考

• Interactive data visualizations - Jupyter Book

この記事はQiita Python Advent Calendar 2024の22日目の記事です。