[Python] python plotly dash 파이썬 플로틀리 대시 사용법, tutorial, example

plotly dash란? (플로틀리 대시란?)

대시는 데이터 앱을 빠르게 구축하기 위한 로우 코드 프레임워크입니다.
Plotly.js와 React.js 기반으로 개발된 대시는 파이썬, R, 줄리아, F# 또는 MATLAB®에서 맞춤형 사용자 인터페이스로 데이터 앱을 구축하는데 이상적입니다.
데이터로 작업하는 사람들(특히 데이터 사이언티스트)에게 특히 적합합니다.
대시는 사용자 인터페이스를 파이썬, R, 줄리아, F# 또는 MATLAB® 코드에 10분이내로 구현할 수 있을 정도로 간단합니다.
대시 앱은 웹 브라우저에서 렌더링됩니다.
VM 또는 Kubernetes 클러스터에 앱을 배포한 후, URL을 통해 공유할 수 있습니다.
대시 앱은 웹 브라우저에서 보기 때문에 대시는 본질적으로 크로스 플랫폼과 모바일 버전으로도 사용할 수 있습니다.
프레임워크의 이면에는 많은 것이 있습니다.
대시는 MIT 라이선스로 출시된 오픈소스 라이브러리입니다.
플로틀리는 대시를 개발하고 엔터프라이즈 환경에서 대시 앱을 작성하고 배포할 수 있는 플랫폼도 제공합니다.

plotly dash 설치방법

dash는 다음과 같이 pip 를 이용해 간단히 설치할 수 있습니다.
(* pandas가 필수이기에 pandas도 같이 설치해주어야 합니다.)

1	pip install pandas dash

커맨드 창을 열어서 위 명령어를 입력해주면 약간의 시간이 지난후, 설치가 완료됩니다.

plotly dash 사용법

대시 앱은 두 부분으로 구성되어 있습니다.
첫째 부분은 앱의 “레이아웃”이며 애플리케이션이 어떻게 생겼는지 기술합니다.
두 번째 부분은 응용 프로그램의 상호 작용성에 대해 기술합니다.
대시 앱을 시작하려면 app.py라는 파일을 만들고 아래 코드를 복사하여 python app.py로 실행하세요.

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

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__':
    app.run_server(debug=True)

이 파일을 아래 명령어로 실행해봅시다

1	python app.py

실행하면 접속주소가 나오고, 웹브라우저로(크롬 등) 해당 주소를 접속해봅시다.
위 그림의 경우에는 http://127.00.1:8050으로 접속하라고 하네요.

웨브라우저에 주소를 넣고 접속을해보면 아래와 같이 이쁜 그래프가 보여질 겁니다!

이를 통해 다음과 같은 내용을 이해할 수 있을겁니다.

“layout”은 html.Div, dcc.Graph와 같은 “컴포넌트”의 트리로 구성된다.
dash_html_components (dash v2.0 기준 dash.html) 함수는 모든 HTML 태그에 대한 컴포넌트를 갖는다.
html.H1 (children=’Hello Dash’) 구성 요소는 응용 프로그램에서HTML 요소를 생성합니다.
모든 구성 요소가 순수한 HTML은 아닙니다.
dash_core_components는 React.js 라이브러리를 통해 JavaScript, HTML, CSS와 상호 작용하며 생성되는 상위 구성 요소를 기술합니다.
각 구성 요소는 키워드 속성을 통해 전체적으로 기술됩니다.
대시는 선언적입니다. 주로 이러한 속성을 통해 응용 프로그램을 기술합니다.
children의 속성은 특별합니다. 관례적으로, 그것은 항상 그것을 생략할 수 있다는 것을 의미하는 첫 번째 속성입니다
: html.H1 (children = ‘Hello Dash’)은 html.H1 (‘Hello Dash’)과 같습니다.
문자열, 숫자, 단일 구성요소 또는 구성요소 목록을 포함할 수 있습니다.
응용 프로그램의 글꼴이 여기에 표시된 글꼴과 약간 다르게 표시됩니다.
이 응용 프로그램은 사용자 지정 CSS 스타일시트와 대시 엔터프라이즈 설계 키트를 사용하여 요소의 기본 스타일을 수정하고 있습니다.
CSS 튜토리얼에서 사용자 지정 CSS에 대해 자세히 알 수 있습니다.

이제까지 파이썬 plotly dash에 대해 알아보았습니다.
여러 데이터를 변형하면서 그래프 모양을 바꿔봅시다.
자세한 튜토리얼은 https://dash.plotly.com 를 참고할 수 있습니다.

python plotly dash 파이썬 플로틀리 대시 사용법, tutorial, example
#plotly,#python,#dash,#파이썬,#플로틀리,#대시,#사용법,#튜토리얼,#예제,#example,#tutorial