Python을 이용한 interactive 시각화 및 반응형 웹 대시보드 구현

Data source : Johns Hopkins Univercity CSSE GitHub

• https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series ( daily update once a day)

EDA & Preprocessing 과정

• https://github.com/JIKMAN/Data-Analytics/blob/master/covid_dash/covid_data_preprocessing.ipynb
• jupyter notebook으로 분석 및 전처리 후 VScode에서 프로그래밍 진행

앱 생성

• https://github.com/JIKMAN/covid-dash/blob/main/app.py
• 사용한 라이브러리 :
  • pandas
  • numpy
  • plotly
  • dash

웹 대시보드 배포

• GitHub repository와 heroku 서버를 연동하여 App Depploy하는 과정

Heroku?

PaaS(Platform-as-a-service) 클라우드 서비스

• Heroku app setting

• 웹 대시보드 구성요소

1. app.py

   배포 과정에서 구현할 파이썬 코드

2. Procfile

   앱 배포 과정에서 파이썬 코드를 해석할 수 있도록 호환시켜주는 역할을 해주는 프로그램인 ‘gunicorn’ 사용 설정에 대한 파일

3. requirementex.txt

   파이썬 코드를 구현하는 과정에서 필요한 라이브러리 버전을 설정해주는 파일

4. runtime.txt

   실행할 파이썬 버전을 설정해 주는 파일

5. data (데이터 파일)

   앱 구현에 필요한 데이터 파일 (img 등)

• App deploy

-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/python
-----> Python app detected
-----> Using Python version specified in runtime.txt
-----> No change in requirements detected, installing from cache
-----> Using cached install of python-3.8.12
-----> Installing pip 21.3.1, setuptools 57.5.0 and wheel 0.37.0
-----> Installing SQLite3
-----> Installing requirements with pip
-----> Discovering process types
       Procfile declares types -> web
-----> Compressing...
       Done: 115.8M
-----> Launching...
       Released v6
       https://dash-covid19-realtime.herokuapp.com/ deployed to Heroku

• 웹 대시보드 배포 완료
  • 해당 웹 url로 접속 시 드롭박스를 이용해 나라 선택 가능하며 그래프 및 지도 등 인터랙티브한 시각화가 반응형으로 동작함.

Reference

Dash app layout and css file https://dash.plotly.com/layout https://codepen.io/chriddyp/pen/bWLwgP.css

dash html components https://dash.plotly.com/dash-html-components

dash html components https://dash.plotly.com/dash-core-components

dash basic callbacks https://dash.plotly.com/basic-callbacks

book) Interactive Dashboard with Plotly & Dash