[Streamlit] 간단한 대시보드 배포하기(with. KBO 타격지표)

Stremlit을 활용하여 간단한 대시보드를 배포합니다.

스트림릿(Streamlit)은 파이썬 기반으로 대시보드를 만든 후, 배포까지 무료로 할 수 있는 서비스이다.

 

이번 게시글에선

저번 게시글의 시각화 자료를 가져와서 Stremlit을 통해 배포까지 해보도록 하겠다.

---

대시보드 기획

저번 글에서 시각자료는 두 가지였다.

https://analyst-ggom-chi-kim.tistory.com/10

[야구] 타율이 높으면 득점을 잘한다? (with. 상관관계 분석)

 

각 축이 타격지표인 scatter plot과

하나의 지표와 다른 지표 사이의 상관관계를 나타낸 heatmap이다.

 

일단 위 두 가지 그림은 모두 넣되,

자유도를 높혀서 하나의 필터를 넣어서 원하는 지표에 대해 위 두 가지 그림을 볼 수 있도록 하면 좋을 것 같다.

 

또한, 이전 게시글에서 활용한 데이터를 활용하면,

각 지표별로 sorting하여 가장 좋은 지표를 가졌던 팀을 표현할 수도 있을 것 같다.

 

자 그럼 위 내용을 정리보면, 다음 세 가지 항목이 대시보드에 들어가야 한다.

1. 하나의 타격지표에 대해 가장 좋은 지표를 가졌던 팀(top3)

2. 하나의 타격지표에 대해 다른 타격지표와 상관성을 나타내는 scatter plot

3. 하나의 타격지표에 대해 다른 타격지표와 상관계수를 표현한 heatmap

※ 여기서 '하나의 타격지표'는 변수(필터)로 넣어서 사용자가 맘대로 바꿔서 볼 수 있도록 설계

---

대시보드 제작

일단 최상단에 제목을 넣어주자.

제목만 넣으면 어색하니, 제목 바로 아래에 구분선도 그려주었다.

st.header('⚾ 타격지표 둘러보기 📈')
st.markdown("""---""")

 

그리고, 데이터를 불러왔다.

데이터는 저번 게시글에서 활용한 데이터 그대로를 썼다.

data = pd.read_csv('./data.csv')

 

그 후, 변수(필터링) 기능을 넣어주었다.

변수는 불러온 data의 columns를 활용해서 목록을 작성했다.

select_stat = st.selectbox(
    '궁금한 스탯을 고르세요.',
    data.iloc[:,2:].columns.tolist()
)

위에서 사용자가 특정 변수를 select하면, 

그 값은 select_stat에 담긴다.

 

이제 앞서 대시보드 기획 단에서 생각해둔 세 가지 아이디어를

페이지에 나누어서 담기 위해 아래 코드를 활용했다.

tab1, tab2, tab3 = st.tabs(["TOP3🏆", "상관관계📈", "상관계수📊"])

위 코드로 정의한 tab을 with 절과 같이 활용해서 각 탭에 들어갈 콘텐츠를 만들어준다.

 

tab1에는 사용자가 선택한 지표에 대해 가장 큰 지표를 가지는 세 팀을 나타내도록 했다.

maxi = data.sort_values(by=select_stat, ascending=False).iloc[:3,:][select_stat].tolist()
year = data.sort_values(by=select_stat, ascending=False).iloc[:3,1].tolist()
team = data.sort_values(by=select_stat, ascending=False).iloc[:3,0].tolist()

with tab1:
    st.markdown(f'#### \'{select_stat}\'이(가) 가장 높았던 팀 3개를 알려드릴게요.')
    st.write("  ")
    st.markdown(f'##### 🥇 {year[0]}년 {team[0]}: {maxi[0]}')
    st.markdown(f'##### 🥈 {year[1]}년 {team[1]}: {maxi[1]}')
    st.markdown(f'##### 🥉 {year[2]}년 {team[2]}: {maxi[2]}')

 

tab2에는 사용자가 선택한 지표와 다른 지표와의 상관성을 나타내는 scatter plot을 그렸다.

with tab2:
    st.markdown(f'#### \'{select_stat}\'와(과) 다른 지표와의 상관관계를 나타낸 시각자료에요.')
    st.plotly_chart(pl.make_plot(select_stat))

아, 여기서 pl.make_plot은 직접 함수를 작성해서 활용했는데,

plotly express라는 툴을 활용해서 scatter plot을 작성하는 과정이 담겨있다. (해당 게시글에선 생략)

 

다음은 tab3다.

tab3에는 사용자가 선택한 지표와 다른 지표와의 상관계수를 heatmap으로 표현한다.

with tab3:
    st.markdown(f'#### \'{select_stat}\'와(과) 다른 지표와의 상관계수를 큰 순서대로 나타냈어요.')
    st.markdown(f'※ pearson 상관계수 기준')
    st.plotly_chart(pl.make_plot2(select_stat))

---

대시보드 배포

일단 내가 작성한 코드를 github repo에 업로드 해준다. (꼭 public으로 설정해주어야한다.)

(단, 코드 내에는 대시보드에 활용한 라이브러리를 requirements.txt로 넣어주어야한다.)

requirements.txt를 만드는 과정은 해당 블로그에서 참고해보시길!

 

그 후, streamlit 홈페이지에 접속 및 로그인을 하면 아래와 같은 화면이 나오는데,

일단 파란색 버튼인 New app을 클릭해주자.

 

그리고 아래 화면에 내용만 올바르게 기입해주면 완료!

---

대시보드 구경하기

위 코드를 활용해서 만든 대시보드의 첫 화면은 아래와 같다.

필터링 기능과 각 탭이 올바르게 구현되어있다.

 

위 대시보드는 아래 링크를 통해 접속할 수 있다.

https://kbo-hitting-index.streamlit.app/

app