[python]python Dash w/ Plotly

웹 기반으로 데이터 관련 앱을 빠르게 구축할 수 있는 플랫폼인 plotly에서 서비스하고 있는 Dash는, 
plotly.js, React.js와 Flask를 기반으로 하여 python 웹서비스 개발 - 특히 Dashboard - 을 쉽게 할 수 있도록 도와줍니다. 

(우리는 거인의 어께를 잘 활용해야 합니다!! )

 

https://dash.plotly.com/

Dash Documentation & User Guide | Plotly

 

0) 설치

설치는 pip를 이용하여 설치할 수 있습니다. 
※ Dash가 설치되면서 flask, plotly 등도 함께 설치됩니다.

pip install dash

(그림 0-1) pip를 이용한 dash 설치(2024.12.4. 기준 v2.18.2)

 

1)  Dash 구성 (dash_app.py)

Dash는 layout 부분과 callback 부분으로 크게 구분할 수 있습니다. 

○ layout은 화면 구성을 위한 구성요소들(components)로 구성되며, 
 - dash_html_components : html 관련 구성 = dash.html
 - dash_core_components : input, button, dropdown, graph(plotly.js) 등 구성요소 = dash.dcc
 - dash_table: table 보기 
등의 라이브러리를 활용하여 app.layout에 쌓아가면 됩니다. 

○ callback은 화면의 동적 업데이트를 담당하며, callback의 input id과 output id를 연결하고 함수를 지정하면 됩니다. 

 

2) Dash 실행

Dash 역시 py를 실행해야 합니다. py 내에서 app.run()을 지정하고, 콘솔에서 python dash_app.py 로 구동하면 url이 제공됩니다. 
(해당 url로 접속하면 웹페이지를 볼 수 있습니다) 

 

 

※ Sankey Diagram : 무언가의 흐름을 시각적으로 보여주는 생키 다이어그램을 위한 dash 예제

sankey diagram 역시 plotly의 graph objects로 제공됩니다. Dash와 함께 plotly를 활용하면 되겠죠?

그리고 sankey diagram은 source, target 이 필요하므로, 데이터 가공이 필요합니다. 

 

# libs.. 
from dash import Dash, dcc, html
from dash import Input, Output
import plotly.graph_objects as go
import plotly.express as px

# for using css.. 
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

# def. dash_app and layout
dash_app = Dash(__name__, external_stylesheets=external_stylesheets)
dash_app.layout = html.Div([
	html.H4('sankey diagram'),
	dcc.Graph(id='sankey-graph'),
	html.P('Opacity'),
	dcc.Slider(id='range-slider', min=0, max=1, value=0.8, )
])

# def callback - input - output 
@dash_app.callback(Output(component_id='sankey-graph', component_property='figure'), 
				Input(component_id='range-slider', component_property='value')
)
def display_sankey(opacity):
	a_col = ['source', 'target', 'value']
	a_data = [[0, 2, 1], [1, 3, 2], [0, 3, 2], [2, 4, 4], [3, 4, 3]] # s, t, v
	df_data = pd.DataFrame(a_data, columns = a_col)
	a_label = ['A1', 'A2', 'B1', 'B2', 'C1', ] # 0, 1, 2, 3, 4, .. 

	s_data_node = ['Name A1', 'Name A2', 'Name B1', 'Name B2', 'Name C1', ]
	s_data_link = ['L02','L13','L03','L24','L34',]
	s_node = dict(
		#pad = 13, thickness = 20, 
        #line = dict(color = 'black', width = 0.5), color = 'blue'
		label = a_label, 
		customdata = s_data_node,
		hovertemplate = 'Node %{customdata} has value %{value}<extra></extra>',
	)
	s_link = dict(
		source = df_data['source'], 
		target = df_data['target'], 
		value = df_data['value'], 
		customdata = s_data_link,
		hovertemplate = 'Link from node %{source.customdata} to node %{target.customdata}<br />'+ 
			'has value %{value} and link %{customdata}<extra></extra>',
	)

	fig = go.Figure(go.Sankey(node=s_node, link=s_link, ))
	fig.update_layout(font_size=8)
	return fig

if __name__ == '__main__':
	#dash_app.run(debug=True)
	dash_app.run(host='127.0.0.1', port=8004, debug=True)

 

 

※ dash_bootstrap_components 오류 발생 시.. 재설치를 하면 됩니다. 
> python -m pip install dash-bootstrap-components 

 

참고) 

  https://plotly.com/

  https://dash.plotly.com/

  https://dash.plotly.com/tutorial

  https://dash.plotly.com/interactive-graphing

 

  https://plotly.com/python/sankey-diagram/

  https://plotly.com/python/line-and-scatter/#scatter-plots-in-dash

 

  bigdata.dongguk.ac.kr/lectures/DS/_book/dash를-이용한-python-dashboard.html (동국대 김진석 교수님)

 

  https://wikidocs.net/book/8909 (쭌랩 님) Plotly Tutorial