WIZ Design System

한눈에#

산점도는 두 연속 변수(x·y)의 관계를 점으로 보여줍니다. 선을 잇지 않고 각 관측을 마커로만 찍어 분포·군집·상관을 읽습니다. 시리즈 색은 색맹 안전 차트 토큰(--wds-chart-*)을 자동으로 쓰고, 시리즈별 마커 모양(원·사각·삼각·마름모)으로 색에만 의존하지 않습니다.

두 변수의 분포·상관을 점으로

키와 몸무게 — 두 집단 데이터 표
시리즈	점 1	점 2	점 3	점 4	점 5	점 6	점 7	점 8	점 9	점 10
A 집단	(160, 52)	(165, 58)	(168, 61)	(170, 63)	(172, 67)	(175, 70)	(178, 74)	(181, 78)	(166, 60)	(174, 69)
B 집단	(158, 48)	(162, 51)	(167, 55)	(169, 58)	(173, 62)	(176, 65)	(180, 70)	(183, 73)	(164, 53)	(171, 60)

마커만 상시 (선 없음)
연속 x · 연속 y 축
최소제곱 추세선
색맹 안전 토큰 + 마커 모양

범례에 마우스를 올리면 시리즈가 강조되고, 플롯에 올리면 값이 툴팁으로 뜹니다

산점도 vs 선 차트#

LineChart는 점을 이어 한 변수의 시간 추세를 보지만, ScatterChart는 점을 잇지 않습니다. x와 y가 둘 다 독립 측정값이고 순서가 없을 때(키↔몸무게, 광고비↔매출) 산점도를 씁니다. 같은 차트 인프라(축·범례·툴팁·접근성 표)를 공유하되 렌더는 마커만입니다.

추세선 — 상관 방향 보조#

showTrendLine을 켜면 시리즈마다 최소제곱 회귀선(점선)을 x 도메인 양끝에 그려 상관 방향(양/음)을 보조합니다. 추세선은 점이 아니라 모델의 요약이라 옅은 점선으로 그려 점군과 구분합니다. 선은 aria-hidden이고 데이터 정본은 마커·데이터 표입니다.

추세선이 양의 상관을 보조한다

광고비와 매출 — 추세선 데이터 표
시리즈	점 1	점 2	점 3	점 4	점 5	점 6	점 7	점 8
온라인	(10, 22)	(15, 30)	(20, 35)	(25, 48)	(30, 52)	(35, 61)	(40, 68)	(45, 80)
오프라인	(10, 18)	(15, 21)	(20, 28)	(25, 30)	(30, 39)	(35, 41)	(40, 50)	(45, 54)

광고비↔매출 — 회귀 추세선(점선)으로 양의 상관 보조

스케일 — 시간(time)·로그(log)#

산점도의 x·y는 연속 스케일이라 LineChart와 동일하게 시간·로그 스케일을 씁니다. xScaleKind="time"은 x를 epoch ms로 보고 달력 경계로 눈금을 정렬해 불규칙 날짜 측정값(주말 결측 등)도 자연스럽게 배치합니다. yScaleKind="log"는 y가 여러 자릿수에 걸칠 때 작은 값이 0선에 깔리지 않게 합니다.

불규칙 날짜에도 달력 눈금이 자동 정렬된다

일자별 응답시간 측정 — 시간 축 데이터 표
시리즈	점 1	점 2	점 3	점 4	점 5	점 6	점 7	점 8
응답시간(ms)	(1767312000000, 210)	(1767571200000, 180)	(1767916800000, 240)	(1768176000000, 160)	(1768694400000, 200)	(1768867200000, 150)	(1769299200000, 190)	(1769558400000, 130)

시간 축 — 불규칙 날짜 측정값(달력 nice 눈금)

여러 자릿수 값을 로그축으로 또렷이

요청 수와 지연(로그 y축) 데이터 표
시리즈	점 1	점 2	점 3	점 4	점 5	점 6	점 7	점 8
지연(ms)	(1월, 12)	(2월, 45)	(3월, 130)	(4월, 480)	(5월, 1,100)	(6월, 3,400)	(7월, 8,800)	(8월, 21,000)

로그 y축 — 여러 자릿수 값을 또렷이

다중 시리즈 — 마커 모양으로 구분#

여러 집단은 색 + 마커 모양(원·사각·삼각·마름모) + 범례 텍스트로 구분됩니다 — 색에만 의존하지 않습니다. 범례 항목에 마우스를 올리면 해당 집단이 강조되고, 클릭하면 켜고 끕니다(숨기면 축이 보이는 시리즈로 재계산됩니다).

네 측정 집단 — 마커 모양 구분 데이터 표
시리즈	점 1	점 2	점 3	점 4	점 5
집단 1	(1, 20)	(3, 35)	(5, 30)	(7, 48)	(9, 52)
집단 2	(2, 40)	(4, 52)	(6, 47)	(8, 63)	(10, 70)
집단 3	(1, 60)	(3, 58)	(5, 72)	(7, 68)	(9, 85)
집단 4	(2, 14)	(4, 22)	(6, 18)	(8, 30)	(10, 26)

네 집단 — 마커 모양 구분 · 범례 호버·클릭 토글

접근성#

차트는 장식이 아니라 데이터입니다. 컨테이너는 <figure> + 보이는 캡션, SVG 자체는 aria-hidden, 데이터 정본은 화면에 숨긴 데이터 표입니다.
산점도의 점은 x 그리드를 공유하지 않으므로, 표는 line/bar와 달리 시리즈별 점 목록(점 순번 열 × (x, y) 셀)입니다 — 스크린리더가 각 관측을 좌표 쌍으로 읽습니다.
시리즈 구분은 색 + 마커 모양 + 범례 텍스트(색 단독 의존 금지).
호버 툴팁은 WDS Tooltip(rich)을 도그푸딩하며 마우스 전용입니다(키보드·스크린리더는 데이터 표가 정본). 점-최근접 호버는 Phase 2이며, 현재는 x-밴드 호버를 재사용합니다.
추세선은 aria-hidden(데이터 표가 정본)이고, prefers-reduced-motion에서 진입 애니메이션이 정지합니다.

데이터 API#

import { ScatterChart } from '@wds/ui-web';

<ScatterChart
  label="키와 몸무게"              // 필수 — 접근성 요약
  caption="두 변수의 상관"         // 보이는 캡션
  showTrendLine                    // 최소제곱 회귀선(기본 false)
  series={[
    { name: 'A 집단', data: [{ x: 160, y: 52 }, { x: 175, y: 70 }] },
  ]}
  xScaleKind="linear"              // 'linear'(기본) | 'time'
  yScaleKind="linear"              // 'linear'(기본) | 'log'
/>

산점도는 LineChart의 연속 차트 인프라를 공유하므로 legendToggle·secondaryYAxis(이중 Y)·svgOverlay·렌더 슬롯·xFormat/yFormat을 그대로 씁니다. 선만 그리지 않고 마커만 상시 표시합니다.

관련: LineChart · BarChart · AreaChart · ComboChart