Components

Heatmap

요일×시간처럼 두 축의 밀도를 색 진하기로 보여주는 격자 히트맵입니다. 셀 hover 시 정확한 값이 툴팁으로 뜹니다. 순수 CSS grid 실물입니다.

월화수목금토일

0시6시12시18시23시

낮음높음

위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.

코드 보기

<div class="tn-heatmap">
  <div class="tn-heatmap-days"><span>월</span>...</div>
  <div class="tn-heatmap-grid">
    <div class="tn-heatmap-cell" style="opacity:0.8"></div>
    ...
  </div>
</div>

Variants

이름	설명	미리보기
기본	opacity로 밀도 표현 · 24열 고정
역방향 색상	값이 낮을수록 진하게 (품질·오류 지표)
스케일 범례	좌우에 낮음/높음 레이블 + 4단 opacity 샘플	낮음높음

Guidelines

✓ Do

hover 시 실제 수치를 툴팁으로 노출 (opacity만으론 정밀 비교 불가)
한 색(전경색)의 opacity 단계로만 강도 표현
축 레이블(요일·시간)은 항상 그리드와 정렬

✕ Don't

빨강-노랑-초록 같은 다색 그라데이션 금지 — 톤 하나의 농도만
셀 개수가 너무 많아지면(1000+) 렌더링 부담 — 집계 단위 조정
3D·그림자 효과 금지

Specification

속성	토큰/값	비고
`셀 gap`	`2.5px`
`grid`	`24열 (시간) × N행 (요일)`
`hover`	`scale(1.5) + primary 강조`
`radius`	`1.5px`

비교

Insight 대시보드 '시간대 콜 밀도' 실물에서 추출. Heatmap vs Bar Chart — 두 축(요일×시간)의 밀도 분포는 Heatmap, 단일 축 추이는 Bar Chart.