streamlitチュートリアル 和訳

下記の和訳です。
https://docs.streamlit.io/en/latest/tutorial/create_a_data_explorer_app.html#create-an-app

アプリを作成する

uber_pickups.py

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

st.title('Uber pickups in NYC')

streamlit run uber_pickups.py
自動で新しいタブが開く。

データを取得する

DATE_COLUMN = 'date/time'
DATA_URL = ('https://s3-us-west-2.amazonaws.com/'
         'streamlit-demo-data/uber-raw-data-sep14.csv.gz')

def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    lowercase = lambda x: str(x).lower()
    data.rename(lowercase, axis='columns', inplace=True)
    data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])
    return data

# Create a text element and let the reader know the data is loading.
data_load_state = st.text('Loading data...')
# Load 10,000 rows of data into the dataframe.
data = load_data(10000)
# Notify the reader that the data was successfully loaded.
data_load_state.text('Loading data...done!')

この関数は、データフレームにロードしたい行数を指定するパラメータ(nrows)を1つ受け取ります。

アプリの右上隅に、アプリを再実行するかどうかを尋ねるボタンがいくつか表示されます。常に再実行」を選択すると、保存するたびに変更内容が自動的に表示されます。

キャッシュによる省力化

以下のように追記

@st.cache
def load_data(nrows):

スクリプトを保存すると、Streamlit が自動的にアプリを再実行します。このスクリプトを @st.cache で実行するのは初めてなので、何も変更はありません。キャッシュの威力を実感できるように、ファイルをもう少しいじってみましょう。

以下のように変更

# 変更前
data_load_state.text('Loading data...done!')

# 変更後
data_load_state.text("Done! (using st.cache)")

追加した行がすぐに出てきたのがわかりますか？一歩引いてみると、これは実際には非常に驚くべきことです。何か魔法のようなことが裏で起こっていて、それを起動するのに1行のコードで済んでいるのです。

ローデータを調査する

以下を末尾に追記

st.subheader('Raw data')
st.write(data)

ヒストグラムを描く

st.subheader('Number of pickups by hour')
hist_values = np.histogram(
    data[DATE_COLUMN].dt.hour, bins=24, range=(0,24))[0]
st.bar_chart(hist_values)

ざっと確認したところ、最も混雑している時間帯は17時（午後5時）のようです。

このダイアグラムを描くために、Streamlitのネイティブなbar_chart()メソッドを使用しましたが、StreamlitはAltair、Bokeh、Plotly、Matplotlibなどのより複雑なチャートライブラリをサポートしていることを知っておくことが重要です。完全なリストは、サポートされているチャートライブラリを参照してください。

地図にデータをプロットする

Uberのデータセットでヒストグラムを使用することで、ピックアップの最も混雑する時間帯を特定することができましたが、市内のどこにピックアップが集中しているかを把握したいとしたらどうでしょうか。このデータを棒グラフで表示することもできますが、市内の緯度・経度座標に精通していなければ、解釈するのは簡単ではありません。ピックアップの集中度を表示するために、Streamlit st.map() 関数を使って、ニューヨーク市の地図上にデータを重ね合わせてみましょう。

st.subheader('Map of all pickups')
st.map(data)

ヒストグラムを描いた後、Uberのピックアップが最も混雑する時間帯は17:00であることがわかりました。17:00にピックアップが集中していることを示すために、マップを描き直してみましょう。

以下を末尾に追記。

hour_to_filter = 17
filtered_data = data[data[DATE_COLUMN].dt.hour == hour_to_filter]
st.subheader(f'Map of all pickups at {hour_to_filter}:00')
st.map(filtered_data)

スライダーを使う

# 変更前
hour_to_filter = 17

# 変更後
hour_to_filter = st.slider('hour', 0, 23, 17)  # min: 0h, max: 23h, default: 17h

ボタンを使う

# 変更前
st.subheader('Raw data')
st.write(data)

# 変更後
if st.checkbox('Show raw data'):
    st.subheader('Raw data')
    st.write(data)