[D3] Logarithmic scales 사용법

로그 스케일은 선형 스케일과 유사하지만, 출력 범위 값이 계산되기 전에 입력 도메인 값에 로그 변환을 적용합니다. 범위 값 y와 도메인 값 x의 매핑은 다음과 같이 표현될 수 있습니다 y = m log(x) + b로그 스케일의 도메인은 양수이거나 음수여야 합니다. 0을 포함하면 안됩니다. 양수일 경우 양수 값에 대해서 잘 동작하며 음수일 경우 음수 값에 대해서 잘 동작합니다.scaleLog(domain, range)지정된 도메인 및 범위를 설정한 로그 스케일을 반환합니다. 도메인 기본값은 [1,10]이고 범위 기본값은 [0,1]입니다.const x = d3.scaleLog([1, 10], [0, 960]);log.base(base)값이 있을 경우 로그 밑의 기준을 base 값으로 설정합니다.기본값은 10..

• format_list_bulleted 시각화
• · 2024. 5. 21.
• textsms

[D3] Power scales 사용

파워 스케일은 선형 스케일과 유사하지만 출력 범위 값이 계산되기 전에 입력 도메인 값에 지수 변환을 적용합니다.범위 값 y는 도메인 값 x에 대한 식은 y = mx^k + b로 표현됩니다. k는 지수 값입니다.scalePow(domain, range)지정된 도메인과 범위를 가진 지수 1인 파워 스케일을 생성합니다.const x = d3.scalePow([0, 100], [0, 1000])x(50) // 500scaleSqrt(domain, range)지정된 도메인과 범위를 가진 지수 0.5인 파워 스케일을 생성합니다.const x = d3.scalePow([0, 100], [0, 1000])x(50) // 707.1067811865476pow.exponent(exponent)지수가 지정되면 현재 지수를 ..

• format_list_bulleted 시각화
• · 2024. 5. 21.
• textsms

[D3] Time-scales 사용법

시간 영역을 갖는 스케일입니다. 영역의 값은 숫자가 아닌 날짜로 강제 변환되고 invert도 날짜를 반환합니다. time 스케일은 달력 간격을 기반으로 틱을 구현하여 시간 영역에 대한 축 생성의 어려움을 덜어줍니다.scaleTime(domain, range)지정된 도메인과 범위를 가진 새로운 시간 스케일을 생성합니다. 도메인을 지정하지 않으면 [2000-01-01,2000-01-02]입니다. 범위의 기본값은 [0,1]입니다.const x = d3.scaleTime([new Date(2000, 0, 1), new Date(2000, 0, 2)], [0, 960]);x(new Date(2000, 0, 1, 5)); // 200x.invert(200); // date 값scaleUtc(domain, range..

• format_list_bulleted 시각화
• · 2024. 5. 21.
• textsms

[D3] Linear-scales(선형 스케일) 사용법

선형 스케일은 연속적인 숫자 데이터를 다른 연속적인 숫자 범위로 선형 변환하여 매핑합니다. 이 변환은 비례 관계를 유지하며, 숫자로 된 범위는 역으로 변환할 수도 있습니다. 선형 스케일은 비례적인 차이를 잘 보존하므로 연속적인 숫자 데이터를 다룰 때 사용하기 편리합니다.scaleLinear(domain, range)선형 스케일을 만들 때, 지정된 도메인 및 범위로 설정합니다. 도메인이나 범위를 지정하지 않으면 기본값은 [0,1]입니다.const linear = d3.scaleLinear([0, 100], [10, 1000])linear(value)도메인의 값이 주어지면 범위에서 해당하는 값을 찾아 반환합니다. const linear = d3.scaleLinear([0,100],[10,1000])linea..

• format_list_bulleted 시각화
• · 2024. 5. 21.
• textsms

[D3] d3-quadtree(정사각형 반복 분할) 사용법

quadtree(data, x, y)빈 extent와 기본 x와 y 접근자를 사용하여 비어 있는 새 쿼드트리를 만듭니다. 데이터가 지정되면 데이터를 추가합니다.d3.quadtree(data) or d3.quadtree().addAll(data)quadtree.x(x)x가 지정되면 현재 x 좌표 접근자를 설정하고 쿼드트리를 반환합니다. x가 지정되지 않은 경우 기본값은 d[0]입니다.quadtree.y(y)y가 지정되면 현재 y 좌표 접근자를 설정합니다. 기본값은 d[1]입니다.quadtree.extent(extent)범위가 지정된 경우 쿼드트리를 extent 범위까지 확장하고 쿼드트리를 반환합니다.[[x0,y0],[x1,y1]]에서 x0,y0은 하한이고 x1,y1은 상한입니다. extent()를 통해서 ..

• format_list_bulleted 시각화
• · 2024. 5. 20.
• textsms

[D3] d3-polygon(다각형) 사용법

polygonAreea(polygon)지정된 좌표에 있는 점들을 가지고 다각형의 영역을 반환합니다. polygon의 배열들이 시계 반대 방향 순서인 경우 양수이고 그렇지 않으면 음수 또는 0입니다.d3.polygonArea([[1,1],[1.5,0],[2,1]])polygonCentroid(polygon)다각형의 중심을 반환합니다.polygonHull(points)Andrew 알고리즘을 사용하여 지정된 포인트에서 다각형을 만들 점들을 추출합니다. 포인트가 3개 미만인 경우 null 반환polygonContains(polygon, point)다각형 내부에 지정된 점이 있을 경우 true를 반환합니다.polygonLength(polygon)지정된 다각형의 둘레 길이를 반환합니다. ..

• format_list_bulleted 시각화
• · 2024. 5. 20.
• textsms