[D3] d3-contour polygons 사용법

각 임계값에 대해 contour 생성기는 입력 값이 임계값보다 크거나 같은 영역을 나타내는 GeoJSON MultiPolygon 기하학 객체를 구성합니다. contours()기본 설정을 사용하여 새로운 contours 생성기를 사용합니다.const contours = d3.contours() .size([100,100]) .thresholds([0, 1, 2, 3, 4]) contours(value)contours 생성기에 value array에 대한 contours를 계산하여 GeoJSON MultiPolygon 기하학 객체의 배열을 반환합니다.const polygons = contours(grid)각 기하학 객체는 입력 값이 임계값보다 크거나 같은 영역을 나타냅니다. contours.size(size..

• format_list_bulleted 시각화
• · 2024. 4. 29.
• textsms

[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 시각화
• · 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 시각화
• · 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 시각화
• · 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 시각화
• · 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 시각화
• · 2023. 11. 14.
• textsms