よしたく blog

ITエンジニアとして自分が知らなかったことをまとめています

Python製のWebフレームワークStreamlitをさわってみた

datatech-jp Casual Talks #1に参加したときに知った、Python製のWebフレームワークStreamlitを触ってみた。

yoshitaku-jp.hatenablog.com

streamlit.io

github.com

Streamlitのサイトを覗くとまずThe fastest way to build and share data appsと書いてあり、データ周りで共有を楽にすることを全面に打ち出していることがわかる。 Pythonスクリプトで実行できるので、データ分析スクリプトの内容をそのまま流用できるのも嬉しいし、Pythonで完結されるのでフロントエンドの知識が不要な点も大きい!

今回はどれぐらい簡単に表示できるのか試してみる。 まずはDockerを使って環境の準備から立ち上げ実施し、次にseabornのtitanicデータを使って可視化をおこなう。

準備

streamlitフォルダを作成し、直下にDockerfileとdocker-compose.ymlを用意する。streamlit以外にもライブラリが入っているけど立ち上げ後に使うので、必要なければ入れなくても大丈夫🙏

Dockerfile

FROM python:3.9.10

RUN pip install streamlit
RUN pip install pandas
RUN pip install seaborn
RUN pip install matplotlib

docker-compose.yml

version: '3'
services:
  app:
    build: .
    container_name: 'streamlit'
    command: "streamlit run src/app.py"
    ports:
      - "8501:8501"
    volumes:
      - "./src:/src/"

次にstreamlit配下にsrcフォルダを用意し、app.pyを作成する。app.pyには次の内容を記述する。

import streamlit as st

# タイトル
st.title("Streamlit Application - titanic data")

立ち上げ

ここまで用意できたらdocker-compose up -d --buildで起動し、http://localhost:8501/にアクセスする。次の画面が表示される。 まずは立ち上げまで実施してみた。

f:id:yoshitaku_jp:20220220200240p:plain

データ周りを表示してみる

app.pyの内容を次のように変更してみる。 スクリプトのコメントにも書いたけど、seabornのサンプルデータtitanicを元に、生存者データの可視化とチケット別生存者データの可視化で2つの図を表示してみた!

import matplotlib.pyplot as plt
import pandas as pd
import seaborn as sns
import streamlit as st

# タイトル
st.title("Streamlit Application - titanic data")

# タイタニックデータの読み込み
titanic = sns.load_dataset("titanic")

# 生存者データの可視化
st.subheader("Number of Titanic Survivors")

fig1 = plt.figure(figsize=(10, 4))
sns.countplot(x="survived", data=titanic)
st.pyplot(fig1)

# チケット別生存者データの可視化
st.subheader("Number of Titanic Survivors by Ticket")

fig2 = plt.figure(figsize=(10, 4))
sns.countplot(x="survived", hue="class", data=titanic)
st.pyplot(fig2)

このコードは次のように表示してくれる。 無事に2つの図が表示されている💡

f:id:yoshitaku_jp:20220220201133p:plain

まとめ

ダッシュボード周りはコード化しづらく、現在もダッシュボードの変更履歴が管理できない部分は頭を悩ませていて、今後広く問題になると思っていたのでStreamlitのようなものが解決の糸口になってくれると嬉しいと感じた。 他に似たようなdashもあるので、こちらはこちらも触って比較したい💪

github.com