Heatmap Chart
When to Use
Heatmap chart는 명확히 정의된 두 축(x, y)의 조합마다 값이 정의되어 있어 행렬 구조로 표현 가능한 데이터의 표현에 효과적입니다. 데이터의 분포, 밀도, 패턴을 색상으로 표현하며 전체 데이터의 패턴과 밀도를 빠르게 확인해야 할 때 사용합니다.
Anatomy
- Title (optional)
- Axis title
- Y-axis
- Legend (optional)
- X-axis
- Plot area
- Cell
Content
Structure
Heatmap chart의 각 셀(cell)은 하나의 데이터 포인트를 의미합니다. 두 축(x, y)이 교차하는 지점마다 값을 색상으로 표현하여, 데이터의 분포 패턴과 강도를 시각적으로 드러냅니다.
각 축의 값은 셀과 정확히 정렬되어야 하며, 스크롤 여부와 관계없이 일정하게 유지합니다.
Data Display
차트 내 모든 셀은 데이터 크기와 상관 없이 모두 동일한 크기로 표현합니다.
데이터가 많은 경우 셀은 최소 너비 44px, 최소 높이 24px로 유지되며, 데이터 양이 많은 경우 스크롤을 사용합니다. 가로 또는 세로 스크롤은 축 방향에 따라 선택적으로 적용할 수 있으며, 축 타이틀(axis title)은 스크롤 시에도 기준 위치를 유지해야 합니다.
Legend
Heatmap chart에서 레전드는 색상과 값 사이의 대응 관계를 정의하는 기준(reference) 역할을 하며 데이터의 분포, 강도, 패턴을 정확히 이해하기 위한 요소입니다.
색상은 연속적인 값의 범위를 표현하므로, 값의 크기를 표현할 때는 연속형(sequential) 색상 스케일을 사용합니다. 색상 변화는 명도(lightness) 차이 중심으로 인지되도록 설계합니다. 색상 단계는 5–7단계 이내로 제한하여 색상 차이를 인지하기 쉽게 합니다.
정의된 기준에 따라 색상을 레전드에 일관되게 매핑하며, 레전드는 다음 정보를 명확히 제공해야 합니다.
- 색상 스케일의 최소값(min)과 최대값(max)
- 값이 증가하거나 감소하는 방향성(direction)
- 색상 변화가 의미하는 강도의 상대적 차이
값의 크기를 표현할 때는 연속형(sequential) 색상 스케일을 사용하며, 명도 차이 중심으로 인지되도록 설계합니다.
값의 크기를 표현하는 데 임의의 장식 색상이나 무작위 팔레트를 사용하지 않습니다.
Interaction
Data Tooltip
사용자가 표현된 데이터 셀 위에 커서를 올렸을 때, 해당 데이터 포인트에 해당하는 두 축의 정보를 제공하는 데이터 툴팁을 노출할 수 있습니다. 데이터 툴팁은 차트의 세부 데이터를 확인할 수 있게 하는 보조 정보 계층입니다.
커서가 데이터 위에 올라가면 커서 주위에 x, y 값을 나타내는 툴팁을 표시합니다.
