누적 100% 막대(구성 비율 변화)

전체를 100으로 놓고 구성 비율이 시점마다 어떻게 바뀌는지. 행(시점) 3~5개, 조각 3~4개. 강조 조각 하나만 색. 조각이 5개를 넘으면 작은 것을 기타로 합침. 값 바꾸는 법: 1% = 10px. 조각 x = 88 + 앞 조각 누계 × 10, width = 비율 × 10 − 2(조각 사이 2px 틈). 행 y = 28 + 행 순번 × 66. 조각 이름(맨 윗줄 글자)의 x 는 첫 행 조각의 x 와 같게. 어두운 조각(g4, a) 위 글자는 class="on", 밝은 조각(g2, g1)은 class="v". 비율 4% 미만 조각은 글자 생략.

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)의 stacked bars(https://www.datawrapper.de/charts/stacked-bar-chart)에서 조각 이름을 첫 행 위에 직접 적어 범례를 없애는 방식 참고. 직접 제작.

<div class="dk dk-stack">
<div class="dk-card">
<p class="ttl"><span>분기별 전환 출처 구성비 · 합계 100%</span></p>
<svg width="1088" height="272" viewBox="0 0 1088 272" role="img">
<text x="88" y="14" class="k">검색 광고</text><text x="608" y="14" class="va">SNS 콘텐츠</text><text x="788" y="14" class="k">디스플레이</text><text x="988" y="14" class="k">기타</text>
<text x="0" y="56" class="k">1분기</text><rect x="88" y="28" width="518" height="46" rx="3" class="g4"/><text x="347" y="56" text-anchor="middle" class="on">52%</text><rect x="608" y="28" width="178" height="46" rx="3" class="a"/><text x="697" y="56" text-anchor="middle" class="on">18%</text><rect x="788" y="28" width="198" height="46" rx="3" class="g2"/><text x="887" y="56" text-anchor="middle" class="v">20%</text><rect x="988" y="28" width="98" height="46" rx="3" class="g1"/><text x="1037" y="56" text-anchor="middle" class="v">10%</text>
<text x="0" y="122" class="k">2분기</text><rect x="88" y="94" width="468" height="46" rx="3" class="g4"/><text x="322" y="122" text-anchor="middle" class="on">47%</text><rect x="558" y="94" width="238" height="46" rx="3" class="a"/><text x="677" y="122" text-anchor="middle" class="on">24%</text><rect x="798" y="94" width="188" height="46" rx="3" class="g2"/><text x="892" y="122" text-anchor="middle" class="v">19%</text><rect x="988" y="94" width="98" height="46" rx="3" class="g1"/><text x="1037" y="122" text-anchor="middle" class="v">10%</text>
<text x="0" y="188" class="k">3분기</text><rect x="88" y="160" width="408" height="46" rx="3" class="g4"/><text x="292" y="188" text-anchor="middle" class="on">41%</text><rect x="498" y="160" width="308" height="46" rx="3" class="a"/><text x="652" y="188" text-anchor="middle" class="on">31%</text><rect x="808" y="160" width="178" height="46" rx="3" class="g2"/><text x="897" y="188" text-anchor="middle" class="v">18%</text><rect x="988" y="160" width="98" height="46" rx="3" class="g1"/><text x="1037" y="188" text-anchor="middle" class="v">10%</text>
<text x="0" y="254" class="k">4분기</text><rect x="88" y="226" width="358" height="46" rx="3" class="g4"/><text x="267" y="254" text-anchor="middle" class="on">36%</text><rect x="448" y="226" width="378" height="46" rx="3" class="a"/><text x="637" y="254" text-anchor="middle" class="on">38%</text><rect x="828" y="226" width="168" height="46" rx="3" class="g2"/><text x="912" y="254" text-anchor="middle" class="v">17%</text><rect x="998" y="226" width="88" height="46" rx="3" class="g1"/><text x="1042" y="254" text-anchor="middle" class="v">9%</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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