와플 차트(100명 격자)

비율을 "100명 중 몇 명"으로 체감시킬 때. 설문 결과, 구매 계기, 인지 비율. 점 100개(10×10) 고정, 강조 비율 1개. 오른쪽에 큰 숫자와 나머지 구성 2~4줄. 값 바꾸는 법: 점 100개는 왼쪽 위부터 가로로 채움. 비율이 N% 이면 앞에서 N개의 circle class 를 "a", 나머지를 "g1" 로. 점 위치는 고정(cx = 14.5 + 열 × 29, cy = 14.5 + 행 × 29). 큰 숫자와 오른쪽 구성 줄 교체, 강조 줄은 li class="hot". 소수점 비율은 반올림.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Part-to-whole 분류(waffle, gridplot: 100칸 격자로 비율을 셀 수 있게)와 뉴스 그래픽의 "100명 중 N명" 표현 참고. 직접 제작.

<div class="dk dk-waffle">
<div class="dk-card">
<p class="ttl"><span>구매 고객 100명의 구매 계기 · 구매 후 설문</span></p>
<div class="row"><svg width="290" height="290" viewBox="0 0 290 290" role="img">
<circle cx="14.5" cy="14.5" r="10.5" class="a"/><circle cx="43.5" cy="14.5" r="10.5" class="a"/><circle cx="72.5" cy="14.5" r="10.5" class="a"/><circle cx="101.5" cy="14.5" r="10.5" class="a"/><circle cx="130.5" cy="14.5" r="10.5" class="a"/><circle cx="159.5" cy="14.5" r="10.5" class="a"/><circle cx="188.5" cy="14.5" r="10.5" class="a"/><circle cx="217.5" cy="14.5" r="10.5" class="a"/><circle cx="246.5" cy="14.5" r="10.5" class="a"/><circle cx="275.5" cy="14.5" r="10.5" class="a"/>
<circle cx="14.5" cy="43.5" r="10.5" class="a"/><circle cx="43.5" cy="43.5" r="10.5" class="a"/><circle cx="72.5" cy="43.5" r="10.5" class="a"/><circle cx="101.5" cy="43.5" r="10.5" class="a"/><circle cx="130.5" cy="43.5" r="10.5" class="a"/><circle cx="159.5" cy="43.5" r="10.5" class="a"/><circle cx="188.5" cy="43.5" r="10.5" class="a"/><circle cx="217.5" cy="43.5" r="10.5" class="a"/><circle cx="246.5" cy="43.5" r="10.5" class="a"/><circle cx="275.5" cy="43.5" r="10.5" class="a"/>
<circle cx="14.5" cy="72.5" r="10.5" class="a"/><circle cx="43.5" cy="72.5" r="10.5" class="a"/><circle cx="72.5" cy="72.5" r="10.5" class="a"/><circle cx="101.5" cy="72.5" r="10.5" class="a"/><circle cx="130.5" cy="72.5" r="10.5" class="a"/><circle cx="159.5" cy="72.5" r="10.5" class="a"/><circle cx="188.5" cy="72.5" r="10.5" class="a"/><circle cx="217.5" cy="72.5" r="10.5" class="a"/><circle cx="246.5" cy="72.5" r="10.5" class="a"/><circle cx="275.5" cy="72.5" r="10.5" class="a"/>
<circle cx="14.5" cy="101.5" r="10.5" class="a"/><circle cx="43.5" cy="101.5" r="10.5" class="a"/><circle cx="72.5" cy="101.5" r="10.5" class="a"/><circle cx="101.5" cy="101.5" r="10.5" class="a"/><circle cx="130.5" cy="101.5" r="10.5" class="a"/><circle cx="159.5" cy="101.5" r="10.5" class="a"/><circle cx="188.5" cy="101.5" r="10.5" class="a"/><circle cx="217.5" cy="101.5" r="10.5" class="g1"/><circle cx="246.5" cy="101.5" r="10.5" class="g1"/><circle cx="275.5" cy="101.5" r="10.5" class="g1"/>
<circle cx="14.5" cy="130.5" r="10.5" class="g1"/><circle cx="43.5" cy="130.5" r="10.5" class="g1"/><circle cx="72.5" cy="130.5" r="10.5" class="g1"/><circle cx="101.5" cy="130.5" r="10.5" class="g1"/><circle cx="130.5" cy="130.5" r="10.5" class="g1"/><circle cx="159.5" cy="130.5" r="10.5" class="g1"/><circle cx="188.5" cy="130.5" r="10.5" class="g1"/><circle cx="217.5" cy="130.5" r="10.5" class="g1"/><circle cx="246.5" cy="130.5" r="10.5" class="g1"/><circle cx="275.5" cy="130.5" r="10.5" class="g1"/>
<circle cx="14.5" cy="159.5" r="10.5" class="g1"/><circle cx="43.5" cy="159.5" r="10.5" class="g1"/><circle cx="72.5" cy="159.5" r="10.5" class="g1"/><circle cx="101.5" cy="159.5" r="10.5" class="g1"/><circle cx="130.5" cy="159.5" r="10.5" class="g1"/><circle cx="159.5" cy="159.5" r="10.5" class="g1"/><circle cx="188.5" cy="159.5" r="10.5" class="g1"/><circle cx="217.5" cy="159.5" r="10.5" class="g1"/><circle cx="246.5" cy="159.5" r="10.5" class="g1"/><circle cx="275.5" cy="159.5" r="10.5" class="g1"/>
<circle cx="14.5" cy="188.5" r="10.5" class="g1"/><circle cx="43.5" cy="188.5" r="10.5" class="g1"/><circle cx="72.5" cy="188.5" r="10.5" class="g1"/><circle cx="101.5" cy="188.5" r="10.5" class="g1"/><circle cx="130.5" cy="188.5" r="10.5" class="g1"/><circle cx="159.5" cy="188.5" r="10.5" class="g1"/><circle cx="188.5" cy="188.5" r="10.5" class="g1"/><circle cx="217.5" cy="188.5" r="10.5" class="g1"/><circle cx="246.5" cy="188.5" r="10.5" class="g1"/><circle cx="275.5" cy="188.5" r="10.5" class="g1"/>
<circle cx="14.5" cy="217.5" r="10.5" class="g1"/><circle cx="43.5" cy="217.5" r="10.5" class="g1"/><circle cx="72.5" cy="217.5" r="10.5" class="g1"/><circle cx="101.5" cy="217.5" r="10.5" class="g1"/><circle cx="130.5" cy="217.5" r="10.5" class="g1"/><circle cx="159.5" cy="217.5" r="10.5" class="g1"/><circle cx="188.5" cy="217.5" r="10.5" class="g1"/><circle cx="217.5" cy="217.5" r="10.5" class="g1"/><circle cx="246.5" cy="217.5" r="10.5" class="g1"/><circle cx="275.5" cy="217.5" r="10.5" class="g1"/>
<circle cx="14.5" cy="246.5" r="10.5" class="g1"/><circle cx="43.5" cy="246.5" r="10.5" class="g1"/><circle cx="72.5" cy="246.5" r="10.5" class="g1"/><circle cx="101.5" cy="246.5" r="10.5" class="g1"/><circle cx="130.5" cy="246.5" r="10.5" class="g1"/><circle cx="159.5" cy="246.5" r="10.5" class="g1"/><circle cx="188.5" cy="246.5" r="10.5" class="g1"/><circle cx="217.5" cy="246.5" r="10.5" class="g1"/><circle cx="246.5" cy="246.5" r="10.5" class="g1"/><circle cx="275.5" cy="246.5" r="10.5" class="g1"/>
<circle cx="14.5" cy="275.5" r="10.5" class="g1"/><circle cx="43.5" cy="275.5" r="10.5" class="g1"/><circle cx="72.5" cy="275.5" r="10.5" class="g1"/><circle cx="101.5" cy="275.5" r="10.5" class="g1"/><circle cx="130.5" cy="275.5" r="10.5" class="g1"/><circle cx="159.5" cy="275.5" r="10.5" class="g1"/><circle cx="188.5" cy="275.5" r="10.5" class="g1"/><circle cx="217.5" cy="275.5" r="10.5" class="g1"/><circle cx="246.5" cy="275.5" r="10.5" class="g1"/><circle cx="275.5" cy="275.5" r="10.5" class="g1"/>

</svg><div class="r"><p class="big num">100명 중 <b>37명</b></p><p class="d">구매 직전에 블로그와 인스타그램 후기를 확인한 고객. 네 가지 계기 가운데 가장 큰 비중.</p><ul><li class="hot"><span>후기 확인 후 구매</span><b class="num">37명</b></li><li class=""><span>검색 광고에서 바로 구매</span><b class="num">24명</b></li><li class=""><span>지인 추천으로 구매</span><b class="num">21명</b></li><li class=""><span>기타 경로</span><b class="num">18명</b></li></ul></div></div>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-waffle .dk-card{padding:22px 32px 20px}
.dk-waffle .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-waffle .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-waffle .lg span{display:flex;align-items:center;gap:6px}
.dk-waffle .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-waffle .lg i.c-a{background:var(--ac)}
.dk-waffle .lg i.c-s{background:var(--soft)}
.dk-waffle .lg i.c-g1{background:var(--g1)}
.dk-waffle .lg i.c-g2{background:var(--g2)}
.dk-waffle .lg i.c-g3{background:var(--g3)}
.dk-waffle .lg i.c-g4{background:var(--g4)}
.dk-waffle .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-waffle svg{display:block}
.dk-waffle svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-waffle svg .a{fill:var(--ac)}
.dk-waffle svg .sf{fill:var(--soft)}
.dk-waffle svg .g1{fill:var(--g1)}
.dk-waffle svg .g2{fill:var(--g2)}
.dk-waffle svg .g3{fill:var(--g3)}
.dk-waffle svg .g4{fill:var(--g4)}
.dk-waffle svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-waffle svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-waffle svg text.k{fill:var(--ink2)}
.dk-waffle svg text.v{fill:var(--ink);font-weight:600}
.dk-waffle svg text.va{fill:var(--ac);font-weight:700}
.dk-waffle svg text.on{fill:var(--card);font-weight:600}
.dk-waffle .row{display:grid;grid-template-columns:290px minmax(0,1fr);gap:64px;align-items:center}
.dk-waffle .big{font-size:var(--f-h);font-weight:700;letter-spacing:-1px;margin:0;color:var(--ink2);line-height:1.2}
.dk-waffle .big b{font-size:var(--f-big);font-weight:800;color:var(--ac);letter-spacing:-2px;margin-left:8px}
.dk-waffle .d{font-size:var(--f-body);color:var(--ink2);margin:var(--s2) 0 var(--s4)}
.dk-waffle ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.dk-waffle li{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--f-body);color:var(--ink2)}
.dk-waffle li:last-child{border-bottom:0}
.dk-waffle li b{font-size:var(--f-md);font-weight:700}
.dk-waffle li.hot span{font-weight:600;color:var(--ink)}
.dk-waffle li.hot b{color:var(--ac)}