FrontendLibraryD3.js

D3.js Functions

D3.js 배열의 유용한 함수

d3,js의 배열의 유용한 함수들 이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
var data = [1, 2, 3, 4, 5];
d3.min(data); // 최소값
d3.max(data); // 최대값
d3.extent(data); // [최소, 최대]
d3.extent(data); // 합
d3.mean(data); // 산술 평균치
d3.median(data); // 배열 위치의 중앙값
d3.quantile(data, 0); // 배열 첫번째 값
d3.quantile(data, 1); // 배열 마지막 값
d3.quantile(data, 0.15); // 분위수(표본전체 도수를 등분하여 등분 값)
d3.variance(data); // 분산
d3.deviation(data); // 표준편차
</script>

여기서 중요한 함수는 min(), max((), extent()함수를 많이 사용되는 함수이다. 스케일 범위를 결정할때에 읽어온 데이터 값의 최소값이나 최대값을 쉽게 함수로 가져올 수 있다.

1
2
3
4
var data = [1,2,5,6,7];
var min = d3.min(data); //최소
var max = d3.max(data); //최대
var extent = d3.extent(data); //[최소,최대]

여기서 min, max, sum은 문자 그래도 쉽고 extent은 배열로 extent[0]=최소값 extent[1]=최대값을 갖는다는 것을 기억하기 바란다.

예를 들어

var Scale = d3.scaleLinear().domain([0,10]).range([0,100]);
=> var Scale = d3.scaleLinear().domain([d3.min(data), d3.max(data)]).range([0, 100]);
=> var Scale = d3.scaleLinear().domain(d3.extent(data)).range([0, 100]);

효율적으로 데이터의 도메인 값을 잡아 줄 수 있다.

var mean = d3.mean(data); //산술평균치
var median = d3.median(data); //배열위치의 중앙값

mean과 median은 중앙값을 출력하는 함수인데 차이는 어떤 중앙값을 출력하느냐 차이 이다.
mean은 산술평균치로서

데이터의총합/데이터의 갯수 => (1+2+5+6+7) / 5 = 4.2

median은 데이터의 갯수의 중앙 위치의 값을 출력 한다. 여기서 [1,2,5,6,7]로 5개의 중앙위치가 3번째로 5가 출력됨
만약 [1,2,5,6,7,9]이면 6개로 세번째와 4번째 값의 사이값이 되겠죠, 5~6의 중앙값은 5.5 출력됨.

var quantile1 = d3.quantile(data, 0); // 배열 첫번째 값
var quantile2 = d3.quantile(data, 1); // 배열 마지막 값
var quantile3 = d3.quantile(data, 0.15); // 분위수(표본전체 도수를 등분하여 등분 값)

d3.quantile은 0~1까지 범위로 데이터 갯수로 각각 등분 한다. 5개니깐 각각 0.25간격이 됨.
[1,2,5,6,7]
0일때 1
0.25일때 2
0.5일때 5
0.75일때 6
1일때 7

그래서, 세번째 data,0.15일때 1.6이 출력되는데 1과2사이는 0과 0.25로 등분된 범위에 맞는 등분값이 출력되어서 1.6이 0.15의 등분값 이다.

var variance = d3.variance (data); //분산
var deviation = d3.deviation(data); //표준편차

나머지는 분산값과 표준편차값을 출력합니다. 설명은 생략한다.

scale함수를 좀 더 깊게 다루기 위해서는 우선 알아야 할것들은 min, max, extent 이며, 이 세함수만 우선 알아두면 나중에 scale함수를 사용할때 편리하다.

참조

공유하기