지난 게시글에 연재되는 도전기 3편입니다 : https://itadventure.tistory.com/543
파이스크립트 도전기(2) - 인구변화 그래프
지난 게시글에 이어 파이스크립트 2번째 도전기입니다. 지난 게시글 : https://itadventure.tistory.com/542 파이스크립트 도전기(1) 웹브라우저에서 작동하는 새로운 스크립트라서 꼭 시도해보고 싶었는
itadventure.tistory.com
파이썬에서는 배열을 처리함에 있어서 널리 사용되는 판다스(Pandas)라는 모듈이 있는데요.
오늘은 이걸 활용해 csv 파일을 읽어서 표로 구성해보도록 하겠습니다.
유튜브 해외 영상을 참조하였습니다. ( https://www.youtube.com/watch?v=AZ2mUSsgbM0 )
"파이스크립트에서도 판다스(pandas)를 사용할 수 있을까요?"
판다스는 파이썬에서 배열을 매우 유용하게 사용할 수 있는 것으로 알려져 있지요.
특별히 인터넷에서 csv 파일을 바로 불러와 배열로 사용할 수 있는 유용한 기능도 제공됩니다.
csv 파일이란 무엇일까요?
데이터의 각 항목을 콤마로 구분하여 여러줄로 나열한 텍스트 파일입니다.
이를 테면 이렇게 생긴 것을 의미합니다.
첫째 줄에 항목명이 콤마로 나누어 기재되어 있고,
둘째줄부터 실제 데이터가 콤마로 나누어 기재되어 있습니다.
이렇게 콤마로 항목을 구분해 놓은 것이 csv 파일입니다.
이 내용은 실제 2020년 혈액형별 헌혈 인구입니다.
크레이의 홈페이지에 csv 파일로 만들어서 올려 놓았는데요.
URL 은 아래과 같습니다.
http://dreamplan7.cafe24.com/pyscript/py4.csv
웹브라우저에서 이 URL을 찾아가보면 위 화면이 뜰 겁니다.
판다스 사용 선언
이제 파이스크립트에서 판다스를 이용해서 이 csv 파일을 불러올텐데요.판다스 역시 파이썬 기본 기능이 아니기 때문에 아래와 같이 <py-env> 태그 안에 사용선언을 해주어야 합니다. ( 빨간 표시 부분 )
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- pandas
</py-env>
</head>
<body>
:
판다스 사용법
그리고 파이스크립트 태그 안에서 코드를 사용하면 되는데요.
구글 코랩 파이썬 환경과 비교해 보자면 아래 소스가 작동할 것 같지만 이상하게 작동하지 않더라구요.
<py-script>
import pandas as pd
df = pd.read_csv("http://dreamplan7.cafe24.com/pyscript/py4.csv")
df.head()
</py-script>
그래서 구글링해본 결과 아래와 같이 사용해야 한다는 사실을 확인했지요.
( csv.write(df.head()) => csv.write(df) 로 교정합니다 )
<div id="csv"></div>
<py-script>
import pandas as pd
from pyodide.http import open_url
df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/py4.csv"))
csv = Element('csv')
csv.write(df)
</py-script>이 코드의 출력결과는 아래와 같습니다.
아직은 파이스크립트에 대한 상세 문서가 정리되어 있지는 않아 확정할 순 없지만,
코딩 형태로 볼 때 아래와 같은 의미인 것을 유추할 수 있습니다.
판다스 모듈을 선언하고 인터넷 URL을 불러오기 위한 open_url 함수를 불러옵니다.
import pandas as pd
from pyodide.http import open_url
이윽고, 판다스의 read_csv 함수를 이용해 인터넷 상의 csv 파일을 불러옵니다.
from pyodide.http import open_url
df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/py4.csv"))
그 다음으로 Element 함수를 이용하여 출력할 HTML 요소를 선택하는 부분이 있는데요.
Element('csv')라고 적어주었기 때문에,
df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/py4.csv"))
csv = Element('csv')
id값을 "csv"로 지어줄 DIV 태그가 먼저 선언되어야 합니다,
아래와 같이 말이지요. "csv" 라는 이름을 예시로 든 것이고 다른 이름을 써도 됩니다.
<div id="csv"></div>
<py-script>
import pandas as pd
결과를 출력하는 방법 또한 꽤 독특한데요.
Element로 받아온 HTML 객체에 결과를 출력하기 때문에 현재 파이 스크립트가 위치한 곳이 아니라,
ID 값이 "csv" 태그인 곳에 결과가 출력됩니다.
csv = Element('csv')
csv.write(df)
</py-script>
전체 소스를 정리하자면 아래와 같습니다.
<html>
<head>
<title>
Read CSV with Pandas using PyScript
</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- pandas
</py-env>
</head>
<body>
<style type="text/css">
table.dataframe th {
border: 1px black solid;
background-color:black;
color: white !important;
padding: 2px 5px;
}
table.dataframe td {
border: 1px black solid !important;
color: black !important;
padding: 2px 5px;
}
</style>
<h1>파이스크립트에서 판다스(Pandas)로 CSV 읽기</h1>
<div id="csv"></div>
<py-script>
import pandas as pd
from pyodide.http import open_url
# URL 에서 csv 데이터를 읽어 판다스 배열로 변환합니다.
df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/py4.csv"))
# 출력할 HTML 요소를 선택
csv = Element('csv')
# 해당 HTML 요소에 결과를 출력합니다.
csv.write(df)
</py-script>
</body>
</html>
이 소스의 출력 결과는 아래와 같습니다.
테두리 넣어보기
테두리가 없어서 표같지 않아보이는군요.
스타일 태그를 통해 표를 꾸밀 수 있는 것으로 확인되었는데요.
꾸며야 할 대상 이름이 딱 정해져 있습니다.
table.dataframe 의 th 와 td 태그를 스타일로 꾸며주면 되는데 아래와 같이 태그를 넣어보았습니다.
<html>
<head>
<title>
Read CSV with Pandas using PyScript
</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<style type="text/css">
table.dataframe th {
border: 1px black solid !important;
background-color: darkblue !important;
color: white !important;
text-align:center !important;
padding: 2px;
}
table.dataframe td {
border: 1px black solid !important;
color: black !important;
text-align:center !important;
padding: 2px;
}
</style>
<py-env>
- pandas
</py-env>
</head>
<body>
<h1>파이스크립트에서 판다스(Pandas)로 CSV 읽기</h1>
<div id="csv"></div>
<py-script>
import pandas as pd
from pyodide.http import open_url
# URL 에서 csv 데이터를 읽어 판다스 배열로 변환합니다.
df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/py4.csv"))
# 출력할 HTML 요소를 선택
csv = Element('csv')
# 해당 HTML 요소에 결과를 출력합니다.
csv.write(df)
</py-script>
</body>
</html>
그 결과 아래와 같은 표를 만나볼 수 있었습니다.
스타일 태그를 잘 조정하면 여백이나 글자 크기를 조정해서 더 예쁘게 가공할 수도 있을것 같습니다.
좌측의 번호를 좀 빼보려고 찾아보았으나 딱히 방법을 아직 찾아보지 못했는데요.
그 부분이 약간 아쉽더군요 :)
에쁜 표 스타일로~
테두리를 없애고 스타일 시트를 좀 더 예쁘게 꾸며서 아래와 같이 한번 더 수정하였습니다.
요새 테이블이 줄 단위로 배경색이 바뀌는게 유행이더라구요 :)
최종 예제의 실행결과는 http://dreamplan7.cafe24.com/pyscript/py4.html 에서도 보실 수 있습니다.
<html>
<head>
<title>
Read CSV with Pandas using PyScript
</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<style type="text/css">
table.dataframe th {
background-color: #EA6153 !important;
color: white !important;
text-align:center !important;
padding: 5px 15px;
font-size:9pt !important;
}
table.dataframe td {
color: black !important;
text-align:center !important;
padding: 5px 15px;
font-size:9pt !important;
}
table.dataframe tr {
background-color: #FFFFFF !important;
}
table.dataframe tr:nth-child(odd) {
background-color: #E9E9E9 !important;
}
</style>
<py-env>
- pandas
</py-env>
</head>
<body style="padding:20px;">
<h2>파이스크립트에서 판다스(Pandas)로 CSV 읽기</h1>
<div id="csv" style="margin-top:10px"></div>
<py-script>
import pandas as pd
from pyodide.http import open_url
# URL 에서 csv 데이터를 읽어 판다스 배열로 변환합니다.
df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/py4.csv"))
# 출력할 HTML 요소를 선택
csv = Element('csv')
# 해당 HTML 요소에 결과를 출력합니다.
csv.write(df)
</py-script>
</body>
</html>
출력결과물
마무리~
오늘은 파이스크립트에서 판다스(pandas)를 이용해서 인터넷에 있는 csv 파일을 불러와 표로 출력하는 부분을 다뤄봤는데요. 왼쪽의 번호를 뺄 방법을 아직 찾지 못해 약간의 아쉬움이 남습니다.
아무쪼록 발견하면 공유하도록 하겠습니다 :)
필요하신 분에게 도움이 되셨다면 좋습니다.
소중한 공감과 댓글은 사랑입니다~ :)
감사합니다.
다음게시글 : https://itadventure.tistory.com/545
파이스크립트 도전기(4) - csv 읽고 그래프 출력하기
지난 게시글에 연재되는 도전기 4편입니다 . https://itadventure.tistory.com/544 파이스크립트 도전기(3) - 판다스로 csv 읽고 표로 출력하기 지난 게시글에 연재되는 도전기 3편입니다 : https://itadventure...
itadventure.tistory.com
'코딩과 알고리즘' 카테고리의 다른 글
| 파이스크립트 도전기(6) - 인터프리터(2편) (6) | 2022.07.19 |
|---|---|
| 파이스크립트 도전기(5) - 브라우저에서 파이썬 인터프리터? (2) | 2022.07.18 |
| 파이스크립트 도전기(2) - 인구변화 그래프 (4) | 2022.07.11 |
| 파이스크립트 도전기(1) - 구구단 (4) | 2022.07.11 |
| 파파고 번역 API 도전기(4) - 언어 감지 / 번역 API 클래스 ( PHP ) (2) | 2022.07.10 |
