linuxBean14.04(75)matplotlibのインタラクティブなグラフ

2015-09-27

旧ブログ

t f B! P L

前の関連記事:linuxBean14.04(74)ipywidgetsでJupyter Notebookのウィジェット


前回やったJupyter Notebookのウィジェットと違って今回はmatplotlibのウィジェットを使ってインタラクティブなグラフを描画します。Thumbnail gallerywidgets Examplesに例があります。さらにグラフの座標の値を表示する方法について調べました。

 matplotlib.widgetsを使ってインタラクティブなグラフを作る


matplotlib.widgetsモジュールにあるクラスを使うとインタラクティブなグラフが作れます。

widgets example code: cursor.py — Matplotlib 1.4.3 documentation


マウスカーソルにあわせて上下左右の赤線が追随します。
import matplotlib
# No toolbar
matplotlib.rcParams['toolbar'] = 'None'
グラフウィンドウのツールバーを消したいときはこれを挿入します。

widgets example code: slider_demo.py — Matplotlib 1.4.3 documentation


下のバーで振幅と周期が変更できそれにあわせてグラフの形がかわります。

マウスカーソルのある場所のグラフの座標の値をポップアップさせたい


上のcursor.pyの例でマウスカーソルでクリックした座標の値をポップアップで表示できないかさがしたところ、ウィジェットを使わない実装をみつけました。

python - Is there a matplotlib equivalent of MATLAB's datacursormode? - Stack Overflow

MATLABのDataCursorモードというが同じことをしているらしくそれと同じことをDataCursorクラスにしています。

Q&AのAの最初のすでに行われている実装、というのは動きませんでしたがその下のアップデーとバージョンは動きました。


グラフの近くをクリックするとグラフ上の座標の値を表示してくれます。

やっていることはクリックするたびにAnnotating Axesの機能を使った注釈の表示です。

注釈の表示方法はすごくたくさんオプションがあります。

注釈のボックス内に矢印が入り込んでいるのを修正したくて色々調べてみました。
    def annotate(self, ax):
        """Draws and hides the annotation box for the given axis "ax"."""
        annotation = ax.annotate(self.template, xy=(0, 0), ha='right',
                xytext=self.offsets, textcoords='offset points', va='bottom',
                bbox=dict(boxstyle='round,pad=0.5', fc='yellow', alpha=1),
                arrowprops=dict(arrowstyle='->', connectionstyle='arc3,rad=0')
                )
        annotation.set_visible(False)
        return annotation
結局解決方法の解説はみつけられませんでしたが、44行目でalphaが注釈のボックスの透過度を表しているようでalpha=1にして不透明にすれば解決しました。


python - Get data from plot with matplotlib - Stack Overflow

こちらには上記のDataCursorクラスを少し変更したものが載っています。

さらにマウスカーソルを近づけただけで座標の値のポップアップがでるFollowDotCursorクラスが載っています。

python - Possible to make labels appear when hovering over a point in matplotlib in stem plot? - Stack OverflowにもFollowDotCursorクラスの例があります。

mpldatacursorのインストール


DataCursorクラスの作者がDataCursorをmpldatacursorというPythonモジュールを作成されていたのでそれをインストールします。

mpldatacursor/README.rst at master · joferkington/mpldatacursor · GitHub

まずはcondaでインストールできないかcondaパッケージを探します。

conda search mpldatacursor
pq@pq-VirtualBox:~$ conda search mpldatacursor
Fetching package metadata: ....
なにもでてきませんでした。

pipでインストールしますが、一応pipがanacondaのものかpip -Vで確認しておきます。
pq@pq-VirtualBox:~$ pip -V
pip 7.1.2 from /home/pq/anaconda3/lib/python3.4/site-packages (python 3.4)
pip install mpldatacursor
pq@pq-VirtualBox:~$ pip install mpldatacursor
Collecting mpldatacursor
  Downloading mpldatacursor-0.6.1-py2.py3-none-any.whl
Requirement already satisfied (use --upgrade to upgrade): matplotlib>=0.9 in ./anaconda3/lib/python3.4/site-packages (from mpldatacursor)
Requirement already satisfied (use --upgrade to upgrade): numpy>=1.1 in ./anaconda3/lib/python3.4/site-packages (from mpldatacursor)
Requirement already satisfied (use --upgrade to upgrade): six>=1.4 in ./anaconda3/lib/python3.4/site-packages (from matplotlib>=0.9->mpldatacursor)
Requirement already satisfied (use --upgrade to upgrade): python-dateutil in ./anaconda3/lib/python3.4/site-packages (from matplotlib>=0.9->mpldatacursor)
Requirement already satisfied (use --upgrade to upgrade): pytz in ./anaconda3/lib/python3.4/site-packages (from matplotlib>=0.9->mpldatacursor)
Requirement already satisfied (use --upgrade to upgrade): pyparsing>=1.5.6 in ./anaconda3/lib/python3.4/site-packages (from matplotlib>=0.9->mpldatacursor)
Requirement already satisfied (use --upgrade to upgrade): nose>=0.11.1 in ./anaconda3/lib/python3.4/site-packages (from matplotlib>=0.9->mpldatacursor)
Installing collected packages: mpldatacursor
Successfully installed mpldatacursor-0.6.1
ちゃんと~/anaconda3以下にインストールされました。

依存関係にあるパッケージのバージョン変更も必要なかったようです。

conda list

これで~/anaconda3にインストール済のパッケージ一覧が得られます。
mock                      1.3.0                    py34_0  
mpldatacursor             0.6.1                     <pip>
multipledispatch          0.4.8                    py34_0  
pipでインストールしたmpldatacursorは<pip>となっていることがわかります。

mpldatacursorを使って座標の値表示をいろいろ行う

from mpldatacursor import datacursor
datacursor()  
plt.show()の前にこれを書くとクリックしたグラフ上の点の座標が表示されます。

座標を表示させるアーチスト(matplotlibではグラフを描画するオブジェクトをArtistという。Artist tutorial)を限定したいときはdatacursor()の引数にaxesオブジェクトを入れます。
datacursor(formatter='{label}'.format)
formatterの引数でmatplotlib.pyplot.plot()のlabelを表示させたりできます。
datacursor(display='single')
Working with Imagesの例にあるように複数のaxesがあっても1点だけの値表示に限定します。


display='single'を指定しないときはこのように各axesオブジェクトごとの表示が残ります。

このグラフはnumpyで生成した10x10の行列にmatplotlib.pyplot.imshow()で色表示したものです。
(5. Numpy / Scipy / Matplotlib 連携による簡単な可視化操作 — 2012.ProgramingLanguage 0.1 documentation)
datacursor(display='multiple', draggable=True)
今度は逆にdisplay='multiple'とすると一つのaxesに複数の値表示ができます。

draggable=Trueで値表示を移動させることができます。


ばらばらに動かせるときと複数の値表示が一緒に動くときがありますが、どういう規則性があるのかわかりません。

ほかに表示形式のカスタマイズ選択した線をハイライトするなどの例があります。

mpldatacursorにはマウスカーソルを近づけただけで座標の値のポップアップがでるFollowDotCursorクラスのような機能はないようです。
from mpldatacursor import datacursor
datacursor(hover=True)  
これでマウスカーソルを近づけただけでポップアップがでました。

ブラウザにインタラクティブなグラフを出力するmpld3をインストール


MPLD3 — Bringing Matplotlib to the BrowserはmatplotlibからD3.jsを使ってブラウザ上にインタラクティブなグラフを出力するPythonパッケージです。

D3.jsについてはD3.jsはなぜ人気があるのか? そして、なぜ難しいのか? | #GUNMAGISGEEKの解説が参考になりました。

condaパッケージはみつけられなかったのでmpldatacursorと同様にpipでインストールしました。
  File "/home/pq/anaconda3/lib/python3.4/socket.py", line 394, in write
    return self._sock.send(b)
TypeError: 'str' does not support the buffer interface
Python3.4では``mpld3.show()`` fails in Python 3.4 · Issue #196 · jakevdp/mpld3の問題が発生して動きません。

2015.1.29の時点でpipからインストールできるバージョンでは未修正と書いてますが2015.9.27の時点でもまだ未修正のようです。

GitHubのmasterでは修正されているそうなのでlinuxBean14.04(74)ipywidgetsでJupyter Notebookのウィジェットと同様にしてjakevdp/mpld3からGitHubリポジトリをクローンしてそこからインストールします。

~/PycharmProjects/mpld3で端末を開きます。

python -V

まずpythonコマンドがanacondaのものであることを確認します。
pq@pq-VirtualBox:~/PycharmProjects/mpld3$ python -V
Python 3.4.3 :: Anaconda 2.3.0 (32-bit)
mplexporterフォルダが空っぽなのでまずその中身をダウンロードします。

python setup.py submodule

これでmplexporterリポジトリがダウンロードされました。

python setup.py build
  warnings.warn(BUILD_WARNING)
/home/pq/anaconda3/lib/python3.4/site-packages/setuptools-18.3.2-py3.4.egg/setuptools/dist.py:294: UserWarning: The version specified ('0.3git') is an invalid version, this may not work as expected with newer versions of setuptools, pip, and PyPI. Please see PEP 440 for more details.
こんな警告がでてきましたがよくわからないのでそのまま進みます。

バージョン番号0.3gitに「git」が付いているのがいけないというのだけの警告と思われます。

python setup.py install
Installed /home/pq/anaconda3/lib/python3.4/site-packages/mpld3-0.3git-py3.4.egg
Processing dependencies for mpld3===0.3git
Finished processing dependencies for mpld3===0.3git
pipではmpld3 0.2がインストールされましたが、GitHubのリポジトリからは0.3gitがインストールできました。

conda list  でもmpld3 0.3gitがインストールされていることが確認できました。

~/anaconda3/lib/python3.4/site-packages/mpld3-0.3git-py3.4.egg/mpld3/js にd3.v3.min.jsもインストールされていました。

mpld3でインタラクティブなグラフを出力する



PyChamr4.5でmpld3プロジェクトを開くと追加でダウンロードしたmpexporterのgitリポジトリを追加するか聞かれるのでAddにしておきました。

~/PycharmProjects/mpld3/examplesにあるpyファイルを実行してみるとちゃんと実行できました。

プロジェクトのインタープリターが~/anaconda3/bin/pythonである必要があります。

結果はブラウザが立ち上がってそこに出力されました。

HTML tooltip pluginはFollowDotCursorと同様の結果を得られます。

~/PycharmProjects/mpld3/notebooksにipynbファイルがありますのでJupyter Notebookで開いて実行できます。

mpld3_demo.ipynbをJupyter NotebookでRunしてみます。

左下にでてくるツールボタンを操作して拡大、パンができました。

マウスカーソルをもってくると座標の値を表示するJupyter Notebookの例をipynbファイルの中にみつけられなかったので、html_tooltips.pyの中身をJupyter Notebookにコピペして実行してみました。

Jupyter Notebookでインタラクティブなグラフをインライン表示されるには最後のmpld3.show()をmpld3.display()に書き換えます。

FollowDotCursorクラスと同様にマウスカーソルをもってくるだけで値が表示されました。

mpld3.show()をmpld3.display()に変えるだけでJupyter Notebookでも使えて便利ですね。

参考にしたサイト


Thumbnail gallery — Matplotlib 1.4.3 documentation
matplotlibによるグラフの例集。

widgets Examples — Matplotlib 1.4.3 documentation
matplotlibのウィジェットによるインタラクティブな例。

The Matplotlib API — Matplotlib 1.4.3 documentation
matplotlibのAPIリファレンス。

python - Is there a matplotlib equivalent of MATLAB's datacursormode? - Stack Overflow
Q&Aの回答されている方がmpldatacursorパッケージを作成されました。

python - Get data from plot with matplotlib - Stack Overflow
DataCursorと違ってマウスカーソルを近づけるだけで値を表示するFollowDotCursor。

python - Possible to make labels appear when hovering over a point in matplotlib in stem plot? - Stack Overflow
同じ作者によるFollowDotCursorの例。

mpldatacursor/README.rst at master · joferkington/mpldatacursor · GitHub
DataCursorのPythonモジュール。

5. Numpy / Scipy / Matplotlib 連携による簡単な可視化操作 — 2012.ProgramingLanguage 0.1 documentation
行列に色をつけて表示する方法。

MPLD3 — Bringing Matplotlib to the Browser
Pythonからブラウザでインタラクティブなグラフを出力できるmpld3パッケージ。

D3.js - Data-Driven Documents
mpld3 0.3gitではd3.v3.min.jsが一緒にインストールされていました。

D3.jsはなぜ人気があるのか? そして、なぜ難しいのか? | #GUNMAGISGEEK
mpld3からD3.jsで地図状にグラフ表示できそうです。

``mpld3.show()`` fails in Python 3.4 · Issue #196 · jakevdp/mpld3 · GitHub
Python3.4ではmpld3 0.2は動きませんでした。

Example Gallery — Bringing Matplotlib to the Browser
mpld3の例。mpld3.show()をmpld3.display()に変えるだけでJupyter Notebookでインライン表示されます。

次の関連記事:linuxBean14.04(76)MySQL5.6からPython3.4で散布図をプロットする

ブログ検索 by Blogger

Translate

最近のコメント

Created by Calendar Gadget

QooQ