こんにちは、JS2IIUです。
今回はグラフをさらにわかりやすく表示するためにアニメーションで動かすことを試してみます。今回もよろしくお願いします。
はじめに
この記事では、StreamlitとPlotlyという2つの強力なライブラリを使って、アニメーション付きのインタラクティブなグラフをWebアプリ上に表示する方法をご紹介します。
「データの変化を時間軸で見せたい」「見た目にもわかりやすいグラフを作りたい」という方におすすめの内容です。
完成イメージは以下のようになります。
- 年ごとのGDP・寿命・人口の関係を視覚的に表示
- インタラクティブなアニメーション付き散布図を表示
Pythonの基本文法を知っていれば、誰でも簡単に作れる内容です。ぜひ一緒に手を動かしながら進めていきましょう！
必要なライブラリのインストール
今回使用するライブラリは以下の2つです：
streamlit: Pythonで簡単にWebアプリを作るためのライブラリplotly: 美しくインタラクティブなグラフを作れるライブラリ
まずは以下のコマンドをターミナルやコマンドプロンプトで実行してインストールしましょう。
pip install streamlit plotlyすでにインストール済みの場合は、再インストールする必要はありません。
st.plotly_chartとは？
st.plotly_chartは、StreamlitでPlotlyのグラフを表示するための関数です。Plotlyは静的なグラフだけでなく、インタラクティブなアニメーション付きのグラフも作成できます。
まずは、st.plotly_chartの基本的な使い方を簡単な例で見てみましょう。
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：データの準備
import plotly.express as px
# gapminderデータの読み込み
df = px.data.gapminder()ステップ2：アニメーション付きのグラフを作成
次に、以下のコードでアニメーション機能を持つ散布図を作成します。
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アプリのコードです。
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)
実行方法
以下のコマンドをターミナルで実行すると、ブラウザにアプリが表示されます。
streamlit run ファイル名.pyたとえば上記コードをapp.pyとして保存した場合：
streamlit run app.py応用：ユーザーが選んだ大陸だけを表示する
さらに一歩進んで、ユーザーが表示するデータを選べるようにしてみましょう。以下のように、Streamlitのselectboxを使って大陸を選択できるようにします。
フィルター付きアプリのコード：
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についても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。