[D3] Ordinal scales 사용

scaleOrdinal(domain, range)특정 도메인 값을 대응하는 범위 값으로 매핑하는 순서 스케일을 구성합니다.const color = d3.scaleOrdinal(["a", "b", "c"], ["red", "green", "blue"]);위 코드에서 a는 red와 매핑되고 c는 blue와 매핑됩니다. 범위가 빈 배열일 때 Ordinal 스케일은 항상 undefined를 반환합니다. 범위의 요소를 한개로 했을 경우 도메인을 어떤걸 선택하여도 한개인 요소만 출력됩니다.ordinal(value)입력 도메인에 값이 주어지면 출력 범위에 해당 값을 반환합니다. 도메인에 입력 값이 없으면 unknown 값을 출력합니다. 만약 unknown 값이 없으면 입력 값은 도메인에 자동 추가가 되고 범위의 다음..

• format_list_bulleted D3/시각화
• · 2024. 5. 22.
• textsms

[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 D3/시각화
• · 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 D3/시각화
• · 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 D3/시각화
• · 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 D3/시각화
• · 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 D3/시각화
• · 2024. 5. 20.
• textsms