Axes and labels

Axes and labels (축과 라벨)

축과 라벨은 차트 안의 정보에 중요한 맥락을 제공해요. 차트와 축에 라벨을 붙일 때는 단순하고 이해하기 쉬운 설명자와 측정 기준을 사용하세요.

출처: Axes and labels

본문

참고: 이 가이드는 작업 진행 중이에요. 로드맵을 보거나 기능을 요청하거나 기여하려면 carbon-charts GitHub 저장소로 이동하세요.

영점에서 시작하기 (Starting at zero)

영점에서 시작할까, 아닐까. 이는 아마도 역사상 가장 오래된 논쟁일 거예요. 차트 라이브러리로서 우리는 다음 권장 사항과 함께 두 방향 모두를 지원하고 싶습니다.

영점이 아닌 곳에서 시작하는 것이 나쁜 경우

부분-전체(part-to-whole)와 비교 차트(예: 막대, 영역 차트)에서는 항상 숫자 축을 영점에서 시작하세요. Y축을 잘라내면 인식을 왜곡해 작은 차이가 크고 중요해 보이게 만들 수 있어요.

막대 차트의 경우 숫자 축은 영점에서 시작해야 합니다. 축이 영점이 아닌 곳에서 시작하면 막대 사이의 백분율 차이가 과장됩니다.

영점이 아닌 곳에서 시작하는 것이 좋은 경우

선 차트와 산점도는 트렌드를 전달하기 위한 것이지 차이의 상대적 크기를 전달하기 위한 것이 아니기 때문에 이 왜곡에 덜 민감해요. 이런 경우 Y축을 잘라내면 사용자가 변화의 방향을 더 쉽게 식별할 수 있습니다.

주식 시장 활동을 보여주는 선 차트에서는 트렌드의 정점과 골짜기의 존재가 변화의 실제 크기보다 더 중요합니다.

데이터의 공백 (Gaps in data)

데이터를 사용할 수 없는 기간 사이를 절대 보간(interpolate)하지 마세요. 데이터를 사용할 수 없는 동안의 시작점과 끝점을 모두 항상 라벨링하세요.

축의 절단 (Breaks in axes)

때로는 왜곡 없이 극단 끝의 데이터를 뷰로 가져오기 위해 축의 일부를 건너뛰는 것이 유용할 수 있어요. 축에 절단이 있을 때는 직선 축 선 대신 사인파(sinusoidal) 선을 사용하세요.

X축에서 절단은 그래프 영역 크기에 따라 유동적일 수 있으며 최소 너비는 16px입니다. Y축에서는 절단에 고정된 16px 거리를 사용할 것을 권장합니다.

축 절단 중에 데이터를 사용할 수 있다면 선분을 0.5px 스트로크로 다시 스타일링하고 데이터 포인트를 나타내는 원을 숨기세요.

축 절단 지점 사이에 데이터가 없으면 그 영역을 비워 두세요.

시계열 (Time series)

일관된 증분 (Consistent increments)

데이터 가용성을 수용하기 위해 축 눈금 증분을 절대 변경하지 마세요. 어떤 형태의 축 압축이 필요하다면 제공된 축 절단 스타일링을 사용해 압축을 시각적으로 나타내세요.

지역화 (Localization)

시계열에서 X축 라벨은 데이터의 시간 증분을 반영해요. 가능하면 지역화된 날짜와 시간 형식이나 사용자 기본 설정을 사용하세요. 그렇지 않으면 차트는 아래에 제시된 형식을 기본값으로 사용합니다.

랜드마크 라벨 (Landmark labels)

데이터가 새 일, 월, 연도 같은 새 시간 주기로 넘어갈 때마다 라벨을 세미볼드(semibold)로 만들어 "랜드마크" 라벨로 지정해, 뒤따르는 라벨에 추가 맥락을 제공하세요.

더 알아보기 (Learn more)

축과 라벨은 차트 데이터를 정확하게 전달하는 데 핵심이에요. 막대·영역 차트처럼 부분-전체와 비교 차트는 Y축을 영점에서 시작하고, 선 차트·산점도는 트렌드 전달이 목적이므로 자르기가 유용할 수 있습니다. 데이터가 없는 기간은 보간하지 말고 라벨링하며, 축 절단 시에는 사인파 선과 16px 고정 거리를 사용하세요. 시계열에서는 눈금 증분을 바꾸지 말고 지역화된 날짜 형식과 랜드마크 라벨을 활용하는 게 좋습니다.