Python의 Visualization Library Dash를 사용한 2Callback

이 글은 파이톤Visualization Library Dash 1 사용의 후속이다.

Callback 보기 전(Dash 버전 향상)

Callback의 기능을 보기 전에 버전이 너무 오래된 문제를 해결할 방법을 생각해 보겠습니다. (Pythn의 버전은 향상되지 않습니다. Dashw만 있습니다.)

$ pip install --upgrade dash
---中略
Successfully installed dash-0.39.0 dash-core-components-0.44.0 dash-html-components-0.14.0 dash-renderer-0.20.0 dash-table-3.6.0

대시만 업그레이드하고 다른 것도 업그레이드됐어요.
라이브러리의 버전 정보 사용
Python 3.6.5
Dash 0.39.0
dash-core-components 0.44.0
dash-html-components 0.14.0
plotly 3.7.0
pandas 0.24.1

Callback을 보세요. 앞의 2(읽을 데이터의 모양,long-form 데이터, 정연한 데이터)

최근의 시각화 라이브러리를 보니 읽은 데이터의 형상이 좀 이상하다고 느꼈다.주최피겨 스케이팅도 (매달 교토에서 파이톤의 학습회를 개최합니다! 꼭 참가해 주십시오.)화제가 됐는데, 누군가 쉽게 읽을 수 있는 모양과 기계가 쉽게 읽을 수 있는 모양이라고 한다.기계가 쉽게 읽을 수 있는 데이터는long-form 데이터 또는 정연한 데이터라고 불리며 이 모양의 데이터를 사용한다.
나는 이 일이 대시의 손잡이를 만들 때 문서 속의 샘플 작품의 데이터가 내가 이전에 처리한 것과 다르다고 느꼈을 때라는 것을 안다.이후 다른 좋은 시각화 라이브러리 Altair 문서를 읽고 Long-form Data와 Wide-Form Data 두 항목에서 차이점을 설명했다.
@ishida330 선생의 글은 가지런한 데이터라는 단어로 설명되었다.
그럼, 실제 어떤 모양이냐면 먼저 알타리 페이지에서 떼어내.
wide-form

long-form

이렇게 사용하는 데이터 형식은 시각화할 때도 약간 다르다.

카드를 보다

그럼 본론으로 들어갈 차례가 많지 않다.
지난번부터 연속해서 캘백에 올렸는데 그게 무슨 의문이 있는 것 같아.Callback은 애플리케이션에 특정 요소를 반영하는 기능입니다.　
여기서부터 저는 다음과 같은 각 도도부현의 GDP(GDP), 각 도도부현의 1인당 GDP(pergdp), 도도부현의 인구(popu)의 csv를 사용하여 샘플을 만들고 싶습니다.
요소가 많으면 곤란하기 때문에 우선 홋카이도 데이터만 사용해 어느 요소를 줄일지 선택할 수 있는 도표를 만든다.

import dash  
import dash_core_components as dcc   
import dash_html_components as html
import plotly.graph_objs as go  
import pandas as pd 

# ①データ読み込み
df = pd.read_csv('./data/longform.csv', index_col=0)
dfhokkaido = df[df['area']=='北海道']

app = dash.Dash(__name__)

# ②表示作成
app.layout = html.Div(children=[
    html.Div(
        html.H1('北海道のGDP、人口、一人あたりGDPの推移',
        style = {'textAlign': 'center'})
    ),
    dcc.Dropdown(
        id = 'dropdown-for-hokkaido',
        options = [{'label': i, 'value': i} for i in dfhokkaido.item.unique()],
        value = 'GDP'
    ),
    dcc.Graph(
        id="hokkaidoGraph",
    )
])

# ③コールバック作成
@app.callback(
    dash.dependencies.Output('hokkaidoGraph', 'figure'),
    [dash.dependencies.Input('dropdown-for-hokkaido', 'value')]
)
def update_graph(factor):
    dff = dfhokkaido[dfhokkaido['item'] == factor]

    return {
        'data': [go.Scatter(
            x = dff['year'],
            y = dff['value']
        )]
    }

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

이 코드는 아래의 물건을 만들 수 있다.

드롭 다운 시 선택하면 선 그래프가 전환됩니다.
②의 드롭다운과 ③의 호출 부분을 담당한다.

내리다

dash_core_components에는 요소를 선택하는 도구가 많다.
드롭다운 외에도 슬라이더, 버튼, 문자 입력 등이 많다.
또한 ID를 추가하면 콜백 시 여기서 선택한 요소로 전환할 수 있습니다.여기는 id = "dropdown-for-hokkaido"입니다.
지금 당김이 하나밖에 없다고 생각하더라도 조금만 바꾸면 다른 도구를 사용할 수 있다.
이를테면 이번 것도 버튼으로 만들고 싶으니까 해봐.
②의 dcc.Dropdown () 섹션, dcc.RadioItems()로만 변경

원소를 보면서 단추로 선택할 수 있는 도표가 되었다.

Callback

그럼 저는 콜백입니다.장식 앱.나중에 얻은 데이터와 가공한 후에 되돌아오는 데이터의 발송 목적지를 표시하는 '콜백 ()' 을 적으십시오.그리고 얻은 데이터로 처리하는 함수.
app.layout에서 dcc.그래프가 있습니다.
앱에서 도표를 위해 쓴 것은 이것뿐이다.
그럼 앱은layouts 바깥에 쓴 것은 아래의 내용입니다.

@app.callback(
    dash.dependencies.Output('hokkaidoGraph', 'figure'),
    [dash.dependencies.Input('dropdown-for-hokkaido', 'value')]
)
def update_graph(factor):
    dff = dfhokkaido[dfhokkaido['item'] == factor]

    return {
        'data': [go.Scatter(
            x = dff['year'],
            y = dff['value']
        )]
    }

우선,dash가 이용한 데이터(이번 상황은 하락하거나 방송 프로젝트에서 얻은 값).dependencies.Input()로 가져옵니다.하나만 있어도 열거하지 않으면 오류가 발생할 수 있으니 주의해야 한다.원하는 데이터가 있는 ID를 지정하고 데이터 유형을 지정합니다.
그리고 아래의 "def"에서 도표 데이터를 만듭니다.
이때, 대시.dependencies.Input()에서 지정한 데이터를 매개변수로 사용할 수 있습니다.이름은 무엇이든지 좋습니다. 이번에는factor입니다.
dfhokkaido의 프로젝트 부분에서 지정한 데이터를 추출하여 dff라는 데이터 프레임을 만듭니다.
그리고return{}에서 도표를 만들 데이터를 만듭니다.
{}의 데이터는dash입니다.dependencies.Output()에서 지정한 ID를 반환합니다.이 경우 아까 앱에서 만든 dcc입니다.Graph에 데이터를 돌려주고 싶어서dash.dependencies.Output(id='hokkaidoGraph','figure')를 미리 지정합니다.
이때 처음에 아이디를 지정하는 것은 알겠지만, 두 번째 안에 무엇을 넣을까요?이렇게 말하기는 좀 어렵다.그래프에'figure'같은 걸 넣어서 조금 알 수 있는 부분이 있지만 전부 모르기 때문에 틀리면 후보의 느낌을 줄 수 있어서 지금 만들고 있어요.

총결산

이번에는 캘백을 사용해 도표를 그리는 샘플을 만들어 보았다.
이어서 나는 마우스의 동작으로 데이터를 더욱 상세하게 볼 수 있는 것을 만들고 싶다.
세 번째는 마우스를 사용하여 좀 복잡한 데이터를 보십시오:.
https://qiita.com/OgawaHideyuki/items/b4e0c4f134c94037fd4f