Dash Plotly 를 활용한 Web 기반 대시보드 구축 - (2) Dash 설치와 앱 실행

(2) Dash 설치와 앱 실행

Dash 는 파이썬 패키지 관리 툴인 pip 를 통해 다음과 같은 간단한 방법으로 터미널 인스톨할 수 있습니다. 계속해서 업데이트 중인 패키지이기 때문에 최신 버전은 Github 링크 에서 확인해 주세요.

pip install dash

만약 Jupyter Notebook 또는 JupterLab 환경에서 바로 레이아웃 변경사항을 확인하는 것을 선호하시는 분들은 다음과 같이 jupyter-dash 를 설치하시면 됩니다.

pip install jupyter-dash

이후 진행되는 파이썬과 dash 버전은 Python 3, 2.0.0 을 기준으로 작성하겠습니다. 그리고 추가적으로 Dash 에서 기본으로 사용되는 자료구조이자 이후 예제에서 다루게 될 Pandas 를 설치해주도록 합니다.

pip install pandas

이제 대시 앱을 만들고 실행시켜 보겠습니다. 대시 앱은 app.py 라는 파이썬 파일 구성하고 실행시킴으로써 동작이 이루어집니다.

먼저 대시 앱은 크게 두 부분으로 구성됩니다. 첫번째는 앱의 레이아웃(Layouts) 이며, 어플리케이션이 어떤 모양으로 생겼는지 설명하는 부분이라 생각해주시면 좋을 것 같습니다.

두번째는 어플리케이션의 상호 작용(interactivity) 이고 사용자의 입력에 따라 어떻게 그래프가 동작할지를 정의하는 부분입니다. 이 부분은 다음 장부터 자세히 다루도록 하겠습니다.

이제 Dash 프로젝트가 있는 위치에 app.py 파일을 만들어 줍니다. 그리고 아래 내용을 붙여넣기 합니다.

# Dash 관련 라이브러리 로딩
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

# Dash 앱 인스턴스 생성
app = dash.Dash(__name__)

# Pandas 데이터 프레임 생성
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

# Bar 차트 생성
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

# 레이아웃 생성
app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for your data.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    )
])

if __name__ == '__main__':
    # Dash 앱 실행
    app.run_server(debug=True)

그리고 터미널에서 app.py 가 있는 위치로 이동한 뒤 파이썬 커멘드로 실행시켜줍니다. Dash 가 실행되는 기본 주소는 http://localhost:8050 입니다. 만약 실행 포트를 변경하고 싶으면 app.run_server(debug=True, port={포트번호}) 형식으로 변경해 주면 됩니다.

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

위와 같이 Running 메세지가 출력 되었다면 Dash 앱이 정상적으로 실행되었습니다.

이제 웹 주소창에 Dash 실행 주소를 입력하면 아래와 같은 그래프가 브라우저에 랜더링 된 것을 확인할 수 있습니다.

본 포스트는 Dash 공식 가이드 를 참고하였습니다.