반폭 · 전후 덤벨(3~5행)

여러 지표의 집행 전과 후(또는 우리와 경쟁) 차이를 절반 칸에. 두 점 사이 거리가 변화의 크기. 행 3~5개, 변화 폭이 큰 순서로 정렬, 강조는 맨 위 한 행. 지표 이름 8자 이내. 값 바꾸는 법: 점 x = 116 + 값 × 2.24(0~100 지수가 224 단위). 연결 막대 rect 의 x = 전 점 x, width = 후 점 x − 전 점 x. 행 중심 y = 24 + (순번 − 1) × 43(5행이면 간격 34, 3행이면 58). 전 값 글자는 전 점 x − 12(text-anchor end), 후 값 글자는 후 점 x + 12, 맨 오른쪽(x 400)에 증가 폭. 강조 행은 후 점 class="f-a rg", 막대 class="bw", 글자 class="va".

Datawrapper Academy(https://academy.datawrapper.de)의 range plot 안내와 Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary)의 Magnitude 분류(dumbbell)를 참고. 직접 제작.

<div class="dk dkh dkh-g-dumb"><div class="dk-card"><p class="dk-lb">집행 전후 인지 지표 · 0~100 지수</p>
<div class="cv"><svg width="100%" viewBox="0 0 400 196" preserveAspectRatio="xMidYMid meet" role="img">
<line x1="116" y1="4" x2="116" y2="172" class="gr"/><text x="116" y="190" text-anchor="middle">0</text><line x1="228" y1="4" x2="228" y2="172" class="gr"/><text x="228" y="190" text-anchor="middle">50</text><line x1="340" y1="4" x2="340" y2="172" class="gr"/><text x="340" y="190" text-anchor="middle">100</text><text x="400" y="190" text-anchor="end">증가 폭</text>
<text x="0" y="29" class="v">브랜드 검색량</text><rect x="201.1" y="21" width="73.9" height="6" class="bw"/><circle cx="201.1" cy="24" r="6" class="f-g2 rg"/><circle cx="275" cy="24" r="7" class="f-a rg"/><text x="189.1" y="29" text-anchor="end">38</text><text x="287" y="29" class="va">71</text><text x="400" y="29" text-anchor="end" class="va">+33</text>
<text x="0" y="72" class="k">광고 상기도</text><rect x="185.4" y="64" width="47" height="6" class="f-g1"/><circle cx="185.4" cy="67" r="6" class="f-g2 rg"/><circle cx="232.5" cy="67" r="7" class="f-g4 rg"/><text x="173.4" y="72" text-anchor="end">31</text><text x="244.5" y="72" class="v">52</text><text x="400" y="72" text-anchor="end" class="v">+21</text>
<text x="0" y="115" class="k">구매 고려율</text><rect x="176.5" y="107" width="38.1" height="6" class="f-g1"/><circle cx="176.5" cy="110" r="6" class="f-g2 rg"/><circle cx="214.6" cy="110" r="7" class="f-g4 rg"/><text x="164.5" y="115" text-anchor="end">27</text><text x="226.6" y="115" class="v">44</text><text x="400" y="115" text-anchor="end" class="v">+17</text>
<text x="0" y="158" class="k">추천 의향</text><rect x="196.6" y="150" width="24.6" height="6" class="f-g1"/><circle cx="196.6" cy="153" r="6" class="f-g2 rg"/><circle cx="221.3" cy="153" r="7" class="f-g4 rg"/><text x="184.6" y="158" text-anchor="end">36</text><text x="233.3" y="158" class="v">47</text><text x="400" y="158" text-anchor="end" class="v">+11</text>

</svg></div>
<p class="lg"><span><i class="c-g2"></i>집행 전</span><span><i class="c-g4"></i>집행 후</span></p>
<p class="nt">예시 값 · 실제 집계 값과 기간으로 교체</p></div></div>

.dkh-g-dumb .dk-card{display:flex;flex-direction:column;padding:20px 26px 18px}
.dkh-g-dumb .dk-lb{flex:none;margin:0 0 10px}
.dkh-g-dumb .nt{flex:none;font-size:var(--f-cap);color:var(--mu);margin:8px 0 0}
.dkh-g-dumb .cv{flex:1;min-height:0;position:relative}
.dkh-g-dumb .cv svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.dkh-g-dumb svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dkh-g-dumb svg .k{fill:var(--ink2)}
.dkh-g-dumb svg .v{fill:var(--ink);font-weight:600}
.dkh-g-dumb svg .va{fill:var(--ac);font-weight:700}
.dkh-g-dumb svg .on{fill:var(--card);font-weight:600}
.dkh-g-dumb svg .t14{font-size:14px}
.dkh-g-dumb svg .f-a{fill:var(--ac)}
.dkh-g-dumb svg .f-w{fill:var(--acw)}
.dkh-g-dumb svg .f-s{fill:var(--soft)}
.dkh-g-dumb svg .f-c{fill:var(--card)}
.dkh-g-dumb svg .f-g1{fill:var(--g1)}
.dkh-g-dumb svg .f-g2{fill:var(--g2)}
.dkh-g-dumb svg .f-g3{fill:var(--g3)}
.dkh-g-dumb svg .f-g4{fill:var(--g4)}
.dkh-g-dumb svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dkh-g-dumb svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dkh-g-dumb .lg{flex:none;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:var(--f-cap);color:var(--ink2);margin:8px 0 0}
.dkh-g-dumb .lg span{display:flex;align-items:center;gap:6px}
.dkh-g-dumb .lg i{display:block;width:10px;height:10px;border-radius:2px}
.dkh-g-dumb .lg .c-a{background:var(--ac)}
.dkh-g-dumb .lg .c-s{background:var(--soft)}
.dkh-g-dumb .lg .c-g1{background:var(--g1)}
.dkh-g-dumb .lg .c-g2{background:var(--g2)}
.dkh-g-dumb .lg .c-g3{background:var(--g3)}
.dkh-g-dumb .lg .c-g4{background:var(--g4)}
.dkh-g-dumb svg .rg{stroke:var(--card);stroke-width:2}
.dkh-g-dumb svg .bw{fill:var(--acm)}
.dkh-g-dumb .lg i{border-radius:50%}