[D3] d3-interpolate (Color interpolation) 사용법

interpolateRgb(a, b)

두 색상 a, b 사이의 보간값을 반환합니다. 설정 가능한 감마 값이 있으며, 감마가 지정되지 않으면 기본값 1입니다.

a, b는 rgb 공간에 있지 않아도 rgb로 변환이 됩니다. 반환되는 값은 rgb 문자열입니다.

const result = d3.interpolateRgb('purple', 'orange')
console.log(result(0.8)) // rgb(230,132,26)
const gamma = d3.interpolateRgb.gamma(2.2)('purple', 'orange') // 감마 값 설정
console.log(gamma(0.8)) // rgb(236,149,62)

 

interpolateRgbBasis(colors)

지정된 색상 배열을 통해 rgb 공간에서 균일한 B-스플라인 보간값을 반환합니다. 반환되는 값은 rgb 문자열입니다. 0은 배열의 첫 번째 색상에 해당하고, 1은 배열의 마지막 색상에 해당됩니다. 입력되는 비율에 따라  B-스플라인에서의 색상을 나타냅니다.

const interpolate = d3.interpolateRgbBasis(['purple', 'blue', 'red'])
console.log(interpolate(0.8)) // rgb(157, 0, 98)

 

interpolateRgbBasisClosed(colors)

연속성을 가진 B-스플라인 보간값을 반환합니다. 반환되는 값은 rgb 문자열입니다.

const interpolate = d3.interpolateRgbBasisClosed(['purple', 'blue', 'red'])
console.log(interpolate(0.8)) // rgb(190, 0, 65)

 

interpolateHsl(a, b)

두 색상 a, b 사이의 HSL 공간에서의 보간값을 반환합니다. a, b의 값이 HSL이 아니더라도 내부적으로 변환되서 계산이 됩니다. 두 색상 중 하나의 색상이 색상(H), 채도(S)가 NaN이라면 다른 색상의 채널 값이 사용됩니다. 두 색상(H) 간의 최단 경로를 사용합니다.

const interpolate = d3.interpolateHsl('purple', 'red')
console.log(interpolate(0.5)) // rgb(192, 0, 96)

 

interpolateHslLong(a, b)

interpolateHsl에서 두 색상간의 최단 경로를 사용하지 않습니다.

const interpolate = d3.interpolateHslLong('purple', 'red')
console.log(interpolate(0.5)) // rgb(0, 192, 96)

 

interpolateLab(a, b)

두 색상 사이의 LAB 공간에서의 보간값을 반환합니다. a, b의 값이 LAB이 아니더라도 내부적으로 변환됩니다.

const interpolate = d3.interpolateLab('purple', 'red')
console.log(interpolate(0.5)) // rgb(196, 0, 76)

 

interpolateHcl(a, b)

두 색상 사이의 색상, 명도, 채도 공간에서의 보간값을 반환합니다. 두 색상 중 하나의 색상이 색상 또는 채도가 NaN이라면 대응되는 색상의 값이 사용됩니다. 색상간의 최단 경로를 사용합니다.

const interpolate = d3.interpolateHcl('purple', 'red')
console.log(interpolate(0.5)) // rgb(215, 0, 94)

 

interpolateHclLong(a, b)

interpolateHcl에서 두 색상간의 최단 경로를 사용하지 않습니다.

const interpolate = d3.interpolateHclLong('purple', 'red')
console.log(interpolate(0.5)) // rgb(0, 127, 107)

 

interpolateCubehelix(a, b)

두 색상 사이의 Cubehelix 색상에서의 보간값을 반환합니다. 이 함수는 감마 값을 설정할 수 있습니다. 기본값은 1입니다.

내부적으로 Cubehelix로 변화되서 사용되고 색상 또는 채도가 NaN이라면 대응하는 값이 사용됩니다. 색상간의 최단 경로를 사용합니다.

var interpolate = d3.interpolateCubehelix('purple', 'red')
console.log(interpolate(0.5)) // rgb(206, 0, 90)
interpolate = d3.interpolateCubehelix.gamma(2)('purple', 'red')
console.log(interpolate(0.5)) // rgb(191, 0, 82)

 

interpolateCubehelixLong(a, b)

interpolateCubehelix에서 두 색상간의 최단 경로를 사용하지 않습니다.

var interpolate = d3.interpolateCubehelixLong('purple', 'red')
console.log(interpolate(0.5)) // rgb(206, 0, 90)

 

interpolateColor.gamma(gamma)

감마값을 사용하여 색상 보간값에 감마 보정을 하여 새로운 보간값을 반환합니다.

const interpolatorFactory = d3.interpolateRgb.gamma(2.2);
const interpolator = interpolatorFactory("purple", "orange");
const result = interpolator(0.5);
console.log(result) // rgb(204, 120, 93)

 

interpolateHue(a, b)

두 색상 사이의 각도에 대한 보간값을  반환합니다.

const interpolator = d3.interpolateHue(20, 340);
const result = interpolator(0.5);
console.log(result) // 0도