{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# グラフの追加\n",
    "\n",
    "[Plotly](https://plotly.com/) の Python ライブラリを用いたグラフを追加する。\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 概要\n",
    "\n",
    "Sphinx の拡張機能 [myst_nb](https://myst-nb.readthedocs.io/en/latest/) を導入し、\n",
    "myst_nb で読み込むことができる Jupyter Notebook、または Markdown の形式で本文を記載し、\n",
    "その中に Plotly でグラフを描画する記述を行う。\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "(development-sphinx-plotting-settings)=\n",
    "## 設定\n",
    "\n",
    "conf.py に以下の設定を追加する。\n",
    "\n",
    "```py\n",
    "extensions += [\"myst_nb\"]\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "````{tip}\n",
    "Sphinx で記載する本文の中と Plotly のグラフの中の両方で数式を表示するには以下の設定が必要となる。\n",
    "\n",
    "```py\n",
    "mathjax_path = \"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js\"\n",
    "```\n",
    "\n",
    "この URL は\n",
    "[npm における plotly.js のページにある「MathJax」の節](https://www.npmjs.com/package/plotly.js/v/2.16.4#mathjax)\n",
    "にあった URL を参考にしている。\n",
    "````\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## グラフの描画\n",
    "\n",
    "### Jupyter Notebook 内\n",
    "\n",
    "Jupyter Notebook 内でグラフを描画するには、\n",
    "Jupyter Notebook の Code のセルで show 関数を呼び出す。\n",
    "セルの内容の例と、描画されるグラフの例を以下に示す。\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import numpy\n",
    "import plotly.express\n",
    "\n",
    "# データの用意\n",
    "x = numpy.linspace(0.0, 2.0, 101)\n",
    "y = numpy.sin(x)\n",
    "# 描画\n",
    "fig = plotly.express.line(x=x, y=y)\n",
    "# プロットの表示\n",
    "fig.show(renderer=\"notebook_connected\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Markdown 内\n",
    "\n",
    "Markdown 内でグラフを描画するには、myst_nb 拡張機能専用の MyST Markdown の形式で Markdown を記載する。\n",
    "\n",
    "1. Markdown の冒頭に以下を追加する。\n",
    "\n",
    "   ```text\n",
    "   ---\n",
    "   file_format: mystnb\n",
    "   ---\n",
    "   ```\n",
    "\n",
    "2. Markdown 中で Jupyter Notebook の Code セルと同様の環境を使用する記述を追加し、\n",
    "   その中で Plotly のグラフのウィジェットを作成する。\n",
    "\n",
    "   ````text\n",
    "   ```{code-cell}\n",
    "   import numpy\n",
    "   import plotly.express\n",
    "\n",
    "   # データの用意\n",
    "   x = numpy.linspace(0.0, 2.0, 101)\n",
    "   y = numpy.sin(x)\n",
    "   # 描画\n",
    "   fig = plotly.express.line(x=x, y=y)\n",
    "   # プロットの表示\n",
    "   fig.show(renderer=\"notebook_connected\")\n",
    "   ```\n",
    "   ````\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".venv",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}