HTML에서 Python을 사용할 수 있는 PyScript (4)

250x250

관리 메뉴

😎 공부하는 징징알파카는 처음이지?

HTML에서 Python을 사용할 수 있는 PyScript (4) 본문

👩‍💻 백엔드(Back-End)/Node js

HTML에서 Python을 사용할 수 있는 PyScript (4)

징징알파카 2022. 11. 25. 14:38

728x90

<본 블로그는 itadventrue 님의 블로그를 참고해서 공부하며 작성하였습니다 :-)>

https://itadventure.tistory.com/545

파이스크립트 도전기(4) - csv 읽고 그래프 출력하기

지난 게시글에 연재되는 도전기 4편입니다 . https://itadventure.tistory.com/544 파이스크립트 도전기(3) - 판다스로 csv 읽고 표로 출력하기 지난 게시글에 연재되는 도전기 3편입니다 : https://itadventure.tist

itadventure.tistory.com

🎄 CSV 읽어서 그래프 출력

❗ Dataset 로드

https://www.kaggle.com/datasets/surajjha101/bigbasket-entire-product-list-28k-datapoints

이 데이터 세트에는 간단한 의미를 가진 10개의 속성이 포함

index - 단순히 인덱스!
product - 제품의 제목(나열된 대로)
category - 제품이 분류된 카테고리
sub_category - 제품이 보관된 하위 카테고리
brand - 제품의 브랜드
sale_price - 사이트에서 제품이 판매되는 가격
market_price - 제품의 시장 가격
type - 제품이 속하는 유형
rating - 제품이 소비자로부터 받은 등급
description - 데이터 세트에 대한 설명(자세한 내용)

FE를 수행하는 동안 "할인"은 (marketprice - saleprice) / market_price * 100으로 생성

여기에서 소비자가 점점 더 좋아지는 것을 얻는 데 도움이 됨

❗ 판다스(Pandas)로 CSV 읽기

<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("BigBasketProducts.csv"))

        # 출력할 HTML 요소를 선택
        csv = Element('csv')

        # 해당 HTML 요소에 결과를 출력합니다.
        csv.write(df)
      </py-script>

    </body>
</html>

모든 행을 출력하려면 밑 코드 추가

pd.set_option('display.max_rows', None)

🎄 "브랜드별 평점 평균"으로 그래프 추출하기

❗ 세부 내용

브랜드별 평점 평균을 구할 수 있도록 소스를 구성

    # 평점을 추출대상으로 브랜드별로 그룹화
    df_group = df[['rating']].groupby(df['brand'])

결과 출력

csv.write(df_group.mean())

❗ 평균 추출 코드 구현

<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("BigBasketProducts.csv"))

        # 브랜드별 평점 평균을 구할 수 있도록 소스를 구성
        df_group = df[['rating']].groupby(df['brand'])

        # 모든 행 출력
        pd.set_option('display.max_rows', None)

        # 출력할 HTML 요소를 선택
        csv = Element('csv')

        # 해당 HTML 요소에 결과를 출력합니다.
        csv.write(df_group.mean())
      </py-script>

    </body>
</html>

❗ NaN 는 그래프에서 사용하기 곤란하니 0으로 변경

df_group = df[['rating']].fillna(0).groupby(df['brand'])

❗ Y 축은 아래에서 위로 순서가 나열

plt.gca().invert_yaxis()

❗ 그래프 코드 구현

<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
        - matplotlib
    </py-env>

</head>

<body style="padding:20px;">
    <h2>파이스크립트에서 판다스(Pandas)로 CSV 읽기</h1>
    <div id="pltdiv"></div>
    <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("BigBasketProducts.csv"))

        # 브랜드별 평점 평균을 구할 수 있도록 소스를 구성 + Nan 값을 0으로 + rating 기준으로 정렬
        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')

        # 해당 HTML 요소에 평점 평균의 결과를 출력
        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)
      </py-script>
    </body>
</html>

728x90

저작자표시

'👩‍💻 백엔드(Back-End) > Node js' 카테고리의 다른 글

HTML에서 Python을 사용할 수 있는 PyScript (6) (0)	2022.11.25
HTML에서 Python을 사용할 수 있는 PyScript (5) (0)	2022.11.25
HTML에서 Python을 사용할 수 있는 PyScript (3) (0)	2022.11.25
HTML에서 Python을 사용할 수 있는 PyScript (2) (0)	2022.11.25
HTML에서 Python을 사용할 수 있는 PyScript (1) (0)	2022.11.25

'👩‍💻 백엔드(Back-End)/Node js' Related Articles

Comments

😎 공부하는 징징알파카는 처음이지?

HTML에서 Python을 사용할 수 있는 PyScript (4) 본문

HTML에서 Python을 사용할 수 있는 PyScript (4)

🎄 CSV 읽어서 그래프 출력

🎄 "브랜드별 평점 평균"으로 그래프 추출하기

'👩‍💻 백엔드(Back-End) > Node js' 카테고리의 다른 글

티스토리툴바