Pythonのパッケージ Plotly を使ったグラフプロットで、インタラクティブにグラフの注目範囲や各軸を拡大縮小する方法を解説します。

Plotly

Pythonでグラフ作成というと Matplotlib が有名ですが、インタラクティブなグラフを簡単に作れ、htmlへの埋め込みも簡単な Plotly というパッケージを前回紹介しました。

【Plotly】 Python でグラフ作成し、html に埋め込む方法
Htmlにインタラクティブなグラフを作成する

マウス操作による拡大縮小、移動

Plotlyであれば、グラフの拡大縮小、軸の移動なんかも、マウス操作で簡単にできてしまいます。

次のビデオをご覧下さい。

方法を簡単にまとめておきます。

縦横軸同時に拡大縮小

  • プロットエリア内で、マウスドラッグによる矩形選択
  • プロットエリア四隅の角で、斜め矢印カーソルになった状態でドラッグ操作

片方の軸のみの拡大縮小

  • プロットエリア内で、水平方向か垂直方向へのマウスドラッグ操作
  • 横軸 or 縦軸の両端で、横 or 縦 矢印カーソルの状態でのドラッグ操作

スケールを元に戻す

  • プロットエリア内をダブルクリック
  • 片方の軸のみなら、軸上でダブルクリック

表示範囲の移動

  • 右上のPlotly メニューの中から十字矢印のボタンをクリックして、プロットエリア内でのドラッグ
  • 横軸 or 縦軸上で、矢印カーソルの状態でドラッグ

デモプロット

上のビデオで使っていたグラフは次のコードで作成しました。

import numpy as np
import plotly.graph_objects as go

# X軸
x = np.linspace(-1*np.pi*20, np.pi*20, 1000)

# トレースデータ
trace = go.Scatter(x=x, y=x*(np.cos(3.7*x)+np.cos(3.5*x)))

# plotly でプロット
fig = go.Figure(data=trace)
fig.show()

埋め込んでおきますので、実際にマウスを動かしてお試し下さい。

スポンサーリンク