HAHS.
Back to Catalog

Dumbbell Chart

chart

Also known as: lollipop chart, dot plot, connected dot plot, gap chart, Cleveland dot plot

CompareShow change over timeShow deviation CategoricalNumerical Point/Dot

설명 / Description

덤벨 차트(연결 점 도표 또는 클리블랜드 점 도표라고도 함)는 각 범주마다 같은 행에 두 개의 점을 배치하고, 이를 수평 또는 수직선으로 연결합니다. 한 점은 시작 값(또는 기준값)을, 다른 점은 종료 값(또는 비교값)을 나타내어, 연결선의 길이가 두 값의 차이를 직접적으로 시각 인코딩합니다. 그 결과물이 덤벨을 늘어놓은 것처럼 보여 이런 이름이 붙었습니다.

A dumbbell chart (also called a connected dot plot or Cleveland dot plot) places two dots on the same row for each category, connected by a horizontal or vertical line. One dot represents a starting value (or baseline) and the other an ending value (or comparison), making the length of the connecting bar a direct visual encoding of the difference. The result looks like a row of dumbbells, hence the name.

이 차트 유형은 두 관련 측정치 사이의 격차, 변화, 범위를 보여주는 데 뛰어납니다. 흔한 활용 사례로는 전후 비교, 성별 임금 격차, 예산 대비 실제 지출, 전년 대비 변화 등이 있습니다. 시청자가 막대 길이를 머릿속으로 비교하도록 요구하는 대신 차이를 연결선으로 인코딩함으로써, 덤벨 차트는 쌍대 비교를 더 빠르고 정확하게 만듭니다.

This chart type excels at showing gaps, changes, or ranges between two related measurements. Common use cases include before-and-after comparisons, gender pay gaps, budget vs. actual spending, and year-over-year change. By encoding the difference as a connecting line rather than requiring viewers to compare bar lengths mentally, dumbbell charts make paired comparisons faster and more accurate.

덤벨 차트는 쌍 막대 차트보다 훨씬 적은 잉크를 사용하며, 그룹 막대의 지각적 문제(눈이 인접하지 않은 마크 사이를 오가야 하는 문제)를 피할 수 있습니다. 격차 크기순으로 정렬하면, 어떤 범주가 가장 큰 차이와 가장 작은 차이를 보이는지 즉시 드러나, 구체적인 조회와 전반적인 패턴 인식을 모두 지원합니다.

The dumbbell chart uses far less ink than paired bar charts and avoids the perceptual problems of grouped bars (where the eye must jump between non-adjacent marks). When sorted by the size of the gap, the chart immediately reveals which categories have the largest and smallest differences, supporting both specific lookups and overall pattern recognition.

Dumbbell Chart — interactive example

언제 사용하나 / When to Use

  • 범주별로 두 값을 비교할 때(예: 전 vs. 후, 남성 vs. 여성, 예산 vs. 실제)
  • Comparing two values per category (e.g., before vs. after, male vs. female, budget vs. actual)
  • 변화나 격차의 크기와 방향을 강조할 때
  • Emphasizing the magnitude and direction of change or gap
  • 격차 크기순으로 정렬하여 순위화된 차이를 보여줄 때
  • Showing ranked differences when sorted by gap size
  • 더 깔끔하고 정확한 쌍대 비교를 위해 그룹 막대 차트를 대체할 때
  • Replacing grouped bar charts for cleaner, more precise paired comparisons

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

  • 범주별로 두 개 이상의 값을 비교할 때 -- 평행 좌표 플롯이나 여러 선을 사용하는 기울기 차트를 사용하세요
  • When comparing more than two values per category -- use a parallel coordinates plot or slope chart with multiple lines
  • 각 값의 절대 크기를 두드러지게 보여줘야 할 때 -- 대신 그룹 막대 차트를 사용하세요
  • When you need to show the absolute size of each value prominently -- use a grouped bar chart instead
  • 범주가 매우 적어(3개 미만) 차트가 성겨 보일 때 -- 간단한 로 충분할 수 있습니다
  • When there are very few categories (fewer than 3) and the chart would look sparse -- a simple table might suffice
  • 전체의 부분을 비교하는 경우 -- 누적 막대 차트파이 차트를 사용하세요
  • When the comparison involves parts of a whole -- use a stacked bar chart or pie chart

구조 / Anatomy

  • 점(끝점): 범주별로 비교되는 두 값을 표시하는 두 개의 원
  • Dots (endpoints): Two circles per category marking the two values being compared
  • 연결선(바): 두 점 사이를 잇는 선분으로, 격차나 변화를 인코딩합니다
  • Connecting line (bar): A line segment between the two dots encoding the gap or change
  • 범주 축: 각 범주의 레이블로, 보통 수직 축에 위치합니다
  • Category axis: Labels for each category, typically on the vertical axis
  • 값 축: 두 점이 공유하는 수량 스케일
  • Value axis: The quantitative scale shared by both dots
  • 색상 코딩: 점은 보통 두 시리즈를 구분하기 위해 색상으로 코딩됩니다(예: "전"은 파랑, "후"는 빨강)
  • Color coding: Dots are typically color-coded to distinguish the two series (e.g., blue for "before," red for "after")
  • 격차 레이블: 수치 차이를 보여주는 선택적 텍스트 주석
  • Gap labels: Optional text annotations showing the numerical difference

변형 / Variations

  • 롤리팝 차트: 범주별로 하나의 점을 가는 선으로 기준선에 연결하여, 더 가벼운 느낌으로 막대 차트를 대체합니다
  • Lollipop chart: A single dot per category connected to a baseline by a thin line, replacing a bar chart for a lighter look
  • 화살표 덤벨: 연결선 끝에 변화 방향을 가리키는 화살촉이 달립니다
  • Arrow dumbbell: The connecting line ends with an arrowhead pointing in the direction of change
  • 다중 점 덤벨: 한 행에 세 개 이상의 점을 선으로 연결하여 여러 시점이나 지표를 보여줍니다
  • Multi-point dumbbell: Three or more dots per row connected by a line, showing multiple time periods or metrics
  • 발산형 덤벨: 기준값(예: 전국 평균)을 중심으로 하여 격차가 양쪽 방향으로 뻗어나갑니다
  • Diverging dumbbell: Centered on a reference value (e.g., national average), with the gap extending in both directions
  • 정렬된 덤벨: 순위를 드러내기 위해 격차 크기순으로 범주를 정렬합니다
  • Sorted dumbbell: Categories sorted by gap size to reveal rankings

코드 레퍼런스 / Code Reference

// Observable Plot - dumbbell chart
Plot.plot({
  marks: [
    Plot.ruleX(data, {
      x1: "start", x2: "end", y: "category",
      stroke: "#94a3b8", strokeWidth: 2
    }),
    Plot.dot(data, {x: "start", y: "category", fill: "#6366f1", r: 5}),
    Plot.dot(data, {x: "end", y: "category", fill: "#f43f5e", r: 5}),
  ],
  y: {label: null},
  x: {grid: true, label: "Value"}
})