StreamlitとPlotly: インタラクティブなデータ可視化を簡単に

Name: Olaf Källström

Published on 2023/7/24

データサイエンスの領域では、可視化は複雑なデータセットを理解し、意味のある洞察を抽出するために重要な役割を果たしています。この分野で革新的なツールとなったのが、StreamlitとPlotlyです。この記事では、これらのツールを一緒に使ってインタラクティブな可視化とダッシュボードを作成するための包括的なガイドを提供します。初心者から経験豊富な開発者まで、StreamlitとPlotlyを始めるために必要なすべてが揃っています。

StreamlitとPlotlyの紹介

Streamlitは、開発者が簡単にインタラクティブなWebアプリケーションを作成できるオープンソースのPythonフレームワークです。データサイエンティストや機械学習エンジニアがデータスクリプトをわずか数行のコードで共有可能なWebアプリに変換するのに役立ちます。Streamlitのシンプルさと柔軟性は、データプロフェッショナルの間で人気があります。

一方、Plotlyは美しいインタラクティブなプロットの作成を可能にする多目的なライブラリです。40以上のユニークなチャートタイプをサポートし、幅広い統計、金融、地理、科学、3次元のユースケースをカバーしています。Plotlyのインタラクティビティにより、ユーザーはズーム、パン、ホバー、データの掘り下げなどができるため、データの探索が直感的で情報量が豊富になります。

StreamlitとPlotlyを一緒に使うことで、開発者は比較的簡単に複雑な可視化を持つインタラクティブなダッシュボードを作成することができます。

PlotlyをStreamlitで使用するための代替手段: PyGWalkerを使用する

Plotlyは強力なツールですが、Pythonでのデータ可視化には他の選択肢もあります。PyGWalker (opens in a new tab)は、Streamlit AgGridの代替手段として非常に優れたツールです。

PyGWalker + Streamlitオンラインデモ (opens in a new tab)

PyGWalker (opens in a new tab)は、TableauのようなUIを簡単にStreamlitアプリに埋め込むのに役立つPythonライブラリです。

この強力なデータ可視化Pythonライブラリを使用してStreamlitアプリを強化するための詳細な手順をコーディングは楽しい (opens in a new tab)のSven (opens in a new tab)が作成した素晴らしいビデオでご覧ください！

PyGWalkerコミュニティへのSvenと彼の素晴らしい貢献 (opens in a new tab)に特別な感謝を！

さらに、以下のリソースもチェックできます:

PygwalkerとStreamlitを使ってデータを探索し結果を共有する方法 (opens in a new tab)
より多くのPyGWalkerの例はPyGWalkerのGitHubページ (opens in a new tab)を参照してください。

(opens in a new tab)

StreamlitとPlotlyを使ったインタラクティブな可視化の作成

StreamlitとPlotlyを使ってインタラクティブな可視化を作成するのは簡単です。最初のステップは、Pythonスクリプトで必要なライブラリをインポートすることです。以下に例を示します:

import streamlit as st
import plotly.express as px

次に、Plotlyのフィギュアを作成し、Streamlitアプリで表示します。例えば、Plotlyを使ってシンプルな棒グラフを作成し、Streamlitで表示します:

## サンプルのデータフレームを作成する
df = pd.DataFrame({
   '果物': ['りんご', 'オレンジ', 'バナナ', 'りんご', 'オレンジ', 'バナナ'],
   '数量': [4, 1, 2, 2, 4, 5],
   '市': ['SF', 'SF', 'SF', 'モントリオール', 'モントリオール', 'モントリオール']
})
 
## Plotlyを使って棒グラフを作成する
fig = px.bar(df, x='果物', y='数量', color='市', barmode='group')
 
## Streamlitでフィギュアを表示する
st.plotly_chart(fig)

この例では、px.barを使って棒グラフを作成し、st.plotly_chartを使ってStreamlitアプリでグラフを表示しています。その結果、ユーザーはデータの値を表示するためにホバーすることができ、ズームイン・アウトもでき、静的な画像としてダウンロードすることもできるインタラクティブな棒グラフが表示されます。

StreamlitとPlotlyの高度なテクニック

StreamlitとPlotlyを使った基本的なインタラクティブな可視化を作成するのは簡単ですが、これらのツールにはより複雑でカスタマイズされた可視化を可能にする高度な機能もあります。

その1つの機能は、StreamlitでPlotlyのフィギュアを更新することができることです。これは、Plotlyのupdate_layoutメソッドとupdate_tracesメソッドを使用して行うことができます。例えば、フィギュアのレイアウトを更新してタイトルや軸ラベルを変更することができます:

fig.update_layout(
    title='新しいタイトル',
    xaxis_title='新しいX軸のタイトル',
    yaxis_title='新しいY軸のタイトル',
)

同様に、プロットされたデータのマーカーカラーなど、プロットデータのプロパティを変更するためにフィギュアのトレースを更新することもできます:

fig.update_traces(marker_color='rgb(158,202,225)')

もう1つの高度な機能は、StreamlitでのPlotlyチャートのサイズ調整の問題を解決することができることです。時には、PlotlyチャートがStreamlitアプリのレイアウトにうまく収まらず、切り取られたり他の要素と重なってしまうことがあります。これは、st.plotly_chart関数のheightパラメータとwidthパラメータを調整することで解決することができます:

st.plotly_chart(fig、use_container_width=True)
 
この例では、 `use_container_width=True` は、チャートがStreamlitアプリのメインコラム全体を占めるようにし、レイアウト内に適合するようにします。
 
## Streamlit Plotly ダッシュボードの構築
 
StreamlitとPlotlyを使用してダッシュボードを構築するには、複数のインタラクティブな可視化とコントロールを1つのアプリに組み合わせる必要があります。これにより、スライダー、チェックボックス、セレクトボックスなどのコントロールを使用して、ユーザーが可視化とリアルタイムに更新できるようになります。
 
以下は、Streamlit Plotlyダッシュボードの簡単な例です：
 
```python
import streamlit as st
import plotly.express as px
import pandas as pd
 
## データの読み込み
df = pd.read_csv('data.csv')
 
## チャートの種類を選択するためのセレクトボックスを追加
chart_type = st.selectbox('チャートの種類を選択してください', ['棒グラフ', '折れ線グラフ'])
 
## チャートを作成
if chart_type == '棒グラフ':
    fig = px.bar(df, x='フルーツ', y='金額', color='都市', barmode='group')
elif chart_type == '折れ線グラフ':
    fig = px.line(df, x='フルーツ', y='金額', color='都市')
 
## チャートを表示
st.plotly_chart(fig、use_container_width=True)

この例では、 st.selectbox を使用してセレクトボックスがStreamlitアプリに追加されています。選択した値は、Plotlyで作成するチャートの種類を決定するために使用されます。チャートは、 st.plotly_chart を使用してアプリ内で表示されます。

Streamlit Plotlyダッシュボードの構築は、データ可視化プロジェクトの要件に応じて、必要に応じて単純または複雑になる場合があります。 StreamlitとPlotlyの柔軟性とパワーにより、可能性は無限です。

結論：データの可視化におけるStreamlitとPlotlyの力

StreamlitとPlotlyは、相互に補完しあい、インタラクティブなデータの可視化とダッシュボードを作成するための強力な組み合わせです。 Streamlitのシンプルさと柔軟性により、Webアプリの構築には優れたツールです。一方、Plotlyの幅広いグラフの種類とインタラクティビティの機能により、データの可視化において多機能なツールです。

StreamlitとPlotlyの統合により、データサイエンティストや開発者は無限の可能性が広がります。シンプルな棒グラフから複数のインタラクティブな可視化を持つ複雑なダッシュボードの構築まで、これらのツールはデータを洞察に変えるために必要な機能を提供します。

データが私たちの世界でますます重要な役割を果たす中、StreamlitとPlotlyなどのツールは進化し続け、改善されていきます。これらのツールについて最新の情報を入手し、効果的に使用する方法を学ぶことで、データの可視化スキルを向上させ、より影響力のある洞察に基づいた可視化を作成することができます。

StreamlitアプリをTableauのようなUIに変換する、素晴らしいデータ分析＆データ可視化ツール、PyGWalkerを聞いたことがありますか？

PyGWalker (opens in a new tab)は、簡単にTableauのようなUIを自分のStreamlitアプリに埋め込むことができるPythonライブラリです。

(opens in a new tab)

よくある質問

1. StreamlitでインタラクティブなPlotlyチャートを表示するにはどうすればよいですか？

st.plotly_chart 関数を使用して、StreamlitでインタラクティブなPlotlyチャートを表示できます。最初に、Plotlyの図を作成し、それを st.plotly_chart に渡してStreamlitアプリに表示します。その結果、ユーザーはチャート上にマウスを重ねたり、ズームイン・ズームアウトしたり、静的な画像としてダウンロードしたりすることができるインタラクティブなチャートが表示されます。

2. StreamlitでPlotlyの図を更新するにはどうすればよいですか？

StreamlitでPlotlyの図を更新するには、Plotlyの update_layout メソッドや update_traces メソッドを使用します。 update_layout メソッドを使用すると、タイトルや軸ラベルなどの図のレイアウトを変更できます。 update_traces メソッドを使用すると、プロットされたデータのプロパティ（マーカーカラーなど）を変更できます。

3. StreamlitでのPlotlyチャートのサイズに関する問題を回避するにはどうすればよいですか？

st.plotly_chart 関数の height および width パラメーターを調整することで、StreamlitでのPlotlyチャートのサイズに関する問題を回避できます。たとえば、use_container_width=True を設定すると、チャートはStreamlitアプリのメインコラム全体を占めるようになり、レイアウト内に適切に収まるようになります。

Streamlitで動的なタブを作成：簡単に始める方法 StreamlitとSeabornの使用方法：クイックガイド