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

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

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

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

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

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

https://itadventure.tistory.com/552

 

ํŒŒ๋„!(11) - ๊บพ์€์„  ๊ทธ๋ž˜ํ”„ - ์ฃผ๋‹จ์œ„ ๋งค์ถœ

'ํŒŒ๋„'๋Š” ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ ๋„์ „๊ธฐ์˜ ์ค„์ž„๋ง์ž…๋‹ˆ๋‹ค. ์ง€๋‚œ ๊ฒŒ์‹œ๊ธ€์— ์—ฐ์žฌ๋˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. https://itadventure.tistory.com/551 ํŒŒ๋„!(10) - ์”จ๋ณธ์œผ๋กœ ์˜ˆ์œ ๊ทธ๋ž˜ํ”„ ๊พธ๋ฏธ๊ธฐ 'ํŒŒ๋„'๋Š” ํŒŒ์ด์Šคํฌ๋ฆฝํŠธ ๋„์ „๊ธฐ์˜ ์ค„์ž„๋ง

itadventure.tistory.com

 

 

 

 

๐ŸŽ„ ์›”๋ณ„ ์•„๋ณด์นด๋„ ๋งค์ถœ๋Ÿ‰ ๊บพ์€์„  ๊ทธ๋ž˜ํ”„๋กœ ๊ทธ๋ฆฌ๊ธฐ

โ—  ์ฝ”๋“œ ๊ตฌํ˜„

<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
        - matplotlib
        - seaborn
      </py-env>
    </head>
  <body> 
    <link rel="stylesheet" href="pytable.css"/>

    <py-script>
    def createElementDiv(name):
        element = document.createElement('div')
        element.id = name
        document.body.append(element)
        return Element(name)

    import pandas as pd
    from pyodide.http import open_url
    import numpy as np

    <!-- ํŒ๋‹ค์Šค์—์„œ csv ๋ฅผ ๋ฐ์ดํ„ฐ ํ”„๋ ˆ์ž„์œผ๋กœ ์ฝ์–ด์˜ด -->
    SalesData = pd.read_csv(open_url(
      "http://dreamplan7.cafe24.com/pyscript/csv/avocado.csv"
    ))      

    <!-- # 2๊ฐœ ํ•„๋“œ๋งŒ ์ถ”๋ ค์„œ ๋ฐ์ดํ„ฐ ํ”„๋ ˆ์ž„์„ ๋‹ค์‹œ ๋งŒ๋“ฌ -->
    SalesData = SalesData[[
      'Date', 
      'Total Volume'
    ]]   

    SalesData.columns = [
      'Day', 
      'Amount'
    ]

    <!-- ์ฃผ๊ฐ„ ๋งค์ถœ๋Ÿ‰ ๊ทธ๋ฃน -->
    WeekdaysSalesData = SalesData.fillna(0) \
      .groupby('Day', as_index=False)[['Amount']] \
      .sum() \
      .sort_values(
        by='Day', 
        ascending=True
      )

    <!-- 10000์œผ๋กœ ๋‚˜๋ˆˆ ๋งค์ถœ๋Ÿ‰ ํ•„๋“œ ์ถ”๊ฐ€ -->
    WeekdaysSalesData.insert(2, 'Amount(10000)', 
    WeekdaysSalesData['Amount']/10000, 
      True)

    createElementDiv('output2').write(WeekdaysSalesData)

    import matplotlib.pyplot as plt
    import matplotlib as mat

    fig = plt.figure(figsize=(15, 7))

    plt.title('Weekdays Avocado SalesAmount');
    plt.xticks(rotation=90)

    <!-- ๊บพ์€์„  ๊ทธ๋ž˜ํ”„ -->
    plt.plot(        
        WeekdaysSalesData['Day'].to_list(),
        WeekdaysSalesData['Amount(10000)'].to_list(),
        marker='o',
        color='green', 
        label='Amount'
    )

    <!-- ์ถ• ๋ผ๋ฒจ ํ‘œ์‹œ -->
    plt.xlabel('Day')
    plt.ylabel('Amount (unit : 10000)')

    <!-- ๋ฒ”๋ก€ ํ‘œ์‹œ -->
    plt.legend()

    ax = plt.gca()
    <!-- X์ถ•๋งŒ ๊ทธ๋ฆฌ๋“œ -->
    ax.xaxis.grid(True)
    <!-- ๋งˆ์ง„ ์กฐ์ • -->
    ax.margins(x=0.01, y=0.02)
    <!-- ์ฃผ์œ„ ์ด์ƒํ•œ ์—ฌ๋ฐฑ ์—†์• ๊ธฐ -->
    fig.tight_layout() 
    fig

</py-script> 
  </body> 
</html>

 

 

 

 

 

 

 

 

 

 

 

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

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

HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (12)  (0) 2022.11.28
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (11)  (0) 2022.11.25
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (9)  (1) 2022.11.25
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (8)  (0) 2022.11.25
HTML์—์„œ Python์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” PyScript (7)  (0) 2022.11.25
'๐Ÿ‘ฉ‍๐Ÿ’ป ๋ฐฑ์—”๋“œ(Back-End)/Node js' Related Articles more
Comments