Dash 기본적인 사용법

Dash란?

• Dash는 html을 사용하여 화면을 구성함
• html에서 사용하는 태그들을 대부분 활용할 수 있음
• Dash()라는 객체를 통해 프로그램이 실행됨
• 데이터는 pandas의 DataFrame으로 컨트롤함

Hello World

파이썬 IDLE 환경에서 app.py를 만들고 코드를 작성해 실행

from dash import Dash, html

app = Dash(__name__)

app.layout = html.Div([
    html.Div(children='Hello World')
])

if __name__ == '__main__':
    app.run(debug=True)

http://127.0.0.1:8050 에 접속하면

Hello World: Code Breakdown

# 패키지 불러오기
from dash import Dash, html

# 앱 초기화
app = Dash(__name__)

# 앱의 구성
app.layout = html.Div([
    html.Div(children='Hello World')
])

웹 브라우저에 표시할 구성을 html.Div에 넣어 추가할 수 있습니다.

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

Connecting to Data

데이터(.csv) 불러와 웹에 띄우기

# Import packages
from dash import Dash, html, dash_table
import pandas as pd

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize the app
app = Dash(__name__)

# App layout
app.layout = html.Div([
    html.Div(children='My First App with Data'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=10)
])

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

다음과 같은 결과를 볼 수 있다.

Connect to Data: Code Breakdown

# 패키지 불러오기
from dash import Dash, html, dash_table
import pandas as pd

dash_table 모듈로 csv 데이터를 읽을 수 있습니다.

# 데이터 구체화하기
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# 앱의 구성
app.layout = html.Div([
    html.Div(children='My First App with Data'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=10)
])

DataTable을 추가해 pandas dataframe을 테이블로 읽어올 수 있습니다.