Bump Chart

설명 / Description

범프 차트는 각 시점마다 개체의 순위(서수적 위치)를 표시하고 이를 선으로 연결하여 시간에 따른 순위 변화를 추적합니다. Y축은 순위를 나타내며(보통 1위가 맨 위), X축은 시간 구간을 나타내고, 각 선은 한 개체가 순위표를 거쳐가는 궤적을 그립니다. 선이 교차하면 상대적 순위의 변화 — 이 차트의 핵심 시각적 신호인 추월 사건 — 을 나타냅니다.

A bump chart tracks rankings over time by plotting each entity's ordinal position (rank) at each time step and connecting the positions with lines. The y-axis represents rank (typically with rank 1 at the top), the x-axis represents time periods, and each line traces one entity's trajectory through the rankings. When lines cross, it signals a change in relative position -- an overtaking event that is the chart's primary visual signal.

절대값을 보여주는 일반 선 차트와 달리, 범프 차트는 경쟁적 역학 — 누가 앞서고, 누가 뒤처지고, 언제 선두가 바뀌는지 — 을 강조합니다. 그래서 스포츠 순위표, 시장 점유율 순위, 음악 차트 순위, 대학 순위 등 절대적 크기보다 상대적 순서가 더 중요한 모든 영역에 적합합니다.

Unlike standard line charts that show absolute values, bump charts emphasize competitive dynamics: who is ahead, who is falling behind, and when lead changes occur. This makes them ideal for sports standings, market share rankings, music chart positions, university rankings, and any domain where the relative ordering matters more than the absolute magnitudes.

이 차트는 개체 수(5~15개)와 시간 구간(4~20개)이 적당할 때 가장 잘 작동합니다. 선이 너무 많으면 교차가 뒤엉켜 개별 궤적을 따라가기 어려워집니다. 색상은 개체를 구별하는 데 필수적이며, 각 선의 시작과 끝에 붙는 레이블은 별도의 범례 없이도 궤적을 식별하는 데 도움을 줍니다. 인터랙티브 하이라이팅(호버한 선을 제외한 나머지를 흐리게 처리)은 더 밀도 높은 차트의 가독성을 크게 개선합니다.

The chart works best with a moderate number of entities (5-15) and time periods (4-20). With too many lines, crossings become tangled and individual trajectories hard to follow. Color is essential for distinguishing entities, and labels at the start and end of each line help identify trajectories without requiring a separate legend. Interactive highlighting (dimming all lines except the hovered one) dramatically improves readability for denser charts.

Bump Chart — interactive example

언제 사용하나 / When to Use

시간 구간에 걸쳐 순위가 어떻게 변하는지 추적할 때(예: 스포츠 리그 순위표, 시장 점유율 순위)
Tracking how rankings change across time periods (e.g., sports league tables, market share positions)
추월 사건이 핵심 이야기인 경쟁적 역학을 보여줄 때
Showing competitive dynamics where overtaking events are the key story
절대값보다 상대적 위치가 더 중요할 때 서수적 위치를 비교할 때
Comparing ordinal positions when absolute values are less important than relative standing
정해진 기간 동안 순위의 안정성이나 변동성을 강조할 때
Highlighting stability or volatility in rankings over a defined period

이럴 땐 피하세요 / When NOT to Use

순위보다 절대값이 더 중요할 때 -- 선 그래프를 사용하세요
When absolute values matter more than rankings -- use a line graph
개체가 너무 많을 때(15개 초과) -- 선이 뒤엉키므로 상위 N개로 필터링하거나 스몰 멀티플을 사용하세요
When there are too many entities (>15) -- lines become tangled; filter to top-N or use small multiples
시간 구간이 단 두 개뿐일 때 -- 더 깔끔한 비교를 위해 기울기 차트를 사용하세요
When there are only two time periods -- use a slope chart for a cleaner comparison
순위가 거의 바뀌지 않을 때 -- 차트가 대부분 평평한 평행선만 보여주어 인사이트가 적으므로 표를 고려하세요
When ranks change rarely -- the chart will show mostly flat parallel lines with little insight; consider a table
동점이 흔할 때 -- 범프 차트는 뚜렷한 순위를 필요로 하므로 동점 위치는 모호한 선 교차를 만듭니다
When ties are common -- bump charts require distinct ranks; tied positions create ambiguous line crossings

구조 / Anatomy

순위 선: 개체마다 하나의 선이 시간 구간에 걸친 순위 위치를 연결합니다; 선 교차는 추월을 나타냅니다
Rank lines: One line per entity, connecting its rank positions across time periods; line crossings show overtaking
점: 시간-순위 교차점마다 있는 원으로, 선을 고정하고 호버 대상을 제공합니다
Dots: Circles at each time-rank intersection to anchor the line and provide hover targets
Y축(순위): 1위가 맨 위에 오는 서수 척도; 보통 역순으로 배치하여 높은 순위가 시각적으로도 위에 오게 합니다
Y-axis (rank): Ordinal scale with rank 1 at the top; typically reversed so higher rank is visually higher
X축(시간): 균등한 간격으로 배치된 이산적 시간 구간
X-axis (time): Discrete time periods evenly spaced
색상: 각 개체에 고유한 색상을 부여하여 추적을 쉽게 합니다
Color: Each entity gets a distinct color for traceability
레이블: 별도의 범례 없이도 알아볼 수 있도록 각 선의 시작과/또는 끝에 표시되는 개체명
Labels: Entity names at the start and/or end of each line to avoid a separate legend
교차점: 두 선이 교차하는 지점으로 순위 교체를 나타내며, 이 차트의 핵심적인 시각적 사건입니다
Crossings: Where two lines intersect, indicating a rank swap -- the central visual event of the chart

변형 / Variations

부드러운 범프 차트: 흐르는 듯한 S자형 전환을 위해 monotone 또는 bump-x 곡선 보간을 사용하는 선
Smooth bump chart: Lines use a monotone or bump-x curve interpolation for flowing, S-shaped transitions
값 레이블이 있는 범프 차트: 각 점에 순위 번호를 주석으로 표시
Bump chart with value labels: Rank position numbers annotated at each dot
강조가 있는 범프 차트: 하나의 개체만 굵고 색이 있게, 나머지는 흐리게 처리하여 이야기의 초점을 맞춤
Bump chart with highlights: One entity is bold and colored while others are muted, focusing the narrative
애니메이션 범프 차트: 전환이 순차적으로 재생되어 한 구간씩 순위 변화를 드러냄
Animated bump chart: Transitions play sequentially, revealing rank changes one period at a time
스파크라인이 있는 범프 차트: 각 개체명 옆에 추가 맥락을 제공하는 작은 값 선 차트
Bump chart with sparklines: Tiny value line charts alongside each entity's name for additional context

코드 레퍼런스 / Code Reference

// Observable Plot - bump chart with smooth curves
Plot.plot({
  y: {reverse: true, label: "Rank", domain: [1, N]},
  color: {legend: true},
  marks: [
    Plot.line(data, {
      x: "period", y: "rank",
      stroke: "team", strokeWidth: 3,
      curve: "bump-x"
    }),
    Plot.dot(data, {
      x: "period", y: "rank",
      fill: "team", r: 5
    }),
    Plot.text(data, {
      filter: d => d.period === lastPeriod,
      x: "period", y: "rank",
      text: "team", dx: 10, textAnchor: "start"
    })
  ]
})