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

파이스크립트 도전기(2) - 인구변화 그래프

반응형

지난 게시글에 이어 파이스크립트 2번째 도전기입니다.

지난 게시글 : https://itadventure.tistory.com/542

 

파이스크립트 도전기(1)

웹브라우저에서 작동하는 새로운 스크립트라서 꼭 시도해보고 싶었는데 이제 시작해 보려 합니다 :) 지난 게시글에 잠깐 설명드렸듯 파이스크립트는 웹브라우저에서 파이썬 스크립트로 작동하

itadventure.tistory.com

 

파이썬에는 matplotlib.pyplot 이라는 아주 유명한 그래프 모듈이 있는데요.
간편하게 사용할 수 있어서 파이썬에서 매우 빈번하게 사용됩니다.
오늘은 이걸로 대한민국의 연도별 인구변화를 그래프로 찍어보는 시간을 가져볼텐데요.
해당 연도별 인구는 위키 백과에 있는 자료를 참고하였습니다.

https://namu.wiki/w/대한민국/인구

 

대한민국/인구 - 나무위키

이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권

namu.wiki


사실 작동을 확인하기 위해 예제는 이미 완성했지만,
그래도 생동감(?)을 표현하기 위해 실전처럼 나가보겠습니다.

 

matplitlib 모듈 사용 선언!

 

matplotlib 모듈들을 사용하기 위해서는 HTML 소스에 필수적으로 들어가야 되는 부분이 있습니다.
바로 py-env 설정인데요. 파이썬 기본 기능이 아닌 모든 모듈은 py-env 태그를 통해 사용하겠다고 모듈명을 사전에 미리 선언해주어야 합니다.

선언 방법은 아주 간단합니다. 빨간색처럼 <py-env> 태그로 지어준 범위내에 모듈명을 적어주면 되는데요.
모듈명 앞에 대시(-) 기호, 띄어쓰기는 필수로 넣어 주어야 합니다.


<html> 
    <head> 
      <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> 
  </body> 
</html>


그리고 pyscript 를 시작하면 되는데요.
기본적으로 import 명령을 이용해서 모듈을 불러오는 것은 똑같습니다.


     : ( 생략 )
  <body> 
    <py-script>  
      import matplotlib.pyplot as plt
    </py-script> 
  </body> 
</html>


 

그래프를 단숨에 찍어보자!

 

그러면 이제 연도별 인구분포를 파이썬 리스트로 선언해서 그래프로 찍어주는 부분을 진행해보겠습니다.
아래와 같이 소스를 작성해보고 실행해 보았는데요.


              :
    <py-script> 
      import matplotlib.pyplot as plt
      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' )
      plt.show()
    </py-script> 
        :


어라? 아무것도 나오지 않습니다. 이게 무슨 일이고?

그래프를 찍는 방법이 달라~

 

확인해보니 파이스크립트에서 그래프는 plt.show() 명령어가 아니라 plt.figure() 기능을 사용해야 하더군요.
보통 사용법은 아래와 같습니다.

1) HTML 소스 내에서 그래프를 출력할 div 를 하나 선언합니다.

<div id="div이름"></div>

2) <py-script> 의 output 속성을 정의하고 출력할 div 이름을 적어줍니다.

<py-script output="poplulation_layer"> 

3) <py-script> 스크립트 안쪽을 아래와 같은 코드로 채워 넣습니다.
여기서 빨간 색으로 표시된 부분이 핵심입니다.

   <py-script output="poplulation_layer"> 
      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
    </py-script> 

전체 소스는 아래와 같은데요.


<html> 
    <head> 
      <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>대한민국 인구</h1>
    <div id="poplulation_layer"></div>
    <py-script output="poplulation_layer"> 
      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
    </py-script> 
  </body> 
</html>


 

실행결과

이 예제는 크레이의 홈페이지에서도 바로 보실수 있습니다.

http://dreamplan7.cafe24.com/pyscript/py3.html

 

실행결과는 아래와 같습니다. 1e7은 왼쪽 단위가 10의 7승이라는 의미인데,
간단히 말해 왼쪽의 숫자가 인구수인데 1,000만을 곱하면 된다는 것입니다.
2020년까지 거의 인구가 상승세이다가 그 후에 줄어드는 추세군요.
크레이의 홈페이지에서도 바로 보실수 있습니다.
http://dreamplan7.cafe24.com/pyscript/py3.html

 

마무~리

 

오늘은 파이스크립트에서 matplotlib 파이플롯 그래프 모듈를 사용하는 방법을 살펴보았습니다.
좀 사용법이 특이한데요. 어느정도 사용하다 보면 익숙해지지 않을까 기대해 봅니다,

오늘도 게시글을 읽어주러 와주신 모든 분들께 감사드리며,
소중한 공감과 댓글은 사랑입니다~
감사합니다 :)


다음 게시글 : https://itadventure.tistory.com/544

 

파이스크립트 도전기(3) - 판다스로 csv 읽고 표로 출력하기

지난 게시글에 연재되는 도전기 3편입니다 : https://itadventure.tistory.com/543 파이스크립트 도전기(2) - 인구변화 그래프 지난 게시글에 이어 파이스크립트 2번째 도전기입니다. 지난 게시글 : https://ita

itadventure.tistory.com

 

반응형