【Streamlit】アニメーションを取り入れる：st.plotly_chart

Streamlit
この記事は約7分で読めます。

こんにちは、JS2IIUです。
今回はグラフをさらにわかりやすく表示するためにアニメーションで動かすことを試してみます。今回もよろしくお願いします。

はじめに

この記事では、StreamlitとPlotlyという2つの強力なライブラリを使って、アニメーション付きのインタラクティブなグラフをWebアプリ上に表示する方法をご紹介します。

「データの変化を時間軸で見せたい」「見た目にもわかりやすいグラフを作りたい」という方におすすめの内容です。

完成イメージは以下のようになります。

  • 年ごとのGDP・寿命・人口の関係を視覚的に表示
  • インタラクティブなアニメーション付き散布図を表示

Pythonの基本文法を知っていれば、誰でも簡単に作れる内容です。ぜひ一緒に手を動かしながら進めていきましょう！

必要なライブラリのインストール

今回使用するライブラリは以下の2つです：

  • streamlit: Pythonで簡単にWebアプリを作るためのライブラリ
  • plotly: 美しくインタラクティブなグラフを作れるライブラリ

まずは以下のコマンドをターミナルやコマンドプロンプトで実行してインストールしましょう。

Bash
pip install streamlit plotly

すでにインストール済みの場合は、再インストールする必要はありません。

st.plotly_chartとは？

st.plotly_chartは、StreamlitでPlotlyのグラフを表示するための関数です。Plotlyは静的なグラフだけでなく、インタラクティブなアニメーション付きのグラフも作成できます。

まずは、st.plotly_chartの基本的な使い方を簡単な例で見てみましょう。

Bash
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")

# Streamlit上に表示
st.plotly_chart(fig)

上記のコードで、Plotlyで作成したグラフをStreamlit上に表示できます。

Plotlyでアニメーション付きグラフを作る

それでは、いよいよアニメーション付きのグラフを作成してみましょう。

ここではPlotlyが提供しているサンプルデータ「gapminder」を使います。このデータには世界中の国の年ごとの人口、寿命、GDPなどの情報が含まれています。

ステップ1：データの準備

Python
import plotly.express as px

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

ステップ2：アニメーション付きのグラフを作成

次に、以下のコードでアニメーション機能を持つ散布図を作成します。

Python
fig = px.scatter(
    df,
    x="gdpPercap",
    y="lifeExp",
    animation_frame="year",
    animation_group="country",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=True,
    size_max=60,
    range_x=[100, 100000],
    range_y=[25, 90]
)

このコードでは以下のような設定をしています：

  • animation_frame="year"：年ごとにアニメーション
  • animation_group="country"：国ごとにグラフの動きをグループ化
  • size="pop"：円の大きさを人口に比例させる
  • color="continent"：大陸ごとに色分け
  • log_x=True：X軸（GDP）を対数スケールに

Streamlitでアニメーションを表示する

作成したPlotlyのグラフは、Streamlitで簡単に表示できます。

以下が完成したStreamlitアプリのコードです。

Python
import streamlit as st
import plotly.express as px

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

# アニメーショングラフの作成
fig = px.scatter(
    df,
    x="gdpPercap",
    y="lifeExp",
    animation_frame="year",
    animation_group="country",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=True,
    size_max=60,
    range_x=[100, 100000],
    range_y=[25, 90]
)

# タイトルを表示
st.title("世界の発展の様子をアニメーションで見る")

# グラフを表示
st.plotly_chart(fig)

実行方法

以下のコマンドをターミナルで実行すると、ブラウザにアプリが表示されます。

Bash
streamlit run ファイル名.py

たとえば上記コードをapp.pyとして保存した場合：

Bash
streamlit run app.py

応用：ユーザーが選んだ大陸だけを表示する

さらに一歩進んで、ユーザーが表示するデータを選べるようにしてみましょう。以下のように、Streamlitのselectboxを使って大陸を選択できるようにします。

フィルター付きアプリのコード：

Python
import streamlit as st
import plotly.express as px

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

# ユーザーに大陸を選んでもらう
continents = df['continent'].unique()
selected = st.selectbox("表示する大陸を選んでください", continents)

# データをフィルタリング
filtered_df = df[df['continent'] == selected]

# アニメーショングラフの作成
fig = px.scatter(
    filtered_df,
    x="gdpPercap",
    y="lifeExp",
    animation_frame="year",
    animation_group="country",
    size="pop",
    color="country",  # 国ごとに色分け
    hover_name="country",
    log_x=True,
    size_max=60,
    range_x=[100, 100000],
    range_y=[25, 90]
)

# タイトルとグラフの表示
st.title("大陸別：世界の発展の様子（アニメーション）")
st.plotly_chart(fig)

補足ポイント：

  • ユーザーが選んだ内容に応じてグラフが変化
  • グラフの色分けを大陸ではなく国ごとに変更してより細かく

まとめ

今回は以下の内容を学びました：

  • Plotlyでアニメーション付きグラフを作成する方法
  • Streamlitでインタラクティブに表示する方法
  • ユーザー操作によるデータのフィルタリング

このように、StreamlitとPlotlyを組み合わせることで、動きのある視覚的にわかりやすいデータ可視化が簡単に実現できます。

参考リンク

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

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

コメント

タイトルとURLをコピーしました