데이터 시각화

Heatmap

요일 × 시간대처럼 두 범주가 겹치는 지점의 밀도를 색으로 보여줍니다. 피크 타임 인력 배치 · 프로모션 시간대 결정에 사용합니다.

D3 모듈
scaleBand · scaleQuantize
색
Sequential 7단계

요일 · 시간대별 주문량

가장 바쁜 시간은 일요일 13시예요 (139건)

적음
많음

스펙

요소값
셀 간격3px · 라운드 min(4px, 셀 폭/5)
색 매핑scaleQuantize — 0 ~ 최댓값을 7구간 균등 분할
등장왼쪽 열부터 순차 fade (600ms)
hover1.5px --fg-strong 테두리 + 툴팁

사용 규칙

이렇게 하세요

  • 범례(적음 → 많음) 항상 표시
  • 정확한 값은 툴팁에서
  • 색 단계는 7단계 이하

이렇게 하지 마세요

  • 음수가 있는 데이터에 단색 스케일 (Diverging 사용)
  • 셀 안에 모든 숫자 표기
  • 무지개 색 스케일

Props

PropTypeDefault설명
data*{ row; col; value }[]—셀 데이터
rows · cols*string[]—축 순서
colLabelEverynumber3X축 라벨 간격
valueFormat(v) => string—툴팁 값 포맷