[matplotlib] 69. 散布図上でクリックした点に関連付けられたデータを下図に表示する

ipywidgets

はじめに

この記事では、matplotlibを使用して散布図上でクリックした点に関連付けられたデータを下図に表示する方法について解説します。マウスイベントとピックイベントを組み合わせることで、インタラクティブなデータ可視化を実現する手法を紹介します。

コード

解説

モジュールのインポートなど

Jupyter Labでインタラクティブな操作をするには、冒頭で%matplotlib widgetと指定します。Jupyter Notebookの場合は%matplotlib notebookとなります。別ウィンドウで図を表示するには%matplotlibを使用します。

バージョン

データの作成

np.random.rand(30, 100)を使用してランダムデータを生成し、その平均値と標準偏差をそれぞれxs、ysとします。

上図の表示

mfcはマーカーの色、mewはマーカーの線幅、mecはマーカーの線の色、msはマーカーのサイズを指定します。picker=5は、点をクリックしたと判定する許容範囲(ピクセル単位)の設定です。

下図の表示

最初に空のリストでプロットを作成しておき、そこにデータをセットすることで図を表示します。ax1.textを使用して図中にテキストを挿入する際、transform=ax1.transAxesと指定することで、下図のaxesの相対的な座標位置にテキストを配置できます。初めに空のテキストを設定しておき、イベント発生時にset_textメソッドを使用してテキスト内容を更新表示します。

onpickイベントの設定

  • event.artistでクリックした点を取得します。
  • get_xdataとget_ydataで、その点を含む一連のデータを取得します。
  • event.indで点のインデックスを特定します。
  • ax0.plot(xdata[ind], ydata[ind],”o”,ms=12)を使用して、クリックした点と同じ座標に新たな点(マーカーサイズ12)をプロットします。
  • plot.set_data((np.arange(100),X[ind,:]))で下図に選択したデータを表示します。
  • texts.set_text()で下図にテキスト情報を表示します。
  • 最後にfig.canvas.draw()を実行して図を更新し、イベントの内容を画面に反映させます。

イベントの有効化

fig.canvas.mpl_connect(‘pick_event’, onpick)を使ってイベントを有効化した後、plt.show()で図を表示します。これにより、下図のように散布図上でクリックした点の色が変化し、その点に関連するデータが下のグラフに表示されるようになります。

jupyter notebookの場合

別ウインドウで表示(GUI)

コードをダウンロード(.pyファイル)

コードをダウンロード(.ipynbファイル)

まとめ

マウスイベントとピックイベントを組み合わせることで、散布図上の点をクリックした際に関連データを別グラフに表示するインタラクティブな可視化が実現できます。この手法はデータ探索や分析において、ユーザーがデータポイントの詳細情報を直感的に確認できる強力なツールとなります。

参考

https://matplotlib.org/users/event_handling.html#picking-exercise
numpy.random.rand — NumPy v1.14 Manual

コメント