๐Ÿ˜Ž ๊ณต๋ถ€ํ•˜๋Š” ์ง•์ง•์•ŒํŒŒ์นด๋Š” ์ฒ˜์Œ์ด์ง€?

HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (3) ๋ณธ๋ฌธ

๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js

HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (3)

์ง•์ง•์•ŒํŒŒ์นด 2022. 11. 25. 11:11
728x90
๋ฐ˜์‘ํ˜•

<๋ณธ ๋ธ”๋กœ๊ทธ๋Š” itadventrue ๋‹˜์˜ ๋ธ”๋กœ๊ทธ๋ฅผ ์ฐธ๊ณ ํ•ด์„œ ๊ณต๋ถ€ํ•˜๋ฉฐ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค :-)>

https://itadventure.tistory.com/544

 

ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ ๋„์ „๊ธฐ(3) - ํŒ๋‹ค์Šค๋กœ csv ์ฝ๊ณ  ํ‘œ๋กœ ์ถœ๋ ฅํ•˜๊ธฐ

์ง€๋‚œ ๊ฒŒ์‹œ๊ธ€์— ์—ฐ์žฌ๋˜๋Š” ๋„์ „๊ธฐ 3ํŽธ์ž…๋‹ˆ๋‹ค : https://itadventure.tistory.com/543 ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ ๋„์ „๊ธฐ(2) - ์ธ๊ตฌ๋ณ€ํ™” ๊ทธ๋ž˜ํ”„ ์ง€๋‚œ ๊ฒŒ์‹œ๊ธ€์— ์ด์–ด ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ 2๋ฒˆ์งธ ๋„์ „๊ธฐ์ž…๋‹ˆ๋‹ค. ์ง€๋‚œ ๊ฒŒ์‹œ๊ธ€ : https://ita

itadventure.tistory.com

 

 

๐ŸŽ„ Pandas ๋ฅผ ์‚ฌ์šฉํ•ด์„œ csv ํŒŒ์ผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

โ— ๋ชจ๋“ˆ ์„ ์–ธ

<py-env> ํƒœ๊ทธ ์•ˆ์— pandas ์‚ฌ์šฉ ์„ ์–ธ

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

์ธํ„ฐ๋„ท URL์„ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ ์œ„ํ•œ open_url ํ•จ์ˆ˜๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ

import pandas as pd 
from pyodide.http import open_url

 

 

 

โ— ์ฃผ์˜

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>

 

Element ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ์ถœ๋ ฅํ•  HTML ์š”์†Œ๋ฅผ ์„ ํƒ

df = pd.read_csv(open_url("http://dreamplan7.cafe24.com/pyscript/py4.csv"))
csv = Element('csv')

 

id๊ฐ’์„ "~~~~~~" ๋กœ ์ง€์–ด์ค„ DIV ํƒœ๊ทธ ๋จผ์ € ์„ ์–ธ

  <div id="csv"></div>

 

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>

 

 

โž• ์˜ˆ์œ ๋ฒ„์ „

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

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ

'๐Ÿ‘ฉโ€๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End) > Node js' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (5)  (0) 2022.11.25
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (4)  (1) 2022.11.25
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (2)  (0) 2022.11.25
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (1)  (0) 2022.11.25
์›น์—์„œ ๊ทธ๋ž˜ํ”„ ๋งŒ๋“œ๋Š” Plot.js ์•Œ์•„๋ณด๊ธฐ  (0) 2022.11.22
'๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js' Related Articles more
Comments