【Streamlit】グラフを動的に変化させて、ダッシュボードを作ろう【matplotlib】

こんにちは。

前回に引き続き、Streamlitのグラフ作成について紹介していきます。

yonesuke0716.hatenablog.com

今回はより実用性を考えて、グラフを動的に変化させられるようにしてみましょう。

具体的には、グラフの縦軸や横軸を選択できるようにしたり、チェックボックスを実装して表示・非表示を選べるようにします。

こうすることで、今までエクセルで細かく調整をしていたものが、グラフィカルに簡単に調整できるようになります。

これによりプレゼン等の資料作成でかかっていた時間が一気に解消するかもしれません。

プレゼン時も顧客の要望をリアルタイムで可視化することができるため、便利なダッシュボードを作ることができます。

実際に作成したものを眺めるのが一番わかりやすいかと思うので、さっそくやっていきましょう。

グラフを表示・非表示できるようにする（チェックボックスの実装）
縦軸・横軸の表示を変化させてみる
おまけ（参考図書）

グラフを表示・非表示できるようにする（チェックボックスの実装）

チェックボックスの実装はこちら
docs.streamlit.io

それではtest.pyも修正していきましょう。

is_graph = st.checkbox('年齢をグラフ化する')
if is_graph:
    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)

追加したのはis_graphです。

st.checkboxはチェックボックスにチェックが入れられるとTrue、入ってないとFalseが渡されます。

つまり上記のコードで、チェックボックスにチェックを入れた時だけ、グラフが表示されるというわけです。

それではこれで「streamlit run test.py」実行してみましょう。

空白のチェックボックスが表示され、グラフが非表示になりました。

ではこのチェックボックスをクリックしてチェックをいれてみましょう。

うまく表示できましたね。

縦軸・横軸の表示を変化させてみる

続いて縦軸の上限値を変更できるようにしてみましょう。

ソースコードは以下のように記述します。

is_graph = st.checkbox('年齢をグラフ化する')
if is_graph:
    max_age = st.slider('年齢の上限', 0, 5, 3)
    age_ticks = range(max_age + 1)
    fig, ax = plt.subplots()
    ax.bar(df["公園"], df["年齢"])
    ax.set_ylim([0, max_age])
    ax.set_yticks(age_ticks)
    ax.set_title("公園と年齢")
    ax.set_xlabel("公園")
    ax.set_ylabel("年齢")
    st.pyplot(fig)

ポイントはstreamlitのsliderを使用しています。
docs.streamlit.io

これを使うとスライドバーが表示されて、数字をGUI的に操作することができます。

スライダーで選択した数字を、グラフの軸の上限値にしています。

それでは実行結果をみてみましょう。

上限を５、デフォルト値を３にしたので、設定どおり表示されてますね。

ではスライドバーを動かしてみます。

スライドバーを2に動かしてみましたが、グラフのy軸の上限も2に変わりました。

これで画面上で自由にグラフの表示形式を変更できます。

では次に横軸も見てみましょう。

こちらも表示したい公園だけを表示するようにしたいとします。

先ほどと異なり、数字ではなく文字列ですね。

この場合、どうやって実現すればよいでしょうか？

一度ここで少しだけ考えてみてください。

どうでしょうか？

なんとなくイメージだけでも想像できたでしょうか？

それでは回答例として、私だったらこんな感じでやってみました。

streamlitのmultiselecterを使います。
docs.streamlit.io

コードは以下のようにします。

is_graph = st.checkbox('年齢をグラフ化する')
if is_graph:
    max_age = st.slider('年齢の上限', 0, 5, 3)
    age_ticks = range(max_age + 1)
    
    park_list = df["公園"].to_list()
    select_park = st.multiselect('表示する公園名を選択', park_list, park_list[0])
    df = df[df['公園'].isin(select_park)]
    
    fig, ax = plt.subplots()
    ax.bar(df["公園"], df["年齢"])
    ax.set_ylim([0, max_age])
    ax.set_yticks(age_ticks)
    ax.set_title("公園と年齢")
    ax.set_xlabel("公園")
    ax.set_ylabel("年齢")
    st.pyplot(fig)