D3.js 컬러 스케일(Color Scale)을 만드는 방법 - , d3.scaleLinear, d3.scaleOrdinal, d3.interpolate, d3.scaleSequential, d3.scaleThreshold

d3-scale

d3.scaleLinear

스케일의 선형 변환을 사용한 방법이다. 일반적으로는 그래프의 좌표 변환에 사용하지만, 색에도 사용할 수 있다.

var color = d3.scaleLinear()
    .domain([0, 10])
    .range(["red", "blue"]);

d3.scaleLinear는 domain으로 지정한 범위를 range로 지정한 범위로 변환하여 출력하는 함수를 설정한다. color에는 함수가 설정되고, 아래와 같이 domain으로 지정한 범위의 수치를 대입해 사용한다.

color(2)

입력한 숫자에 따라 RGB 값을 선형 변환하여 반환한다. 다음 차트는 “red”, “blue"를 range로 지정한 예제이다. 차트 아래의 숫자는 scale에 입력한 값이다.

다음과 같이 3가지 이상의 색상을 설정할 수도 있다.

var color = d3.scaleLinear()
    .domain([0, 5, 10])
    .range(["red", "yellow", "blue"]);

d3.scaleOrdinal

range에 입력된 배열을 반복적으로 설정한다.

var color = d3.scaleOrdinal()
    .range(["red", "white", "green"]);

d3.interpolate

간단히 2가지 색상의 선형 완성을 원한다면 d3.interpolate를 사용한다. d3.scaleLinear와의 차이점은 입력 값이 0.0 ~ 1.0 사이의 범위로 설정된다는 것이다.

var color = d3.interpolate("brown", "steelblue");

d3.scaleSequential

domain에서 설정한 범위를 0.0 ~ 1.0의 범위로 선형 변환하여 함수에 입력한다. 출력값은 함수에 따라 결정된다. 예를 들어, d3.interpolate를 사용하여 여러 색상을 결합한 스케일을 만들 수 있다.

var i0 = d3.interpolate("brown", "white");
var i1 = d3.interpolate("white", "steelblue");

var color = d3.scaleSequential(
    function (t) {
        return (t < 0.5) ? i0(2 * t) : i1((t - 0.5) * 2);
    })
    .domain([0, 10]);

d3.scaleThreshold

임계값으로 색상을 결정한다. domain에 입력된 배열이 임계값이 되기 때문에 range에는 domain보다 하나 많은 배열 요소가 필요하다.

var color = d3.scaleThreshold()
    .domain([0, 1])
    .range(["red", "white", "green"]);