개요

상호작용으로 데이터를 시각화할 수 있는 웹 응용 프로그램을 만들고 싶습니다

D3.js 등을 직접 사용하는 것은 좀 무겁다(기술력상)

원래 웹학과 지식은 겸손하지 않고 거의 0(Vue)

그럼 Streamlit 써보세요

환경 구조

이런 기사 읽지 말고 공식 문서 읽어 보세요.

설치하다.

pip로 설치합니다.

$ pip install streamlit

동작 확인

$ streamlit hello

이렇게 하면 로컬 8063번 포트 (기본 설정) 에서 웹 서버가 시작됩니다.
따라서 브라우저http://localhost:8063/에 방문하면 샘플 페이지를 확인할 수 있습니다.
참고로streamlit을 import로 하는python 파일로 웹 응용 프로그램을 시작하려면run 다음에python 파일을 지정하십시오.

$ streamlit run [python-file]

기본 형식

공식 문서가 충실하기 때문에 곧 볼 수 있다.

API reference

Streamlit cheat sheet

여기는 분위기밖에 없어요.

텍스트

탭은 streamlit.header 또는 subheader에서 지정할 수 있습니다.
문장은 streamlit.text 또는 streamlit.write로 쓸 수 있다.
또 마다운streamlit.markdown도 이용할 수 있다.
예컨대

st.title('Sample page')
st.markdown('''
チョコボールの内容量

- ピーナッツ
  - 28g
''')

데이터 상자(테이블)

pandas.DataFrame을 사용하여 테이블을 그릴 수 있습니다.
사용streamlit.table 및 streamlit.dataframe.st.dataframe는 특정 조건에서 셀을 강조 표시하거나 정렬할 수 있는 높은 기능을 제공합니다.
예컨대

def rand_df(r=10, c=5):
    df = pd.DataFrame(
        np.random.randn(r, c),
        columns=('col %d' % i for i in range(c)))
    return df
dataframe = rand_df(c=3, r=2)
st.dataframe(dataframe)

다이어그램

도표 등을 그리는 방법은streamlit로 도표를 그리는 방법과 matplotlib으로figure 대상을 그리는 방법 등이 있다.
예컨대

dataframe = ...
st.line_chart(dataframe)

기본적으로 각 열의 폴리라인을 그립니다.또한 마우스 휠을 조작하여 확대/축소하거나 드래그하여 위치를 이동할 수 있습니다.(인터랙티브!)
또한 matplotlib streamlit.pyplot 에 익숙하면,figure 대상을 그릴 수 있습니다.물론 세븐 등도 이용할 수 있다.

fig = plt.Figure(figsize=(6,2))
ax = fig.subplots(1,1)
dataframe.plot(ax=ax)
st.pyplot(fig)

하지만 이렇게 하면 확대/축소할 수 없다(당연하지).
다른 도표bokeh를 그릴 수 있고 다양한 형식의 공식 문서를 지원할 수 있습니다(이하 약).

Widget

데이터 등을 선택할 수 있는 다양한 Widget이 준비되어 있습니다.
예컨대

lst_flavors = ['ピーナッツ', 'いちご']
select_taste = st.selectbox('Flavor', lst_flavors)

드롭다운 메뉴에 선택 항목이 표시됩니다.
다양한 것들이 준비되어 있으니 확인해 주세요문서.

사이드바

st.sidebar.xxx를 지정하면 사이드바가 왼쪽 끝에 나타납니다.xxx 위 명령을 직접 사용할 수 있습니다.
예컨대

st.sidebar.header('サイドバー')
p = st.sidebar.slider('確率の設定', min_value=0.0, max_value=1.0, value=0.8)
st.sidebar.write(f'設定値は {p} です')

이런 느낌.

캐시

Widget 등의 요인으로 인해 변화가 발생하면 streamlit은 위에서부터 모든pythn 파일을 순서대로 다시 실행합니다.따라서 변경된 요소와 상관없이 조금 무겁게 계산되면 매번 처리한다.
그래서 관련 요소가 변경되지 않았다면 현금을 이용하고 싶어요.
streamlit에서 사용@st.cache장식물.
예컨대

@st.cache
def rand_df(r=10, c=5):
    df = pd.DataFrame(
        np.random.randn(r, c),
        columns=('col %d' % i for i in range(c)))
    return df
dataframe = rand_df(c=7)

이렇게 되면 위젯 등에 변경dataframe이 있어도 업데이트되지 않는다.

샘플 소스 코드

이렇게 위에 기재된 예를 사용하여 샘플만 있는 웹 애플리케이션을 만들어 보세요.
e.g. sample.py

import numpy as np
import pandas as pd
import streamlit as st
import matplotlib.pyplot as plt

# テキストの描画
st.title('Sample page')
st.header('Header')
st.markdown('''
チョコボールの内容量

- ピーナッツ
  - 28g
- いちご
  - 25g
''')

@st.cache
def rand_df(r=10, c=5):
    df = pd.DataFrame(
        np.random.randn(r, c),
        columns=('col %d' % i for i in range(c)))
    return df
dataframe = rand_df(c=3, r=10)

# 表の描画
st.dataframe(dataframe.head(n=3))
# チャートの描画
st.line_chart(dataframe)
# widget
lst_flavors = ['ピーナッツ', 'いちご']
select_taste = st.selectbox('Flavor', lst_flavors)
# Sidebar
st.sidebar.header('サイドバー')
p = st.sidebar.slider('確率の設定', min_value=0.0, max_value=1.0, value=0.8)
st.sidebar.write(f'設定値は {p} です')

로컬에서 테스트 서버를 만들고 브라우저에서 확인합니다.

streamlit run src/sample2.py

이렇게 하면 이런 느낌의 앱을 사용할 수 있어요.

끝맺다

참고 자료

https://www.streamlit.io/

https://docs.streamlit.io/en/stable/

https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py