はじめに
Plotlyで作った3Dグラフは、画像として保存するよりHTMLとして出力すると魅力が倍増します。回転・ズーム・ツールチップなどのインタラクションをそのまま保ったまま、誰にでも共有できます。今回は、その手順と注意点を整理します。
目的
- Plotlyで作成した3DグラフをHTMLファイルとして保存する方法を学ぶ
- ブラウザでそのまま動くインタラクティブ可視化を共有できるようにする
- Colabでも確実に動作する最小構成を理解する
実装例
import plotly.graph_objects as go
import numpy as np
# サンプルデータ
x = np.linspace(-2, 2, 50)
y = np.linspace(-2, 2, 50)
X, Y = np.meshgrid(x, y)
Z = np.sin(np.sqrt(X**2 + Y**2))
# 3Dグラフ作成
fig = go.Figure(data=[go.Surface(x=X, y=Y, z=Z, colorscale='Viridis')])
fig.update_layout(title='3D Surface Example', scene=dict(aspectmode='data'))
fig.show()
まずはColab上で3Dグラフを描画。この状態から「HTML保存」に発展させます。
HTMLとして保存する
fig.write_html("plot3d_example.html")
plot3d_example.htmlが生成され、Colab左側のファイル一覧に保存されます。右クリックからダウンロードでローカルに取得可能です。
HTMLファイルを開く
保存したファイルをダブルクリックすると、ブラウザでインタラクティブに回転・ズームが可能なグラフが開きます。HTML内にJavaScript (Plotly.js)が埋め込まれているため、他の人に送ってもそのまま動作します。
HTML出力のオプション
fig.write_html(
"plot3d_example.html",
include_plotlyjs='cdn', # CDN参照（軽量）
full_html=True, # 完全なHTMLとして出力
auto_open=False # 自動で開かない
)
| 引数 | 説明 |
|---|---|
| include_plotlyjs='cdn' | JavaScriptをCDN経由にして軽量化（推奨） |
| full_html=False | HTML断片として出力（Web埋め込み用） |
| auto_open=True | 書き出し後にブラウザ自動起動（ローカル環境向け） |
HTML埋め込み（Web用）
Web記事などに貼り付けたい場合は、Plotlyを断片として書き出します。
fig.write_html("fragment.html", full_html=False, include_plotlyjs='cdn')
その後、HTMLの本文に次のように埋め込みます。
<div>
<!-- グラフ埋め込み -->
<iframe src="fragment.html" width="800" height="600"></iframe>
</div>
ただし、埋め込み可否は利用する環境によって異なります。
上記はあくまで一例のため、実際の運用環境に応じて動作をご確認ください。
まとめ
fig.write_html()で保存すれば、ブラウザで開くだけでそのまま動くグラフとして利用できます。
include_plotlyjs や full_html などのオプションで出力形式も調整可能です。
メール添付、Drive共有、iframe埋め込みなど配布方法も幅広く、2D・3DどちらのPlotlyグラフにも対応しています。
インタラクティブ性を失わずに共有できるのが大きな利点で、プレゼンや資料作成にもそのまま使えます。
参考情報