도넛 단일 비율과 가운데 큰 숫자

비율 하나가 주인공일 때(달성률, 점유율, 응답 비율). 가운데 숫자 1개 + 오른쪽 비교 기준 2~3줄. 비율이 2개 이상이면 구성 도넛이나 막대를 사용. 값 바꾸는 법: 원 둘레 = 2 × 3.1416 × 112 = 703.7. 강조 호의 stroke-dasharray 첫 값 = 비율 ÷ 100 × 703.7(둘째 값은 703.7 고정). 가운데 숫자와 아래 라벨 교체. 오른쪽 비교 막대 width = 비율 × 4px(100% = 400px), 강조 줄은 li class="hot".

Storytelling with Data(https://www.storytellingwithdata.com)의 "숫자가 하나면 숫자를 크게 쓰고 맥락을 붙인다" 원칙, Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Part-to-whole(도넛은 가운데 공간에 값을 넣을 때) 참고. 직접 제작.

<div class="dk dk-donut1">
<div class="dk-card">
<p class="ttl"><span>재구매 고객 비율 · 첫 구매 후 90일 기준</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-g1"/>
<circle cx="150" cy="150" r="112" class="s-a" stroke-dasharray="478.5 703.7" transform="rotate(-90 150 150)"/>
<text x="150" y="168" text-anchor="middle" class="big">68<tspan>%</tspan></text>
<text x="150" y="196" text-anchor="middle">재구매 고객 비율</text>
</svg><div class="r"><p class="h">구매 고객 10명 중 7명이 다시 구매</p><p class="d">첫 구매 후 90일 안에 재구매한 고객의 비율. 정기 알림 메시지와 후기 적립 도입 이후의 값.</p><ul><li class="hot"><span class="k">우리 브랜드</span><span class="tr"><i style="width:272px"></i></span><span class="n num">68%</span></li><li class=""><span class="k">지난해 같은 기간</span><span class="tr"><i style="width:208px"></i></span><span class="n num">52%</span></li><li class=""><span class="k">업종 평균</span><span class="tr"><i style="width:164px"></i></span><span class="n num">41%</span></li></ul></div></div>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-donut1 .dk-card{padding:22px 32px 20px}
.dk-donut1 .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-donut1 .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-donut1 .lg span{display:flex;align-items:center;gap:6px}
.dk-donut1 .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-donut1 .lg i.c-a{background:var(--ac)}
.dk-donut1 .lg i.c-s{background:var(--soft)}
.dk-donut1 .lg i.c-g1{background:var(--g1)}
.dk-donut1 .lg i.c-g2{background:var(--g2)}
.dk-donut1 .lg i.c-g3{background:var(--g3)}
.dk-donut1 .lg i.c-g4{background:var(--g4)}
.dk-donut1 .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-donut1 svg{display:block}
.dk-donut1 svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-donut1 svg .a{fill:var(--ac)}
.dk-donut1 svg .sf{fill:var(--soft)}
.dk-donut1 svg .g1{fill:var(--g1)}
.dk-donut1 svg .g2{fill:var(--g2)}
.dk-donut1 svg .g3{fill:var(--g3)}
.dk-donut1 svg .g4{fill:var(--g4)}
.dk-donut1 svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-donut1 svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-donut1 svg text.k{fill:var(--ink2)}
.dk-donut1 svg text.v{fill:var(--ink);font-weight:600}
.dk-donut1 svg text.va{fill:var(--ac);font-weight:700}
.dk-donut1 svg text.on{fill:var(--card);font-weight:600}
.dk-donut1 svg circle{fill:none;stroke-width:32}
.dk-donut1 svg .s-a{stroke:var(--ac)}
.dk-donut1 svg .s-g1{stroke:var(--g1)}
.dk-donut1 svg .s-g2{stroke:var(--g2)}
.dk-donut1 svg .s-g3{stroke:var(--g3)}
.dk-donut1 svg .s-g4{stroke:var(--g4)}
.dk-donut1 svg text.big{font-size:64px;font-weight:700;fill:var(--ink);letter-spacing:-2px}
.dk-donut1 svg text.big tspan{font-size:24px;font-weight:600;letter-spacing:0}
.dk-donut1 .row{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center}
.dk-donut1 .r .h{font-size:var(--f-xl);font-weight:700;margin:0 0 var(--s2);letter-spacing:-.5px}
.dk-donut1 .r .d{font-size:var(--f-body);color:var(--ink2);margin:0 0 var(--s5)}
.dk-donut1 .r ul{list-style:none;margin:0;padding:var(--s4) 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s3)}
.dk-donut1 .r li{display:grid;grid-template-columns:150px 400px 60px;align-items:center;gap:var(--s4);font-size:var(--f-sm);color:var(--ink2)}
.dk-donut1 .r .tr{display:block;height:10px;border-radius:5px;background:var(--soft)}
.dk-donut1 .r .tr i{display:block;height:10px;border-radius:5px;background:var(--g2)}
.dk-donut1 .r .n{font-weight:600;color:var(--ink);text-align:right}
.dk-donut1 .r li.hot .k{font-weight:600;color:var(--ink)}
.dk-donut1 .r li.hot .tr i{background:var(--ac)}