Plotly 그래프 - Plotly Express

개요

  • High-Level API 형태인 Plotly Express에 대해 학습하도록 한다.
  • Plotly Express는 간단하게 말하면 Pandas Dataframe과 직접적으로 연동이 가능하다.
  • 보다 직관적으로 그래프를 시각화할 수 있기 때문에 초기 밑그림을 그릴 때는 Plotly Express로 작성하는 것이 좋다.
  • 전체 설명 참고자료 : Plotly Express in Python

Plotly Express 요약

Plotly Express 그래프 종류

Plotly Express currently includes the following functions:

Plotly 그래프 - 테마 변경하기

개요

  • plotly 그래프의 테마를 변경하는 방법에 대해 알아본다.

그래프 테마의 종류 확인하기

  • 우선 기본 그래프를 확인한다.
import plotly.graph_objects as go
weekly_sales = dict({
    "data": [{
        "type": "bar", 
        "x": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], 
        "y": [28, 27, 25, 31, 32, 35, 36]
    }], 
    "layout" : {"title": {"text": "Sales of the week", 
                          "x": 0.5, "font": {"color": "red", "size": 15}}}
})

fig = go.Figure(weekly_sales)
fig.show()

newplot.png

  • 그래프 테마를 변경하기 위해 우선 종류를 확인해야 한다.
plotly.io.templates
Templates configuration
-----------------------
    Default template: 'plotly'
    Available templates:
        ['ggplot2', 'seaborn', 'simple_white', 'plotly',
         'plotly_white', 'plotly_dark', 'presentation', 'xgridoff',
         'ygridoff', 'gridon', 'none']

그래프 테마 변경하기

  • 그래프 테마를 변경하도록 하기 위해서는 간단하게 아래와 같이 적용하면 된다.
fig.layout.template = 'ggplot2'
fig.show()

newplot_02.png

Plotly 그래프 - 이미지 내보내기

개요

  • Plotly 그래프를 다양한 방법으로 내보내는 코드를 작성해본다.
  • 본 블로그에서는 HTML, PNG 두가지 형태로 내보내는 방법을 숙지한다.

HTML로 내보내기

  • plotly figures는 HTML 및 자바스크립트로 구성되어 있다.
  • 소스코드는 아래와 같다.
fig.write_html('html_plot.html', config={'toImageButtonOptions':{'format': 'svg'}})

Screen Shot 2022-09-11 at 4.00.12 PM.png

image로 내보내기

  • 이미지로 내보내기 위해서는 아래와 같이 소스코드를 작성한다.
fig.write_image('path/to/image_file.svg',height=600, width=850)
  • 그런데, 실행 시, 다음과 에러가 나올 경우 아래와 같이 라이브러리를 설치한다.
---------------------------------------------------------------------------
ValueError                                Traceback (most recent call last)
<ipython-input-11-691564193a43> in <module>
----> 1 fig.write_image('img/tutorial.png', height = 600, width = 850)

/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/plotly/basedatatypes.py in write_image(self, *args, **kwargs)
   3819         import plotly.io as pio
   3820 
-> 3821         return pio.write_image(self, *args, **kwargs)
   3822 
   3823     # Static helpers

/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/plotly/io/_kaleido.py in write_image(fig, file, format, scale, width, height, validate, engine)
    266     # -------------
    267     # Do this first so we don't create a file if image conversion fails
--> 268     img_data = to_image(
    269         fig,
    270         format=format,

/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/site-packages/plotly/io/_kaleido.py in to_image(fig, format, width, height, scale, validate, engine)
    132     # Raise informative error message if Kaleido is not installed
    133     if scope is None:
--> 134         raise ValueError(
    135             """
    136 Image export using the "kaleido" engine requires the kaleido package,

ValueError: 
Image export using the "kaleido" engine requires the kaleido package,
which can be installed using pip:
    $ pip install -U kaleido
pip install -U kaleido
  • 다음 코드를 재 실행한다.
fig.write_image('img/tutorial.png', height = 600, width = 850)
  • 해당되는 경로에서 실제 이미지가 내보내기가 되었는지 확인한다.

Screen Shot 2022-09-11 at 4.18.57 PM.png

Plotly 그래프 - Figure Object 이해하기

Figure Object

  • Figure Object는 크게 두가지로 구성(Attribute)이 되어 있다.
    • data : 여기에서는 그래프와 관련된 각종 정보가 담긴 데이터를 의미한다. 예를 들면, 산점도를 그린다면, X와 Y값의 정보를 확인할 수 있다. 그래프의 색상도 정의할 수 있다.
    • layout : data외의 모든 것은 layout에 속한다. 기본적으로 layout은 그래프의 Styling 요소들이 들어 있다. 예를 들면, X축, Y축의 제목, 색상 등을 변경하고자 할 때는 layout에 접근해야 한다.
  • 간단하게 Figure Object를 정의해본다.
import plotly.graph_objects as go

fig = go.Figure()
fig.show()

tutorial_02.png

Plotly 그래프 시작하기 - 필수 사전 준비

개요

  • Plotly 그래프의 기본 생태계를 익히도록 한다.
  • Plotly 그래프를 작성하도록 한다.

라이브러리 불러오기

  • 본 코드는 모두 Local 가상환경을 설치한 후, Jupyter Lab에서 작성했다.
  • 현재 plotly 버전은 다음과 같다.
import plotly
print(plotly.__version__)
5.1.0
  • 로컬 환경에서 Jupyter notebook에서 plotly 그래프가 간혹 나타나지 않는 경우가 있다. 그런 경우, 아래와 같이 추가로 설치를 진행한다.
jupyter labextension install jupyterlab-plotly
  • 설치가 완료되었다면, 아래와 같은 코드를 추가로 실행한다.
import plotly
plotly.offline.init_notebook_mode(connected=True)

그래프 테스트

  • 먼저, 아래와 같은 샘플 코드를 실행했을 때, Jupyter Lab 상에 그래프 창이 나오면 정상이다.
import plotly.graph_objects as go
weekly_sales = dict({
    "data": [{
        "type": "bar", 
        "x": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"], 
        "y": [28, 27, 25, 31, 32, 35, 36]
    }], 
    "layout" : {"title": {"text": "Sales of the week", 
                          "x": 0.5, "font": {"color": "red", "size": 15}}}
})

fig = go.Figure(weekly_sales)
fig.show()

Screen Shot 2022-09-08 at 5.28.19 PM.png

Flask Web Resume Using Templates

개요

  • Flask 웹개발을 통해 간단한 Resume를 작성해본다.

가상환경

  • 프로젝트 폴더에 가상환경을 설치한다.
virtualenv venv
created virtual environment CPython3.9.12.final.0-64 in 5343ms
  creator CPython3Windows(dest=C:\Users\human\Desktop\flask-resume-evan-examples\venv, clear=False, no_vcs_ignore=False, global=False)
  seeder FromAppData(download=False, pip=bundle, setuptools=bundle, wheel=bundle, via=copy,
app_data_dir=C:\Users\human\AppData\Local\pypa\virtualenv)
    added seed packages: pip==22.2.2, setuptools==63.2.0, wheel==0.37.1
  activators BashActivator,BatchActivator,FishActivator,NushellActivator,PowerShellActivator,PythonActivator

라이브러리 설치

  • 가상환경에 접속 후, Flask 라이브러리를 설치한다.
pip install Flask
  • [app.py](http://app.py) 에 다음과 같이 작성한다.
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    first_name = 'Evan'
    return render_template('index.html', f_name = first_name)
  • templates에서 index.html 파일을 만든다.

Dash App Using Flask Factory Pattern and Blueprint - 2

강의 홍보

개요

  • 기존 Flask-Dash-Heroku 연동 예제를 업그레이드 한다.
  • Flask Factory Application의 기본 개념 및 Blueprint의 기본 개념을 이해한다.
  • Dash App을 Flask Factory Application에 맞추어 가공 한다.

리뷰

미리보기

  • 다음과 같이 메뉴가 있도록 코드를 작성할 예정이다.

Untitled

Dash App Using Flask Factory Pattern and Blueprint - 1

강의 홍보

개요

  • 기존 Flask-Dash-Heroku 연동 예제를 업그레이드 한다.
  • Flask Factory Application의 기본 개념 및 Blueprint의 기본 개념을 이해한다.

리뷰

미리보기

  • 다음과 같이 메뉴가 있도록 코드를 작성할 예정이다.

Untitled

Grafana 설치 및 대시보드 만들기 - 기본편

개요

  • Grafana 대시보드를 다운로드 받고, 그래프를 작성한다.
  • DB 연동을 통해 대시보드를 작성해본다.

설치

Untitled

Untitled

  • Sign in 페이지가 나오면 admin을 각각 입력하면, 패스워드 변경하는 입력이 나오면 그 때 각자 본인에게 맞는 패스워드로 변경한다.
    • 필자는 12345678로 지정했다.

첫번째 대시보드

  • Dashboard를 클릭한다.

Untitled

  • Add a new panel를 클릭한다.

Untitled

  • 아래 그림에서 Data source를 클릭한다.

Untitled

  • Query 탭에 Grafana를 선택한 상태에서 우측 상단의 Apply 버튼을 클릭한다.

Untitled

Flask-Dash-Heroku 연동

개요

  • Flask 및 Dash를 활용하여 간단한 대시보드를 생성할 수 있다.
  • 기존 구현한 대시보드를 Heroku에 배포할 수 있다.

사전준비

  • 파이썬 가상환경 설치 및 기존 라이브러리에 대한 이해가 어느정도 있음을 가정한 상태에서 본 블로그를 작성했음을 유의한다.
  • Heroku 회원가입 및 로그인이 되어 있어야 한다.

Step 1. Github Repo생성

  • Github Repo 생성 시, 중복되지 않을 법한 이름으로 생성
    • 필자 Repo : flask-heroku-dash-evan1234
  • 해당 Repo를 로컬로 가져온다.
git clone https://github.com/your_name/your_unique_repo.git

Step 2. 가상환경 설치 및 주요 라이브러리 설치

  • 먼저 가상환경을 설치한다.
virtualenv venv
  • 가상환경에 접속한다.
source venv/Scripts/activate
  • 주요 라이브러리를 설치한다.
    • pandas : 데이터 불러오기 및 가공
    • dash & plotly : 동적 시각화 대시보드 제공 라이브러리
    • Flask : Flask 웹 프레임워크
    • SQLAlchemy : 데이터베이스 연동 프레임워크
pip install dash plotly Flask pandas gunicorn psycopg2-binary SQLAlchemy Flask-SQLAlchemy

Step 3. 기본 배포 테스트

  • 먼저 본격적인 코드에 앞서 기본적으로 배포가 되는지 확인한다.
  • 필요한 파일 app.py, Procfile, runtime.txt, requirements.txt 파일이 필요하다.

(1) app.py

  • 아래와 같이 작성한다.
# -*- coding:utf-8 -*-

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello World"

(2) Procfile 파일 작성

  • 대문자 및 소문자 정확하게 기재해야 한다.
web: gunicorn app:app

(3) runtime.txt 파일 작성

python-3.9.12

(4) requirements.txt 파일 작성

  • 해당 파일은 기존에 설치했던 라이브러리를 모두 호출하는 형식이어야 한다.
  • 프로젝트 Root 경로에서 아래와 같이 실행한다.
pip freeze > requirements.txt
  • 전체 파일 구조를 확인하면 아래와 같다.
$ ls
app.py  Procfile  README.md  requirements.txt  runtime.txt  venv/

(5) wsgi.py 파일 작성

from app import app

if __name__ == "__main__":
    app.run(threaded=True, port=5000)

(5) 배포 시작

  • 아래 명령어를 순차적으로 입력하여 실행한다.
    • heroku login 시, Web UI에서 실제 ID와 Password를 입력해야 한다.
    • heroku create github repo와 동일하게 작성한다.
heroku login
heroku create your_project_repo
git add .
git commit -m "initial updated"
git push # github repo에 추가
git push heroku main

(6) 배포 사이트 확인

  • 실제로 정상적으로 배포가 완료가 되었다면 실제 웹사이트 URL을 클릭 후, 아래와 같이 확인할 수 있어야 한다.
  • 배포가 진행이 안된다면, 그 다음 코드를 입력하는 것은 의미가 없기 때문에 확인 후 넘어가도록 한다.

Untitled