이 글은 Python언어와 Visual Studio Code, GitHub Desktop을 기반으로 작성되었습니다.
# 웹 대시보드에서 그래프 그리기
그래프를 생성하려면 파이썬 기반이기 때문에 matplotlib/seaborn 라이브러리도 사용가능합니다.이번 글에서는 streamlit을 사용하여 웹 대시보드에서 그래프를 어떻게 그리는지에 대해 알아보는게 목적이라서matplotlib 라이브러리에 대한 자세한 설명은 아래의 글을 참고합시다!
그래프 그리는 라이브러리 알고가기 : https://luvris2.tistory.com/33
Matplotlib 활용 - 표, 그래프 만들기(통계/원형/히스토그램/산점도/회귀/상관관계/열분포도)
# Tidy Data란? 데이터를 분석하기 위해 깔끔하게 정리된 데이터(=깔끔한 데이터, Tidy Data) 깔끔한 데이터(Tidy Data)로 가공되기 전에는 지저분한 데이터라고 분류 # Tidy Data의 특징 각 변수는 개별의
luvris2.tistory.com
# Streamlit 자체 제공 그래프 그리기
사용에 필요한 라이브러리 호출
import streamlit as st
import pandas as pd그래프에 사용될 데이터프레임
각 프로그래밍 언어별 선호도 데이터를 담은 데이터프레임(df)데이터의 값을 떠나서 그래프가 어떤 모양인지를 중점으로 봅시다.
선으로 표현된 그래프 그리기 (line_chart)
- .line_chart(데이터) : 그래프를 꺾은 선으로 시각화
- 예시) 각 프로그래밍 언어별 선호도 시각화하기
- 소스 코드
st.line_chart(df)
- 실행 화면
영역으로 표현된 그래프 그리기 (area_chart)
- .area_chart(데이터) : 그래프를 범위형으로 시각화
- 겹칠 수 있어서 때에 따라 보기 불편 할 수 있음
- 예시) 각 프로그래밍 언어별 선호도 시각화하기
- 소스 코드
st.area_chart(df)
- 실행 화면
막대으로 표현된 그래프 그리기 (bar_chart)
- .bar_chart(데이터) : 그래프를 막대로 시각화
- area_chart는 겹쳐서 범위를 표현하지만, bar_chart는 각각의 크기를 높이로 표현
- 예시) 각 프로그래밍 언어별 선호도 시각화하기
- 소스 코드
st.bar_chart(df)
- 실행 화면
지도로 표현된 맵 그래프 그리기 (map)
- .map(데이터) : 경도와 위도를 이용하여 지도의 해당 부분을 표시
- 여러개의 위치 정보를 시각화해줌으로써 밀집도를 확인하기에 용이
- 예시) 경도와 위도가 있는 데이터프레임을 맵 그래프로 시각화하기
- 경도와 위도가 나열되어 있는 데이터프레임
- 소스 코드
st.map(df)
- 실행 화면
# altair 라이브러리를 이용하여 그래프 그리기
웹에서만 사용 가능한 라이브러리streamlit을 이용하여 만든 웹 대시보드에 altair 라이브러리로 시각화합니다.
사용에 필요한 라이브러리 호출
import altair as alt그래프에 사용될 데이터프레임
각 꽃마다의 크기를 데이터로 담은 데이터프레임(df)
데이터의 값을 떠나서 그래프가 어떤 모양인지를 중점으로 봅시다.
점으로 표현된 그래프 그리기 (mark_circle)
- .Chart(데이터) .mark_circle() .encode( x = x축데이터 , y = y축데이터, color = 그룹별 색상)
- streamlit.altair_chart(데이터)
- 스트림릿을 이용하여 altair로 생성된 데이터만 사용 할 수 있다.
- 예시) 각 꽃들의 크기를 종류별로 표시해보기
- 소스 코드
alt_chart = alt.Chart(df).mark_circle().encode(x='petal_length',y='petal_width',color='species')
st.altair_chart(alt_chart)
- 실행 화면
# plotly 라이브러리를 이용하여 그래프 그리기
matplotlib과 같은 시각화 라이브러리, 설치하여야 합니다.
plotly 설치
- 아나콘다 프롬프트를 관리자 권한으로 실행하여 아래의 코드 입력
conda install -c plotly plotly=5.8.0plotly 호출
import plotly.express as px그래프에 사용될 데이터프레임
각 프로그래밍 언어마다 선호도를 데이터로 담은 데이터프레임(df)
데이터의 값을 떠나서 그래프가 어떤 모양인지를 중점으로 봅시다.
비율이 표시된 원형 그래프 그리기 (pie)
- .pie(데이터, names='인덱스', values='값', title= '그래프에 표시될 제목')
- streamlit.plotly_chart(데이터)
- 스트림릿을 활용하여 plotly로 생성된 데이터만 사용 할 수 있다.
- 예시) 각 프로그래밍 언어별 선호도의 합을 원형 그래프로 표시하기
- 소스 코드
fig = plotly.pie(df, names='lang', values='Sum', title='각 언어별 파이차트')
st.plotly_chart(fig)
- 실행 화면
- 범계표의 목록을 누르면 원형 그래프에서 해당 값들을 표시/미표시를 할 수 있어 데이터 확인이 매우 용이하다.
막대로 표현된 그래프 그리기 (bar)
- .bar(데이터, x=x축데이터, y=y축데이터)
- streamlit.plotly_chart(데이터)
- 예시) 각 프로그래밍 언어별 선호도를 그래프로 표시하기, 단 내림차순 정렬
- 소스 코드
df_sorted = df.sort_values('Sum', ascending=False) # 합이 높은순 정렬
fig = plotly.bar(df_sorted, x='lang', y='Sum')
st.plotly_chart(fig)
- 실행 화면
