구성 도넛과 값이 적힌 범례 표

전체가 몇 가지로 나뉘는지(유입 경로, 연령대, 매체 구성). 조각 3~5개, 큰 순서로 12시 방향부터. 가장 큰 조각 또는 말하려는 조각 하나만 강조색. 6개 이상이면 수평 막대를 사용. 값 바꾸는 법: 원 둘레 703.7. 조각 길이 = 비율 ÷ 100 × 703.7. 각 circle 의 stroke-dasharray = "(길이 − 2) (703.7 − 길이 + 2)", stroke-dashoffset = −(앞 조각 길이 합계). 색은 큰 순서로 s-a, s-g4, s-g2, s-g1(5번째는 s-g3 를 3번째에 끼움). 오른쪽 표의 행과 가운데 합계 숫자 교체.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Part-to-whole 분류, Datawrapper Academy(https://www.datawrapper.de/academy/customizing-your-bar-chart)의 도넛 안내(조각 5개 이하, 큰 순서 정렬, 값은 범례가 아니라 표에 직접) 참고. 직접 제작.

<div class="dk dk-donut4">
<div class="dk-card">
<p class="ttl"><span>유입 경로별 전환 구성 · 최근 3개월</span></p>
<div class="row"><svg width="300" height="300" viewBox="0 0 300 300" role="img">
<circle cx="150" cy="150" r="112" class="s-a" stroke-dasharray="293.6 410.2" stroke-dashoffset="0" transform="rotate(-90 150 150)"/>
<circle cx="150" cy="150" r="112" class="s-g4" stroke-dasharray="195 508.7" stroke-dashoffset="-295.6" transform="rotate(-90 150 150)"/>
<circle cx="150" cy="150" r="112" class="s-g2" stroke-dasharray="131.7 572" stroke-dashoffset="-492.6" transform="rotate(-90 150 150)"/>
<circle cx="150" cy="150" r="112" class="s-g1" stroke-dasharray="75.4 628.3" stroke-dashoffset="-626.3" transform="rotate(-90 150 150)"/>
<text x="150" y="166" text-anchor="middle" class="big tot">1,240</text>
<text x="150" y="194" text-anchor="middle">총 전환 건수</text>
</svg><table><thead><tr><th>유입 경로</th><th class="n">건수</th><th class="n">비중</th></tr></thead><tbody><tr class="hot"><td><i class="c-a"></i>체험단 후기 경유</td><td class="n num">521건</td><td class="n num p">42%</td></tr><tr class=""><td><i class="c-g4"></i>검색 광고</td><td class="n num">347건</td><td class="n num p">28%</td></tr><tr class=""><td><i class="c-g2"></i>SNS 광고</td><td class="n num">236건</td><td class="n num p">19%</td></tr><tr class=""><td><i class="c-g1"></i>직접 방문·기타</td><td class="n num">136건</td><td class="n num p">11%</td></tr></tbody></table></div>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-donut4 .dk-card{padding:22px 32px 20px}
.dk-donut4 .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-donut4 .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-donut4 .lg span{display:flex;align-items:center;gap:6px}
.dk-donut4 .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-donut4 .lg i.c-a{background:var(--ac)}
.dk-donut4 .lg i.c-s{background:var(--soft)}
.dk-donut4 .lg i.c-g1{background:var(--g1)}
.dk-donut4 .lg i.c-g2{background:var(--g2)}
.dk-donut4 .lg i.c-g3{background:var(--g3)}
.dk-donut4 .lg i.c-g4{background:var(--g4)}
.dk-donut4 .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-donut4 svg{display:block}
.dk-donut4 svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-donut4 svg .a{fill:var(--ac)}
.dk-donut4 svg .sf{fill:var(--soft)}
.dk-donut4 svg .g1{fill:var(--g1)}
.dk-donut4 svg .g2{fill:var(--g2)}
.dk-donut4 svg .g3{fill:var(--g3)}
.dk-donut4 svg .g4{fill:var(--g4)}
.dk-donut4 svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-donut4 svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-donut4 svg text.k{fill:var(--ink2)}
.dk-donut4 svg text.v{fill:var(--ink);font-weight:600}
.dk-donut4 svg text.va{fill:var(--ac);font-weight:700}
.dk-donut4 svg text.on{fill:var(--card);font-weight:600}
.dk-donut4 svg circle{fill:none;stroke-width:32}
.dk-donut4 svg .s-a{stroke:var(--ac)}
.dk-donut4 svg .s-g1{stroke:var(--g1)}
.dk-donut4 svg .s-g2{stroke:var(--g2)}
.dk-donut4 svg .s-g3{stroke:var(--g3)}
.dk-donut4 svg .s-g4{stroke:var(--g4)}
.dk-donut4 svg text.big{font-size:64px;font-weight:700;fill:var(--ink);letter-spacing:-2px}
.dk-donut4 svg text.big tspan{font-size:24px;font-weight:600;letter-spacing:0}
.dk-donut4 .row{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center}
.dk-donut4 svg text.tot{font-size:44px;letter-spacing:-1px}
.dk-donut4 table{width:100%;border-collapse:collapse}
.dk-donut4 th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 12px 10px;border-bottom:1px solid var(--line2)}
.dk-donut4 td{font-size:var(--f-body);color:var(--ink2);padding:15px 12px;border-bottom:1px solid var(--line)}
.dk-donut4 tr:last-child td{border-bottom:0}
.dk-donut4 .n{text-align:right;width:120px}
.dk-donut4 td.p{font-size:var(--f-lg);font-weight:700;color:var(--ink)}
.dk-donut4 td i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:12px}
.dk-donut4 td i.c-a{background:var(--ac)}
.dk-donut4 td i.c-g1{background:var(--g1)}
.dk-donut4 td i.c-g2{background:var(--g2)}
.dk-donut4 td i.c-g4{background:var(--g4)}
.dk-donut4 tr.hot td{color:var(--ink);font-weight:600}
.dk-donut4 tr.hot td.p{color:var(--ac)}