덤벨(전후 차이)

여러 항목의 집행 전과 후, 또는 우리와 경쟁의 차이를 한 줄씩. 두 점 사이 거리가 변화의 크기. 행 4~8개, 증가 폭이 큰 순서로 정렬. 강조는 한 줄만. 값 바꾸는 법: 점 x = 200 + 값 × 7.6(0~100 지수 = 760px). 연결 막대 x = 전 점 x, width = 후 점 x − 전 점 x. 행 중심 y = 행 순번 × 44 + 22. 전 값 글자는 전 점 왼쪽 14px, 후 값 글자는 후 점 오른쪽 14px, 맨 오른쪽에 증가 폭. 값이 줄어든 행은 두 글자 위치를 서로 바꾸고 증가 폭을 "−5" 로 표기. 강조 행: 후 점 class="a", 연결 막대 class="bw".

Datawrapper Academy(https://www.datawrapper.de/academy/customizing-your-bar-chart)의 range plot·dot plot 안내(https://www.datawrapper.de/charts/range-plot), Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Magnitude·Deviation 분류의 dumbbell 참고. 직접 제작.

<div class="dk dk-dumb">
<div class="dk-card">
<p class="ttl"><span>집행 전후 인지 지표 변화 · 0~100 지수</span><span class="lg"><span><i class="c-g2"></i>집행 전</span><span><i class="c-g4"></i>집행 후</span></span></p>
<svg width="1088" height="288" viewBox="0 0 1088 288" role="img">
<line x1="200" y1="0" x2="200" y2="264" class="gr"/><text x="200" y="282" text-anchor="middle">0</text><line x1="390" y1="0" x2="390" y2="264" class="gr"/><text x="390" y="282" text-anchor="middle">25</text><line x1="580" y1="0" x2="580" y2="264" class="gr"/><text x="580" y="282" text-anchor="middle">50</text><line x1="770" y1="0" x2="770" y2="264" class="gr"/><text x="770" y="282" text-anchor="middle">75</text><line x1="960" y1="0" x2="960" y2="264" class="gr"/><text x="960" y="282" text-anchor="middle">100</text>
<text x="0" y="27" class="v">브랜드 검색량 지수</text><rect x="488.8" y="19" width="250.8" height="6" class="bw"/><circle cx="488.8" cy="22" r="7" class="g2 rg"/><circle cx="739.6" cy="22" r="8" class="a rg"/><text x="474.8" y="27" text-anchor="end">38</text><text x="753.6" y="27" class="va">71</text><text x="1088" y="27" text-anchor="end" class="va">+33</text>
<text x="0" y="71" class="k">광고 상기도</text><rect x="435.6" y="63" width="159.6" height="6" class="g1"/><circle cx="435.6" cy="66" r="7" class="g2 rg"/><circle cx="595.2" cy="66" r="8" class="g4 rg"/><text x="421.6" y="71" text-anchor="end">31</text><text x="609.2" y="71" class="v">52</text><text x="1088" y="71" text-anchor="end" class="v">+21</text>
<text x="0" y="115" class="k">구매 고려 비율</text><rect x="405.2" y="107" width="129.2" height="6" class="g1"/><circle cx="405.2" cy="110" r="7" class="g2 rg"/><circle cx="534.4" cy="110" r="8" class="g4 rg"/><text x="391.2" y="115" text-anchor="end">27</text><text x="548.4" y="115" class="v">44</text><text x="1088" y="115" text-anchor="end" class="v">+17</text>
<text x="0" y="159" class="k">호감도</text><rect x="542" y="151" width="98.8" height="6" class="g1"/><circle cx="542" cy="154" r="7" class="g2 rg"/><circle cx="640.8" cy="154" r="8" class="g4 rg"/><text x="528" y="159" text-anchor="end">45</text><text x="654.8" y="159" class="v">58</text><text x="1088" y="159" text-anchor="end" class="v">+13</text>
<text x="0" y="203" class="k">추천 의향</text><rect x="473.6" y="195" width="83.6" height="6" class="g1"/><circle cx="473.6" cy="198" r="7" class="g2 rg"/><circle cx="557.2" cy="198" r="8" class="g4 rg"/><text x="459.6" y="203" text-anchor="end">36</text><text x="571.2" y="203" class="v">47</text><text x="1088" y="203" text-anchor="end" class="v">+11</text>
<text x="0" y="247" class="k">재방문율</text><rect x="367.2" y="239" width="60.8" height="6" class="g1"/><circle cx="367.2" cy="242" r="7" class="g2 rg"/><circle cx="428" cy="242" r="8" class="g4 rg"/><text x="353.2" y="247" text-anchor="end">22</text><text x="442" y="247" class="v">30</text><text x="1088" y="247" text-anchor="end" class="v">+8</text>
<text x="1088" y="282" text-anchor="end">증가 폭</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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