Streamlit 學習筆記 : 內建統計圖表 (三) 散布圖

本篇旨在測試 Streamlit 內建統計圖表函式中的散布圖函式 st.scatter_chart() :

函式名稱	說明
st.line_chart()	繪製折線圖，適合用來呈現時間序列或連續變化的資料。
st.bar_chart()	繪製長條圖，適合用來比較各分類資料的數值大小。
st.scatter_chart()	繪製散佈圖，用於顯示兩個變數之間的關係（需 DataFrame 格式資料）。
st.area_chart()	繪製區域圖，類似折線圖，但底部會填滿陰影，強調總量變化。
st.map()	在地圖上繪製地理座標點，支援 DataFrame 中包含緯度與經度的資料。

本系列所有測試文章參考 :

# Streamlit 學習筆記索引

3. 散布圖函式 st.scatter_chart() : 

散布圖利用座標點的分佈來顯示兩個變數之間的關係, 例如相關性 (正相關或負相關), 資料是否有群聚現象與離群值等. 不過 st.scatter_chart() 不支援分群上色功能. 舊版參數結構與 st.line_chart() 以及 st.bar_chart() 相同, 但 v1.32 版開始添加了 color 與 size 參數支援分類上色與指定資料點的大小功能 :

st.scatter_chart(

    data=None,

    x=None,

    y=None,

    color=None,

    size=None,

    width=0,

    height=0,

    use_container_width=True

)

參數說明如下表 :

參數名稱	說明
data	必要參數，資料來源，通常為 Pandas DataFrame。
x	X 軸欄位名稱（類別或數值型）。
y	Y 軸欄位名稱（通常為數值）。
color	根據指定欄位分類繪製不同顏色的點。
size	依據欄位數值調整每個點的大小。
width	圖表寬度（像素），預設為自動。
height	圖表高度（像素），預設為自動。
use_container_width	布林值，若為 True 則圖表寬度會自動撐滿容器。

例如 : 

測試 3-1 : 預設的散布圖 [看原始碼]   

# st-scatter-chart-test-1.py

import streamlit as st

import pandas as pd

df=pd.DataFrame({

    'x': [1, 2, 3, 4, 5],

    'y': [10, 70, 40, 60, 30],

    'group': ['A', 'B', 'A', 'B', 'A'],

    'value': [100, 200, 150, 300, 250]

    })

st.subheader('預設的散布圖')

st.scatter_chart(

    data=df,

    x='x',

    y='y',

    )

此例指定 x 與 y 參數為 DataFrame 中的 x 與 y 欄位繪製散布圖, 結果如下 : 

也可以不指定 x 與 y 參數, 而是用 DataFrame 的 set_index() 指定資料索引並選取 Y 軸欄位, st.scatter_chart() 會自動以索引欄位做為 X 軸, 例如 : 

測試 3-2 : 用 df.set_index() 指定索引欄位繪製散布圖 [看原始碼]   

# st-scatter-chart-test-2.py

import streamlit as st

import pandas as pd

df=pd.DataFrame({

    'x': [1, 2, 3, 4, 5],

    'y': [10, 70, 40, 60, 30],

    'group': ['A', 'B', 'A', 'B', 'A'],

    'value': [100, 200, 150, 300, 250]

    })

st.subheader('用 df.set_index() 指定索引繪製散布圖')

data=df.set_index('x')['y']  # 指定 x 欄為索引, y 欄為資料

st.scatter_chart(data=data)

此例呼叫 df 的 set_index() 函式設定 x 欄位為索引, 然後選取 y 欄為要繪製的資料欄位 (Y 軸), 然後將此 DataFrame 傳給 st.scatter_chart(), 它會自動以索引欄位 x 為 X 軸繪製散布圖, 結果與上例一樣. 注意, 此處 ['y'] 選取 y 欄是必要的, 因為要繪製的是 x 與 y 的關係, 且 df 中還有其他非數值欄位, 若不選取也會出現資料型態錯誤. 

下面範例是使用 v1.32 版後支援的 color 與 size 參數來做分類上色功能 :

測試 3-3 : 指定索引欄位與選取資料欄位繪製散布圖 [看原始碼]   

# st-scatter-chart-test-3.py

import streamlit as st

import pandas as pd

df=pd.DataFrame({

    'x': [1, 2, 3, 4, 5],

    'y': [10, 70, 40, 60, 30],

    'group': ['A', 'B', 'A', 'B', 'A'],

    'value': [100, 200, 150, 300, 250]

    })

st.subheader('設定 color 與 size 參數的散布圖')

st.scatter_chart(

    data=df,

    x='x',

    y='y',

    color='group',  # 依 group 欄位分類顏色

    size='value'    # 依 value 欄位調整點大小

    )

此例指定 df 中的 group 欄位做為分類依據 (有 A, B 兩類), 用 value 欄位設定資料點大小, 結果如下 :

可見資料點分成 A, B 兩類, 分別用深藍與淡藍色表示, 且資料點大小也反映 value 欄位之值. 

下面範例是使用 Numpy 與 Pandas 產生的隨機資料繪製的散布圖 :

測試 3-4 : 指定索引欄位與選取資料欄位繪製散布圖 [看原始碼]   

# st-scatter-chart-test-4.py

import streamlit as st

import pandas as pd

import numpy as np

# 建立隨機資料

np.random.seed(42)  # 確保數據可重現

data=pd.DataFrame({

    'x': np.random.randn(100),  # 隨機生成 100 個 x 座標

    'y': np.random.randn(100) * 2,  # 隨機生成 100 個 y 座標

    'size': np.random.rand(100) * 100,  # 隨機生成散點大小

    'category': np.random.choice(['A', 'B', 'C'], 100)  # 隨機分類

    })

st.subheader('隨機散布圖')

st.scatter_chart(

    data,

    x='x',

    y='y',

    size='size',  # 控制資料點大小

    color='category'  # 根據類別上色

    )

結果如下 :