스캐터 차트
카드 3장높이 2단위
두 측정값을 가로·세로축에 두고 항목마다 점을 찍어 관계와 흩어짐을 보여줍니다. 큰 세 묶음만 색을 주고, 축 이름은 축에 붙여 적습니다.
Scatter - Basic
scatter-basic
항목마다 두 측정값을 점 하나로 찍고 묶음별로 색을 준 카드입니다. 영업 활동과 실적처럼 두 값이 함께 움직이는지, 묶음마다 다른지 볼 때 씁니다.
들어 있는 판단 3
- 묶음(
group)이 있으면 점 수가 많은 세 묶음만 주황 · 분홍빨강 · 파랑으로, 나머지는 회색으로 칠하고 점 모양 범례를 둡니다. 흰 테두리 2px로 겹친 점을 가립니다. - 이름은 가장 큰 값이나 크게 벗어난 점처럼 이야기할 점에만
"label": true로 적습니다. 모든 점에 이름을 달면 읽히지 않습니다. - 값이 모두 0 이상이면 축을 0 아래로 내리지 않고, 범위 위아래에 8% 여유를 둡니다.
Scatter - Quadrant
scatter-quadrant
평균과 0을 기준선으로 그어 점을 네 구역으로 나눈 카드입니다. 규모와 성장률처럼 두 기준으로 대상을 분류할 때 씁니다.
들어 있는 판단 4
- 가로 기준선은 평균, 세로 기준선은 0입니다. 다른 기준이 필요하면
ref에 { "x": 값, "y": 값 }으로 적습니다. - 구역 이름(
quadrants)은 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래 순서로 적고 네 모서리에 옅게 둡니다. - 이름은 가장 큰 점이나 기준에서 크게 벗어난 점처럼 이야기할 점 두세 개에만
"label": true로 적습니다. 이름이 없으면 어느 점이 문제인지 툴팁을 하나씩 열어 봐야 하고, 모든 점에 달면 읽히지 않습니다. - 구역은 색으로 칠하지 않고 점 색은 묶음(
group)을 따릅니다. 툴팁에는 부호를 붙인 증감률, 묶음, 속한 구역을 적습니다.
Scatter - Connected
scatter-connected
기간마다 찍은 점을 시간 순서대로 이은 카드입니다. 방문자와 전환율처럼 두 지표가 함께 어느 쪽으로 움직였는지 볼 때 씁니다.
차트 가이드 · 선 연결 스캐터 차트 ↗
들어 있는 판단 3
- 점은
points에 적은 순서대로 잇습니다. 묶음(group, 예: 연도)이 있으면 최근 묶음부터 주황 · 분홍빨강 · 파랑으로 칠하고, 구간은 도착점의 색으로 잇습니다. 마지막 점은 크게 찍어 흐름의 방향을 보여줍니다. - 기간 이름은 처음과 마지막 점에만 적고, 나머지 기간은 툴팁과 화살표 키로 봅니다.
- 기간은 열세 개 안팎까지 둡니다. 더 길면 선이 엉켜 방향이 읽히지 않으니 기간을 묶거나 라인 차트 두 장으로 나눕니다.