plotly와 dash로 만드는 python dashboard 기초

이 글이 도움되셨다면 광고 클릭 부탁드립니다 : )

이번 포스팅에서는 실시간 데이터 현황 파악을 하거나 사용자의 목적에 맞게 데이터를 시각화해서 보여주기위해 python으로 dash board를 만드는 절차나 기본 구조가 어떻게 되어 있는지 정리해보려고 합니다.

참고한 도서는 파이썬을 이용한 인터랙티브 대시보드 만들기라는 책이고 POD 상품으로 주문하면 그 때 제작이 들어가서 살까말까 오랫동안 망설였는데, plotly나 dash에 대한 아무 개념이 없다면 충분히 사도 좋은 책이라고 생각합니다.
함수들이 어떤 구조로 어떤 절차로 진행되는 지 설명이 있어서 기초를 쌓는데 도움이 많이 되었습니다.
http://www.yes24.com/Product/Goods/102267640

파이썬을 이용한 인터랙티브 대시보드 만들기 - YES24

 

---

 

0. dashboard는 뭘까?

우리가 결과적으로 만들고자하는 dash board는 아래와 같이 데이터에 직접 접근하지 않고 사용자가 필요한 데이터/정보를 한 눈에 확인하여 의사결정/모니터링을 돕는 도구입니다.
dash gallery에 가시면 아래와 같은 다양한 형태의 dashboard를 구경할 수 있습니다.

그렇다면 python에서 dashboard를 만들려면 어떤 것들이 필요할까요??
여러 방법들이 있겠지만 본 포스팅에서는 dash와 ploty를 활용하여 만드는 방법/ 구조에 대해 알아보겠습니다.

• dash : 웹기반 파이썬 어플리케이션 프레임워크 제공
• plotly : 인터랙티브 시각화 제공

 

 

1. Plotly?

plotly는 open source graphing program으로 여러 언어에서 활용가능하고 dash를 통해 web dash board까지 확장할 수 있다고 합니다. 기존에 많이 쓰이는 matplotlib 라이브러리와는 다르게 interactive한 시각화가 가능합니다.

 

1.1 plotly 입력 방식

plotly의 그래핑방법은 쿠게 두가지로 간단한 plotly.express와 하나씩 지정하는 plotly.graph_objects가 있습니다.
아래 코드를 보면 이해가 쉬운데, 둘 다 scatter_marix를 그리는 코드이지만 px를 활용하면 간단히 data, dimension, color 변수에 해당 값을 넣으면 되지만, go를 활용하면 하나씩 다 지정해줘야 합니다.
px를 활용하면 간단하게 그래프를 그릴 수 있고 go를 활용하면 자기 완하는대로 세부 수정이 쉽다는 장점이 있습니다.

# px

import plotly.express as px
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/iris-data.csv')
fig = px.scatter_matrix(df,
    dimensions=["sepal_width", "sepal_length", "petal_width", "petal_length"],
    color="species")
fig.show()

# go

import plotly.graph_objects as go
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/iris-data.csv')

# The Iris dataset contains four data variables, sepal length, sepal width, petal length,
# petal width, for 150 iris flowers. The flowers are labeled as `Iris-setosa`,
# `Iris-versicolor`, `Iris-virginica`.

# Define indices corresponding to flower categories, using pandas label encoding
index_vals = df['class'].astype('category').cat.codes

fig = go.Figure(data=go.Splom(
                dimensions=[dict(label='sepal length',
                                 values=df['sepal length']),
                            dict(label='sepal width',
                                 values=df['sepal width']),
                            dict(label='petal length',
                                 values=df['petal length']),
                            dict(label='petal width',
                                 values=df['petal width'])],
                text=df['class'],
                marker=dict(color=index_vals,
                            showscale=False, # colors encode categorical variables
                            line_color='white', line_width=0.5)
                ))


fig.update_layout(
    title='Iris Data set',
    dragmode='select',
    width=600,
    height=600,
    hovermode='closest',
)

fig.show()

 

1.2 객체 입력 방식

그래프 생성의 기본 구조는 fig = go.Figure()로 Figure 함수에 Data와 Layout을 넣어서 그래프를 그릴 수 있습니다.
data와 layout을 넣는 방법도 아래와 같이 다양하게 존재합니다.

# data 객체 사전 정의 후 figure에 입력

trace = go.Bar(x, y) # graph 종류
data = [trace] # data 객체 사전 정의
layout = go.Layout() # layout option
fig = go.Figure(data, layout)
fig.show()

 

# add_trace 이용하여 figure에 입력

fig = go.Figure()
fig.add_trace(go.Bar(x ,y))
fig.update_layout()
fig.show()

 

# figure에 직접 data 객체 정의

fig = go.Figure(data=[go.Bar(x, y)])
fig.update_layout()
fig.show()

 

 

2. Dash?

dash란 web analytic application을 구축하기 위한 파이썬 프레임워크를 제공해주는 라이브러리로, customize한 user interface에 데이터 visualization app 구축하는데 이상적이라고 알려져 있습니다.

 

2.1 Dash 구조

dash는 크게 Layout과 Callback으로 이루어져있습니다. 먼저 앱을 구성하면 앱 안에 layout으로 전반적인 구조를 잡고 callback을 통해 각 그래프와 layout을 연동시켜줍니다.

• Dash
  • Layout : 전반적 구조
    • HTML : 디자인
      • div : 화면 공간 구분
      • style : css 화면 스타일 설정(정렬, 크기, 글씨체...)
    • Core : 개별적인 그래프 설정 구성요소
      • checklist, dropdown, graph, markdown, tabs, upload...
      • 고유 id 설정하여 callback으로 연결
  •  
  • html.Div(dcc.Graph( children = [ html.Div(dcc.Dropdown(id ='id_input', style = {'font-family' : 'sans-serif'})), html.Div(dcc.Graph(id='id_output')) ]
  • Callback
    • Input : layout에서 설정한 고유 id를 인자로 입력하면 해당 영역의 값이 입력
    • Output : layout에서 설정한 고유 id를 인자로 입력하면 해당 영역으로 출력

  • @app.callback(Output(component_id = 'id_output', component_property = 'figure'),
                  Input(component_id = 'id_input', component_property = 'value'))
    def callback_function(input_value): 
        go.Figure()
        return output_value

  • component_property에는 value(특정값), figure(그래프), children(숫자/문자값, 단일 component, list component 모두 가능) 속성값 사용가능

 

2.2 Dash 작동 순서

# 1. library 호출
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# 2. App 정의
app = dash.Dash()

# 3. sever 정의
server = app.server

# 4. 정의한 app에 Layout & Callback 구성
app.layout = html.Div(dcc.Graph()) # layout 정의
@app.callback(Output(id, property), # callback 정의
              Input(id, property))
def callback_function(input_value): # callback function 정의 - 그래프 작성
    go.Figure()
    return output_value

# 5. 작성한 script를 server로 launch
if __name__ == '__main__':
    app.run_server(debug = False)