지역 분포(시도 격자 농도)

시도별 비중·건수의 쏠림을 보여줄 때. 지도 그림 대신 17개 시도를 대략의 위치대로 놓은 격자. 농도 4단 + 1위 강조. 오른쪽에 상위 3곳과 해석 한 줄. 값 바꾸는 법: 칸마다 값(%)과 농도 class 교체: l1(3% 이하) l2(4~5%) l3(6~9%) l4(10% 이상), 1위 한 곳만 hot. 구간 기준을 바꾸면 범례 문구도 함께 수정. 칸 순서는 인천 서울 경기 강원 / 충남 세종 충북 경북 / 전북 대전 대구 울산 / 광주 전남 경남 부산 / 제주 고정. 오른쪽 합계 숫자, 상위 3곳, 해석 한 줄 교체.

Financial Times Visual Vocabulary 의 Spatial 분류 중 equalised cartogram(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary), Datawrapper 의 tile grid map 설명(https://blog.datawrapper.de). 지역을 같은 크기 칸으로 놓고 색 농도로 값을 나타내는 방식을 참고. 시도 배치와 코드는 직접 제작.

<div class="dk dk-region2">
  <div class="mp">
    <div class="tg"><div class="tl l3"><b>인천</b><span class="num">9%</span></div><div class="tl hot"><b>서울</b><span class="num">24%</span></div><div class="tl l4"><b>경기</b><span class="num">21%</span></div><div class="tl l1"><b>강원</b><span class="num">2%</span></div><div class="tl l2"><b>충남</b><span class="num">4%</span></div><div class="tl l1"><b>세종</b><span class="num">1%</span></div><div class="tl l1"><b>충북</b><span class="num">3%</span></div><div class="tl l2"><b>경북</b><span class="num">4%</span></div><div class="tl l1"><b>전북</b><span class="num">3%</span></div><div class="tl l2"><b>대전</b><span class="num">5%</span></div><div class="tl l3"><b>대구</b><span class="num">6%</span></div><div class="tl l1"><b>울산</b><span class="num">2%</span></div><div class="tl l2"><b>광주</b><span class="num">4%</span></div><div class="tl l1"><b>전남</b><span class="num">2%</span></div><div class="tl l2"><b>경남</b><span class="num">5%</span></div><div class="tl l3"><b>부산</b><span class="num">8%</span></div><div class="tl l1" style="grid-column:2"><b>제주</b><span class="num">1%</span></div></div>
    <p class="lg"><span>문의 비중</span><i class="l1"></i>3% 이하<i class="l2"></i>4~5%<i class="l3"></i>6~9%<i class="l4"></i>10% 이상</p>
  </div>
  <div class="rt">
    <p class="dk-lb mu">상위 3곳 합계</p>
    <p class="sum"><span class="num">54</span><i>%</i></p>
    <ol><li><span class="rk num">1</span><b>서울</b><span class="num">24%</span></li><li><span class="rk num">2</span><b>경기</b><span class="num">21%</span></li><li><span class="rk num">3</span><b>인천</b><span class="num">9%</span></li></ol>
    <p class="dk-say">수도권 3곳에 예산 60% 배정, 부산·대구는 검색 광고만 운영</p>
  </div>
</div>

.dk-region2{display:grid;grid-template-columns:560px minmax(0,1fr);gap:56px;align-items:center}
.dk-region2 .tg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dk-region2 .tl{height:64px;border-radius:var(--r-sm);padding:9px 14px;display:flex;flex-direction:column;justify-content:space-between;line-height:1.2}
.dk-region2 .tl b{font-size:var(--f-sm);font-weight:600;color:inherit}
.dk-region2 .tl span{font-size:var(--f-md);font-weight:700}
.dk-region2 .l1{background:var(--g1);color:var(--ink2)}
.dk-region2 .l2{background:var(--g2);color:var(--ink)}
.dk-region2 .l3{background:var(--g3);color:var(--card)}
.dk-region2 .l4{background:var(--g4);color:var(--card)}
.dk-region2 .hot{background:var(--ac);color:var(--card)}
.dk-region2 .lg{margin:14px 0 0;display:flex;align-items:center;font-size:var(--f-cap);color:var(--mu)}
.dk-region2 .lg span{font-weight:600;margin-right:4px}
.dk-region2 .lg i{width:14px;height:14px;border-radius:3px;margin:0 6px 0 14px}
.dk-region2 .sum{margin:0;line-height:1.1}
.dk-region2 .sum .num{font-size:var(--f-huge);font-weight:700;letter-spacing:-.04em}
.dk-region2 .sum i{font-style:normal;font-size:var(--f-h);font-weight:700;margin-left:4px}
.dk-region2 ol{list-style:none;margin:16px 0 22px;padding:0;border-top:1px solid var(--line2)}
.dk-region2 li{display:grid;grid-template-columns:32px 1fr auto;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--f-md)}
.dk-region2 .rk{font-size:var(--f-sm);color:var(--mu);font-weight:600}
.dk-region2 li b{font-weight:600}
.dk-region2 li>.num:last-child{font-weight:700}