본문 바로가기
코딩과 알고리즘

파이스크립트 도전기(6) - 인터프리터(2편)

반응형

지난 게시글에서 연재되는 글입니다 : 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

 

반응형