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

2차원 평면의 사이를 부드럽게 확대 및 축소를 위해 사용됩니다. interpolateZoom(a, b) 두 view 사이의 보간값을 반환합니다. view는 3개의 숫자로 정의되며, 배열로 표현됩니다. [cx, cy, width] cx, cy는 뷰포트의 중심이고 width는 뷰포트의 크기를 나타냅니다. const startView = [30, 30, 40]; const endView = [135, 85, 60]; const interpolator = d3.interpolateZoom(startView, endView) const result = interpolator(0.5); console.log(result) // [72.00000000000003, 52.000000000000014, 126.04761..

• format_list_bulleted D3/시각화
• · 2023. 11. 17.
• textsms

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

CSS 및 SVG 변환에 대한 보간값을 반환합니다. 일반적으로는 `translate`, `rotate`, `scale` 등이 포함됩니다. interpolateTransformCss(a, b) 두 개의 css transform을 나타내는 문자열 사이의 보간값을 반환합니다. const interpolator = d3.interpolateTransformCss("translateY(12px) scale(2)", "translateX(30px) rotate(5deg)") const result = interpolator(0.5); console.log(result) // translate(15px,6px) rotate(2.5deg) scale(1.5,1.5) interpolateTransformSvg(a, b)..

• format_list_bulleted D3/시각화
• · 2023. 11. 17.
• textsms

[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) 지정된 색상 배열을 통해..

• format_list_bulleted D3/시각화
• · 2023. 11. 17.
• textsms

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

value interpolation은 가장 적합한 일반적인 보간입니다. interpolate(a, b) a, b 사이의 보간된 값 반환을 합니다. b의 유형에 따라서 보간의 유형이 결정됩니다. d3.interpolate("red", "blue")(0.5) // rgb(128, 0, 128) b의 값이 null, undefined, boolean의 값일 경우 b의 값을 그대로 씁니다. const interpolate = d3.interpolate('red', true) console.log(interpolate(0.5)) // true 반환 interpolateNumber(a, b) b가 숫자일 경우 a, b 사이의 보간의 값을 반환합니다. const interpolate = d3.interpolate(1..

• format_list_bulleted D3/시각화
• · 2023. 11. 15.
• textsms

[D3] d3-color 사용법

여러 색상 공간의 색을 표현하고 다루는 기능을 제공합니다. 이 모듈은 RGB, HSL, Lab 등 다양한 색상 표현 방식을 지원하며, 주로 색상의 생성, 변환, 분해 및 조작을 위해 사용됩니다. 이 모듈을 사용하면 특정 색상을 나타내는 객체를 만들고, 그 색상을 다른 색상 공간으로 변환하거나 조작할 수 있습니다. 또한 색상 간 gradient을 위해 사용되기도 합니다. 색상 보간을 위해 d3-interpolate 모듈을 참조하면 됩니다. const color = d3.color("steelblue") color의 값은 rgb와 opacity로 표현이 됩니다. const color = d3.color("steelblue") const hsl = d3.hsl(color) rgb의 값에서 hsl의 값으로 변환..

• format_list_bulleted D3/시각화
• · 2023. 11. 14.
• textsms

[D3] d3-chords (Ribbons) 사용법

리본은 코드 다이어그램에서 두 노드 간의 흐름의 양을 시각적으로 나타냅니다. 두 가지 종류의 리본이 있습니다: 리본은 양방향 흐름을, 리본화살표는 단방향 흐름을 나타냅니다. 리본화살표는 chordDirected 적합합니다. ribbon() 기본 설정으로 새 리본 생성을 합니다. const ribbon = d3.ribbon() ribbon(...arguments) 주어진 인수를 기반으로 새 리본을 생성합니다. 값들은 리본 생성기의 접근자 함수로 전달됩니다. 리본에 컨텍스트가 있는경우 해당 경로로 메서드를 호출하여 리본을 렌더링하고 void를 반환합니다. 컨텍스트가 없는 경우, 경로 데이터 문자열이 반환됩니다. const ribbon = d3.ribbon() ribbon({ source: {startAngl..

• format_list_bulleted D3/시각화
• · 2023. 11. 13.
• textsms