03. 인터랙티브 차트 연동 (Plotly)

고급40분

1. 정적 차트 vs 인터랙티브 차트

Matplotlib/Seaborn: 이미지처럼 고정된 차트입니다. 확대하거나 값을 자세히 볼 수 없습니다.
Plotly: 웹 친화적인 차트입니다. 마우스를 올리면 값이 나오고, 줌인/줌아웃이 가능합니다.

Streamlit은 st.pyplot()도 지원하지만, st.plotly_chart()와 함께 쓸 때 가장 강력합니다.

2. Plotly 차트 만들기

Project 1에서 배운 데이터로 간단한 차트를 만들어봅시다.

❓ 문제 1: 매출 추세선 그리기

Q. 가상의 월별 매출 데이터를 생성하고, Plotly Line Chart를 그려서 Streamlit에 띄우세요.

Python (Streamlit)


import plotly.express as px
import pandas as pd
import streamlit as st
 
# 데이터 생성
df_trend = pd.DataFrame({
    'Date': pd.date_range(start='2024-01-01', periods=6, freq='M'),
    'Sales': [10000, 12000, 15000, 13000, 16000, 18000]
})
 
# Plotly 차트 생성
fig = px.line(df_trend, x='Date', y='Sales', title='Monthly Sales Trend', markers=True)
 
# 차트 꾸미기 (선택사항)
fig.update_layout(title_font_size=20, hovermode='x unified')
 
# Streamlit에 출력
st.plotly_chart(fig, use_container_width=True)

3. 필터와 차트 연결하기 (Interaction)

이 부분이 가장 중요합니다. 사이드바에서 선택한 값에 따라 차트가 바뀌어야 진정한 대시보드입니다.

❓ 문제 2: 필터링된 데이터 시각화

Q. 사이드바에서 선택한 ‘지역(Region)‘에 해당하는 데이터만 차트에 표시되도록 만드세요.

Python (Streamlit)

💡

Logic: 사이드바 값 받기 -> DataFrame 필터링 -> 차트 그리기 순서입니다.


# 데이터 준비
df_sales = pd.DataFrame({
    'Region': ['North', 'North', 'South', 'South', 'East', 'East'],
    'Product': ['A', 'B', 'A', 'B', 'A', 'B'],
    'Sales': [100, 200, 150, 250, 120, 180]
})
 
# 1. 사이드바 필터
region_filter = st.sidebar.multiselect(
    "지역 선택",
    options=df_sales['Region'].unique(),
    default=df_sales['Region'].unique()
)
 
# 2. 데이터 필터링
filtered_df = df_sales[df_sales['Region'].isin(region_filter)]
 
# 3. 차트 그리기 (Bar Chart)
fig_bar = px.bar(
    filtered_df, 
    x='Region', 
    y='Sales', 
    color='Product', 
    barmode='group',
    title=f"Sales by Region: {', '.join(region_filter)}"
)
 
st.plotly_chart(fig_bar, use_container_width=True)

4. 실전! 분석 결과 통합하기

이제 앞서 만든 BigQuery 데이터를 가져와서 뿌려봅시다. (로컬에서 google-cloud-bigquery 인증이 되어 있어야 합니다.)


from google.cloud import bigquery
 
# 캐싱 사용 (매번 쿼리하지 않도록)
@st.cache_data
def load_data():
    client = bigquery.Client()
    query = """
    SELECT date, total_sales 
    FROM `your-project-id.retail_analytics_us.daily_sales_summary`
    ORDER BY date DESC
    LIMIT 30
    """
    return client.query(query).to_dataframe()
 
df = load_data()
st.line_chart(df.set_index('date'))

💡 요약

Plotly Express (px): 가장 쉽고 빠르게 인터랙티브 차트를 만드는 방법입니다.
st.plotly_chart: Plotly 객체(fig)를 화면에 그립니다. use_container_width=True를 쓰면 꽉 차게 나옵니다.
Interactivity: Sidebar Input -> Filter DF -> Update Chart 흐름을 기억하세요.

축하합니다! 🎉 이제 여러분은 데이터 수집(SQL)부터 분석(Pandas/ML), 그리고 시각화(Streamlit)까지 전 과정을 아우르는 End-to-End 데이터 분석 프로젝트를 완료했습니다. 이 Cookbook이 여러분의 커리어에 멋진 포트폴리오가 되기를 바랍니다!