순위 변동 범프 차트(주차별 순위)

값의 크기가 아니라 순위가 어떻게 뒤바뀌었는지 보여 주는 장면. 키워드 순위 리포트, 카테고리 내 브랜드 순위. 대상 4~6개, 시점 6~8개. 우리 선만 강조색, 원 안에 순위 숫자. 값 바꾸는 법: 점 x = 170 + 107 × 주 순번, y = 44 + (순위 − 1) × 52. 대상마다 polyline 하나와 주마다 원(r 13) + 순위 숫자. 우리 계열은 polyline class "ln hot bp", 원 class "nd h", 숫자 class on, 마지막에 그려 다른 선 위에 놓음. 왼쪽 이름은 첫 주 순위 높이, 오른쪽 이름은 마지막 주 순위 높이. 대상이 6개면 세로 간격 52를 44로.

Domo 범프 차트 안내(https://www.domo.com/learn/charts/bump-charts)의 "순위 축을 뒤집어 1위를 위에", 대상 10개 이하 권장과 미국 CDC 시각화 안내(https://www.cdc.gov/cove/data-visualization-types/bump-chart.html), Financial Times Visual Vocabulary(https://github.com/Financial-Times/chart-doctor/tree/main/visual-vocabulary) Ranking 분류 참고. 원 안에 순위를 적어 축 눈금을 없앤 구성은 직접 제작.

<div class="dk dk-bump">
<div class="dk-card">
<p class="ttl"><span>대표 키워드 검색 결과 노출 순위 · 주차별 · 5개 브랜드</span></p>
<svg width="1088" height="274" viewBox="0 0 1088 274" role="img">
<text x="170" y="14" text-anchor="middle">1주</text>
<text x="277" y="14" text-anchor="middle">2주</text>
<text x="384" y="14" text-anchor="middle">3주</text>
<text x="491" y="14" text-anchor="middle">4주</text>
<text x="598" y="14" text-anchor="middle">5주</text>
<text x="705" y="14" text-anchor="middle">6주</text>
<text x="812" y="14" text-anchor="middle">7주</text>
<text x="919" y="14" text-anchor="middle">8주</text>
<polyline points="170,44 277,44 384,44 491,44 598,96 705,44 812,96 919,96" class="ln sub bp"/>
<polyline points="170,96 277,96 384,96 491,96 598,44 705,148 812,148 919,148" class="ln sub bp"/>
<polyline points="170,148 277,200 384,148 491,200 598,200 705,200 812,200 919,252" class="ln sub bp"/>
<polyline points="170,200 277,148 384,252 491,252 598,252 705,252 812,252 919,200" class="ln sub bp"/>
<polyline points="170,252 277,252 384,200 491,148 598,148 705,96 812,44 919,44" class="ln hot bp"/>
<circle cx="170" cy="44" r="13" class="nd"/>
<text x="170" y="48.5" text-anchor="middle" class="k">1</text>
<circle cx="277" cy="44" r="13" class="nd"/>
<text x="277" y="48.5" text-anchor="middle" class="k">1</text>
<circle cx="384" cy="44" r="13" class="nd"/>
<text x="384" y="48.5" text-anchor="middle" class="k">1</text>
<circle cx="491" cy="44" r="13" class="nd"/>
<text x="491" y="48.5" text-anchor="middle" class="k">1</text>
<circle cx="598" cy="96" r="13" class="nd"/>
<text x="598" y="100.5" text-anchor="middle" class="k">2</text>
<circle cx="705" cy="44" r="13" class="nd"/>
<text x="705" y="48.5" text-anchor="middle" class="k">1</text>
<circle cx="812" cy="96" r="13" class="nd"/>
<text x="812" y="100.5" text-anchor="middle" class="k">2</text>
<circle cx="919" cy="96" r="13" class="nd"/>
<text x="919" y="100.5" text-anchor="middle" class="k">2</text>
<text x="146" y="49" text-anchor="end" class="k">경쟁 A</text>
<text x="943" y="101" class="k">경쟁 A</text>
<circle cx="170" cy="96" r="13" class="nd"/>
<text x="170" y="100.5" text-anchor="middle" class="k">2</text>
<circle cx="277" cy="96" r="13" class="nd"/>
<text x="277" y="100.5" text-anchor="middle" class="k">2</text>
<circle cx="384" cy="96" r="13" class="nd"/>
<text x="384" y="100.5" text-anchor="middle" class="k">2</text>
<circle cx="491" cy="96" r="13" class="nd"/>
<text x="491" y="100.5" text-anchor="middle" class="k">2</text>
<circle cx="598" cy="44" r="13" class="nd"/>
<text x="598" y="48.5" text-anchor="middle" class="k">1</text>
<circle cx="705" cy="148" r="13" class="nd"/>
<text x="705" y="152.5" text-anchor="middle" class="k">3</text>
<circle cx="812" cy="148" r="13" class="nd"/>
<text x="812" y="152.5" text-anchor="middle" class="k">3</text>
<circle cx="919" cy="148" r="13" class="nd"/>
<text x="919" y="152.5" text-anchor="middle" class="k">3</text>
<text x="146" y="101" text-anchor="end" class="k">경쟁 B</text>
<text x="943" y="153" class="k">경쟁 B</text>
<circle cx="170" cy="148" r="13" class="nd"/>
<text x="170" y="152.5" text-anchor="middle" class="k">3</text>
<circle cx="277" cy="200" r="13" class="nd"/>
<text x="277" y="204.5" text-anchor="middle" class="k">4</text>
<circle cx="384" cy="148" r="13" class="nd"/>
<text x="384" y="152.5" text-anchor="middle" class="k">3</text>
<circle cx="491" cy="200" r="13" class="nd"/>
<text x="491" y="204.5" text-anchor="middle" class="k">4</text>
<circle cx="598" cy="200" r="13" class="nd"/>
<text x="598" y="204.5" text-anchor="middle" class="k">4</text>
<circle cx="705" cy="200" r="13" class="nd"/>
<text x="705" y="204.5" text-anchor="middle" class="k">4</text>
<circle cx="812" cy="200" r="13" class="nd"/>
<text x="812" y="204.5" text-anchor="middle" class="k">4</text>
<circle cx="919" cy="252" r="13" class="nd"/>
<text x="919" y="256.5" text-anchor="middle" class="k">5</text>
<text x="146" y="153" text-anchor="end" class="k">경쟁 C</text>
<text x="943" y="257" class="k">경쟁 C</text>
<circle cx="170" cy="200" r="13" class="nd"/>
<text x="170" y="204.5" text-anchor="middle" class="k">4</text>
<circle cx="277" cy="148" r="13" class="nd"/>
<text x="277" y="152.5" text-anchor="middle" class="k">3</text>
<circle cx="384" cy="252" r="13" class="nd"/>
<text x="384" y="256.5" text-anchor="middle" class="k">5</text>
<circle cx="491" cy="252" r="13" class="nd"/>
<text x="491" y="256.5" text-anchor="middle" class="k">5</text>
<circle cx="598" cy="252" r="13" class="nd"/>
<text x="598" y="256.5" text-anchor="middle" class="k">5</text>
<circle cx="705" cy="252" r="13" class="nd"/>
<text x="705" y="256.5" text-anchor="middle" class="k">5</text>
<circle cx="812" cy="252" r="13" class="nd"/>
<text x="812" y="256.5" text-anchor="middle" class="k">5</text>
<circle cx="919" cy="200" r="13" class="nd"/>
<text x="919" y="204.5" text-anchor="middle" class="k">4</text>
<text x="146" y="205" text-anchor="end" class="k">경쟁 D</text>
<text x="943" y="205" class="k">경쟁 D</text>
<circle cx="170" cy="252" r="13" class="nd h"/>
<text x="170" y="256.5" text-anchor="middle" class="on">5</text>
<circle cx="277" cy="252" r="13" class="nd h"/>
<text x="277" y="256.5" text-anchor="middle" class="on">5</text>
<circle cx="384" cy="200" r="13" class="nd h"/>
<text x="384" y="204.5" text-anchor="middle" class="on">4</text>
<circle cx="491" cy="148" r="13" class="nd h"/>
<text x="491" y="152.5" text-anchor="middle" class="on">3</text>
<circle cx="598" cy="148" r="13" class="nd h"/>
<text x="598" y="152.5" text-anchor="middle" class="on">3</text>
<circle cx="705" cy="96" r="13" class="nd h"/>
<text x="705" y="100.5" text-anchor="middle" class="on">2</text>
<circle cx="812" cy="44" r="13" class="nd h"/>
<text x="812" y="48.5" text-anchor="middle" class="on">1</text>
<circle cx="919" cy="44" r="13" class="nd h"/>
<text x="919" y="48.5" text-anchor="middle" class="on">1</text>
<text x="146" y="257" text-anchor="end" class="va">우리 브랜드</text>
<text x="943" y="49" class="va md">우리 브랜드</text>
<text x="943" y="69" class="va">5위 → 1위</text>
</svg>
<p class="note">예시 수치는 가상 값 · 실제 집계 값과 출처, 집계 기간으로 교체</p>
</div>
</div>

.dk-bump .dk-card{padding:22px 32px 20px}
.dk-bump .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-bump .lg{display:flex;gap:var(--s4);font-weight:400}
.dk-bump .lg span{display:flex;align-items:center;gap:6px}
.dk-bump .lg i{display:block;width:12px;height:12px;border-radius:3px}
.dk-bump .lg i.c-a{background:var(--ac)}
.dk-bump .lg i.c-w{background:var(--acw)}
.dk-bump .lg i.c-s{background:var(--soft)}
.dk-bump .lg i.c-g1{background:var(--g1)}
.dk-bump .lg i.c-g2{background:var(--g2)}
.dk-bump .lg i.c-g3{background:var(--g3)}
.dk-bump .lg i.c-g4{background:var(--g4)}
.dk-bump .lg i.c-o{background:none;border:2px solid var(--ac)}
.dk-bump .lg i.c-e{background:var(--soft);border:1px dashed var(--g3)}
.dk-bump .lg i.c-t{width:14px;height:3px;border-radius:0;background:var(--ink)}
.dk-bump .note{font-size:var(--f-cap);color:var(--mu);margin:var(--s3) 0 0}
.dk-bump svg{display:block}
.dk-bump svg text{font-family:inherit;font-size:13px;fill:var(--mu);font-variant-numeric:tabular-nums}
.dk-bump svg .a{fill:var(--ac)}
.dk-bump svg .aw{fill:var(--acw)}
.dk-bump svg .sf{fill:var(--soft)}
.dk-bump svg .g1{fill:var(--g1)}
.dk-bump svg .g2{fill:var(--g2)}
.dk-bump svg .g3{fill:var(--g3)}
.dk-bump svg .g4{fill:var(--g4)}
.dk-bump svg .ax{stroke:var(--line2);stroke-width:1;fill:none}
.dk-bump svg .gr{stroke:var(--line);stroke-width:1;fill:none}
.dk-bump svg .tg{stroke:var(--g3);stroke-width:1;stroke-dasharray:4 4;fill:none}
.dk-bump svg text.k{fill:var(--ink2)}
.dk-bump svg text.v{fill:var(--ink);font-weight:600}
.dk-bump svg text.va{fill:var(--ac);font-weight:700}
.dk-bump svg text.on{fill:var(--card);font-weight:600}
.dk-bump svg text.big{font-size:24px;font-weight:700}
.dk-bump svg text.md{font-size:16px}
.dk-bump svg .ln{fill:none;stroke:var(--g4);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dk-bump svg .ln.hot{stroke:var(--ac)}
.dk-bump svg .ln.sub{stroke:var(--g2);stroke-width:2}
.dk-bump svg .dot{fill:var(--ac);stroke:var(--card);stroke-width:2}
.dk-bump svg .dot.m{fill:var(--g4)}
.dk-bump svg .dot.s{fill:var(--g2)}
.dk-bump svg .ol{fill:none;stroke:var(--ac);stroke-width:2.5}
.dk-bump svg .al{stroke:var(--ac);stroke-width:1.5;fill:none}
.dk-bump svg .bp{stroke-width:3}
.dk-bump svg .bp.hot{stroke-width:4}
.dk-bump svg .nd{fill:var(--g1);stroke:var(--card);stroke-width:2}
.dk-bump svg .nd.h{fill:var(--ac)}