[D3] Sequential Scales로 색상 표현 사용법

시퀀셜 스케일은 연속적인 도메인을 연속적인 범위에 매핑하는 방식으로 linear 스케일과 비슷합니다. 하지만 출력 범위는 배열이 아닌 보간기(interpolator)로 지정이 되고 주로 색상 그라데이션 표현할 때 사용합니다.

scaleSequential(domain, interpolator)

지정된 도메인과 보간기를 설정한 새로운 시퀀셜 스케일을 생성합니다. 도메인의 기본값은 [0,1]입니다. 0은 최소값을 나타내고 1은 최대값을 나타냅니다. 보간기가 배열일 경우 두 요소의 출력 범위를 나타내고 d3.interpolate를 사용하여 보간기 함수로 변환됩니다.

sequential.interpolator(interpolator)

보간기가 지정된 경우 해당 보간기 기능으로 설정하고 지정되지 않았으면 현재 보간기를 반환합니다.

sequential.range(range)

2개의 요소를 가진 배열이 지정되면 보간기 함수로 변환됩니다.

const color = d3.scaleSequential().range(["red", "blue"]);
// 밑에 있는 함수와 동일합니다.
const color = d3.scaleSequential(d3.interpolate("red", "blue"));

sequential.rangeRound(range)

interpolateRound를 보간기로 사용합니다.

scaleSequentialLog(domain, range)

로그 스케일과 유사한 변환을 사용하여 새로운 시퀀셜 스케일을 반환합니다.

scaleSequentialPow(domain, range)

거듭제곱 스케일과 유사한 변환을 사용하여 새로운 시퀀셜 스케일을 반환합니다.

scaleSequentialSqrt(domain, range)

Sqrt 스케일과 유사한 변환을 사용하여 새로운 시퀀셜 스케일을 반환합니다.

scaleSequentialSymLog(domain, range)

Symlog 스케일과 유사한 변환을 사용하여 새로운 시퀀셜 스케일을 반환합니다.

scaleSequentialQuantile(domain, range)

Quantile 스케일과 유사한 변환을 사용하여 새로운 시퀀셜 스케일을 반환합니다.

sequentialQuantile.quantiles(n)

n+1개의 분위수 배열을 반환합니다.

 

Diverging scale은 요소를 3개의 요소를 가지고 비슷합니다.