😎 κ³΅λΆ€ν•˜λŠ” μ§•μ§•μ•ŒνŒŒμΉ΄λŠ” μ²˜μŒμ΄μ§€?

HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (6) λ³Έλ¬Έ

πŸ‘©‍πŸ’» λ°±μ—”λ“œ(Back-End)/Node js

HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (6)

μ§•μ§•μ•ŒνŒŒμΉ΄ 2022. 11. 25. 14:55
728x90
λ°˜μ‘ν˜•

<λ³Έ λΈ”λ‘œκ·ΈλŠ” itadventrue λ‹˜μ˜ λΈ”λ‘œκ·Έλ₯Ό μ°Έκ³ ν•΄μ„œ κ³΅λΆ€ν•˜λ©° μž‘μ„±ν•˜μ˜€μŠ΅λ‹ˆλ‹€ :-)>

https://itadventure.tistory.com/547

 

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

μ§€λ‚œ κ²Œμ‹œκΈ€μ—μ„œ μ—°μž¬λ˜λŠ” κΈ€μž…λ‹ˆλ‹€ : https://itadventure.tistory.com/546 파이슀크립트 도전기(5) - λΈŒλΌμš°μ €μ—μ„œ 파이썬 인터프리터? μ§€λ‚œ κ²Œμ‹œκΈ€μ— μ—°μž¬λ˜λŠ” 도전기 3νƒ„μž…λ‹ˆλ‹€. https://itadventure.tistory.com

itadventure.tistory.com

 

 

 

πŸŽ„ 인터프리터 μ“Έ λ•Œλ„ ν™•μž₯ λͺ¨λ“ˆ μ„ μ–Έν•˜κΈ°

    <py-env>
      - pandas
      - matplotlib
    </py-env>

 

❗ μ˜ˆμ‹œ μ½”λ“œ κ΅¬ν˜„

<!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>
        - 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>

 

 

 

πŸŽ„ div HTML μš”μ†Œ λ‹€μ΄λ ‰νŠΈ μΆ”κ°€

❗ csv νŒŒμΌμ„ μ½μ–΄μ„œ 평점을 ν‘œλ‘œ, κ·Έλž˜ν”„λ‘œ 좜λ ₯

파이썬 인터프리터 창에 μžλ°”μŠ€ν¬λ¦½νŠΈ 처럼 id κ°’ 지정

 

element = document.createElement('div')
element.id = "csv"
document.body.append(element)

 

❗ index.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>
        - matplotlib
        - pandas
    </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 pandas as pd 
from pyodide.http import open_url

# URL μ—μ„œ csv 데이터λ₯Ό 읽어 νŒλ‹€μŠ€ λ°°μ—΄(데이터 ν”„λ ˆμž„)으둜 λ³€ν™˜ν•©λ‹ˆλ‹€.
df = pd.read_csv(open_url("BigBasketProducts.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)

 

 

 

 

 

 

 

 

 

 

728x90
λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ

'πŸ‘©β€πŸ’» λ°±μ—”λ“œ(Back-End) > Node js' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (8)  (0) 2022.11.25
HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (7)  (0) 2022.11.25
HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (5)  (0) 2022.11.25
HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (4)  (1) 2022.11.25
HTMLμ—μ„œ Python을 μ‚¬μš©ν•  수 μžˆλŠ” PyScript (3)  (0) 2022.11.25
'πŸ‘©‍πŸ’» λ°±μ—”λ“œ(Back-End)/Node js' Related Articles more
Comments