데이터분석_Dash 기본 사용법

- 요약

1. Dash 개요:

• Dash는 파이썬 웹 애플리케이션을 구축하고 실행하는 도구로, 데이터 시각화 및 웹 앱 개발을 간단하게 만들어줍니다.
• 이 튜토리얼은 Dash를 사용하여 기본적인 앱을 만드는 방법을 소개하며, 가장 간단한 "Hello World" 예제를 제공합니다.

2. "Hello World" 앱 만들기:

• Dash로 "Hello World" 웹 앱을 만드는 단계를 설명합니다.
• 코드를 생성하기 위해 Dash 라이브러리를 import합니다.
• 앱을 초기화하기 위해 Dash(name)을 사용합니다. 이것은 모든 Dash 앱에서 거의 동일한 과정입니다.
• 앱의 레이아웃을 정의하기 위해 html.Div 내에 "Hello World" 텍스트를 포함하는 구성 요소를 추가합니다.
• 앱을 실행하기 위한 코드를 제공합니다. if name == 'main': 아래에서 app.run(debug=True)를 호출합니다.

3. 데이터 연결:

• 데이터를 Dash 앱에 추가하는 방법 중 하나로, CSV 데이터를 사용하는 예를 제공합니다.
• 데이터를 관리하고 표시하기 위해 Pandas 라이브러리를 활용합니다.
• Pandas를 사용하여 원격 CSV 파일을 데이터프레임으로 읽어와서, 데이터를 표시하기 위해 Dash DataTable을 사용하는 방법을 소개합니다.

요약 결론: 이 튜토리얼은 Dash를 사용한 웹 앱 개발의 초급 단계를 다루고 있으며, Dash의 기본 구성 요소 및 데이터 연결 방법을 설명하고 있습니다. Dash를 사용하면 비교적 적은 코드로 데이터 시각화 및 웹 애플리케이션을 빠르게 구축할 수 있습니다.

Dash를 사용법

1. 시작

Dash는 단, 7줄만의 코드로 app을 만들 수 있습니다.

// Dash앱을 만들 때 Dash를 사용하기 위의 두 라이브러리를 항상 가져와야 합니다.
app = Dash(__name__)
// 외웁시다. 그냥 Dash 생성자로 앱을 초기화 하는겁니다.

app.layout = html.Div([
   html.Div(children = 'Hello World') 
])
 앱 레이아웃은 웹 브라우저에 표시될 앱 구성 요소를 나타냅니다.
 일반적으로 html.Div 내에 포함되고 "Hello World"와 같은 텍스트 내용을 추가하는 children과 같은 몇 가지 속성이 있습니다.

if __name__ == '__main__':
    app.run(debug=True)
 Dash를 실행하기 위해 씁니다. 이것도 외워야 합니다.

이렇게 하면

요런 결과가 나오게 됩니다.

2. Connecting to Data

많은 방법이 있습니다. 데이터로 app을 만들려면 APIs, txt파일, JSON파일 등. 여기에서는 가장 일반적인 방법인 CSV sheet를 쓰는 것을 알려줍니다.

from dash import Dash, html, dash_table
import pandas as pd
#dash_table 모듈을 가져와서 데이터를 Dash DataTable안에 표시하고 pandas라이브러리를 불러옵니다.

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
# csv파일의 데이터를 읽기위해 판다스를 사용합니다.
# 만약 local에 있는 CSV시트를 사용하려면 app.py파일이 있는 동일한 폴더에 저장하고 아래와 같이 바꿔야 합니다.
# df = pd.read_csv('NameOfYourFile.csv')
# 만약 Excel시트를 사용할때는 openpyx1을 설치한 이후 df = pd.read_excel('NameOfYourFile.xlsx', sheet_name='Sheet1') 이렇게 코드를 입력하면 됩니다.
app = Dash(__name__)

app.layout = html.Div([
    html.Div(children='My First App with Data'),
    # 앱의 레이아웃을 설정하는 부분입니다. children을 이용해서 제목을 설정합니다
    # children 말고 html.H1(), html.P() 등 다른걸 쓸 수 있지만, children을 사용해서 HTML태그 내부텍스트나 다른 구성요소를 넣을 때 주로 사용합니다.

    # 여기서는 dash_table과 DataTable구성요소를 추가하고 pandas 데이터 프레임 테이블에 읽습니다.
    dash_table.DataTable(data=df.to_dict('records'), page_size=10)
])

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

제목을 보면 My First App with Data가 잘 들어갔습니다.

3. Visualizing Data

Plotly 그래프 라이브러리는 50가지 이상의 차트유형을 가지고 있습니다. 이번 예에서는 histogram chart(막대 그래프)를 사용합니다.

from dash import Dash, html, dash_table, dcc
# dcc라는 새로운 녀석을 import합니다.
# dcc모듈을 가져와서 상호작용 할 수 있는 그래프를 렌더링하는 dcc.Graph를 사용하기 위함입니다.
import pandas as pd
import plotly.express as px

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

app = Dash(__name__)

app.layout = html.Div([
    html.Div(children='My First App with Data and a Graph.KWAN'),
    dash_table.DataTable(data=df.to_dict('records'), page_size=10),
    dcc.Graph(figure=px.histogram(df, x='continent', y='lifeExp', histfunc='avg'))
    #plotly.express 라이브러리를 사용해서 histogram차트를 만들고 histo차트에서는 대륙별 평균을 보여줍니다.
])

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

4. Control and Callback

조금 더 복잡한 앱을 개발하고, 앱 사용자에게 더 많은 기능을 주기 위해 callback함수를 사용해서 app에 컨트롤을 추가할 수 있습니다!

• 요약

1. 필요한 패키지를 가져옵니다.
2. 데이터를 포함하고 초기화합니다.
3. 앱 레이아웃을 설정합니다. 여기에는 텍스트, 라디오 버튼, 데이터 테이블 및 그래프가 포함됩니다.
4. 라디오 버튼과 그래프 간의 상호 작용을 생성하기 위해 콜백 함수를 추가합니다.
   • 입력(Input)은 라디오 버튼의 값(value)을 나타내고, 출력(Output)은 그래프의 figure 속성을 나타냅니다.
   • 사용자가 라디오 버튼을 선택할 때마다 그래프의 y-축을 업데이트하는 방식으로 상호 작용이 작동합니다.

from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px


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

app = Dash(__name__)

app.layout = html.Div([
    html.Div(children='My First App with Data, Graph, and Controls'),
    html.Hr(),
    dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'], value='lifeExp', id='controls-and-radio-item'),
    # 라디오 버튼 컴포넌트를 레이아웃에 추가합니다., lifeExp를 value에 할당해 현재 선택된 값을 나타냅니다.
    # 또한, id로 이름을 정했습니다. 이는 밑의 callback함수에서 사용하기 위함입니다!
    dash_table.DataTable(data=df.to_dict('records'), page_size=6),
    dcc.Graph(figure={}, id='controls-and-graph')
    # 여기도 id로 이름을 정해서 callback에서 사용합니다.
])

@callback(
    Output(component_id='controls-and-graph', component_property='figure'),
    Input(component_id='controls-and-radio-item', component_property='value')
    # 상호작용을 위해 만들어졌습니다. controls-and-graph의 figure는 현재 빈그래프입니다!
)
def update_graph(col_chosen): # col_chosen은 콜백함수의 인수이며, lifeExp의 컴포넌트 속성을 가리킵니다.
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    # 히스토그램 차트를 빌드하고 y축을 업데이트 합니다.
    return fig
    #히스토그램을 반환하며 이는 dcc.Graph의 figure 속성에 할당되어 앱에 표시됩니다.

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

라디오 버튼이 잘 삽입되어있습니다!