Heatmap - Basic
heatmap-basic행과 열이 만나는 칸을 값의 크기에 따라 색의 농도로 칠한 표입니다. 시간대 × 요일처럼 두 기준이 만나는 곳에서 많고 적은 칸을 찾을 때 씁니다.
들어 있는 판단 4
- 색은 주황 한 가지의 농도만 씁니다. 가장 작은 값이 가장 옅고, 표 위에 카드 폭을 채운 농도 막대와 양 끝 값을 범례로 둡니다.
- 이익률이나 증감률처럼 값이 0을 사이에 두고 갈리면 0을 경계로 좋은 쪽은 초록, 나쁜 쪽은 빨강의 농도로 칠합니다(KPI 배지와 같은 색). 주황 한 가지로 칠하면 적자와 작은 흑자가 똑같이 옅은 칸이 됩니다. 두 쪽은 절댓값이 큰 쪽에 맞춘 같은 눈금이라 농도로 크기를 견줄 수 있고, 낮을수록 좋은 지표는
"better": "down"으로 색을 뒤집습니다. - 칸 폭이 48px 이상이면 칸에 숫자를 적고, 좁으면 적지 않아 색의 패턴이 먼저 보이게 합니다. 값은 칸에 마우스를 올리거나 표에 포커스한 뒤 화살표 키로 칸을 옮기면 툴팁으로 보이고(좌우는 읽는 순서, 위아래는 같은 열), 화면 낭독기는 칸마다 숫자를 읽습니다.
- 처음에는 적은 순서대로 두고, 요일 같은 열 제목을 누르면 그 열의 큰 순서로 정렬합니다. 행마다 크기가 크게 달라 큰 행만 진해지면
"scale": "row"로 행마다 따로 칠해 행 안의 높낮이를 봅니다.