グラフの追加

Plotly の Python ライブラリを用いたグラフを追加する。

概要

Sphinx の拡張機能 myst_nb を導入し、 myst_nb で読み込むことができる Jupyter Notebook、または Markdown の形式で本文を記載し、 その中に Plotly でグラフを描画する記述を行う。

設定

conf.py に以下の設定を追加する。

extensions += ["myst_nb"]

Tip

Sphinx で記載する本文の中と Plotly のグラフの中の両方で数式を表示するには以下の設定が必要となる。

mathjax_path = "https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg-full.js"
mathjax3_config = {
    "tex": {
        "inlineMath": [["$", "$"], ["\\(", "\\)"]],
        "displayMath": [["$$", "$$"], ["\\[", "\\]"]],
    },
}
mathjax_options = {
    "defer": None,
}

この URL は npm における plotly.js のページ にある「MathJax」の節にあった URL を参考にし、MathJax のすべての機能を使用するための URL を指定している。

グラフの描画

Jupyter Notebook 内

Jupyter Notebook 内でグラフを描画するには、 Jupyter Notebook の Code のセルで show 関数を呼び出す。 セルの内容の例と、描画されるグラフの例を以下に示す。

import IPython.display
import numpy
import plotly.io
import plotly.express

# データの用意
x = numpy.linspace(0.0, 2.0, 101)
y = numpy.sin(x)
# 描画
fig = plotly.express.line(x=x, y=y)
# プロットの表示
IPython.display.HTML(
    plotly.io.to_html(
        fig,
        full_html=False,
        include_plotlyjs="cdn",
        include_mathjax=False,
    )
)

Markdown 内

Markdown 内でグラフを描画するには、myst_nb 拡張機能専用の MyST Markdown の形式で Markdown を記載する。

1. Markdown の冒頭に以下を追加する。

   ---
   file_format: mystnb
   ---
   

2. Markdown 中で Jupyter Notebook の Code セルと同様の環境を使用する記述を追加し、 その中で Plotly のグラフのウィジェットを作成する。

   ```{code-cell}
   import IPython.display
   import numpy
   import plotly.io
   import plotly.express
   
   # データの用意
   x = numpy.linspace(0.0, 2.0, 101)
   y = numpy.sin(x)
   # 描画
   fig = plotly.express.line(x=x, y=y)
   # プロットの表示
   IPython.display.HTML(
       plotly.io.to_html(
           fig,
           full_html=False,
           include_plotlyjs="cdn",
           include_mathjax=False,
       )
   )
   ```