こんにちは、JS2IIUです。
今回は操作可能なグラフを表示する方法を見ていきます。部分的に拡大したり、表示範囲の変更が自在にできるようになります。今回もよろしくお願いします。
1. はじめに
Webアプリケーションでデータを可視化する際、グラフに「ズーム」や「パン」などのインタラクティブな操作ができると、ユーザーがより深くデータを分析しやすくなります。
本記事では、Pythonの可視化ライブラリ Plotly を使って、Streamlit アプリ上にインタラクティブなグラフを表示する方法を紹介します。操作方法のカスタマイズ方法についても解説していきます。
「PythonとStreamlitの基本的な使い方はわかるけど、グラフの操作までは使ったことがない」という方に向けた内容です。ぜひ一緒に試してみてください！
2. インタラクティブグラフとは？
まずは、「インタラクティブなグラフ」とは何かを簡単に説明します。
インタラクティブなグラフとは、次のようなユーザー操作が可能なグラフのことです：
- ズーム：特定の範囲を拡大して詳細を見る
- パン：表示範囲をスライドして動かす
- ツールチップ：マウスを重ねるとデータの詳細を表示
- リセット：グラフを初期状態に戻す
- 画像保存：グラフをPNG画像として保存
これらの操作を簡単に実現できるのが、Plotlyのグラフです。次章から実際に使ってみましょう。
3. Plotlyでインタラクティブグラフを作成しよう
ステップ1：必要なライブラリのインストール
まず、ライブラリがまだインストールされていない場合は、以下のコマンドでインストールします：
pip install streamlit plotly pandasステップ2：サンプルデータの用意とグラフ作成
Plotlyには、すぐに使えるサンプルデータがいくつか用意されています。今回は、iris（アヤメの花）データセットを使って、散布図（scatter plot）を作成します。
import streamlit as st
import plotly.express as px
import pandas as pd
# データの読み込み
df = px.data.iris()
# 散布図の作成
fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species")
# Streamlit上にグラフを表示
st.plotly_chart(fig, use_container_width=True)
コードの解説：
px.data.iris()：Plotly Expressに含まれている有名なデータセットpx.scatter(...)：散布図を作成st.plotly_chart(fig)：Streamlit上にグラフを表示use_container_width=True：グラフを画面幅にフィットさせる
このコードをstreamlit_app.pyとして保存し、以下のコマンドで実行してみましょう：
streamlit run streamlit_app.py4. ズームやパンを試してみよう
上記のグラフを実行すると、マウス操作で以下のようなインタラクションができるはずです：
- ズーム：グラフ上でドラッグすることで拡大可能
- パン：拡大後にマウスでドラッグすることで移動可能
- ツールバー：グラフ右上に表示される操作パネルで以下の操作が可能です
- 🔍 ズームイン/アウト
- 🔄 リセット
- 📷 画像として保存
- 選択範囲の切り替えなど
これだけで、インタラクティブなグラフが完成です！
5. 操作モードをカスタマイズしてみよう
Plotlyでは、初期状態のマウス操作モードを変更することも可能です。
たとえば、パン操作を無効にしてズームのみを許可する場合は、以下のようにfig.update_layout()を使います：
fig.update_layout(dragmode='zoom') # 初期操作モードをズームに設定さらに、ツールバーの表示や軸のロックなども設定できます。以下は一例です：
fig.update_layout(
dragmode='zoom',
title='ズーム専用の散布図',
xaxis=dict(fixedrange=False),
yaxis=dict(fixedrange=False)
)6. よくあるエラーと注意点
✅ st.pyplot()との違いに注意
StreamlitにはMatplotlib用のst.pyplot()もありますが、Plotlyのグラフを表示するには必ずst.plotly_chart()を使ってください。
✅ グラフが表示されない場合
figが正しく生成されているか確認streamlit runコマンドでアプリを実行しているか確認- ブラウザのキャッシュをクリアして再読み込みすることも有効です
7. まとめ
今回は、PlotlyとStreamlitを使って、以下のようなインタラクティブなグラフ操作を体験しました：
- ズームやパンなどの動的操作
st.plotly_chart()による簡単な埋め込みfig.update_layout()によるカスタマイズ
インタラクティブなグラフは、データ分析やダッシュボード作成の際に非常に有効です。今後は、フィルターやセレクトボックスと連動させて、さらに便利なグラフ表示にも挑戦してみましょう！
8. 参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント