수평 막대 순위(강조 1개)

항목 5~8개를 큰 순서로 줄 세워 비교할 때. 항목 이름이 길어도 잘리지 않음. 강조는 한 줄만. 행 5~8개(행 높이 42px 기준, 8개면 SVG 높이 336). 값 바꾸는 법: 막대 width = 값 ÷ 최댓값 × 780. 값 라벨 x = 200 + width + 10. 행마다 y 를 42씩 증가(막대 y = 행×42+9, 글자 y = 행×42+26). 강조 행은 rect class="a", 이름 class="v", 값 class="va". 나머지는 g2 / k / v. 행 수가 바뀌면 svg height 와 viewBox 높이 = 행 수 × 42.

Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Ranking 분류(정렬된 막대), Datawrapper Academy(https://www.datawrapper.de/academy/customizing-your-bar-chart)의 한 막대만 강조하고 나머지는 흐리게 처리하는 방식, 값 라벨을 막대 끝에 직접 적는 방식 참고. 직접 제작.

<div class="dk dk-hbar">
<div class="dk-card">
<p class="ttl"><span>유입 채널별 상담 신청 건수 · 최근 3개월</span></p>
<svg width="1088" height="294" viewBox="0 0 1088 294" role="img">
<line x1="200" y1="0" x2="200" y2="294" class="ax"/>
<text x="0" y="26">1</text><text x="28" y="26" class="k">네이버 검색광고</text><rect x="200" y="9" width="780" height="24" rx="3" class="g2"/><text x="990" y="26" class="v">412건</text>
<text x="0" y="68">2</text><text x="28" y="68" class="k">인스타그램 릴스</text><rect x="200" y="51" width="674" height="24" rx="3" class="g2"/><text x="884" y="68" class="v">356건</text>
<text x="0" y="110">3</text><text x="28" y="110" class="v">블로그 체험단</text><rect x="200" y="93" width="564.2" height="24" rx="3" class="a"/><text x="774.2" y="110" class="va">298건</text>
<text x="0" y="152">4</text><text x="28" y="152" class="k">유튜브 쇼츠</text><rect x="200" y="135" width="456.3" height="24" rx="3" class="g2"/><text x="666.3" y="152" class="v">241건</text>
<text x="0" y="194">5</text><text x="28" y="194" class="k">카카오 비즈보드</text><rect x="200" y="177" width="354" height="24" rx="3" class="g2"/><text x="564" y="194" class="v">187건</text>
<text x="0" y="236">6</text><text x="28" y="236" class="k">당근 지역광고</text><rect x="200" y="219" width="249.9" height="24" rx="3" class="g2"/><text x="459.9" y="236" class="v">132건</text>
<text x="0" y="278">7</text><text x="28" y="278" class="k">구글 디스플레이</text><rect x="200" y="261" width="181.7" height="24" rx="3" class="g2"/><text x="391.7" y="278" class="v">96건</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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