Danfo.js를 이용해 저번에 flask를 대신하여 브라우저에 그래프를 출력하는 것을 시도해보고자 한다.
과거 flask로 했던 내용1
과거 flask로 했던 내용2
일단 전체 코드를 기준으로 설명을 진행하고자 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.2/dist/index.min.js"></script>
</head>
<body>
<div id="table"></div>
<div id="plot"></div>
<script>
let df_sum;
dfd.read_csv('https://khw970421.github.io/covid/Project1/covidcity(changed).csv')
.then(function(data){
data.plot('table').table(); //표 내용 출력
data['구분'] = data['구분'].str.replace(/[.]/g,"-"); // 1990.09.11 => 1990-09-11로 변환
data.set_index({key: "구분", inplace: true}); // column들 중 구분이라는 column을 index로 전환
df_sum = data.T.sum(); // 각 column의 뒤집어놓은 형태의 값들을 더한다.
let df_sum1 = new dfd.DataFrame({'sum':df_sum.data},{index:df_sum.index}); //df_sum은 Series 형태이므로 DataFrame 형태로 변환
df_sum1.plot('plot').line(); // 이를 출력
})
</script>
</body>
</html>내용과 관련한 세부사항은 여기서 확인을 할 수 있다.
간단히만 정리하자면 csv 파일을 가져와서 이를 Date를 위해 0000.00.00 형태를 0000-00-00 형태로 바꾸고(replace) 이런 열을 index로 배치시킨다(set_index).
그 후 sum함수를 이용해 새로운 날짜마다의 수치값들의 합을 구해내는데 sum함수는 column마다의 합을 구하므로 row끼리의 합을 구하기위해서 앞에 .T 형태를 추가하고 계산해낸다.
이때 형태가 DataFrame(data)에서 Series(df_sum)으로 되어 그래프 출력시 문제가 발생하여 다시 DataFrame(df_sum1)으로 변환하는 작업을 진행한다. 이를 위해서 df_sum.data인 배열을 얻고 df_sum.index 둘다 얻어낸다.
plot을 통해 원하는 그래프를 브라우저에 얻어낼 수 있었다.
장점 : 필요한 csv만 최신화 해주면 코드가 실행하면 csv를 가져와 python을 따로 구동할 필요가없이 html내에서 작동하기 때문에 편하고 속도자체도 빠르다.
결과
Flask vs Danfo.js
처음 python결과를 브라우저로 보이기 위해서 시도한 것은 Flask이다. 이것은 python환경에서 작동하면서 csv파일을 가져와서 html에 출력하게 만든다.
이와 비슷한 것이 Danfo.js인데 html에 script를 통해 Danfo.js를 가져와서 Pandas 관련 코드를 실행할 수 있고 결과를 낸다.
둘을 비교해봤을때 무조건 Danfo.js를 쓴다.
비록 to_datetime 이러한 몇몇 python에는 있지만 Danfo.js에서 아직 없는 부분이 존재하긴 하지만 js라는 의미로 .을 통해 객체에 필요한 부분을 얻어내는게 javascript를 배우는 내가 더 익숙해지기 쉽고 더 눈에 python보다 잘 보이는 것 같다.
구동 또한 html과 python환경은 html 내에서 구동하는 danfo.js는 훨씬 빠르다.
그리고 Flask에서는 https랑 http문제도 있어서 고치기도 했는데 Danfo.js는 그런건 없는 것 같았다.
따라서 Flask는 이제 쓰진 않을거같다.
하더라도 Danfo.js를 쓰지않을까...
여튼 내가 2020년 마지막 날 원하는 결과를 얻게해준 생활코딩에 감사를 한다.
생활코딩 강의
Error
그럼 그렇지 에러 떠서 뭔가했더니 알고보니 https://khw970421.github.io/covid/Project1/covidcity(changed).csv 파일 가져오는 위치를 Project1을 Data로 정리한 것을 까먹고 에러가 계속났었음
https://khw970421.github.io/covid/Data/covidcity(changed).csv수정하니 정상적으로 결과를 냈다.
