結局全然理解していないオブジェクト指向matplotlib

# はじめに
matplotlibには2つの書き方があります。1つがpyplotモジュールを使った書き方（MATLABの書き方をベースにしているらしい）で、もう一つがfig, ax = plt.subplots()などの後にax.plotなどを使う書き方です。（参考: [The Lifecycle of a Plot](https://matplotlib.org/stable/tutorials/introductory/lifecycle.html)）

どっちの書き方でも描ければ良いといえば良いのですが、細かい調整をしようとするとオブジェクト指向の書き方を身に付けた方が良いらしいです。

…という話を↓の記事で読んだ記憶はあるのですが、それ以来特に気にせず使っており、結局全然オブジェクト指向でのmatplotlibの書き方分かっていない（そもそもmatplotlib使って可視化を行うのが苦手）ので、これを機にちょっとでも克服しよう、というのが今日の記事の目標です。

[早く知っておきたかったmatplotlibの基礎知識、あるいは見た目の調整が捗るArtistの話](https://qiita.com/skotaro/items/08dc0b8c5704c94eafb9)

# オブジェクト指向な書き方

## Artistとは
参考： [Artist tutorial](https://matplotlib.org/stable/tutorials/intermediate/artists.html)
matplotlibの考え方としては、図として書かれている線やら点やらラベルは全てArtistと呼ばれるオブジェクトです。Artistが自身のプロパティを持っており、それらを変更してあげることで見え方を変えてあげることができます。
![7082f678-f73b-4b10-9dd4-bc9c45ca8c56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/ab54fb52-f49b-4b7d-1021-52e199d21a0f.png)

原理的には、真っ白なキャンバスを用意してこれらのArtistをぺたぺた貼っていけば良いのですが、これだけ色々な要素があると扱いが大変です。（グラフが1つならまだしも、複数作りたいとなった時に管理が大変そうですよね）

実際には、matplotlibではこれらの**表示される側**のArtistをprimitiveと呼び、これらのオブジェクトを**表示する側**のArtistをcontainersと呼びます。このcontainersに属するArtistは複数あるのですが、それらがいい感じに階層構造になっていて、担当範囲をいい感じに受け持って（後で紹介するAxesオブジェクトの負担が重すぎる気もしますが）、図全体をいい感じに構成してくれています。

という訳で、matplotlibで「どのように表示するのか」を理解するには、表示する側のArtistであるcontainersを理解できれば良さそう、ということが分かりました。次からはcontainersについてもう少し詳細に見ていきます。

## containersの階層構造
containersにはFigure, Axes, Axis, Tickの4つがあり、これらがこの順序で階層構造になっています。イメージとしては下の図が分かりやすいです（なぜかTickが存在しませんが）

各containerの役割は、
- Figure: キャンバス
- Axes: データをプロットするところ
- Axis: 目盛のラベルと線、グリッド、軸のラベルを扱う
- Tick: 目盛のlineとかtextのprimitiveを持っているところ（正直Axisとの違いがあんまり分かっていないのですが、AxisはTickにアクセスして目盛などの操作を行えるが、実際の値を持っているのがTickというイメージだと思います）

![47e825d7-8168-4b03-987f-64967409d3f2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/cb2839fa-b3b2-9729-7f8d-0cb357d376ad.png)
Figureは複数のAxesを持つことができ、Axesはx, y軸（3次元の場合はz軸も）のAxisを持つことができ、Axisは複数のtickを持つことができる、という感じです。

言葉だけでは分かりづらいと思うので、上の階層から実際に触っていくことで、containersへの理解を深めていきます。

## Figure
figureはplt.figure()によって作ることができます。
```
fig = plt.figure()　# an empty figure with no Axes
```
この時点ではAxesも何もないので、真っ白なキャンバスが用意されただけの状態です。

実際これで実行しても、Axesが0のFigureがあるだけですよ、と表示されて何も映りません
![aba96653-0dad-4999-89fe-3fb0e2191ef3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/ddf0c95e-e859-74d4-4034-14865c8c109a.png)
試しにAxesをこのFigureに追加して見ましょう。既に作られたFigureにはadd_subplotメソッドでaxesオブジェクトを追加します。
![6017a6d8-300c-4cb6-9273-ddd6a230527a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/326bcb21-7037-94fc-b7d6-65966fc8cd85.png)
とりあえず四角と目盛りがつきました。FigureとAxesは階層構造になっているはずなので、FigureはどこかでAxesをプロパティとして持っています。Figureにはaxesと言うプロパティがあり、ここからAxesの存在を確かめられます。
![5b1ce302-c02e-483c-bfd8-5aad69d4687d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/0eb6a062-d0d0-ca12-5b31-b86d87289a3d.png)
※：AxesSubplotはAxesのsubclass

FigureはAxesを複数持てることを確かめてみましょう。fig.axesは↑の通りリストになっていて、今の状態だとリストの長さは1でした
![dc8439ce-8091-4337-ab3f-4db3e4d237af.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/f6271a71-cc3e-2a7a-e65d-b2127b7e62b2.png)
試しにaxesを1個増やしてみます。そうすると、fig.axesにaxesが2つできていることを確認できました。
![63bf317b-d1b7-41c5-b2b6-69053c537c75.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/ba797366-12ab-e5fc-dc1d-03267da814fc.png)

このように、FigureがaxesというプロパティでAxesを持っているんだなーということが理解できました。

以下のような操作は全くやる必要がないのですが、FigureはAxes以外にもlinesといったプロパティを持っています。これを使えば、Axesを使わなくても線を表示することができます（その場合、Axesを使っていないので、当然Axesがあることで表示される四角いエリアは表示されません）
![c255d1bf-b279-4184-a755-373c91c7ec2e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/7c75c77a-216a-6d5e-d830-8831506be1c9.png)
Figureが複数のプロパティを持っており、我々は上のようにFigureのAxes以外のプロパティを直接いじることは滅多にやらず、Figureのプロパティの1つであるAxesの中身をいじることで図を可視化しているんだな、ということが理解できれば問題ないかなと思います。

（ちなみにFigureは以下のようなプロパティを持っています）
![80257c02-7351-41a5-b41c-9d478587feb8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/cc6275a1-18c0-44b6-1bae-78a47143b8df.png)

## Axes
Axesが図を書く際にほとんどのArtistを扱うオブジェクトで、AxesがAxes自身に多くのArtistを格納しますし、Axesが持つhelper methodでArtistを追加、更新する役割を果たしており、matplotlibの中核の機能を担っています。

とはいえ、FigureがAxesをプロパティに持っていたように、Axesが他のArtistを持っている構造は変わりません。ここでは例としてAxesがax.linesで線の情報を持っていることを確認してみましょう。

ax.plotで線を引くと、ax.linesというリストのプロパティに1つの線が含まれていることが分かります。
![a8a7190f-e008-4001-810e-cc321ee10644.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/811390aa-01b5-9abe-90a6-64db8a4b6a0f.png)

中身を見てみると、ax.linesは1つの線を持っており、それはmatplotlib.lines.Line2Dというオブジェクトになっています。このように、FigureがAxesが複数持つように、AxesはLine2DというArtistを複数持てる、ということが分かりました。こうやってAxesは自身のプロパティに他の色んなArtistをリスト形式なりなんなりで格納していて、図が作られている、ということになります。

![5da3444c-2d2a-494c-a8ca-6dbfa8e3467b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/b27a482f-8711-6c54-6070-d27175894fa5.png)

下は一例ですが、Axesがどんなprimitiveを作成するhelper methodを持ち、それがどこに格納されているかを整理した表になります。これをみることで、自分がやっている処理は、あるprimitiveを対応するプロパティに追加、更新、削除している処理なんだなーと理解することができます。
![e11226b5-2276-4c20-b466-a9051a517775.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/b24c7716-85c4-6790-9d63-fafc31860b16.png)

## Axis, Tick
Axisは目盛りやグリッド線を格納しており、例えば目盛りにはget_ticklocsメソッドで確認できます（説明していませんでしたが、Axesはxaxis, yaxisでaxisにアクセスできます）

![4db981aa-bc89-439c-a448-1cb6c157fcb7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/f3f375e3-9d4b-fdc1-99f6-02e81409a8c4.png)
ラベルを確認したいときはget_ticklabelsメソッドを使います。
![217beeee-a854-491c-a7a7-b1f087f093a9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/fed819b5-9c47-3e6f-30af-32df2c95bd9a.png)
ticksオブジェクトを取得するには、get_major_ticks, get_minor_ticksメソッドを使います（majorとminorが何なのか分かっていません）
![918e2c7b-adfd-4d3b-a99b-7aada50d31e7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/667ab2a4-8865-ec9c-4025-723f950b41ab.png)
Axisは上記含め、以下のようなaccessor methodを持っています
![02057a3e-0cc4-425a-9856-22768dbdcd69.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/e929b607-a43c-325f-d273-fe6966d7d047.png)
tickはlineとかlabelの実体を持っているだけです。以下のようなプロパティを持ちます。
![6d3a9089-5bca-4a7c-afb0-7cf61376c452.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356429/26efaedf-ce17-baee-237d-e36da1a09ca4.png)
ここまでで、containersの各要素の説明は以上になります。

# おわりに
matplotlibのオブジェクト指向の考え方について、表示する側のArtistであるcontainersを中心に全体像について説明してきました。正直、これが分かったからといって劇的にmatplotlibが書けるようになる訳ではないので無駄といえば無駄なんですが、調べてみたかったし何となく分かったことへの達成感があるので良しとします。

もしかしたら、「これはこのcontainerのこのprimitiveをいじってんだろうなー」という感覚を持っていることで、自分のやっていることが何なのか理解できて助けになる場面があるかもしれません。もしそんなことがあったらこの記事にいいねして頂ければと思います。