【Streamlit】WEBアプリにグラフを作成しよう【matplotlib】

こんにちは。

今回も引き続きStreamlitを使ってWEBアプリを作っていきます。

Streamlitはpandas等のテーブルデータを扱うことに非常に長けている特徴を持っています。

実用面で考えると、テーブルを可視化する、いわゆるグラフ化の実装が重要となります。

これができるようになれば、毎回エクセルでグラフを作る面倒な作業が楽になる可能性があります。

特にエクセルファイルが複数あったとき、それらのファイルをひとつひとつ開いて毎回グラフを作成するのは面倒ですよね？

複数というのが5個ぐらいならまだ許せるかと思います。

これが10個、20個、となってくれば、それだけで数時間、下手すると1日潰れたりしてもう嫌になりますよね。

さらにグラフというのは、プレゼン等で一部拡大したり、表示する項目を減らしたり増やしたりという操作をするかと思います。

データが重いと作業や表示するのに時間がかかるし、思った通りの見栄えにならないとプレゼンがグダグダしたような経験ありませんか？

以上のように、ビジネスにおいてグラフ化をすることで困ったことがある人は、Streamlitを検討してみると良いかもしれません。

それではよろしくお願いします。

これからやること
- 公園検索WEBアプリの全体像をグラフ化する
実装（シンプル）
- matplotlibのインストール
- matplotlibのfig, axについて
実装（表示修正版）
- japanize_matplotlib
まとめと次の課題
おまけ（推薦図書）

これからやること

公園検索WEBアプリの全体像をグラフ化する

前回作成した、公園検索WEBアプリを引き続き使っていきます。
yonesuke0716.hatenablog.com

読み込んだテーブルの実態を把握するため、可視化してみましょう。

横軸に公園名、縦軸に年齢の棒グラフを作成することを目的とします。

実装（シンプル）

matplotlibのインストール

実装の前に、グラフの描写に必要なmatplotlibというライブラリをインストールします。

いつものpip installしましょう。

$ pip install matplotlib

matplotlibのインストールが完了したら、test.pyに以下を続けてください。

import matplotlib.pyplot as plt

fig, ax = plt.subplots()
ax.bar(df["公園"], df["年齢"])
st.pyplot(fig)

import文を除けば、わずか3行で棒グラフが作成できます。

これで可視化の準備はOKです。

では前回同様、streamlit run test.pyで実行します。

実行すると、以下のようなWEBページが表示されれば成功です。

しかしこれではあまりに簡素というか雑なグラフです。

もう少し表示の仕方を変更してみましょう。

matplotlibのfig, axについて

表示の仕方を変更するにあたって、fig, ax = plt.subplots() のfigとaxを理解する必要があります。

簡単に言うとグラフにおける図のオブジェクトをfig、軸のオブジェクトがaxになります。

絵で表すと以下になりますので、ご存じない方はイメージを把握しておいてください。

この絵は以下のサイトからの引用ですので、興味があれば参照ください。
matplotlib.org

これらを踏まえた上で、グラフの表示の仕方を変更します。

実装（表示修正版）

先ほどのソースコードを以下のように変更します。

import matplotlib.pyplot as plt

fig, ax = plt.subplots()
ax.bar(df["公園"], df["年齢"])
ax.set_ylim([0, 3])
ax.set_yticks([0, 1, 2, 3])
ax.set_title("公園と年齢")
ax.set_xlabel("公園")
ax.set_ylabel("年齢")
st.pyplot(fig)

何をやっているかというと、以下のような修正を行うものになります。
・set_ylimで縦軸を0～３の範囲で表示するよう修正
・set_yticksでy軸の感覚を0.5刻みだったものを1刻みに修正
・グラフタイトルに「公園と年齢」を表示
・x軸に「公園」、y軸に「年齢」と表示

さて、WEBページを更新してみましょう。

タイトルと軸のラベル部分が正しく表示されておらず、□□として表示されています。

これは文字化けの現象であり、matplotlibで日本語テキストを入力すると良く起こる問題です。

この対策として、japanize_matplotlibというライブラリをインストールします。

japanize_matplotlib

こちらもpip installでOKです。

$ pip install japanize-matplotlib

そして、先ほどのソースコードを以下のように変更します。

import matplotlib.pyplot as plt
import japanize_matplotlib

fig, ax = plt.subplots()
ax.bar(df["公園"], df["年齢"])
ax.set_ylim([0, 3])
ax.set_yticks([0, 1, 2, 3])
ax.set_title("公園と年齢")
ax.set_xlabel("公園")
ax.set_ylabel("年齢")
st.pyplot(fig)