요소 간 상호작용

Dash와 Plotly로 대시보드 만들기

Alex Scriven

Data Scientist

Between-element란?

이전: 입력과 상호작용해 그림 변화를 트리거
지금: 그림과 상호작용해 다른 그림 변화를 트리거

두 가지 사용 사례:
- 그림 위로 호버
- 데이터 포인트 클릭

hoverData 속성

# 그림과 레이아웃 생성
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

   html.Br(),
   html.H2("The Hover Data:"),
   html.P(id='text_output')

# 콜백 설정 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

첫 호버

동작:

사용자가 호버하면: 그림의 hoverData가 변경됩니다
콜백이 이를 받아 .P() 태그에 반환합니다
포인트 관련 정보를 확인할 수 있습니다

가로 막대차트 GIF: 총매출(x축) 대 국가(y축). 아래 "hover data"는 처음 none입니다. 호주 막대에 마우스를 올리면 none이 호버 지점 정보를 담은 사전으로 바뀌며 국가 라벨과 값이 표시됩니다.

누락 정보 주의

목표: 콜백에서 'country'를 사용해 필터링 후 그래프 재생성
- 이전 예시 - hoverData에 있음
이 산점도를 보십시오(그래프 유형과 관련 ID 업데이트)
- 국가가 없습니다!

총매출(x축) 대 판매량(y축) 산점도 GIF. 각 점은 국가별이며 아래 "hover data"는 처음 none입니다. 호주 점에 마우스를 올리면 none이 해당 점의 세부 정보 사전으로 바뀌지만, 중요한 점은 Australia가 포함되지 않는다는 것입니다.

사용자 지정 데이터 추가

ecom_scatter = px.scatter(ecom_data, 
    x='Total Sales ($)', 
    y='Sales Volume', color='Country',
    custom_data=['Country'])

이제 customData에 국가가 포함됩니다!

총매출(x축) 대 판매량(y축) 산점도 GIF. 각 점은 국가별이며 아래 "hover data" 텍스트가 처음엔 none입니다. 마우스가 호주 점에 올라가면 none이 해당 점의 세부 정보 사전으로 바뀌고, 이번에는 customdata 속성에 Australia가 포함됩니다.

클릭은 어떻게 되나요?

점을 클릭해도 콜백을 트리거할 수 있습니다
- 변경은 한 곳만 필요합니다 (clickData 속성)

@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'clickData'))
def capture_hover_data(clickData):
    return str(clickData)

참고: 즉시 나타나지 않습니다

가로 막대차트 GIF: 총매출(x축) 대 국가(y축). 아래 "hover data"는 처음 none입니다. 호주 막대에 마우스를 올려도 변화가 없고, 클릭하면 none이 클릭 지점 정보를 담은 사전으로 바뀌며 국가 라벨과 값이 표시됩니다.

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기