Scales
scaleSequential
예제 중간에는 scaleSequential을 사용하여 색상 범례(legend)를 표현한다.
color = d3
.scaleSequential()
.domain([0, d3.max(fruits, (d) => d.count)])
.interpolator(d3.interpolateBlues);
visx에 scaleSequential와 대응하는 함수가 없다.
대신 scaleOrdinal함수를 활용하는 가이드가 있다. 참조
억지로 바꾸려 하지말고 scale과 같은 primitive 함수들은 그냥 사용해도 될 것 같다.
정리 잘 되있음: Scale functions | D3 in Depth
continuous input => continuous output (number, number)
- scaleLinear: 색상도 가능 이 경우 출력은 string
- scaleSqrt: 원의 너비와 맵핑할 때 사용
- scalePow: 잘 사용 안함
- scaleLog: 로그
- scaleTime: 시간
- scaleSequential: interpolator를 사용하여 맵핑
옵션
- clamp: domain 영역을 벗어나도 range 영역을 벗어나지 못하도록 함
- nice: domain을 반올림 시켜 줌
domain과 range를 3개 이상 설정하여 복수영역으로 나눌 수 있음
함수
- inversion: 출력 값에서 입력 값 얻어낼 수 있음, click 이벤트 처리 시 사용
continuous input => discrete output
- scaleQuantize: domain의 범위를 4개로 분할하여 range와 맵핑
- scaleQuantile: domain의 개수를 range 개수 만큼 분할하여 맵핑, quantiles 함수로 domain의 나누는 지점 가져올 수 있다.
- scaleThreshold: n개의 range를 n-1개의 domain으로 분할지점을 명시
discrete input => discrete output
- scaleOrdinal: domain을 순서대로 반복하여 range와 맵핑
- scaleBand: bar chart에 사용
- scalePoint: 간격 띄울 때 사용