Slope Chart

설명 / Description

에드워드 터프티(Edward Tufte)가 "슬로프그래프"로 널리 알린 기울기 차트는 정확히 두 조건 또는 두 시점 사이에서 여러 개체의 값을 비교합니다. 두 개의 평행한 수직 축이 두 상태를 나타내고, 각 개체에 대한 하나의 선이 왼쪽 축의 값과 오른쪽 축의 값을 연결합니다. 각 선의 기울기는 변화의 방향과 크기를 인코딩합니다: 상승하는 선은 증가를, 하강하는 선은 감소를 나타내며, 기울기가 가파를수록 더 큰 변화를 의미합니다.

A slope chart, popularized by Edward Tufte as the "slopegraph," compares values for multiple entities between exactly two conditions or time points. Two parallel vertical axes represent the two states, and a line for each entity connects its value on the left axis to its value on the right axis. The slope of each line encodes the direction and magnitude of change: rising lines indicate increases, falling lines indicate decreases, and steeper slopes indicate larger changes.

기울기 차트의 가장 큰 강점은 단순함입니다. 단 두 개의 기준점과 연결선만으로도 각 시점의 값, 그 사이의 변화, 각 시점의 순위를 동시에 보여줍니다. 선이 교차하면 순위 역전이 일어났다는 것도 함께 드러납니다. 최소한의 디자인에서 나오는 이러한 다층적인 읽기 방식 덕분에 기울기 차트는 정보 밀도가 높으면서도 읽기 쉬운 차트 유형 중 하나가 됩니다.

The simplicity of the slope chart is its greatest strength. With only two reference points and a set of connecting lines, the chart simultaneously shows the value at each time point, the change between them, and the ranking at each time point. When lines cross, the chart also reveals that a rank reversal occurred. This multi-layered reading from a minimal design makes slope charts one of the most information-dense yet easy-to-read chart types.

기울기 차트는 개체가 5~15개일 때 가장 효과적입니다. 그보다 적으면 단순한 표로도 충분할 수 있고, 그보다 많으면 선들이 뒤엉킨 그물이 되어버립니다. 범례 대신 각 개체를 끝점에 직접 레이블링하는 것이 가독성에 필수적입니다. 선들이 너무 가까이 붙어 있을 때는 약간의 수직 지터링이나 선택적 하이라이팅으로 겹치는 궤적을 구별할 수 있습니다.

Slope charts are most effective with 5-15 entities. With fewer, a simple table might suffice; with more, the lines become a tangled web. Labeling each entity directly at the endpoints (rather than using a legend) is essential for readability. When lines are too close together, slight vertical jittering or selective highlighting can disambiguate overlapping trajectories.

언제 사용하나 / When to Use

• 정확히 두 시점 사이의 값을 비교할 때(예: 개입 전 대 후)
• Comparing values between exactly two time periods (e.g., before vs. after an intervention)
• 어떤 개체가 개선되었는지, 악화되었는지, 안정적으로 유지되었는지 보여줄 때
• Showing which entities improved, declined, or remained stable
• 두 시점 사이의 순위 역전을 강조할 때
• Highlighting rank reversals between two points in time
• 그룹형 막대 차트를 대체하여 두 기간 비교를 더 간결하고 읽기 쉽게 만들 때
• Replacing a grouped bar chart for a more compact and readable two-period comparison

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

• 두 개보다 많은 시간 기간이 있을 때 -- 선 그래프나 범프 차트를 사용하세요
• When there are more than two time periods -- use a line graph or bump chart
• 개체가 너무 많을 때(15개 초과) -- 선이 과도하게 겹칩니다. 필터링하거나 스몰 멀티플을 사용하세요
• When there are too many entities (>15) -- lines overlap excessively; filter or use small multiples
• 절대값보다 비례적 변화가 덜 중요할 때 -- 퍼센트 레이블이 있는 덤벨 차트를 사용하세요
• When absolute values are less important than proportional change -- use a dumbbell chart with percentage labels
• 두 조건이 자연스러운 순서가 없을 때 -- 왼쪽에서 오른쪽으로의 흐름은 시간적 또는 논리적 순서를 암시합니다
• When the two conditions are not naturally ordered -- the left-to-right flow implies temporal or logical order
• 개체를 범주별로 그룹화해야 할 때 -- 그룹형 막대 차트를 사용하세요
• When entities need to be grouped by category -- use a grouped bar chart

구조 / Anatomy

• 왼쪽 축: 첫 번째 시점 또는 조건의 값과 개체 레이블
• Left axis: Values at the first time point or condition, with entity labels
• 오른쪽 축: 두 번째 시점 또는 조건의 값과 개체 레이블
• Right axis: Values at the second time point or condition, with entity labels
• 기울기 선: 개체마다 두 값을 연결하는 하나의 선. 기울기가 변화의 방향과 크기를 인코딩합니다
• Slope lines: One line per entity connecting its two values; slope encodes direction and magnitude of change
• 끝점 점: 각 축에서 정확한 값을 표시하는 원
• Endpoint dots: Circles at each axis marking the exact value
• 직접 레이블: 즉시 식별할 수 있도록 왼쪽 및/또는 오른쪽 끝점에 배치된 개체 이름
• Direct labels: Entity names placed at the left and/or right endpoints for immediate identification
• 색상: 각 개체가 고유한 색을 가질 수도 있고, 색상이 방향(증가 대 감소)을 인코딩할 수도 있습니다
• Color: Each entity may receive a distinct color, or color can encode direction (increasing vs. decreasing)

변형 / Variations

• 순위 기울기 차트: y축이 값 대신 순위를 보여주며, 순서상의 변화에 초점을 맞춥니다
• Rank slope chart: Y-axis shows rank instead of value, focusing on ordinal changes
• 그룹형 기울기 차트: 범주별로 스몰 멀티플로 배열된 여러 개의 기울기 차트
• Grouped slope chart: Multiple slope charts arranged in small multiples by category
• 하이라이트 기울기 차트: 한두 개체는 굵고 색이 있게, 나머지는 회색으로 표시하여 이야기의 초점을 맞춥니다
• Highlighted slope chart: One or two entities are bold and colored while others are gray, focusing the narrative
• 주석 기울기 차트: 핵심 선에 퍼센트 또는 절대 변화량이 주석으로 표시됩니다
• Annotated slope chart: Key lines are annotated with the percentage or absolute change
• 다중 지점 기울기 차트: 3~4개 지점으로 확장되어 선 그래프에 가까워집니다(명료함이 다소 감소)
• Multi-point slope chart: Extended to 3-4 points, transitioning toward a line graph (loses some clarity)

코드 레퍼런스 / Code Reference

// Observable Plot - slope chart between two periods
Plot.plot({
  x: {domain: ["2020", "2024"], padding: 0.4, label: null},
  y: {grid: true, label: "Revenue ($M)"},
  marks: [
    Plot.line(data, {x: "year", y: "value", stroke: "company", strokeWidth: 2}),
    Plot.dot(data, {x: "year", y: "value", fill: "company", r: 5}),
    Plot.text(data, {
      filter: d => d.year === "2024",
      x: "year", y: "value",
      text: "company", dx: 8, textAnchor: "start"
    })
  ]
})