Bubble Chart

설명 / Description

버블 차트는 세 번째 수량 변수를 각 원(버블)의 면적에 매핑하여 표준 산점도를 확장합니다. x축과 y축은 일반 산점도와 마찬가지로 두 변수를 인코딩하며, 원의 크기가 세 번째 정보 차원을 더합니다. 선택적으로 네 번째 변수를 버블 색상에, 다섯 번째 변수를 시간에 따른 애니메이션에 매핑할 수 있어, 버블 차트는 단일 뷰 차트 유형 중 가장 데이터 밀도가 높은 축에 속합니다.

A bubble chart extends the standard scatterplot by mapping a third quantitative variable to the area of each circle (bubble). The x-axis and y-axis encode two variables as in a regular scatterplot, while circle size adds a third dimension of information. Optionally, a fourth variable can be mapped to bubble color, and a fifth to animation over time, making bubble charts one of the most data-dense single-view chart types available.

가장 유명한 버블 차트는 한스 로슬링(Hans Rosling)의 갭마인더(Gapminder) 시각화로, 국가별 기대 수명과 소득을 그리고 인구를 버블 크기로, 대륙을 색상으로 인코딩합니다. 이 사례는 이 차트의 가장 큰 강점을 보여줍니다: 청중이 즉시 몰입할 수 있는 단일 뷰 안에서 풍부한 다변량 이야기를 전달할 수 있다는 점입니다.

The most famous bubble chart is Hans Rosling's Gapminder visualization, which plots countries' life expectancy vs. income with population encoded as bubble size and continent as color. This example demonstrates the chart's greatest strength: it can tell a rich, multi-variable story in a single view that audiences can immediately engage with.

버블 차트는 크기 지각과 관련하여 신중한 디자인 결정이 필요합니다. 사람은 본능적으로 면적이 아니라 지름을 비교하는 경향이 있어, 차이를 체계적으로 과소평가하게 됩니다. 이를 보완하려면 버블 크기는 항상 면적에 비례하도록 스케일링해야 하며(반지름이 값의 제곱근에 비례), 크기 범례를 함께 제공해야 합니다. 겹치는 버블도 가독성에 큰 문제가 될 수 있으며, 이를 해결하려면 투명도, 지터링, 또는 인터랙티브 호버 상태가 필요할 수 있습니다.

Bubble charts require careful design decisions around size perception. Humans naturally compare diameters rather than areas, which leads to systematic underestimation of differences. To counteract this, bubble size should always scale by area (radius proportional to the square root of the value), and a size legend should be provided. Overlapping bubbles can also be a significant readability challenge, which may require transparency, jittering, or interactive hover states to address.

Bubble Chart — interactive example

언제 사용하나 / When to Use

두 연속 변수 사이의 관계를 세 번째 변수를 맥락으로(크기) 보여줄 때
Showing the relationship between two continuous variables with a third variable as context (size)
여러 차원에서 동시에 대상을 비교할 때(예: GDP, 인구, 기대 수명별 국가 비교)
Comparing entities across multiple dimensions simultaneously (e.g., countries by GDP, population, and life expectancy)
여러 차원에서 동시에 극단적인 이상치를 강조할 때
Highlighting outliers that are extreme in multiple dimensions at once
발표를 위한 몰입감 있는 서사 중심 시각화를 만들 때
Creating engaging, narrative-driven visualizations for presentations

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

정밀한 크기 비교가 중요할 때 -- 면적 지각은 부정확하므로, 정확한 비교에는 막대 차트를 사용하세요
When precise size comparison is important -- area perception is imprecise; use a bar chart for exact comparisons
수백 개의 데이터 포인트가 심하게 겹칠 때 -- 색상 인코딩을 사용한 산점도나 히트맵을 고려하세요
When you have hundreds of data points that would overlap heavily -- consider a scatterplot with color encoding or a heatmap
세 번째 변수의 분산이 매우 낮을 때 -- 모든 버블이 같은 크기로 보여 정보를 더하지 못하므로, 일반 산점도를 사용하세요
When the third variable has very low variance -- all bubbles will appear the same size, adding no information; use a regular scatterplot
두 축이 연속 값이 아닌 범주로 정의될 때 -- 히트맵이나 그룹 막대 차트를 사용하세요
When categories rather than continuous values define both axes -- use a heatmap or grouped bar chart

구조 / Anatomy

버블(원): 각 데이터 포인트는 x, y 값에 따라 위치한 원이며, 면적은 세 번째 변수에 비례합니다
Bubbles (circles): Each data point is a circle positioned by x and y values, with area proportional to a third variable
X축: 첫 번째 연속 변수를 인코딩합니다(수평 위치)
X-axis: Encodes the first continuous variable (horizontal position)
Y축: 두 번째 연속 변수를 인코딩합니다(수직 위치)
Y-axis: Encodes the second continuous variable (vertical position)
크기 스케일: 세 번째 변수를 원의 면적에 매핑합니다; 크기 범례가 대표 값을 보여줍니다
Size scale: Maps the third variable to circle area; a size legend shows representative values
색상 인코딩: 선택적으로 네 번째 변수(범주형 또는 연속형)를 버블 채우기 색상에 매핑합니다
Color encoding: Optionally maps a fourth variable (categorical or continuous) to bubble fill color
레이블: 개별 버블을 식별하기 위한 직접 레이블 또는 호버 시 툴팁
Labels: Direct labels or tooltip-on-hover for identifying individual bubbles

변형 / Variations

패킹 버블 차트: x/y 축을 완전히 제거합니다; 버블은 포스 시뮬레이션을 사용해 서로 채워 넣어지며, 크기와 색상만 인코딩합니다
Packed bubble chart: Removes the x/y axes entirely; bubbles are packed together using force simulation, encoding only size and color
버블 맵: 버블을 지리적 좌표에 배치하여 버블 차트와 지도 레이어를 결합합니다
Bubble map: Bubbles are placed on geographic coordinates, combining the bubble chart with a map layer
애니메이션 버블 차트: 시간이 애니메이션으로 인코딩되어, 타임라인이 재생됨에 따라 버블이 평면 위를 움직입니다(갭마인더 스타일)
Animated bubble chart: Time is encoded as animation, with bubbles moving across the plane as a timeline plays (Gapminder style)
연결 버블 차트: 선이 여러 시점에 걸친 동일 개체의 위치를 연결하여 궤적을 보여줍니다
Connected bubble chart: Lines connect the same entity's positions across time steps, showing trajectories
세미 버블 차트: 크기와 하나의 축 변수만 사용하며, 다른 축은 범주형 그룹화에 사용됩니다
Semi-bubble chart: Only size and one axis variable are used, with the other axis used for categorical grouping

코드 레퍼런스 / Code Reference

// Observable Plot bubble chart
import * as Plot from "@observablehq/plot";

Plot.plot({
  grid: true,
  r: {range: [2, 30], label: "Population"},
  color: {legend: true},
  marks: [
    Plot.dot(countries, {
      x: "gdp_per_capita",
      y: "life_expectancy",
      r: "population",
      fill: "continent",
      fillOpacity: 0.7,
      stroke: "white",
      strokeWidth: 0.5,
      title: d => `${d.name}\nGDP: $${d.gdp_per_capita}\nLife exp: ${d.life_expectancy}`
    })
  ]
})