Streamlit解説コラム(12)：データビジュアライゼーション～チャート描画の詳細解説（後編）

1 はじめに

データの視覚化は、データ分析とデータ サイエンスの分野で重要な役割を果たします。データを視覚化することで、その背後にあるパターンや傾向をより深く理解し、正確な意思決定や予測を行うことができます。ただし、生データを意味のあるグラフに変換するのは簡単ではありません。だからこそ、これを達成するための強力で柔軟なツールが必要なのです。

過去数年にわたって、Streamlit が登場し、すぐにインタラクティブなデータ アプリケーションを構築するための頼りになるツールの 1 つになりました。Streamlit は Python ベースのオープンソース ライブラリであり、その簡潔な構文と直感的なインターフェイスにより、データ サイエンティストや開発者は強力な視覚化機能を備えたアプリケーションを迅速に構築できます。

このコラムの最後の 2 つのブログでは、Streamlit で一般的に使用されるいくつかのデータ視覚化関数について詳しく説明しました。このブログでは、関数 st.vega_lite_chart、st.plotly_chart、st.bokeh_chart、st.pydeck_chart、st.graphviz_chart、st.map のメソッドとパラメーターの使用に焦点を当てて、Streamlit に関するデータ視覚化の知識を共有していきます。 。

このブログを読むことで、これらの強力な機能を使用してさまざまな種類のチャートやマップを描画する方法を学び、構成をカスタマイズし、スタイルを調整し、インタラクティブな機能を追加する方法を習得できます。Streamlit でのデータ視覚化の魅力を探ってみましょう。

2 st.vega_lite_chart を使用して Vega-Lite チャートを描画します

st.vega_lite_chart 関数は、Vega-Lite チャートを描画するための Streamlit の関数の 1 つです。Vega-Lite は、データをビジュアル プロパティにマッピングするためのシンプルかつ強力なルール セットを提供する、インタラクティブ グラフィックスを記述するための高レベルの文法です。

以下に 2 つの例を通して st.vega_lite_chart 関数の使用法を示します。

2.1 例 1: 散布図を描画する

この例では、まず必要なライブラリをインポートし、ランダムなデータセットを生成し、「a」、「b」、「c」の 3 つの列を持つ DataFrame を作成します。次に、st.vega_lite_chart 関数を使用して散布図を描画します。グラフ内の各点は「a」列と「b」列の値によって決まり、点のサイズと色は「c」列の値。

import streamlit as st
import pandas as pd
import numpy as np

chart_data = pd.DataFrame(
    np.random.randn(200, 3),
    columns=['a', 'b', 'c'])

st.vega_lite_chart(chart_data, {
    
    
    'mark': {
    
    'type': 'circle', 'tooltip': True},
    'encoding': {
    
    
        'x': {
    
    'field': 'a', 'type': 'quantitative'},
        'y': {
    
    'field': 'b', 'type': 'quantitative'},
        'size': {
    
    'field': 'c', 'type': 'quantitative'},
        'color': {
    
    'field': 'c', 'type': 'quantitative'},
    },
})

この例では、散布図のマーカー タイプを円として指定し、そのツールチップを提供します。同時に、Vega-Lite エンコード方式を使用して x 軸と y 軸のフィールド名を指定し、「size」属性と「color」属性を使用してポイントのサイズと色を決定します。

2.2 例 2: カスタムテーマのスタイル

Vega-Lite チャートは、デフォルトで Streamlit テーマを使用して Streamlit に表示されます。このテーマは、シンプルでユーザーフレンドリーで、アプリケーションの設計とよりよく統合されています。Streamlit 1.16.0 以降では、theme="streamlit" を設定することで Streamlit テーマを使用できます。Streamlit テーマを無効にする場合は、theme=None を使用して Vega-Lite のネイティブ テーマを使用します。以下は、さまざまなテーマを使用したグラフを示す例です。

import streamlit as st
from vega_datasets import data

source = data.cars()

chart = {
    
    
    "mark": "point",
    "encoding": {
    
    
        "x": {
    
    
            "field": "Horsepower",
            "type": "quantitative",
        },
        "y": {
    
    
            "field": "Miles_per_Gallon",
            "type": "quantitative",
        },
        "color": {
    
    "field": "Origin", "type": "nominal"},
        "shape": {
    
    "field": "Origin", "type": "nominal"},
    },
}

tab1, tab2 = st.tabs(["Streamlit 主题（默认）", "Vega-Lite 原生主题"])

with tab1:
    # 使用 Streamlit 主题，这是默认主题，您也可以省略 theme 参数
    st.vega_lite_chart(
        source, chart, theme="streamlit", use_container_width=True
    )

with tab2:
    st.vega_lite_chart(
        source, chart, theme=None, use_container_width=True
    )

この例では、streamlit ライブラリと vega_datasets ライブラリを使用します。data.cars() からデータ ソースを取得し、チャートの構成を含むディクショナリを作成します。次に、st.tabs 関数を使用して 2 つのタブを作成します。1 つは Streamlit テーマ、もう 1 つは Vega-Lite ネイティブ テーマです。各タブで、st.vega_lite_chart 関数を使用して対応するチャートを描画し、コンテナーの幅に合わせて use_container_width=True を設定します。

この例を通じて、さまざまなテーマが図のスタイルとアプリケーション全体に与える影響を体験できます。Streamlit テーマは、アプリのデザインとよりよく調和する Streamlit のカラー パレットを使用します。一方、Vega-Lite ネイティブ テーマは Vega-Lite のデフォルト スタイルを使用し、アプリのデザインとは若干異なる場合があります。

このガイドが、st.vega_lite_chart 関数を使用して Vega-Lite チャートを描画し、必要に応じてテーマ スタイルをカスタマイズする方法を理解するのに役立つことを願っています。Streamlit と Vega-Lite を使用すると、インタラクティブで美しいデータ視覚化チャートを簡単に作成できます。

3 st.plotly_chart 関数を使用して Plotly グラフを作成します

Plotly は、インタラクティブなグラフや視覚化を作成するための強力で人気のある Python ライブラリです。Streamlit と組み合わせると、Plotly チャートをアプリケーションに簡単に埋め込むことができます。この記事では、st.plotly_chart 関数の使い方とパラメーターを詳しく紹介し、サンプル コードを通じてその機能を示します。

3.1 st.plotly_chart 関数の基本的な使い方

st.plotly_chart 関数を使用する前に、次のように必要なライブラリをインポートする必要があります。

import streamlit as st
import plotly.express as px

次に、Plotly を使用してチャートを生成し、st.plotly_chart 関数を使用してそれを Streamlit アプリケーションに埋め込むことができます。サンプルコードは次のとおりです。

# 添加直方图数据
x1 = np.random.randn(200) - 2
x2 = np.random.randn(200)
x3 = np.random.randn(200) + 2

# 将数据分组在一起
hist_data = [x1, x2, x3]
group_labels = ['Group 1', 'Group 2', 'Group 3']

# 使用自定义 bin_size 创建 distplot
fig = ff.create_distplot(hist_data, group_labels, bin_size=[.1, .25, .5])

# 绘制图表
st.plotly_chart(fig, use_container_width=True)

この例では、plotly.figure_factory の create_distplot 関数を使用してヒストグラムを作成します。次に、st.plotly_chart 関数を呼び出して、チャートを Streamlit アプリケーションに埋め込みます。パラメータ use_container_width=True を設定すると、コンテナの幅に応じてチャートのサイズが適応的に変更されます。

3.2 st.plotly_chart 関数のその他の使用法

st.plotly_chart 関数は、基本的な使用法に加えて、グラフの外観と動作をさらにカスタマイズできる追加パラメーターもサポートしています。よく使用されるパラメーターをいくつか示します。

• テーマ: チャートのテーマを設定します。
  「streamlit」 (Streamlit のデフォルトのテーマを使用) または None (Plotlyのネイティブ テーマを使用) に設定できます。
• 共有: チャートの共有モードを設定します。「streamlit」(データとコールバック関数を共有) または「auto」(共有モードを自動的に検出) に設定できます。
• config: Plotly の構成オプションを設定します。複数の構成オプションを辞書として渡すことができます。

例を使用してさらに使用法を示してみましょう。

import plotly.express as px
import streamlit as st

df = px.data.gapminder()

fig = px.scatter(
    df.query("year==2007"),
    x="gdpPercap",
    y="lifeExp",
    size="pop",
    color="continent",
    hover_name="country",
    log_x=True,
    size_max=60,
)

tab1, tab2 = st.tabs(["Streamlit 主题（默认）", "Plotly 原生主题"])
with tab1:
    # 使用 Streamlit 主题，这是默认的方式，也可以省略 theme 参数
    st.plotly_chart(fig, theme="streamlit", use_container_width=True)
with tab2:
    # 使用 Plotly 的原生主题
    st.plotly_chart(fig, theme=None, use_container_width=True)

この例では、カスタム カラーマップ (color_continuous_scale="reds") を使用し、st.tabs 関数を使用して、異なるテーマを持つ 2 つのグラフをタブに配置します。このようにして、テーマを簡単に切り替えて、2 つの異なる外観のグラフを比較できます。

また、チャートのサイズの調整、インタラクティブ機能の追加など、他のパラメーターを使用してチャートの外観と動作をさらにカスタマイズすることもできます。Plotly と Streamlit のドキュメントに慣れることで、より多くの構成オプションと使用法を知ることができます。

4 データ視覚化のための Streamlit と Bokeh の組み合わせ

データ サイエンスやデータ分析の作業において、データの視覚化は、データをより深く理解し、パターンや傾向を特定し、結果を他の人に伝えるのに役立つ強力なツールです。Streamlit はインタラクティブなデータ アプリケーションを構築するための Python ライブラリであり、Bokeh はインタラクティブな Web アプリケーションを構築するための Python 視覚化ライブラリです。この記事では、Streamlit で Bokeh を使用してデータを視覚化する方法を紹介し、例を通してその使用法を示します。

まず、必要なライブラリとモジュールをインポートする必要があります。サンプルコードは次のとおりです。

import streamlit as st
from bokeh.plotting import figure

次に、サンプル データを作成し、Bokeh を使用して単純な折れ線グラフを作成します。サンプルコードは次のとおりです。

x = [1, 2, 3, 4, 5]
y = [6, 7, 2, 4, 5]

p = figure(
    title='simple line example',
    x_axis_label='x',
    y_axis_label='y')

p.line(x, y, legend_label='Trend', line_width=2)

上記のコードでは、Bokeh Figure オブジェクト p を作成し、折れ線グラフのタイトル、x 軸、y 軸のラベルを設定します。次に、line メソッドを使用してグラフ上に線を描き、データ x と y を指定し、凡例のラベルと線の幅を設定しました。

ボケ チャート オブジェクト p を作成したので、それを Streamlit アプリケーションに表示します。st.bokeh_chart 関数を使用して、Bokeh チャート p を Streamlit アプリケーションに埋め込むことができます。サンプルコードは次のとおりです。

st.bokeh_chart(p, use_container_width=True)

上記のコードでは、st.bokeh_chart 関数を使用してボケ チャート オブジェクト p を Streamlit アプリケーションに埋め込み、パラメータ use_container_width=True を使用してチャートをコンテナの幅に適応させます。

5 st.graphviz_chart 関数を使用してグラフとネットワーク図を作成する

データの視覚化では、一般的な統計チャートに加えて、グラフやネットワーク図も非常に便利なツールです。Streamlit は st.graphviz_chart 関数を提供します。これを使用すると、ブログ投稿、アプリケーション、またはレポートでグラフやネットワーク図を簡単に作成できます。この記事では、st.graphviz_chart 関数の使用方法を紹介し、サンプル コードを使用してその使用法を示します。

5.1 st.graphviz_chart 関数の概要

st.graphviz_chart 関数は、グラフやネットワーク図を描画するための Streamlit の組み込み関数です。DOT 言語で表されるグラフ オブジェクトまたはグラフ文字列を入力として受け取り、Streamlit アプリケーションのインターフェイス上に画像をレンダリングします。

例1

簡単な例から始めましょう。この例では、graphviz ライブラリを使用して有向グラフを作成し、st.graphviz_chart 関数を使用して表示します。

import streamlit as st
import graphviz

# 创建一个图形对象
graph = graphviz.Digraph()
graph.edge('run', 'intr')
graph.edge('intr', 'runbl')
graph.edge('runbl', 'run')
graph.edge('run', 'kernel')
graph.edge('kernel', 'zombie')
graph.edge('kernel', 'sleep')
graph.edge('kernel', 'runmem')
graph.edge('sleep', 'swap')
graph.edge('swap', 'runswap')
graph.edge('runswap', 'new')
graph.edge('runswap', 'runmem')
graph.edge('new', 'runmem')
graph.edge('sleep', 'runmem')

# 使用 st.graphviz_chart 函数显示图形
st.graphviz_chart(graph)

上記のコードでは、まず必要なライブラリをインポートし、Digraph オブジェクト グラフを作成しました。次に、graph.edge メソッドを使用してエッジを追加し、有向グラフを構築します。最後に、st.graphviz_chart 関数を使用して、Streamlit アプリケーションのインターフェイスにグラフを表示します。

上記のコード スニペットを実行すると、Streamlit アプリケーションのインターフェイスにグラフ ビューが表示され、作成したグラフが表示されます。

例 2

st.graphviz_chart 関数は、graphviz ライブラリを使用してグラフ オブジェクトを作成するだけでなく、DOT 言語で直接表現されるグラフ文字列もサポートします。これを別の例で説明してみましょう。

st.graphviz_chart('''
    digraph {
        run -> intr
        intr -> runbl
        runbl -> run
        run -> kernel
        kernel -> zombie
        kernel -> sleep
        kernel -> runmem
        sleep -> swap
        swap -> runswap
        runswap -> new
        runswap -> runmem
        new -> runmem
        sleep -> runmem
    }
''')

上記のコードでは、グラフ文字列を st.graphviz_chart 関数に直接渡しました。このグラフはDOT言語を用いて表現されており、頂点と辺の関係を指定することでグラフ構造を記述します。

上記のコード スニペットを実行すると、例 1 と同じグラフ ビューが Streamlit アプリケーションのインターフェイスに表示されます。

6 st.map 関数を使用して地図と散布図を表示する

データの視覚化では、マップの視覚化が一般的な方法です。st.map関数はStreamlitで地図の視覚化を作成するための関数で、地図と散布図を組み合わせたもので、自動センタリングや自動ズームの機能があります。

使用手順:

ステップ 1: 必要なライブラリとモジュールをインポートします。

import streamlit as st
import pandas as pd
import numpy as np

ステップ2: データを準備します:

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

ステップ 3: st.map 関数を使用してマップを視覚化します。

st.map(df)

例 1: 基本的な地図の視覚化

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(df)

この例では、まずランダムな緯度と経度を含む DataFrame を作成し、次に st.map 関数を使用して地図上に散布図を描画し、自動的にセンタリングとスケーリングを行います。

例 2: カスタム散布図スタイル

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(df, size=20, color='#0044ff')

上の例では、size パラメーターと color パラメーターを設定することで、データ ポイントのサイズと色をカスタマイズできます。

例 3: 他の列を使用して緯度、経度、サイズ、色を動的に設定する

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame({
    
    
    "col1": np.random.randn(1000) / 50 + 37.76,
    "col2": np.random.randn(1000) / 50 + -122.4,
    "col3": np.random.randn(1000) * 100,
    "col4": np.random.rand(1000, 4).tolist(),
})

st.map(df,
    latitude='col1',
    longitude='col2',
    size='col3',
    color='col4')

この例では、複数のデータ列を持つ DataFrame を使用し、緯度、経度、サイズ、色の列名パラメーターを指定して、緯度、経度、サイズ、色を動的に設定します。

7 エピローグ

この記事では、Streamlit ライブラリのデータ視覚化への応用と各関数の使い方とパラメータを包括的に紹介します。私たちは、データ分析とデータサイエンスの分野におけるデータ視覚化の重要性と、Python ライブラリとしての Streamlit の利点と利便性を初めて認識しました。次に、一般的に使用される Streamlit 関数 st.vega_lite_chart、st.plotly_chart、st.bokeh_chart、st.pydeck_chart、st.graphviz_chart、st.map について詳しく説明しました。

これらの機能を使用すると、Vega-Lite、Plotly、Bokeh、PyDeck、Graphviz などの強力な視覚化ツールを活用して、さまざまなインタラクティブなチャート、マップ、ネットワーク図を簡単に作成できます。データのロード、グラフの種類の選択、スタイルとレイアウトのカスタマイズ、パラメーターを設定することによる豊富なインタラクティブ機能の実装方法を学びました。これにより、データ サイエンティストやアナリストは、データからの洞察をより効果的に探索、解釈、伝達できるようになります。

Streamlit は使いやすく柔軟性があり、インタラクティブなデータ アプリケーションの開発をより効率的にします。また、簡単な導入、即時フィードバック、簡単な共有など、データ視覚化における Streamlit の利点も強調します。データ関連のタスクをより直観的かつ動的に表示できるため、データをより深く理解し、パターンを発見し、結果を提示することができます。

さらなる研究と探索を通じて、Streamlit のより多くの機能と拡張機能を習得し、データ視覚化の能力をさらに強化することができます。データ サイエンスと視覚化の分野で Streamlit の可能性を探求し続けるには、関連するドキュメント、チュートリアル、例を参照してください。