Area Chart
When to Use
Area chart에서는 선으로 표현된 데이터의 영역을 채워 표현합니다. 시간에 따른 누적 변화나 비율의 상대적 크기를 시각적으로 강조합니다. Line chart와 마찬가지로 주로 시간이 지나면서 데이터가 어떻게 변했는지에 대한 추이를 보여주기 위해 사용됩니다.
Anatomy
- Title
- Legend (optional)
- Axis title (optional)
- Y-axis
- X-axis
- Area
- Data circle (optional)
- Line
- Grid line (optional)
Content
Structure
Area chart는 시계열 또는 연속형 데이터를 시각화하여, 시간 또는 연속 값에 따른 변화를 명확히 보여줍니다. x축은 시간 또는 연속형 값, y축은 측정 값을 표시하며, 하나 이상의 데이터 시리즈가 선 형태로 표현됩니다.
여러 데이터 시리즈가 겹칠 때는 공통 y축을 우선 적용하고, 서로 다른 단위를 가진 경우에만 dual axis를 사용합니다.
Data Circle
Area chart에서는 line chart와 마찬가지로 각 데이터 포인트를 data circle로 표현할 수 있습니다.
Data circle은 각 데이터 포인트의 실제 값을 시각적으로 표시하여, 데이터의 정확한 위치를 명확히 인식하도록 돕습니다. 또한 호버 인터랙션에서 피드백 포인트로 작동하며, 시리즈 간 구분과 데이터 밀도를 보조적으로 표현합니다.
시각적 복잡도를 방지하기 위해 데이터 밀도가 너무 높은 경우에는 data circle을 사용하지 않는 것이 권장됩니다.
Area
Area chart의 데이터 영역은 solid color 또는 gradient fill로 표현할 수 있습니다.
- Solid color — 단일 색상으로 영역 전체를 채웁니다. 시각적으로 안정적이며 데이터 간 비교에 용이합니다.
- Gradient fill — 위에서 아래로 투명한 그라디언트로 채웁니다. 시각적으로 무게를 덜고 변화 흐름을 강조합니다.
Data Display
여러 데이터 시리즈를 표시할 때는, 각 레전드의 색상 대비를 충분히 확보하여 정보 인지 혼동을 최소화합니다.
레전드는 명확한 대비를 가진 색상으로 표현합니다.
동일하거나 유사한 색상 계열을 레전드에 사용하는 것을 지양합니다.
차트 본문과 불일치하는 색상을 legend에 표시하지 않습니다.
Interaction
Data Tooltip
사용자가 특정 데이터 포인트에 커서를 올렸을 때, 차트의 시각적 요약을 보완하여 정확한 수치, 단위, 시점 정보를 제공하는 데이터 툴팁을 노출할 수 있습니다. 데이터 툴팁은 차트의 세부 데이터를 확인할 수 있게 하는 보조 정보 계층입니다.
커서가 데이터 포인트 혹은 축 근처에 접근하면 커서 주위에 툴팁을 표시합니다. 이 때, 툴팁에 노출되는 정보의 위치를 차트 내에 시각적으로 나타내기 위해 x축과 data circle을 함께 하이라이트합니다.
