설명 / Description
영역 그래프는 선과 기준선 사이의 영역을 색이나 음영으로 채운 선 그래프입니다. 이 채우기는 시각적 강조점을 선의 궤적(변화율)에서 둘러싸인 영역(누적 크기)으로 옮깁니다. 그 결과 시청자의 시선이 시간에 따른 값의 총량으로 향하게 되어, 영역 그래프는 총량이나 누적된 무게감을 전달하는 데 적합합니다.
An area graph is a line graph with the region between the line and the baseline filled with color or shading. This fill transforms the visual emphasis from the line's trajectory (rate of change) to the enclosed area (cumulative magnitude). The result draws the viewer's attention to the volume of values over time, making area graphs well suited for conveying a sense of total quantity or accumulated weight.
채워진 영역은 둘러싸인 영역에 대한 시각 체계의 민감도를 활용하여, 단순한 선보다 더 강한 시각적 "질량감"을 차트에 부여합니다. 이 때문에 영역 그래프는 "얼마나 빠르게 변했는가"보다 "이만큼 발생했다"는 메시지를 전달하는 데 효과적입니다. 다만 y축이 0에서 시작하지 않으면 채워진 영역이 양에 대한 오해를 불러일으킬 수 있으므로, 영역 그래프는 항상 0을 기준선으로 삼아야 합니다.
The filled area leverages the visual system's sensitivity to enclosed regions, giving the chart a stronger visual "mass" compared to a plain line. This makes area graphs effective for communicating that "this much happened" rather than just "this is how fast it changed." However, the filled area can also create a misleading impression of volume in cases where the y-axis does not start at zero, so area graphs should always have a zero baseline.
단일 계열 영역 그래프는 단순하지만, 이 형식은 시간에 따라 여러 구성 요소가 전체에 어떻게 기여하는지 보여주도록 누적할 때(누적 영역 그래프) 진가를 발휘합니다. 이 구성에서는 전체 높이가 총합을 나타내고, 개별 레이어가 각 구성 요소의 기여도를 보여줍니다.
A single-series area graph is straightforward, but the format truly shines when stacked to show how multiple components contribute to a total over time (stacked area graph). In this configuration, the overall height shows the total, while individual layers show each component's contribution.
언제 사용하나 / When to Use
- 시간에 따른 값의 누적 총량이나 크기를 강조할 때
- Emphasizing the cumulative volume or magnitude of a value over time
- 시간에 따라 전체가 어떤 부분들로 구성되는지 보여줄 때 (누적 영역)
- Showing how a total is composed of parts over time (stacked area)
- 정확한 지점별 값보다 데이터의 "무게감"이나 "질량감"이 더 중요할 때
- When the "weight" or "mass" of the data matters more than precise point values
- 한 계열이 항상 더 큰 두 계열을 비교하며 채워진 영역으로 그 격차를 강조할 때
- Comparing two series where one is consistently larger, using the filled area to highlight the gap
이럴 땐 피하세요 / When NOT to Use
- 개별 시점의 정확한 값 읽기가 중요할 때 -- 선 그래프가 덜 복잡합니다
- When precise value reading at individual time points is important -- a line graph is less cluttered
- 여러 계열이 겹쳐서 서로를 가릴 때 -- 선 그래프나 스몰 멀티플을 사용하세요
- When multiple overlapping series would obscure each other -- use a line graph or small multiples
- 데이터에 의미 있는 0 기준선이 없을 때 -- 채워진 영역이 인식을 왜곡합니다
- When data does not have a meaningful zero baseline -- the filled area distorts perception
- 한 시점의 카테고리를 비교할 때 -- 막대 차트를 사용하세요
- For comparing categories at a single point in time -- use a bar chart
구조 / Anatomy
- 영역 채우기: 데이터 선과 기준선 사이의 음영 영역. 색상, 불투명도, 그라디언트를 커스터마이즈할 수 있습니다.
- Area fill: The shaded region between the data line and the baseline. Color, opacity, and gradient can be customized.
- 경계선: 채워진 영역의 위쪽 가장자리로, 선 그래프의 선 마크와 동일합니다.
- Boundary line: The upper edge of the filled area, identical to a line graph's line mark.
- X축: 연속 차원(보통 시간).
- X-axis: The continuous dimension (usually time).
- Y축: 수량적 측정값. 영역 인코딩이 정직하려면 0에서 시작해야 합니다.
- Y-axis: The quantitative measure. Must start at zero for the area encoding to be honest.
- 기준선: 영역의 아래쪽 가장자리로, 보통 x축(y = 0)입니다.
- Baseline: The bottom edge of the area, typically the x-axis (y = 0).
- 범례: 다중 계열이나 누적 영역 그래프에 필요합니다.
- Legend: Needed for multi-series or stacked area graphs.
- 격자선: 수평선은 채워진 영역 내의 값을 추정하는 데 도움을 줍니다.
- Grid lines: Horizontal lines help estimate values within the filled region.
변형 / Variations
- 누적 영역 그래프: 여러 계열을 겹겹이 쌓아 시간에 따른 부분-전체 구성을 보여줍니다. 총합은 스택의 맨 위입니다.
- Stacked area graph: Multiple series layered on top of each other, showing part-to-whole composition over time. The total is the top of the stack.
- 비율 누적 영역 그래프 (100% 영역): 각 시점을 100%로 정규화하여 시간에 따른 각 구성 요소의 비율 변화를 보여줍니다.
- Percent stacked area graph (100% area): Each time point is normalized to 100%, showing how the proportion of each component changes over time.
- 스트림 그래프: x축을 중심으로 기준선이 변하는 누적 영역 차트로, 유기적으로 흐르는 형태를 만듭니다. 정확한 값 읽기보다 패턴과 심미성을 강조합니다.
- Streamgraph: A stacked area chart with a varying baseline centered around the x-axis, creating an organic, flowing shape. Emphasizes pattern and aesthetics over precise reading.
- 차이 영역 그래프: 두 선 사이의 영역을 어느 선이 더 높은지에 따라 다른 색으로 채워, 한 계열이 다른 계열을 초과하는 구간을 강조합니다.
- Difference area graph: Fills the area between two lines with different colors depending on which line is higher, highlighting periods when one series exceeds the other.
- 스몰 멀티플 영역 그래프: 각 계열마다 별도의 영역 그래프를 그리드로 배치하여 겹치는 영역의 가림 문제를 피합니다.
- Small-multiple area graphs: Separate area graphs for each series arranged in a grid, avoiding the occlusion problem of overlapping areas.
코드 레퍼런스 / Code Reference
// Observable Plot - stacked area chart
Plot.plot({
marks: [
Plot.areaY(data, Plot.stackY({
x: "date",
y: "value",
fill: "category",
tip: true
})),
Plot.ruleY([0])
],
x: { type: "time", label: "Date" },
y: { label: "Value" },
color: { legend: true }
})