슬로프(두 시점 사이 변화)

두 시점 사이에 여러 대상의 값과 순위가 어떻게 바뀌었는지. 기울기가 곧 변화의 크기. 대상 3~6개, 주인공 한 줄만 강조색. 같은 쪽에서 값 차이가 4 미만인 대상이 있으면 글자가 겹치므로 덤벨을 사용. 값 바꾸는 법: 점 y = 286 − (값 − 축 최솟값 24) ÷ 38 × 240(값 범위에 맞게 최솟값 24 와 폭 38 을 교체, 가장 큰 값의 y 가 30 이상이 되게). 왼쪽 점 x = 340, 오른쪽 점 x = 748 고정. 왼쪽 글자는 "이름 값" 순서로 오른쪽 정렬, 오른쪽 글자는 "값 이름" 순서. 강조 줄은 line class="sl hot", 점 class="a", 끝에 증감(+24). 강조 줄을 svg 안에서 맨 뒤에 적어 다른 선 위에 그려지게 함.

Storytelling with Data(https://www.storytellingwithdata.com)의 slopegraph 안내(https://www.storytellingwithdata.com/blog/2020/7/27/what-is-a-slopegraph): 양 끝에 이름과 값을 직접 적고 한 줄만 색. Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Change over Time 분류의 slope. 직접 제작.

<div class="dk dk-slope">
<div class="dk-card">
<p class="ttl"><span>브랜드별 구매 고려 비율 · 단위 %</span></p>
<svg width="1088" height="300" viewBox="0 0 1088 300" role="img">
<text x="340" y="14" text-anchor="middle" class="k">1분기(집행 전)</text><text x="748" y="14" text-anchor="middle" class="k">3분기(집행 후)</text>
<line x1="340" y1="28" x2="340" y2="296" class="gr"/><line x1="748" y1="28" x2="748" y2="296" class="gr"/>
<line x1="340" y1="109.2" x2="748" y2="121.8" class="sl"/><circle cx="340" cy="109.2" r="5" class="g3"/><circle cx="748" cy="121.8" r="5" class="g3"/><text x="324" y="114.2" text-anchor="end" class="k">경쟁 A  <tspan class="nv" dx="8">52</tspan></text><text x="764" y="126.8" class="k"><tspan class="nv">50</tspan><tspan dx="10">경쟁 A</tspan></text>
<line x1="340" y1="147.1" x2="748" y2="178.6" class="sl"/><circle cx="340" cy="147.1" r="5" class="g3"/><circle cx="748" cy="178.6" r="5" class="g3"/><text x="324" y="152.1" text-anchor="end" class="k">경쟁 B  <tspan class="nv" dx="8">46</tspan></text><text x="764" y="183.6" class="k"><tspan class="nv">41</tspan><tspan dx="10">경쟁 B</tspan></text>
<line x1="340" y1="184.9" x2="748" y2="153.4" class="sl"/><circle cx="340" cy="184.9" r="5" class="g3"/><circle cx="748" cy="153.4" r="5" class="g3"/><text x="324" y="189.9" text-anchor="end" class="k">업종 평균  <tspan class="nv" dx="8">40</tspan></text><text x="764" y="158.4" class="k"><tspan class="nv">45</tspan><tspan dx="10">업종 평균</tspan></text>
<line x1="340" y1="260.7" x2="748" y2="229.2" class="sl"/><circle cx="340" cy="260.7" r="5" class="g3"/><circle cx="748" cy="229.2" r="5" class="g3"/><text x="324" y="265.7" text-anchor="end" class="k">경쟁 C  <tspan class="nv" dx="8">28</tspan></text><text x="764" y="234.2" class="k"><tspan class="nv">33</tspan><tspan dx="10">경쟁 C</tspan></text>
<line x1="340" y1="222.8" x2="748" y2="71.3" class="sl hot"/><circle cx="340" cy="222.8" r="6" class="a"/><circle cx="748" cy="71.3" r="6" class="a"/><text x="324" y="227.8" text-anchor="end" class="v">우리 브랜드  <tspan class="hv" dx="8">34</tspan></text><text x="764" y="76.3" class="v"><tspan class="hv">58</tspan><tspan dx="10">우리 브랜드</tspan><tspan dx="12" class="hv">+24</tspan></text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

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