히트맵(요일 × 시간대)

요일과 시간대처럼 두 축이 모두 구간일 때 어디에 값이 몰리는지. 게시 시간 제안, 광고 노출 시간 설정 근거. 7행 × 12열(2시간 단위) 고정. 농도 5단 + 최고 칸 1개만 강조색. 값 바꾸는 법: 칸 하나 = rect(x = 44 + 열 × 87, y = 24 + 행 × 35). 값을 5구간으로 나눠 class 를 sf(가장 낮음) → g1 → g2 → g3 → g4(가장 높음) 로 지정, 구간 경계는 최댓값의 15·35·55·75% 권장. 최고 칸 하나만 class="a" 로 바꾸고 "최고" 글자의 x, y 를 그 칸 가운데(칸 x + 42, 칸 y + 21)로 이동.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Change over Time 분류(calendar heatmap)와 Datawrapper 색 안내(https://www.datawrapper.de/blog/which-color-scale-to-use-in-data-vis)의 "순차 값은 한 색상의 밝기 단계로" 원칙 참고. 무채색 5단에 최고 칸만 강조색으로 직접 제작.

<div class="dk dk-heat1">
<div class="dk-card">
<p class="ttl"><span>요일·시간대별 게시물 반응 지수 · 최근 8주</span><span class="lg"><span><i class="c-s"></i>낮음</span><span><i class="c-g1"></i></span><span><i class="c-g2"></i></span><span><i class="c-g3"></i></span><span><i class="c-g4"></i>높음</span><span><i class="c-a"></i>최고 구간</span></span></p>
<svg width="1088" height="269" viewBox="0 0 1088 269" role="img">
<text x="86" y="14" text-anchor="middle">0시</text><text x="173" y="14" text-anchor="middle">2시</text><text x="260" y="14" text-anchor="middle">4시</text><text x="347" y="14" text-anchor="middle">6시</text><text x="434" y="14" text-anchor="middle">8시</text><text x="521" y="14" text-anchor="middle">10시</text><text x="608" y="14" text-anchor="middle">12시</text><text x="695" y="14" text-anchor="middle">14시</text><text x="782" y="14" text-anchor="middle">16시</text><text x="869" y="14" text-anchor="middle">18시</text><text x="956" y="14" text-anchor="middle">20시</text><text x="1043" y="14" text-anchor="middle">22시</text>
<text x="0" y="45" class="k">월</text><rect x="44" y="24" width="84" height="32" rx="3" class="sf"/><rect x="131" y="24" width="84" height="32" rx="3" class="sf"/><rect x="218" y="24" width="84" height="32" rx="3" class="sf"/><rect x="305" y="24" width="84" height="32" rx="3" class="sf"/><rect x="392" y="24" width="84" height="32" rx="3" class="g1"/><rect x="479" y="24" width="84" height="32" rx="3" class="g1"/><rect x="566" y="24" width="84" height="32" rx="3" class="g2"/><rect x="653" y="24" width="84" height="32" rx="3" class="g2"/><rect x="740" y="24" width="84" height="32" rx="3" class="g1"/><rect x="827" y="24" width="84" height="32" rx="3" class="g2"/><rect x="914" y="24" width="84" height="32" rx="3" class="g3"/><rect x="1001" y="24" width="84" height="32" rx="3" class="g2"/>
<text x="0" y="80" class="k">화</text><rect x="44" y="59" width="84" height="32" rx="3" class="sf"/><rect x="131" y="59" width="84" height="32" rx="3" class="sf"/><rect x="218" y="59" width="84" height="32" rx="3" class="sf"/><rect x="305" y="59" width="84" height="32" rx="3" class="sf"/><rect x="392" y="59" width="84" height="32" rx="3" class="g1"/><rect x="479" y="59" width="84" height="32" rx="3" class="g1"/><rect x="566" y="59" width="84" height="32" rx="3" class="g2"/><rect x="653" y="59" width="84" height="32" rx="3" class="g2"/><rect x="740" y="59" width="84" height="32" rx="3" class="g1"/><rect x="827" y="59" width="84" height="32" rx="3" class="g2"/><rect x="914" y="59" width="84" height="32" rx="3" class="g3"/><rect x="1001" y="59" width="84" height="32" rx="3" class="g3"/>
<text x="0" y="115" class="k">수</text><rect x="44" y="94" width="84" height="32" rx="3" class="sf"/><rect x="131" y="94" width="84" height="32" rx="3" class="sf"/><rect x="218" y="94" width="84" height="32" rx="3" class="sf"/><rect x="305" y="94" width="84" height="32" rx="3" class="sf"/><rect x="392" y="94" width="84" height="32" rx="3" class="g1"/><rect x="479" y="94" width="84" height="32" rx="3" class="g1"/><rect x="566" y="94" width="84" height="32" rx="3" class="g2"/><rect x="653" y="94" width="84" height="32" rx="3" class="g2"/><rect x="740" y="94" width="84" height="32" rx="3" class="g1"/><rect x="827" y="94" width="84" height="32" rx="3" class="g2"/><rect x="914" y="94" width="84" height="32" rx="3" class="g3"/><rect x="1001" y="94" width="84" height="32" rx="3" class="g3"/>
<text x="0" y="150" class="k">목</text><rect x="44" y="129" width="84" height="32" rx="3" class="sf"/><rect x="131" y="129" width="84" height="32" rx="3" class="sf"/><rect x="218" y="129" width="84" height="32" rx="3" class="sf"/><rect x="305" y="129" width="84" height="32" rx="3" class="sf"/><rect x="392" y="129" width="84" height="32" rx="3" class="g1"/><rect x="479" y="129" width="84" height="32" rx="3" class="g1"/><rect x="566" y="129" width="84" height="32" rx="3" class="g2"/><rect x="653" y="129" width="84" height="32" rx="3" class="g2"/><rect x="740" y="129" width="84" height="32" rx="3" class="g2"/><rect x="827" y="129" width="84" height="32" rx="3" class="g2"/><rect x="914" y="129" width="84" height="32" rx="3" class="g4"/><rect x="1001" y="129" width="84" height="32" rx="3" class="g3"/>
<text x="0" y="185" class="k">금</text><rect x="44" y="164" width="84" height="32" rx="3" class="sf"/><rect x="131" y="164" width="84" height="32" rx="3" class="sf"/><rect x="218" y="164" width="84" height="32" rx="3" class="sf"/><rect x="305" y="164" width="84" height="32" rx="3" class="sf"/><rect x="392" y="164" width="84" height="32" rx="3" class="g1"/><rect x="479" y="164" width="84" height="32" rx="3" class="g1"/><rect x="566" y="164" width="84" height="32" rx="3" class="g2"/><rect x="653" y="164" width="84" height="32" rx="3" class="g2"/><rect x="740" y="164" width="84" height="32" rx="3" class="g2"/><rect x="827" y="164" width="84" height="32" rx="3" class="g2"/><rect x="914" y="164" width="84" height="32" rx="3" class="g4"/><rect x="1001" y="164" width="84" height="32" rx="3" class="g3"/>
<text x="0" y="220" class="k">토</text><rect x="44" y="199" width="84" height="32" rx="3" class="sf"/><rect x="131" y="199" width="84" height="32" rx="3" class="sf"/><rect x="218" y="199" width="84" height="32" rx="3" class="sf"/><rect x="305" y="199" width="84" height="32" rx="3" class="sf"/><rect x="392" y="199" width="84" height="32" rx="3" class="g1"/><rect x="479" y="199" width="84" height="32" rx="3" class="g1"/><rect x="566" y="199" width="84" height="32" rx="3" class="g3"/><rect x="653" y="199" width="84" height="32" rx="3" class="g2"/><rect x="740" y="199" width="84" height="32" rx="3" class="g2"/><rect x="827" y="199" width="84" height="32" rx="3" class="g3"/><rect x="914" y="199" width="84" height="32" rx="3" class="g4"/><rect x="1001" y="199" width="84" height="32" rx="3" class="g3"/>
<text x="0" y="255" class="k">일</text><rect x="44" y="234" width="84" height="32" rx="3" class="sf"/><rect x="131" y="234" width="84" height="32" rx="3" class="sf"/><rect x="218" y="234" width="84" height="32" rx="3" class="sf"/><rect x="305" y="234" width="84" height="32" rx="3" class="sf"/><rect x="392" y="234" width="84" height="32" rx="3" class="g1"/><rect x="479" y="234" width="84" height="32" rx="3" class="g2"/><rect x="566" y="234" width="84" height="32" rx="3" class="g3"/><rect x="653" y="234" width="84" height="32" rx="3" class="g2"/><rect x="740" y="234" width="84" height="32" rx="3" class="g2"/><rect x="827" y="234" width="84" height="32" rx="3" class="g3"/><rect x="914" y="234" width="84" height="32" rx="3" class="a"/><rect x="1001" y="234" width="84" height="32" rx="3" class="g3"/>
<text x="956" y="255" text-anchor="middle" class="on">최고</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-heat1 .dk-card{padding:22px 32px 20px}
.dk-heat1 .ttl{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--f-cap);font-weight:600;color:var(--mu);margin:0 0 var(--s3)}
.dk-heat1 .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-heat1 .lg span{display:flex;align-items:center;gap:6px}
.dk-heat1 .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-heat1 .lg i.c-a{background:var(--ac)}
.dk-heat1 .lg i.c-s{background:var(--soft)}
.dk-heat1 .lg i.c-g1{background:var(--g1)}
.dk-heat1 .lg i.c-g2{background:var(--g2)}
.dk-heat1 .lg i.c-g3{background:var(--g3)}
.dk-heat1 .lg i.c-g4{background:var(--g4)}
.dk-heat1 .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-heat1 svg{display:block}
.dk-heat1 svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-heat1 svg .a{fill:var(--ac)}
.dk-heat1 svg .sf{fill:var(--soft)}
.dk-heat1 svg .g1{fill:var(--g1)}
.dk-heat1 svg .g2{fill:var(--g2)}
.dk-heat1 svg .g3{fill:var(--g3)}
.dk-heat1 svg .g4{fill:var(--g4)}
.dk-heat1 svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-heat1 svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-heat1 svg text.k{fill:var(--ink2)}
.dk-heat1 svg text.v{fill:var(--ink);font-weight:600}
.dk-heat1 svg text.va{fill:var(--ac);font-weight:700}
.dk-heat1 svg text.on{fill:var(--card);font-weight:600}
.dk-heat1 .lg{gap:6px}
.dk-heat1 .lg span:last-child{margin-left:var(--s3)}