【Streamlit】 st.plotly_chart()でインタラクティブなグラフを表示する

JS2IIU

11か月前

こんにちは、JS2IIUです。

Streamlitは、Pythonで簡単にウェブアプリケーションを作成できるフレームワークであり、データの可視化においても強力な機能を提供しています。特に、Plotlyと組み合わせることで、インタラクティブで美しいグラフを手軽に作成・表示することが可能です。本記事では、Streamlitのst.plotly_chart()関数に焦点を当て、その基本的な使い方と実践的な活用例を解説します。今回もよろしくお願いします。

st.plotly_chart()の基本的な使い方
1. 関数シグネチャ
st.plotly_chart()の活用例
まとめと参考リンク
1. 参考リンク

st.plotly_chart()の基本的な使い方

st.plotly_chart()は、Plotlyで作成したグラフオブジェクトをStreamlitアプリ上に表示するための関数です。この関数を使用することで、Plotlyのインタラクティブなグラフを簡単にウェブアプリケーションに組み込むことができます。

関数シグネチャ

Python

st.plotly_chart(
    figure_or_data,
    use_container_width=True,
    *,
    theme="streamlit",
    key=None,
    on_select="ignore",
    selection_mode=('points', 'box', 'lasso'),
    **kwargs
)

各引数の詳細は以下のとおりです：

figure_or_data: 表示するPlotlyのFigureオブジェクト、Dataオブジェクト、またはそれらの辞書やリスト。
use_container_width: グラフの幅を親コンテナの幅に合わせるかどうかを指定するブール値。デフォルトはTrueで、親コンテナの幅に合わせます。
theme: グラフのテーマを指定します。デフォルトは"streamlit"で、Streamlitのデザインテーマが適用されます。Noneを指定すると、Plotlyのデフォルトテーマが使用されます。
key: この要素に一意の識別子を付与するためのオプションの文字列。状態管理やコールバックで使用します。
on_select: ユーザーの選択イベントに対する応答方法を指定します。"ignore"（デフォルト）、"rerun", またはコールバック関数を指定できます。
selection_mode: 選択モードを指定します。デフォルトは('points', 'box', 'lasso')で、ポイント、ボックス選択、ラッソ選択が有効になります。

これらの引数を適切に設定することで、表示するグラフの外観や動作を細かく制御できます。

st.plotly_chart()の活用例

以下に、st.plotly_chart()を用いた3つの実践的なデータ可視化の例を紹介します。

1. 散布図の作成

Irisデータセットを使用して、花のがく片の幅と長さの関係を可視化する散布図を作成します。

Python

import streamlit as st
import plotly.express as px

# データの読み込み
df = px.data.iris()

# 散布図の作成
fig = px.scatter(
    df,
    x='sepal_width',
    y='sepal_length',
    color='species',
    title='Irisデータセットにおけるがく片の幅と長さ'
)

# グラフの表示
st.plotly_chart(fig, use_container_width=True)

解説:

データの読み込み: Plotly Expressのpx.data.iris()を使用して、Irisデータセットを取得します。
散布図の作成: px.scatter()関数で散布図を作成します。xとyにはそれぞれsepal_width（がく片の幅）とsepal_length（がく片の長さ）を指定し、colorにはspecies（種）を指定して、種ごとに色分けします。
グラフの表示: st.plotly_chart()関数で作成したグラフオブジェクトfigを表示します。use_container_width=Trueとすることで、グラフが親コンテナの幅に合わせて表示されます。

2. ヒストグラムの作成

ランダムに生成したデータの分布を示すヒストグラムを作成します。

Python

import streamlit as st
import plotly.figure_factory as ff
import numpy as np

# ヒストグラムデータの生成
x1 = np.random.randn(200) - 2
x2 = np.random.randn(200)
x3 = np.random.randn(200) + 2

# データをグループ化
hist_data = [x1, x2, x3]
group_labels = ['グループ1', 'グループ2', 'グループ3']

# ヒストグラムの作成
fig = ff.create_distplot(
    hist_data,
    group_labels,
    bin_size=[0.1, 0.25, 0.5]
)

# グラフの表示
st.plotly_chart(fig, use_container_width=True)

解説:

ヒストグラムデータの生成: numpyのrandom.randn()関数を使用して、平均値が異なる3つのデータセットを生成します。
データのグループ化: 生成したデータをリストhist_dataにまとめ、各データセットに対応するラベルをgroup_labelsとして定義します。
ヒストグラムの作成: Plotlyのfigure_factoryモジュールのcreate_distplot()関数を使用して、ヒストグラムを作成します。bin_sizeを指定して各グループのビン幅を調整します。
グラフの表示: st.plotly_chart()でヒストグラムを表示します。

3. 時系列データの可視化（株価データ）

次に、株価データを用いた時系列グラフを作成します。ここでは、Plotly Expressのpx.line()を使い、st.plotly_chart()でインタラクティブな可視化を行います。

Python

import streamlit as st
import plotly.express as px
import pandas as pd

# 株価データの取得（サンプルデータ）
df = px.data.stocks()

# 時系列グラフの作成
fig = px.line(df, x='date', y=['GOOG', 'AAPL', 'AMZN'], title='株価の推移')

# グラフの表示
st.plotly_chart(fig, use_container_width=True)

解説:

データの取得: px.data.stocks()を使用し、Google、Apple、Amazonの株価データを取得します。
時系列グラフの作成: px.line()を使用し、x軸にdate、y軸に複数の銘柄（GOOG、AAPL、AMZN）を指定して株価の推移を可視化します。
グラフの表示: st.plotly_chart(fig, use_container_width=True)でグラフを表示し、親コンテナの幅にフィットさせます。

まとめと参考リンク

本記事では、st.plotly_chart()の基本的な使い方を解説し、以下の3つの実践的なデータ可視化の例を紹介しました。

Irisデータセットの散布図（カテゴリごとのデータ分布の可視化）
ヒストグラム（データの分布を可視化）
時系列グラフ（株価データの変動を可視化）

これらの例を参考に、より高度なデータ可視化を試してみてください。

参考リンク

最後に、書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。ぜひ手に取ってみてください。

最後まで読んでいただきありがとうございます。