【Streamlit】集合棒グラフを作って日付ごとの売上見込・売上実績を比較する

前置き

こんにちはデータエンジニアの山口歩夢です！

この度、Streamlitの入門書を執筆しました！
Streamlitについて、基本的な内容から実践的な内容、自分が開発する上で躓いたポイントやTipsなどを書かせていただきました。

電子版が技術書典にて購入可能なため、是非チェックいただけると幸いです。

今回は、Streamlitで集合棒グラフを作成したので、作成方法をご紹介させていただきます。

集合棒グラフとは

集合棒グラフ(grouped bar chart)とは、複数のカテゴリのデータを比較するためのグラフです。各カテゴリが棒で表され、高さがそのカテゴリの数値を表します。
棒グラフは一つのカテゴリの値を期間ごとに比較したりするのに役立つのに対して、集合棒グラフは複数のカテゴリを期間ごとに比較するのに役立ちます。

以下のようなグラフです。
売上実績と売上見込が隣合わせになり、日付ごとに集計されていることが分かります。

実装方法

Vega-AltairというPythonのデータ可視化ライブラリと、st.altair_chartというStreamlitに用意されている関数を使用して、集合棒グラフの作成を行います。

st.altair_chartは、Vega-Altairライブラリを使用してデータを可視化してくれる関数です。
Streamlitにはst.bar_chartやst.line_chartなどの非常に簡単なコードでデータを可視化できる関数が用意されていますが、これらはst.altair_chartを使う場合よりも簡単にコードを書けるようにした関数(syntax-sugarと呼ばれる関数)です。
今回の集合棒グラフのようなカスタマイズ性が高いグラフを可視化したい場合は、st.altair_chartの方を使用する必要があります。

上記のライブラリや関数を使用して作成したコードは以下です。

streamlit_app.py

import streamlit as st
import pandas as pd
import altair as alt
import numpy as np

st.set_page_config(
    page_title="Streamlit App",
    page_icon="🧊",
    layout="wide",
    initial_sidebar_state="expanded"
)

# 日付範囲を生成
date_range = pd.date_range(start='2024-05-01', periods=15, freq='D')

# 売上見込と売上実績のデータをランダムに生成
sales_forecast = np.random.randint(100, 300, size=15)
sales_actual = np.random.randint(80, 250, size=15)

# データフレームを作成
data = pd.DataFrame({
    '日付': date_range,
    '売上見込': sales_forecast,
    '売上実績': sales_actual
})

# 日付列を文字列に変換
data['日付'] = data['日付'].dt.strftime('%Y-%m-%d')

# グラフ化するためにデータ型を更新
data_long = pd.melt(data, id_vars=['日付'], value_vars=['売上見込', '売上実績'])

# Altairチャートを作成
chart = alt.Chart(data_long).mark_bar(
    opacity=1
    ).encode(
    column=alt.Column('日付:O', spacing=5, header=alt.Header(labelOrient="bottom", title=None)),
    x=alt.X('variable', sort=['売上見込', '売上実績'], axis=None),
    y=alt.Y('value:Q', title=None),
    color=alt.Color('variable', title=None)
).configure_view().properties(width=60, height=400)

# Streamlitにチャートを表示
st.altair_chart(chart)

上記のコードを書いて、「streamlit run」を実行すると

$ streamlit run streamlit_app.py

以下のように、集合棒グラフを作成することができました！

まとめ

Streamlitには、st.bar_chartやst.line_chartなどの簡単にグラフを可視化できる関数を用意されていますが、
st.altair_chartを使用することで更に複雑なグラフを可視化できるということが非常に勉強になりました！