본문 바로가기
IT 프로그래밍 관련/streamlit 대시보드

streamlit 여러가지 차트 나타내기

by 지나는행인 2021. 3. 10.
728x90

이전에 멀티셀릭트를 이용하여 line_chart 와 area_chart 를 나타내보았다.

 

이번에도 차트를 몇가지 더 나타내보려 한다.

 

코드를 살펴본다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import streamlit as st
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import matplotlib
matplotlib.use('Agg')       #서버에서, 화면에 표시하기 위해서 필요
import seaborn as sns
import altair as alt               ##https://altair-viz.github.io/
import plotly.express as px
 
 
 
df2 = pd.read_csv('data/iris.csv')             ## bar 차트 그리기
    st.dataframe( df2.head() )
    st.bar_chart(df2[ ['sepal_length''petal_length'] ] )
 
    # Altair 이용하면 좋은점.
    # x축 y축 설정 + color or size 까지 표현가능.
    chart = alt.Chart(df2).mark_circle().encode( x = 'petal_length', y='petal_width', color = 'species' )   ##알테어 
    st.altair_chart(chart, use_container_width=True)     #use_container_width=True  가로로 화면에 꽉 채워줌.  
 
 
    df3 = pd.read_csv('data/location.csv', index_col=0)
    st.dataframe( df3 )
 
    st.map(data=df3)
 
 
    df4 = pd.read_csv('data/prog_languages_data.csv', index_col=0)    # 데이터프레임 가져오기
    st.dataframe(df4)
 
    fig1 = px.pie(df4, values='Sum', names='lang', title='Pie Chart of Languages')      #plotly pie차트
    st.plotly_chart(fig1)
 
    fig2 = px.bar( df4, x='lang', y='Sum')        #plotly bar차트
    st.plotly_chart(fig2)
cs

**상기는 visual studio code에서 작업한 코드로,  라이브러리 아래는 main함수 안에 포함되어 있다.

 ( 편집을 하였기 때문에 main함수는 보이지 않는다.)

 

위는 데이터셋을 불러와, 헤드를 확인 한후 바 차트로 나타내보고,

 

알테어 차트를 이용해 나타내보았다.   (df2)

 

*df2 데이터셋으로 작업한 화면

위는 df2 데이터셋으로 순서대로, df2.head(), 

 

df2 'sepal_length', 'petal_length' 컬럼에 관한 바 차트. df2 'petal_length', 'petal_width' 컬럼에 관한 알테어 차트이다.

 

bar차트는 사진상에는 표현이 되지 않지만, 차트상에서 zoom으로 차트 확대 축소가 가능하고, 

 

알테어차트는 데이터의 컬러와, 표현되는 점의 사이즈도 조절이 가능하다. (점도, 바 등으로 바꿀수 있다.)

 

map은 위도와 경도로 지도상에 위치를 찾아낸다.  df3 데이터셋으로 활용해보았다.

 

df4 데이터셋을 새롭게 가져와

 

plotly pie차트 , plotly bar 차트를 나타내었다.

 

아래는 df4의 차트들이다.

 

*df4 데이터셋과 plotly pie chart

df4를 pie차트로 나타낸 화면이고, 차트내에서 name에 해당하는 오른쪽 부분을 조절하여,

 

본인이 원하는 값만 차트에 나타낼수 있다.

 

 

*df4의 plotly bar chart

bar차트로 , 마우스를 활용하여 줌이 가능하다.

 

 

 

 

 

댓글