Streamlit/이론

145. [Python] [Streamlit] : Streamlit(스트림릿) 차트 그리기(2)

천재단미 2025. 2. 4. 12:44
728x90
반응형

 

 

 

지난 시간에 이어 Streamlit의 내장 차트 함수Plotly Express를 활용하여 데이터 시각화에 대해 알아보겠습니다. Streamlit은 간단한 코드를 통해 데이터를 시각적으로 표현할 수 있는 강력한 도구를 제공합니다. 특히 Plotly는 웹 기반의 대화형 차트를 생성하는 데 매우 유용합니다.

 

🛠️ 구현 코드 설명

아래 예제에서는 Streamlit 내장 차트와 Plotly Express를 사용하여 다양한 차트를 생성하는 방법을 살펴보겠습니다.


1️⃣ 주요 라이브러리 임포트 및 데이터 준비

import streamlit as st
import plotly.express as px
import pandas as pd

  • Streamlit: 웹 애플리케이션을 생성하는 데 사용
  • Plotly Express: 대화형 차트 생성을 위한 라이브러리
  • Pandas: 데이터 처리 및 CSV 파일 읽기

2️⃣ 데이터 로드 및 언어 인기 데이터 시각화

언어 인기 데이터 로드

df = pd.read_csv('./data/lang_data.csv')
st.text('언어별 인기도')
selcted_columns = st.multiselect('언어를 선택하세요', df.columns)

  • st.multiselect: 사용자가 관심 있는 언어를 선택할 수 있는 멀티 셀렉트 위젯 제공.

선택한 데이터로 차트 생성

if len(selcted_columns) != 0:
    df_selcted = df[selcted_columns]

    # Streamlit 내장 차트
    st.line_chart(df_selcted)  # 라인 차트
    st.area_chart(df_selcted)  # 영역 차트

  • st.line_chart: 선택된 언어 데이터의 시간에 따른 변화를 라인 차트로 시각화.
  • st.area_chart: 라인 차트 아래 영역을 채운 영역 차트 생성.

 


3️⃣ 위치 데이터를 활용한 지도 시각화

위치 데이터 로드 및 지도 표시

df2 = pd.read_csv('./data/location.csv', index_col=0)
st.dataframe(df2)

# Streamlit 내장 지도 그리기
st.map(df2)

  • st.map: latitude와 longitude 데이터를 기반으로 위치를 지도 위에 표시.
  • 위치 데이터를 활용하여 시각적인 지리적 분석 가능.

 

 

 


4️⃣ 프로그래밍 언어 데이터와 Plotly 활용

프로그래밍 언어 데이터 로드

df3 = pd.read_csv('./data/prog_languages_data.csv', index_col=0)
st.dataframe(df3)

 


Plotly Pie 차트 생성

fig1 = px.pie(data_frame=df3, names='lang', values='Sum')
st.plotly_chart(fig1)

  • px.pie: 데이터의 lang 열(프로그래밍 언어 이름)을 기반으로 파이 차트를 생성.
  • Sum 열의 값을 기준으로 각 언어의 비중을 시각화.

 


Plotly Bar 차트 생성

fig2 = px.bar(data_frame=df3, x='lang', y='Sum')
st.plotly_chart(fig2)

  • px.bar: 언어 이름(lang)과 값(Sum)을 기준으로 바 차트를 생성.
  • 막대 차트를 사용하여 언어별 데이터를 직관적으로 표현.


정렬된 Bar 차트 생성

df3 = df3.sort_values(by='Sum', ascending=False)
fig2 = px.bar(data_frame=df3, x='lang', y='Sum')
st.plotly_chart(fig2)

  • 데이터를 정렬한 후 막대 차트를 생성하여 가독성을 향상.

 

 

 

  TIP💡 

 

원하는 정보를 클릭후 더블클릭하면 원래의 차트의 모습으로 돌아옵니다. 

 

 

728x90
반응형
home top bottom
}