전에부터 파이썬 결과를 웹으로 만들어보고 싶었던 것을 기말고사가 끝나고 드디어 해본다. 여러 구글링과 에러와 그걸 해결하는 구글링을 또 하며 겨우 구현은 했다.
의도 : 깃허브에 존재하는 최신업로드 한 csv 파일을 가지고 python으로 가능한 코드의 수정 없이 처리 후 만든 html을 모두에게 보여지게 만들기
1. 기본적인 csv 구현
처음에는 csv 파일이
이런 형태로 혼자 csv 파일을 질본에서 얻은 데이터로 만들었었다.
위에 내용도 원래는 9시 16시 각각 나뉘었는데 date_time을 받아오는 형식에서 문제가 생겨서 그냥 2020.02.24 이런식으로 데이터를 처리하게 되었다.
그리고 합계를 보여주는 것도 위에 그림에서 아래와 같이 행과열을 다르게 바꾸어 새로운 증가가 행으로 증가하고 sum은 열에 저장하게 하기위해 바꾸었다.
2. ipynb 파일
개고생은 여기서 많이했다. 진짜 에러란 에러는 다 본거같다.
import bokeh
bokeh.sampledata.download()1) html을 python으로 구현하기 위해 bokeh 라이브러리를 다운받았다.
import pandas as pd
from bokeh.plotting import figure
from bokeh.sampledata.stocks import AAPL
import csv
import matplotlib.pyplot as plt
import numpy as np
from bokeh.io import output_notebook, show
from bokeh.plotting import figure
2) 추가적으로 필요한 라이브러리들을 다운받았다. (몇개 안쓴게 있을수도 있다....)
df = pd.read_csv('https://khw970421.github.io/covid/Project1/covidcity(changed).csv')
df.index = pd.to_datetime(df['구분'])
del df['구분']
df['sum']=np.sum(df,axis=1)csv를 받아오는 곳으로부터 읽어들여 '구분'에 해당하는 열을 index로 넣고 기존의 열을 지운다. 그 후 sum을 통해 각각의 행들을 더한 새로운 열을 만들어준다.
3) html 파일 작성하기
import jinja2
from bokeh.embed import components
template = jinja2.Template('''\
<html>
<meta charset="UTF-8">
<link
href="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.css"
rel="stylesheet" type="text/css">
<link
href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.css"
rel="stylesheet" type="text/css">
<link
href="https://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.css"
rel="stylesheet" type="text/css">
<script src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.js"></script>
<head><title>bokeh</title>
</head>
<body>
<h1>This site for Bokeh Test</h1>
this site is covid-19 increase number
{{script}}
{{div}}
</body>
</html>
''')jinja2를 이용해서 저렇게 link를 3개 걸고 script를 3개걸고 출력할 부분을 {{script}} {{div}}로 나타낸다.
이때 주의 할 점은
첫번째로 link와 script에서 현재 자신이 사용하는 bokeh의 버전을 맞춰줘야 하므로
output_notebook()명령을 통해서
BokehJS 1.3.4 successfully loaded.자신이 어떤 버전을 가졌는지를 맞춰서 써준다.
두번째로 마지막에서 깨달은 내용이지만 현재 github의 html의 경우 link와 script를 통해 요청을 하는데 https의 형태로 http인 link와 script에 요청을 하면 오류가 나기때문에 link와 script에 있는 내용들은 http url이 아닌 https url을 사용해야한다.
4) 출력 결과 확인하기
p = figure(plot_width=700,plot_height=300, x_axis_type='datetime')
p.line(df.index,df['sum'],color='navy',alpha=0.5)
show(p)이를 통해 해당 필요한 x,y를 index인 날짜 부분과 결과인 sum 부분을 통해 그래프로 표현한다.
5) html에 출력 결과 적용시키기
script, div = components(p)
from IPython.display import HTML
HTML(template.render(script=script,div=div))해당 명령어를 통해 html에 있는 script와 div에 적용시킨다.
6) 적용 한 결과를 원하는 html 파일에 write하기
with open('C:/Users/82103/job것들/Desktop/github프로젝트/khw970421.github.io/covid/Project1/result.html','w') as f:
f.write(template.render(script=script,div=div))7) 추가로 수정한 sum을 계산한 covid.csv파일도 저장하기
df.to_csv('C:/Users/82103/job것들/Desktop/github프로젝트/khw970421.github.io/covid/Project1/covid(sum).csv', index = False,encoding="UTF-8-sig") 