"마우스를 점 위에 올려봐."
지윤이 차트 위에서 마우스를 움직이자 작은 툴팁이 따라다녔다. 각 점마다 x값, y값, 종 이름이 표시됐다. Matplotlib으로 이걸 구현하려면 mplcursors 같은 별도 라이브러리가 필요했는데, Plotly는 기본으로 켜져 있었다.
"이게 기본이에요?"
"기본이야. 이제 드래그해봐. 네모 그리듯이."
차트 한쪽 구석에서 드래그하자 선택한 영역이 확대됐다. 더블클릭하니 다시 원래 크기로 돌아왔다.
"이게 줌이야. 발표할 때 교수님이 '저 부분 좀 더 자세히 보여줘' 하면 바로 보여줄 수 있어."
기본 인터랙티브 기능
Plotly 차트는 별도 설정 없이 다음 기능이 활성화되어 있습니다.
호버 (Hover)
마우스를 데이터 포인트 위에 올리면 툴팁이 나타납니다. 기본적으로 차트에 사용된 x, y 컬럼의 값과 color 컬럼의 값이 표시됩니다.
줌 (Zoom)
차트 위에서 드래그하면 해당 영역을 확대합니다. 더블클릭하면 원래 배율로 돌아옵니다.
이동 (Pan)
툴바에서 손 모양 아이콘을 선택한 뒤 드래그하면 차트를 이동할 수 있습니다.
범례 토글
차트 오른쪽의 범례 항목을 클릭하면 해당 시리즈가 숨겨집니다. 다시 클릭하면 나타납니다. 특정 시리즈에 집중해서 보고 싶을 때 유용합니다.
툴바 버튼
차트 오른쪽 상단에 툴바가 있습니다.
| 아이콘 | 기능 |
|---|---|
| 카메라 | PNG로 다운로드 |
| 확대경(+) | 줌인 모드 |
| 확대경(-) | 줌아웃 모드 |
| 십자가 | 특정 영역으로 줌 |
| 손 모양 | 이동(pan) 모드 |
| 집 모양 | 원래 배율로 초기화 |
카메라 아이콘으로 차트를 PNG 파일로 저장할 수 있습니다. 발표 자료에 정적 이미지가 필요할 때 사용합니다.
hover_data와 hover_name
기본 호버 툴팁에 더 많은 정보를 추가하고 싶을 때 hover_data와 hover_name을 사용합니다.
hover_name은 툴팁 상단에 굵게 표시되는 이름입니다. hover_data는 툴팁에 추가로 표시할 컬럼 목록입니다.
# 파일: hover_example.pyimport plotly.express as pxdf = px.data.iris()fig = px.scatter( df, x="sepal_width", y="sepal_length", color="species", hover_name="species", hover_data=["petal_length", "petal_width"])fig.show()
이제 각 점에 마우스를 올리면 툴팁에 종 이름이 굵게 나오고, 꽃잎 길이와 너비도 함께 표시됩니다.
hover_data에 딕셔너리를 전달하면 표시 여부와 포맷을 세밀하게 제어할 수 있습니다.
# 파일: hover_format.pyimport plotly.express as pxdf = px.data.iris()fig = px.scatter( df, x="sepal_width", y="sepal_length", color="species", hover_name="species", hover_data={ "petal_length": ":.2f", # 소수점 2자리 "petal_width": True, # 기본 포맷으로 표시 "sepal_width": False # 숨김 (x축 값이라 중복 방지) })fig.show()자주 묻는 질문
Q: 호버 툴팁을 완전히 끄고 싶어요.
fig.update_traces(hovertemplate=None, hoverinfo="skip")으로 끌 수 있습니다. 또는 px.scatter()의 hover_data 파라미터에 모든 컬럼을 False로 설정할 수 있습니다.
Q: 줌한 상태를 유지하면서 저장할 수 있나요?
fig.write_html() 또는 fig.write_image()는 현재 코드의 기본 뷰를 저장합니다. 브라우저에서 줌한 상태의 뷰는 저장되지 않습니다. 특정 범위를 기본값으로 고정하려면 fig.update_layout(xaxis_range=[...], yaxis_range=[...])을 사용합니다.
Q: 범례를 클릭해도 시리즈가 숨겨지지 않아요.
일부 차트 타입에서는 범례 토글이 기본적으로 비활성화되어 있습니다. fig.update_layout(legend_itemclick="toggle")을 추가해보세요.