Streamlitでインタラクティブな地図にデータを可視化する

Python

この記事は何か

  • Streamlitを使ってインタラクティブなデータ可視化を地図上で試みたい人のためのハウツーを記載
  • 本記事で使用するコードのレポジトリは↓

github.com

完成イメージ

f:id:kichinosukey:20200628232023p:plain

どんなコードか

まずダッシュボードのタイトルを設定

st.title("Garbage Distribution in Tochigi")

データを生成（デモなのでランダムで）

data= generate_data()

地図上にデータをプロット

st.write(pdk.Deck(
        map_style="mapbox://styles/mapbox/light-v9",
        initial_view_state={
            "latitude": PARK[0][0],
            "longitude": PARK[0][1],
            "zoom": 11,
            "pitch": 50,
        },
        layers=[
            pdk.Layer(
                "HexagonLayer",
                data=data,
                get_position=["lon", "lat"],
                radius=100,
                elevation_scale=4,
                elevation_range=[0, 1000],
                pickable=True,
                extruded=True,
            ),
        ],
    ))

棒グラフも表示

st.altair_chart(alt.Chart(data)
        .mark_bar().encode(
            x=alt.X("day:Q", scale=alt.Scale(nice=False)),
            y=alt.Y("q:Q"),
            tooltip=['day', 'q']
        ), use_container_width=True)

チェックボックスで生データ表示を切り替え

if st.checkbox("Show raw data", False):
        st.write(data)

所感

  • Streamlitを使った部分の実装については30分もかからなかったのでめちゃお手軽
  • クラウド上へのデプロイ手法を身につけとけば企画〜実装のサイクルがめちゃ早まる
  • pydeckについての理解はほとんど必要なかった
    • APIについての理解が深まればもっと柔軟な設定ができそう
  • AltairのAPIは多少理解しておかないとStreamlitのAPIだけだと使いづらいかな・・・