Bokeh をつかって行列演算を可視化する．

7
Like
0
Comment

Edited at 2017-11-14

本日は

pythonで使えるグラフ描画ツール Bokeh の練習として行列演算の結果の可視化をしてみようと思います．
例えば， 2x2行列

R (θ) = [\begin{matrix} \cos θ & - \sin θ \\ \sin θ & \cos θ \end{matrix}]

は２次元ベクトルに作用させると結果が　 $θ$ 　だけ回転したベクトルを出力することがよく知られています．
これを実際に　Bokeh　をもちいて確認してみましょう．

実装例

rot.py

import numpy as np
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, Div
from bokeh.layouts import gridplot, column


def main():
    xs = np.linspace(-np.pi, np.pi, 10)
    ys = xs
    Xs, Ys = np.meshgrid(xs, ys)
    Xs, Ys = Xs.flatten(), Ys.flatten()

    theta = np.deg2rad(30)
    mat = np.array([[np.cos(theta), -np.sin(theta)],
                    [np.sin(theta), np.cos(theta)]])

    transXs, transYs = mat @ np.array([Xs, Ys])

    output_file("lasso_selector.html")
    TOOLS = "pan,lasso_select,save,reset"
    source = ColumnDataSource(data=dict(Xs=Xs,
                                        Ys=Ys,
                                        transXs=transXs,
                                        transYs=transYs))

    f = figure(tools=TOOLS, title="target",
               x_range=(-np.pi*np.sqrt(2)-1, np.pi*np.sqrt(2)+1),
               y_range=(-np.pi*np.sqrt(2)-1, np.pi*np.sqrt(2)+1))
    f.circle('Xs', 'Ys', source=source)

    transf = figure(x_range=f.x_range,
                    y_range=f.y_range,
                    tools=TOOLS,
                    title="trans")
    transf.circle('transXs', 'transYs', source=source)

    grid = gridplot([[f, transf]])
    show(column(Div(text="<h2>Transform before and after</h2>"), 
                grid))

if __name__ == '__main__':
    main()

install

$ pip install bokeh

実行例

$ python rot.py

実行すると output_file　で指定した lasso_selector.html　が生成され，　ブラウザでこれを閲覧することができます．

ここでは格子点領域が左回りに30度回転している様子がみられます．　ただ，この場合では どの点がどの点に移動した かがわかりません．
そこで，　TOOLS に lasso_select を追加しすることで縄で範囲を指定した部分の targetグラフと transグラフ　の点との対応を閲覧することができます．　つまり，下の図のように可視化することができます．

縦に並んだ点列が30度傾いていますね．

応用

rank が１の行列たとえば，

A = [\begin{matrix} 1 & 1 \\ 1 & 1 \end{matrix}]

の像をみてみましょう．

rankが１なので像は一次元平面上にズベーっと並びます．　そしてtransグラフの方で原点の点を囲んでみましょう．　そうすると target グラフの方では $y + x = 0$ を満たす直線上の点が浮かびあがるはずです．要するに $\ker A$ を可視化していることになります．
これから線形代数の次元定理

rank A + \dim (\ker A) = 2

が成り立つのも確認できますね．

参考文献

追記

続編作りました

# 本日は

pythonで使えるグラフ描画ツール [Bokeh](https://bokeh.pydata.org/en/latest/docs/user_guide/quickstart.html) の練習として行列演算の結果の可視化をしてみようと思います．
例えば， 2x2行列

```math
R(\theta)=\begin{bmatrix}
\cos\theta& -\sin\theta\\
\sin\theta& \cos\theta
\end{bmatrix}
```

は２次元ベクトルに作用させると結果が　$\theta$　だけ回転したベクトルを出力することがよく知られています．
これを実際に　Bokeh　をもちいて確認してみましょう．

# 実装例

```py3:rot.py
import numpy as np
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, Div
from bokeh.layouts import gridplot, column

def main():
    xs = np.linspace(-np.pi, np.pi, 10)
    ys = xs
    Xs, Ys = np.meshgrid(xs, ys)
    Xs, Ys = Xs.flatten(), Ys.flatten()

theta = np.deg2rad(30)
    mat = np.array([[np.cos(theta), -np.sin(theta)],
                    [np.sin(theta), np.cos(theta)]])
    
    transXs, transYs = mat @ np.array([Xs, Ys])

output_file("lasso_selector.html")
    TOOLS = "pan,lasso_select,save,reset"
    source = ColumnDataSource(data=dict(Xs=Xs,
                                        Ys=Ys,
                                        transXs=transXs,
                                        transYs=transYs))

f = figure(tools=TOOLS, title="target",
               x_range=(-np.pi*np.sqrt(2)-1, np.pi*np.sqrt(2)+1),
               y_range=(-np.pi*np.sqrt(2)-1, np.pi*np.sqrt(2)+1))
    f.circle('Xs', 'Ys', source=source)

transf = figure(x_range=f.x_range,
                    y_range=f.y_range,
                    tools=TOOLS,
                    title="trans")
    transf.circle('transXs', 'transYs', source=source)

grid = gridplot([[f, transf]])
    show(column(Div(text="<h2>Transform before and after</h2>"), 
                grid))

if __name__ == '__main__':
    main()
```

# install

```shell-session
$ pip install bokeh
```

# 実行例

```shell-session
$ python rot.py
```

実行すると `output_file`　で指定した `lasso_selector.html`　が生成され，　ブラウザでこれを閲覧することができます．

![スクリーンショット 0029-11-13 午後9.36.16.png](https://qiita-image-store.s3.amazonaws.com/0/135978/a77553a0-6dba-03dd-9256-d03811b56bf8.png)

ここでは格子点領域が左回りに30度回転している様子がみられます．　ただ，この場合では **どの点がどの点に移動した** かがわかりません．
そこで，　`TOOLS` に `lasso_select` を追加しすることで縄で範囲を指定した部分の targetグラフ と transグラフ　の点との対応を閲覧することができます．　つまり，下の図のように可視化することができます．
 
![スクリーンショット 0029-11-13 午後9.41.51.png](https://qiita-image-store.s3.amazonaws.com/0/135978/f06dae15-e8d3-d361-398b-57533c7683e4.png)

縦に並んだ点列が30度傾いていますね．

# 応用

rank が１の行列たとえば，

```math
A=\begin{bmatrix}
1 & 1\\
1 & 1
\end{bmatrix}
```

の像をみてみましょう．

![スクリーンショット 0029-11-13 午後9.48.30.png](https://qiita-image-store.s3.amazonaws.com/0/135978/85555467-57c5-d40a-5671-959ea4d6cecd.png)

rankが１なので像は一次元平面上にズベーっと並びます．　そしてtransグラフの方で原点の点を囲んでみましょう．　そうすると target グラフの方では $y+x=0$ を満たす直線上の点が浮かびあがるはずです．要するに $\ker A$ を可視化していることになります．
これから線形代数の次元定理

```math
\operatorname{rank} A + \dim(\ker A) = 2
```

が成り立つのも確認できますね．

# 参考文献

- [Quickstart](https://bokeh.pydata.org/en/latest/docs/user_guide/quickstart.html)
- [Titles over layouts a la "suptitle"](https://github.com/bokeh/bokeh/issues/5463)
- [次元定理の意味，具体例，証明](https://mathtrain.jp/ranknullity)

# 追記
[続編作りました](https://qiita.com/SatoshiTerasaki/items/b7a5bf61f572aac1e358)

Toot

SatoshiTerasaki

78Contribution

Bokeh をつかって行列演算を可視化する．

本日は

実装例

install

実行例

応用

参考文献

追記

Popular Posts

Report article

Feedback