지난 게시글에서 연재되는 글입니다 : https://itadventure.tistory.com/546
파이스크립트 도전기(5) - 브라우저에서 파이썬 인터프리터?
지난 게시글에 연재되는 도전기 3탄입니다. https://itadventure.tistory.com/545 파이스크립트 도전기(4) - csv 읽고 그래프 출력하기 지난 게시글에 연재되는 도전기 4편입니다 . https://itadventure.tistory...
itadventure.tistory.com
지난 번에는 <py-repl> 태그를 통해 웹브라우저에서 직접 파이썬 명령어를 타이핑해서 실행하는 부분을 다뤄보았는데요. 어떤 소스는 오류가 나는 것을 확인할 수 있었습니다.
오류의 원인을 확인해 보았는데요 짐작하던 바와 같이 파이썬 기본 기능이 아닌 확장 모듈의 경우
이를 사전에 사용하겠다는 선언이 없어서 그런 것이지요.
확장 모듈만 선언하면 만사 오~케이
<py-env> 태그를 통해 해당 모듈을 사용하겠다는 선언을 미리 해주어야 하는데요.
pandas 와 matplotlib 를 사용하려면 아래 소스를 넣어 주어야 합니다.
<py-env>
- pandas
- matplotlib
</py-env>
위 내용이 포함된 소스입니다. 아직 양이 그리 많지는 않지요?
크레이가 마련한 웹페이지에 방문해 주셔도 됩니다. http://dreamplan7.cafe24.com/pyscript/py7.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>파이썬 인터프리터</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- pandas
- matplotlib
</py-env>
</head>
<body>
<h1><b>pyscript REPL</b></h1>
파이썬 명령어 입력 후 입력상자 우측의 화살표 버튼을 클릭하거나
또는 Shift-ENTER 를 눌러 실행이 가능합니다.
<br>
<div>
<py-repl auto-generate="true"> </py-repl>
</div>
</body>
</html>이제 다시 한번 아래 코드를 실행해 봅시다.
import matplotlib.pyplot as plt
fig = plt.figure()
year = [
1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013,
2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021]
population = [
45416339, 45858029, 46266256, 46684069, 46991171, 47335678, 47732558, 48021543, 48229948, 48386823,
48583805, 48782274, 48991779, 49268928, 49540367, 49773145, 50515666, 50734284, 50948272, 51141463,
51327916, 51529338, 51696216, 51778544, 51826059, 51849861, 51829023, 51638809 ]
plt.plot(year, population, label='Korea' )
fig
멋지게 결과가 나왔군요!
내친 김에 도전기(4)에서 다뤘던 csv 파일을 읽어서 평점을 표로, 그래프로 출력하는 부분을 시도헤 볼까요?
아래 소스입니다.
import pandas as pd
from pyodide.http import open_url
# URL 에서 csv 데이터를 읽어 판다스 배열(데이터 프레임)으로 변환합니다.
df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/BigBasket_Products_200.csv"))
# 평점을 추출대상으로 브랜드별로 그룹화
df_group = df.fillna(0).groupby('brand')[['rating']].mean().sort_values(by='rating', ascending=False)
#df_group.columns = ['brand', 'rating']
# 모든 행을 출력하도록 옵션을 설정합니다.
pd.set_option('display.max_rows', None)
# 출력할 HTML 요소를 선택
csv = Element('csv')
# 산출된 평점의 평균울 출력
csv.write(df_group)
import matplotlib.pyplot as plt
plt.rcParams.update({'font.size': 7})
fig = plt.figure(figsize=(5, 20))
plt.plot(
df_group['rating'].to_list(),
df_group.index.to_list(),
label='Rating of Brand' )
plt.gca().invert_yaxis()
pltdiv = Element('pltdiv')
pltdiv.write(fig)
엇, 그러자 이게 웬 일입니까? 오류가 표시되었군요.
자세히 뜯어보니 csv라는 id값을 가진 HTML 요소가 없어서 그렇더군요.
그렇다고 아래 소스를 추가하기는 좀 모호합니다. div 를 다이렉트로 추가하는 방법은 없는걸까요?
<div id="csv" style="margin-top:10px"></div>찾아보니 있더군요 :)
div HTML 요소 다이렉트 추가하기
아래 2줄이면 파이썬 인터프리터 창에서도 HTML 문서에 DIV 요소를 추가할 수 있었는데요.
자바스크립트와 똑같군요 ㅎ..
element = document.createElement('div')
document.body.append(element)우리는 여기에 ID값을 지정해 줘야 하기 때문에 아래와 같이 코드를 실행하면 됩니다.
element = document.createElement('div')
element.id = "csv"
document.body.append(element)
해당 부분이 포함된 전체코드. 이 코드를 파이썬 인터프리터 창에 복붙해서 실행해 보시면,
import pandas as pd
from pyodide.http import open_url
# URL 에서 csv 데이터를 읽어 판다스 배열(데이터 프레임)으로 변환합니다.
df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/BigBasket_Products_200.csv"))
# 평점을 추출대상으로 브랜드별로 그룹화
df_group = df.fillna(0).groupby('brand')[['rating']].mean().sort_values(by='rating', ascending=False)
#df_group.columns = ['brand', 'rating']
# 모든 행을 출력하도록 옵션을 설정합니다.
pd.set_option('display.max_rows', None)
element = document.createElement('div')
element.id = "csv"
document.body.append(element)
# 출력할 HTML 요소를 선택
csv = Element('csv')
# 산출된 평점의 평균울 출력
csv.write(df_group)
import matplotlib.pyplot as plt
plt.rcParams.update({'font.size': 7})
fig = plt.figure(figsize=(5, 20))
plt.plot(
df_group['rating'].to_list(),
df_group.index.to_list(),
label='Rating of Brand' )
plt.gca().invert_yaxis()
element = document.createElement('div')
element.id = "pltdiv"
document.body.append(element)
pltdiv = Element('pltdiv')
pltdiv.write(fig)
이런 식으로 표가 나오는 부분과
그래프가 나오는 부분을 확인할 수 있습니다! 대성공~
마무~리
오늘은 <py-repl> 태그를 사용하여 인터프리터 모드로 실행하는 환경에서도 matplotlib, pandas 등을 함께 사용하는 부분을 다뤄보았습니다.
생각한 바와 같이 착착 들어맞아 기분 좋은 저녁입니다 :)
빨리 이것 저것 해보고 싶지만 시작 제약상 오늘은 이만!
오늘도 여기까지 읽어주셔서 감사합니다.
구독자 모든 분들 행복한 시간 되시길 바랍니다 :)
재미있으셨다면 공감 한방, 댓글은 굿잡!
감사합니다~
다음 게시글 : https://itadventure.tistory.com/548
파이스크립트 도전기(7) - 그래프에서 한글을 표시하자!
지난 게시글에 이어지는 연재글입니다 : https://itadventure.tistory.com/547 파이스크립트 도전기(6) - 파이썬 인터프리터(2편) 지난 게시글에서 연재되는 글입니다 : https://itadventure.tistory.com/546 파이..
itadventure.tistory.com
'코딩과 알고리즘' 카테고리의 다른 글
| 파도!(13) - 음? 인공지능 적중율이?! - 평균가격 추가 (4) | 2022.08.08 |
|---|---|
| 파도!(8) - 아보카도 판매량 (1) | 2022.07.24 |
| 파이스크립트 도전기(5) - 브라우저에서 파이썬 인터프리터? (2) | 2022.07.18 |
| 파이스크립트 도전기(3) - 판다스로 csv 읽고 표로 출력하기 (2) | 2022.07.16 |
| 파이스크립트 도전기(2) - 인구변화 그래프 (4) | 2022.07.11 |
