Dash는 Plotly 기반으로 만들어진 것으로, 파이썬과 html을 통해 웹사이트나 대시보드를 만들 수 있다.
웹서비스 까지 구현이 가능한 것이 큰 장점이다. 따라서 기존에는 front-end 에서 데이터를 보여줘야 했던 것을
Dash와 Plotly를 통해 front-end 화면을 구성 할 수 있다.
1. Import
import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import pandas as pd
2. 개요
- dash.Dash 함수를 통해 대시보드 앱을 생성한다.
- html과 dcc 를 이용하여 화면을 구성한다
- callback 함수에서 UI와 연계한다
- run_server 함수를 통해 front-end로 표시한다.
3. dcc
- Dash Core Components 의 약자로, 화면 구성을 하는 컴포넌트들이다 (예 : 드롭다운)
- html 내부에 화면을 구성할때 사용한다.
4. html
- front-end 를 구성한다.
- html 태그들이 클래스화 되어 있어, 이를 이용하여 화면을 구성한다. (dcc 로도 구성 가능)
- callback 함수에서 Output과 Input 간의 연계를 위해 각 UI 별 ID 등을 설정해야 한다.
5. Dash 함수
- 대시보드 앱을 생성한다.
- 해당 앱은 callback 함수가 있다
- layout 을 통해 화면 구성을 할 수 있다 (html 로 구성)
- callback 함수에서, Input을 통해 UI와 연계하여 작업 할 수 있다.
- callback 함수에서, Output을 통해 차트를 UI로 보낼 수 있다.
- run_server 함수를 통해 브라우저로 표시 할 수 있다.
import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import pandas as pd
# dashboard app
app = dash.Dash('타이틀명',
external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
app.layout = html.Div([
dcc.Dropdown(
id='my-dropdown',
options=[
# dropdown 메뉴 딕셔너리 형태이며, label과 value 를 무조건 갖는다.
{'label':'라벨명1','value':'데이터1'},
{'label':'라벨명2','value':'데이터2'},
{'label':'라벨명3','value':'데이터3'},
],
value= '데이터 기본값'
),
dcc.Graph(id='my-graph')
], style={'width': '600'})
#output의 figure는 고정으로 사용하면 된다. 콜백의 리턴값에서 figure 를 가져와
#사용하겠다는 의미이다.
@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
#selected_dropdown_value 에는 html-> dcc.dropdown 에서 명시한 value 값인
#데이터1, 데이터2, 데이터3 중 하나가 들어오게 된다.
df = 데이터 프레임 생성 혹은 불러오기 (selected_dropdown_value 활용)
#plotly 차트를 구성한 후 return 하면 해당 차트를 화면에 보여준다.
#여기서는 단순히 데이터만 리턴하여 라인차트를 기본으로 그린다.
return {
'data': [
# dash가 보여줄 dashboard의 그래프를 dict 형태로 지정.
{'x':df.컬럼명,'y':df.컬럼명}
],
'layout': {'margin': {'l': 40, 'r': 0, 't': 20, 'b': 30}}
}
# dash app 실행.
app.run_server(debug=True, use_reloader=False)
# app.run_server(host="ip주소", port=숫자)를 통해 외부에 호스팅 할 수 있다
5.1. Plotly 연계
콜백 함수에서 plotly와 연계하여 차트를 표현 할 수 있다.
plotly 차트를 구성하고, return 으로 리턴하면 된다.
import plotly.express as px
.....
@app.callback(Output('my-graph', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(selected_dropdown_value):
# 내가 선택한 label에 해당하는 파일 이름
df = dataframe 생성 혹은 읽어오기(pandas로)
fig = px.line(df,x='컬럼명1',y='컬렴명2')
return fig
.....
'데이터분석(파이썬)' 카테고리의 다른 글
차트 (Plotly) (0) | 2023.04.11 |
---|---|
EDA (Exploratory Data Analysis) (0) | 2023.04.10 |
Pandas (0) | 2023.04.10 |
동적 웹크롤링 (Selenium, Cromedriver) (0) | 2023.04.10 |
정적 페이지 크롤링 (beautifulsoap4) (0) | 2023.04.07 |