히트맵(월 × 항목, 값 표기)

항목별 계절성이나 월별 강약을 한 표로. 키워드군별 검색 수요, 품목별 판매 시기, 매체별 월 집행 강도. 행 3~6개 × 12열. 칸에 값을 직접 적음. 강조색은 최고 칸 또는 제안 집행 시기 한 구간에만. 값 바꾸는 법: 칸 = rect(x = 140 + (월 − 1) × 79, y = 24 + 행 × 51) + 가운데 숫자. 값 구간별 class: 20 미만 sf, 20~39 g1, 40~59 g2, 60~79 g3, 80 이상 g4. 60 이상 칸의 숫자는 class="on"(흰 글자), 그 아래는 class="k". 강조할 칸 하나만 class="a". 행이 6개면 칸 높이 48 → 40, 행 간격 51 → 43.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 heatmap(두 범주 축의 패턴)과 Datawrapper 표의 heatmap 열(https://www.datawrapper.de/tables) 방식 참고. 값을 칸에 직접 적어 범례 의존을 줄여 직접 제작.

<div class="dk dk-heat2">
<div class="dk-card">
<p class="ttl"><span>키워드군별 월간 검색 수요 지수 · 연중 최고 100</span><span class="lg"><span><i class="c-s"></i>20 미만</span><span><i class="c-g1"></i>20~39</span><span><i class="c-g2"></i>40~59</span><span><i class="c-g3"></i>60~79</span><span><i class="c-g4"></i>80 이상</span><span><i class="c-a"></i>연중 최고</span></span></p>
<svg width="1088" height="279" viewBox="0 0 1088 279" role="img">
<text x="178" y="14" text-anchor="middle">1월</text><text x="257" y="14" text-anchor="middle">2월</text><text x="336" y="14" text-anchor="middle">3월</text><text x="415" y="14" text-anchor="middle">4월</text><text x="494" y="14" text-anchor="middle">5월</text><text x="573" y="14" text-anchor="middle">6월</text><text x="652" y="14" text-anchor="middle">7월</text><text x="731" y="14" text-anchor="middle">8월</text><text x="810" y="14" text-anchor="middle">9월</text><text x="889" y="14" text-anchor="middle">10월</text><text x="968" y="14" text-anchor="middle">11월</text><text x="1047" y="14" text-anchor="middle">12월</text>
<text x="0" y="53" class="k">에어컨 청소</text><rect x="140" y="24" width="76" height="48" rx="3" class="g1"/><text x="178" y="53" text-anchor="middle" class="k">22</text><rect x="219" y="24" width="76" height="48" rx="3" class="g1"/><text x="257" y="53" text-anchor="middle" class="k">20</text><rect x="298" y="24" width="76" height="48" rx="3" class="g1"/><text x="336" y="53" text-anchor="middle" class="k">28</text><rect x="377" y="24" width="76" height="48" rx="3" class="g2"/><text x="415" y="53" text-anchor="middle" class="k">45</text><rect x="456" y="24" width="76" height="48" rx="3" class="g3"/><text x="494" y="53" text-anchor="middle" class="on">72</text><rect x="535" y="24" width="76" height="48" rx="3" class="g4"/><text x="573" y="53" text-anchor="middle" class="on">96</text><rect x="614" y="24" width="76" height="48" rx="3" class="a"/><text x="652" y="53" text-anchor="middle" class="on">100</text><rect x="693" y="24" width="76" height="48" rx="3" class="g4"/><text x="731" y="53" text-anchor="middle" class="on">84</text><rect x="772" y="24" width="76" height="48" rx="3" class="g2"/><text x="810" y="53" text-anchor="middle" class="k">48</text><rect x="851" y="24" width="76" height="48" rx="3" class="g1"/><text x="889" y="53" text-anchor="middle" class="k">26</text><rect x="930" y="24" width="76" height="48" rx="3" class="g1"/><text x="968" y="53" text-anchor="middle" class="k">20</text><rect x="1009" y="24" width="76" height="48" rx="3" class="sf"/><text x="1047" y="53" text-anchor="middle" class="k">18</text>
<text x="0" y="104" class="k">제습기</text><rect x="140" y="75" width="76" height="48" rx="3" class="sf"/><text x="178" y="104" text-anchor="middle" class="k">18</text><rect x="219" y="75" width="76" height="48" rx="3" class="sf"/><text x="257" y="104" text-anchor="middle" class="k">16</text><rect x="298" y="75" width="76" height="48" rx="3" class="g1"/><text x="336" y="104" text-anchor="middle" class="k">20</text><rect x="377" y="75" width="76" height="48" rx="3" class="g1"/><text x="415" y="104" text-anchor="middle" class="k">30</text><rect x="456" y="75" width="76" height="48" rx="3" class="g2"/><text x="494" y="104" text-anchor="middle" class="k">52</text><rect x="535" y="75" width="76" height="48" rx="3" class="g4"/><text x="573" y="104" text-anchor="middle" class="on">88</text><rect x="614" y="75" width="76" height="48" rx="3" class="g4"/><text x="652" y="104" text-anchor="middle" class="on">95</text><rect x="693" y="75" width="76" height="48" rx="3" class="g3"/><text x="731" y="104" text-anchor="middle" class="on">70</text><rect x="772" y="75" width="76" height="48" rx="3" class="g2"/><text x="810" y="104" text-anchor="middle" class="k">40</text><rect x="851" y="75" width="76" height="48" rx="3" class="g1"/><text x="889" y="104" text-anchor="middle" class="k">24</text><rect x="930" y="75" width="76" height="48" rx="3" class="sf"/><text x="968" y="104" text-anchor="middle" class="k">18</text><rect x="1009" y="75" width="76" height="48" rx="3" class="sf"/><text x="1047" y="104" text-anchor="middle" class="k">16</text>
<text x="0" y="155" class="k">공기청정기</text><rect x="140" y="126" width="76" height="48" rx="3" class="g2"/><text x="178" y="155" text-anchor="middle" class="k">56</text><rect x="219" y="126" width="76" height="48" rx="3" class="g3"/><text x="257" y="155" text-anchor="middle" class="on">62</text><rect x="298" y="126" width="76" height="48" rx="3" class="g4"/><text x="336" y="155" text-anchor="middle" class="on">88</text><rect x="377" y="126" width="76" height="48" rx="3" class="g3"/><text x="415" y="155" text-anchor="middle" class="on">74</text><rect x="456" y="126" width="76" height="48" rx="3" class="g2"/><text x="494" y="155" text-anchor="middle" class="k">48</text><rect x="535" y="126" width="76" height="48" rx="3" class="g1"/><text x="573" y="155" text-anchor="middle" class="k">30</text><rect x="614" y="126" width="76" height="48" rx="3" class="g1"/><text x="652" y="155" text-anchor="middle" class="k">26</text><rect x="693" y="126" width="76" height="48" rx="3" class="g1"/><text x="731" y="155" text-anchor="middle" class="k">28</text><rect x="772" y="126" width="76" height="48" rx="3" class="g2"/><text x="810" y="155" text-anchor="middle" class="k">40</text><rect x="851" y="126" width="76" height="48" rx="3" class="g2"/><text x="889" y="155" text-anchor="middle" class="k">52</text><rect x="930" y="126" width="76" height="48" rx="3" class="g2"/><text x="968" y="155" text-anchor="middle" class="k">58</text><rect x="1009" y="126" width="76" height="48" rx="3" class="g3"/><text x="1047" y="155" text-anchor="middle" class="on">60</text>
<text x="0" y="206" class="k">가습기</text><rect x="140" y="177" width="76" height="48" rx="3" class="g4"/><text x="178" y="206" text-anchor="middle" class="on">84</text><rect x="219" y="177" width="76" height="48" rx="3" class="g3"/><text x="257" y="206" text-anchor="middle" class="on">72</text><rect x="298" y="177" width="76" height="48" rx="3" class="g2"/><text x="336" y="206" text-anchor="middle" class="k">48</text><rect x="377" y="177" width="76" height="48" rx="3" class="g1"/><text x="415" y="206" text-anchor="middle" class="k">24</text><rect x="456" y="177" width="76" height="48" rx="3" class="sf"/><text x="494" y="206" text-anchor="middle" class="k">12</text><rect x="535" y="177" width="76" height="48" rx="3" class="sf"/><text x="573" y="206" text-anchor="middle" class="k">8</text><rect x="614" y="177" width="76" height="48" rx="3" class="sf"/><text x="652" y="206" text-anchor="middle" class="k">8</text><rect x="693" y="177" width="76" height="48" rx="3" class="sf"/><text x="731" y="206" text-anchor="middle" class="k">10</text><rect x="772" y="177" width="76" height="48" rx="3" class="g1"/><text x="810" y="206" text-anchor="middle" class="k">26</text><rect x="851" y="177" width="76" height="48" rx="3" class="g2"/><text x="889" y="206" text-anchor="middle" class="k">52</text><rect x="930" y="177" width="76" height="48" rx="3" class="g3"/><text x="968" y="206" text-anchor="middle" class="on">78</text><rect x="1009" y="177" width="76" height="48" rx="3" class="g4"/><text x="1047" y="206" text-anchor="middle" class="on">90</text>
<text x="0" y="257" class="k">난방 텐트</text><rect x="140" y="228" width="76" height="48" rx="3" class="g3"/><text x="178" y="257" text-anchor="middle" class="on">70</text><rect x="219" y="228" width="76" height="48" rx="3" class="g2"/><text x="257" y="257" text-anchor="middle" class="k">58</text><rect x="298" y="228" width="76" height="48" rx="3" class="g1"/><text x="336" y="257" text-anchor="middle" class="k">30</text><rect x="377" y="228" width="76" height="48" rx="3" class="sf"/><text x="415" y="257" text-anchor="middle" class="k">14</text><rect x="456" y="228" width="76" height="48" rx="3" class="sf"/><text x="494" y="257" text-anchor="middle" class="k">8</text><rect x="535" y="228" width="76" height="48" rx="3" class="sf"/><text x="573" y="257" text-anchor="middle" class="k">6</text><rect x="614" y="228" width="76" height="48" rx="3" class="sf"/><text x="652" y="257" text-anchor="middle" class="k">6</text><rect x="693" y="228" width="76" height="48" rx="3" class="sf"/><text x="731" y="257" text-anchor="middle" class="k">8</text><rect x="772" y="228" width="76" height="48" rx="3" class="g1"/><text x="810" y="257" text-anchor="middle" class="k">20</text><rect x="851" y="228" width="76" height="48" rx="3" class="g2"/><text x="889" y="257" text-anchor="middle" class="k">48</text><rect x="930" y="228" width="76" height="48" rx="3" class="g4"/><text x="968" y="257" text-anchor="middle" class="on">82</text><rect x="1009" y="228" width="76" height="48" rx="3" class="g4"/><text x="1047" y="257" text-anchor="middle" class="on">94</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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