[ 자본가 vs 노동자 시리즈1 ] 데이터 시각화 홈페이지 만들기 첫번째

[유연수]

[ 자본가 vs 노동자 시리즈1 ] 데이터 시각화 홈페이지 만들기 첫번째 내용

한국 경제 신문 1월 14일에 소개된 농업 데이터로 고객 맞춤 데이터 분석 홈페이지 만들어주는 회사 (https://www.farmair.kr/)

나만의 데이터 분석 시각화 서비스 배포하여 섬트랜드 처럼 자동 결제 되게 하는 홈페이지 기본 골격 만들기  

그동안 배웠던 SQL과 판다스를 이용하여 구현해봅니다. 

1. 파이썬 3.10 버젼 설치하기

https://www.python.org/downloads/release/python-3109/

Python Release Python 3.10.9

2. 윈도우 탐색기를 열고 아래의 디렉토리로 이동한다.

3. 위의 경로를 복사한다.

4. 명령 프롬프트창을 열고 위의 경로로 이동한다.

5. pip install 명령어로 streamlit 을 설치한다.

6.  명령 프롬프트창에서 한칸 뒤로 이동한다.

7. streamlit 을 실행한다.

안되면 다음과 같이 수행한다.

8.   웹브라우져 하나가 자동으로 뜨는지 확인한다.

9. plotting Demo 를 누른다.

10. 로컬 주피터 노트북에서 아래의 코드를 돌려본다.

import altair as alt
from vega_datasets import data
import pandas as pd
import streamlit as st

emp = pd.read_csv("c:\\data\\emp.csv")
source = emp[['ename','sal']]

bars = alt.Chart(source).mark_bar().encode(
    x='sal',
    y="ename"
)

text = bars.mark_text(
    align='left',
    baseline='middle',
    dx=3  # Nudges text to right so it doesn't appear on top of the bar
).encode(
    text='sal'
)

a = (bars + text).properties(height=300)
a

#st.altair_chart(a, use_container_width=True)

11. 홈페이지에서 위의 화면이 출력되게 한다.

아래의 스크립트를 메모장에 저장하고 app2.py 로 저장하는데 위치를 다음의 위치에 저장한다.

C:\Users\YYS\AppData\Local\Programs\Python\Python310

import altair as alt
from vega_datasets import data
import pandas as pd
import streamlit as st

emp = pd.read_csv("c:\\data\\emp.csv")
source = emp[['ename','sal']]

bars = alt.Chart(source).mark_bar().encode(
    x='sal',
    y="ename"
)

text = bars.mark_text(
    align='left',
    baseline='middle',
    dx=3  # Nudges text to right so it doesn't appear on top of the bar
).encode(
    text='sal'
)

a = (bars + text).properties(height=500)

st.altair_chart(a, use_container_width=True)

도스창에서 위의 디렉토리로 이동해서 app2.py 를 실행한다.

나만의 홈페이지에 그래프가 잘 뜨는지 확인한다.

12. emp 테이블도 같이 출력한다.

app2.py 에  아래의 진한색 글씨의 코드를 추가한다.

import altair as alt
from vega_datasets import data
import pandas as pd
import streamlit as st

emp = pd.read_csv("c:\\data\\emp.csv")
source = emp[['ename','sal']]

bars = alt.Chart(source).mark_bar().encode(
    x='sal',
    y="ename"
)

text = bars.mark_text(
    align='left',
    baseline='middle',
    dx=3  # Nudges text to right so it doesn't appear on top of the bar
).encode(
    text='sal'
)

a = (bars + text).properties(height=500)

st.dataframe(emp)  # Same as st.write(df)
st.altair_chart(a, use_container_width=True)

홈페이지에서 아래의 빨간색 네모 쪽을 클릭해서 rerurn 을 눌러서 코드를 홈페이지에 반영한다.

13. SQL 시간에 만들었던 money 데이터와 판다스 수업 마지막 여러 그래프를 한 화면에 보여주는 코드를 이용해서 

     다음과 같이 구현해봅니다. 

코렙에서 수행한 아래의 코드를

import plotly.express as px
import plotly
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt

plt.rc('font', family='NanumBarunGothic') 

money = pd.read_csv("/content/drive/MyDrive/data500/money_data6.csv")

plt.figure(figsize = (12, 8))

fig, ax = plt.subplots()
ax.plot( list(money['A_MONTH']), list(money['A_RATE']), color = 'red', marker = 'o' )
plt.xticks(tuple(money['A_MONTH']))
plt.title("America Rate", size = 15 )

st.pyplot(fig)

로컬에서 수행하려면 다음과 같이 경로를 고칩니다.

import plotly.express as px
import plotly
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt

# 한글 안깨지게 하는 코드 
from matplotlib import font_manager, rc
font = font_manager.FontProperties(fname="c:/Windows/Fonts/malgun.ttf").get_name()
rc('font', family=font)


money = pd.read_csv("c:\\data\\money_data6.csv")

plt.figure(figsize = (12, 8))

fig, ax = plt.subplots()
ax.plot( list(money['A_MONTH']), list(money['A_RATE']), color = 'red', marker = 'o' )
plt.xticks(tuple(money['A_MONTH']))
plt.title("미국금리", size = 15 )

st.pyplot(fig)

위의 코드로 홈페이지를 만들어 봅니다. 

이번에는 어제 마지막 문제로 만들었던 여러개의 그래프도 구현 해봅니다. 

import plotly.express as px
import plotly
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
import numpy as np


# 한글 안깨지게 하는 코드 
from matplotlib import font_manager, rc
font = font_manager.FontProperties(fname="c:/Windows/Fonts/malgun.ttf").get_name()
rc('font', family=font)

#plt.figure(figsize=(12,8))

money = pd.read_csv("c:\\data\\money_data6.csv")

fig, ax = plt.subplots(2,2, figsize=(12,8))

plt.subplot(221)
plt.plot(  list( money['A_MONTH'] ), list( money['A_RATE'] ), color='red' , marker='o'     ) 
plt.xticks(tuple(money['A_MONTH']) )
plt.title('미국금리')


plt.subplot(222)
plt.plot(  list( money['A_MONTH'] ), list( money['K_RATE'] ), color='blue' , marker='o'     ) 
plt.xticks(tuple(money['A_MONTH']) )
plt.title('한국금리')

plt.subplot(223)
plt.plot(  list( money['A_MONTH'] ), list( money['KOSPI'] ), color='green' , marker='o'     ) 
plt.xticks(tuple(money['A_MONTH']) )
plt.title('코스피 지수')

plt.subplot(224)
plt.plot(  list( money['A_MONTH'] ), list( money['HOUSE_PRICE'] ), color='yellow' , marker='o'     ) 
plt.xticks(tuple(money['A_MONTH']) )
plt.title('집값')

st.pyplot(fig)

결과:

14. 선택박스를 화면에 추가하여 데이터를 사용자가 직접 선택할 수 있게 하기는 다음회에서 이어집니다.

st.selectbox - Streamlit Docs

매일 꾸준히 조금더 고급 스럽게 만들기...

Example Gallery — Altair 4.2.0 documentation (altair-viz.github.io)

https://docs.streamlit.io/library/api-reference/charts/st.bar_chart