簡単なグラフと地図

データの可視化はStreamlitの得意分野です。 まずは、細かい設定なしで**「とりあえずデータを可視化したい」**ときに使える便利なコマンドを紹介します。

Chart elements - Streamlit Docs

Create interactive data visualizations with Streamlit's charting capabilities including simple charts, advanced visualization libraries, and community components.

docs.streamlit.io

折れ線グラフと棒グラフ

Pandasのデータフレームをそのまま st.line_chart() や st.bar_chart() に渡すだけで、インタラクティブなグラフが完成します。

chart_basic.py

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

st.title("基本のチャート")

# ランダムな売上データを作成
# カラム名: A店, B店, C店
df = pd.DataFrame(
    np.random.rand(20, 3),
    columns=["Shop A", "Shop B", "Shop C"]
)

st.subheader("1. 折れ線グラフ (Line Chart)")
st.write("時系列データの推移などに使います。")
st.line_chart(df)

st.subheader("2. 棒グラフ (Bar Chart)")
st.write("量の大小を比較するのに使います。")
st.bar_chart(df.iloc[:5]) # 最初の5行だけ表示

グラフにカーソルを合わせると詳細な値が表示されます。また、右上のアイコンから画像を保存することも可能です。

↺ リセット ↗ 新しいタブで開く

地図の表示 (Map)

データの中に「緯度(lat)」と「経度(lon)」という列があれば、st.map() を使うだけで地図上にプロットできます。 試しに、仙台（東北大学 青葉山キャンパス周辺） を表示してみましょう。

chart_map.py

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

st.title("地図の表示 (Sendai)")

st.write("緯度(lat)と経度(lon)が含まれるデータがあれば、`st.map` で一発表示できます。")
st.write("以下は **東北大学 青葉山キャンパス** 周辺のデータです。")

# 東北大学青葉山キャンパス周辺の座標
# 緯度: 38.252, 経度: 140.838
base_lat = 38.252
base_lon = 140.838

# ランダムな座標データを生成
# 少し広範囲にばらつくように調整 (/ [100, 100] で範囲を調整)
map_data = pd.DataFrame(
    np.random.randn(100, 2) / [200, 200] + [base_lat, base_lon],
    columns=['lat', 'lon']
)

st.map(map_data)

st.info("マウスホイールでズームして、青葉山や仙台駅の方まで動かしてみてください。")

↺ リセット ↗ 新しいタブで開く