Bump Chart

Description

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.

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.

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
• 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-axis (rank): Ordinal scale with rank 1 at the top; typically reversed so higher rank is visually higher
• 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

• 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"
    })
  ]
})