Plotlyで作成したグラフをMarkdownに埋め込み【備忘録】

はじめに

　報告書の作成って手間ですよね。私は研究職という職業上（？）報告書を書くことが多いのですが、普段Markdownでザザっと書いてHTMLにして上長にぶん投げています。
とある報告書でPlotlyで作成したグリグリ動くグラフをMarkdownに貼り付けたいなぁと思い、作業したことを備忘録として残しておきます。
　手法としては、plotlyで作成したfigをHTMLで出力し、Markdownに＜iframe＞タグで埋め込みます。

埋め込みたいグラフ

以下のようなマウスでグリグリ動かせる感じのグラフを埋め込みます。

コード

まずは普通に散布図を作成します（別に散布図でなくてもいいです）

figの作成

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

df = pd.read_excel('test_data.xlsx')

x = df['Yield']
y = df['Temp']
z = df['Solv_mL']

#三次元散布図の作成
fig = px.scatter_3d(df, x=x, y=y, z=z) 

#ラベル作成
for i, j, k in zip(x, y, z):
    label = '({:.2f}, {:.1f}, {:.1f})'.format(i, j, k)
    fig.add_trace(
        go.Scatter3d(x=[i], y=[j], z=[k], mode='text', text=[label])
    )
    
fig

これで先のような図が出来上がりましたね！
あとは一行追加するだけです。

HTMLに書き出し

fig.write_html("fig_output.html", full_html=False, include_plotlyjs='cdn')

fig.write_htmlの引数ですが、
・full_html
　True（デフォルト）の場合＜html＞タグで始まる完全なHTMLドキュメントを含む文字列を生成します。False の場合、単一の＜div＞要素を含む文字列を生成します。
・include_plotlyjs
　True（デフォルト）の場合、plotly.jsのソースコードがファイルに出力され、オフラインでも使用できます。ただしサイズが大きくなる（～3MB）。
　cdnの場合、ウェブから読み込みます。サイズは小さくなりますが、インターネット接続が必要になります。

詳細は公式githubを参照してください。

Markdownへの埋め込み

　それでは、出力したHTMLをMarkdownに埋め込みましょう。以下のように埋め込めば終わりです。

埋め込み

### これはテスト

<iframe src="fig_output.html" width="600" height="600"></iframe>

はい、完成しました。お疲れ様です。

おわりに

図の枠があるのはなんかダサい気がするので何とかならんかなと思いますが、ひとまずこれで許してください。

それでは次の記事でお会いしましょう。