[D3.js] 데이터 배열 다룰 때 유용함 함수

D3.js/D3.js|2019. 11. 18. 09:00

[D3.js] 데이터 배열 다룰 때 유용함 함수

예전에 제 블로그에 정리했던 배열 함수들인데 이번 D3.js를 정리하면서 다시 스팀 블록에 연재해볼까 합니다. 데이터를 다룰 때 사용되는 기본 함수들인데 알아 두시면 나중에 유용하게 쓸 수 있을 거라 생각 됩니다. 지난시간에 max()함수를 이용하여 읽어 온 데이터 중 가장 큰수를 찾아 낼 수 있었습니다. 이렇게 쉽게 큰수면 max()함수 작은수면 min()함수를 사용하여 원하는 결과를 쉽게 얻을 수 있습니다.

1. 실험 데이터

데이터를 다룰 때 유용한 함수들을 실험하는게 목적임으로 외부에서 데이터를 읽어오는 방식으로 실험하지 않고 간단히 데이터를 선언하여 실험을 하도록 하겠습니다.

var data = [1,2,5,6,7];

2. 배열을 다루는 유용한 함수

실험 할 함수는 min(), max(), extent(), sum(), mean(), median(), quantile(), variance(), deviation() 함수들입니다.

코딩은 아래와 같이 각각 변수를 선언하여 위에 선언된 배열데이터(data) 값을 기준으로 원하는 값을 찾게 됩니다.

    var min = d3.min(data); //최소
    var max = d3.max(data); //최대
    var extent = d3.extent(data); //[최소,최대]
    var sum = d3.sum(data); //합
    var mean = d3.mean(data); //산술평균치
    var median = d3.median(data); //배열위치의 중앙값
    var quantile1 = d3.quantile(data,0); //배열첫번째값
    var quantile2 = d3.quantile(data,1); //배열끝값
    var quantile3 = d3.quantile(data,0.15); //분위수(표본전체도수를 등분하여 등분값)
    var variance = d3.variance (data); //분산
    var deviation = d3.deviation(data); //표준편차

3. 코딩

이 부분은 다행이 V5 버전에서는 변동 사항이 없는 것 같네요. 정상적으로 결과가 나오네요.

[소스]

<script src="https://d3js.org/d3.v5.min.js"></script>

<body>
  <script>
    var data = [1,2,5,6,7];
    var min = d3.min(data); //최소
    var max = d3.max(data); //최대
    var extent = d3.extent(data); //[최소,최대]
    var sum = d3.sum(data); //합
    var mean = d3.mean(data); //산술평균치
    var median = d3.median(data); //배열위치의 중앙값
    var quantile1 = d3.quantile(data,0); //배열첫번째값
    var quantile2 = d3.quantile(data,1); //배열끝값
    var quantile3 = d3.quantile(data,0.15); //분위수(표본전체도수를 등분하여 등분값)
    var variance = d3.variance (data); //분산
    var deviation = d3.deviation(data); //표준편차

    console.log("min : " + min);
    console.log("max : " + max);
    console.log("extent : " + extent);
    console.log("sum : " + sum);
    console.log("mean : " + mean);
    console.log("median : " + median);
    console.log("quantile1 : " + quantile1);
    console.log("quantile2 : " + quantile2);
    console.log("quantile3 : " + quantile3);
    console.log("variance : " + variance);
    console.log("deviation : " + deviation);
  </script>
</body>

[결과]

  • data = [1,2,5,6,7];

위 데이터를 기준으로 각 함수들의 결과가 어떻게 나왔는지 아래 결과 이미지를 보시고 이해해 주시기 바랍니다.


마무리

오늘 실험한 각 함수들은 결과 값을 보시고 각 함수가 어떤 결과를 만들어 내는지 위 결과 이미지를 보고 확인하시면 쉽게 이해 할 수 있을 거에요. 데이터 값을 여러분들이 직접 다른 데이터를 만들어 놓고 결과를 비교 분석 해보세요. 아니면 지난 시간에 데이터 파일을 읽는 법에서 사용한 몇가지 데이터 파일 형식 중 하나를 선택하여 외부 데이터 파일을 만들고 한번 읽어와서 오늘 실험한 함수들에 적용해 보세요.

오늘 다룬 내용은 데이터 시각화 하는데 어떻게 활용 되는지 잘 연상이 안되실 수 있습니다. 지난 시간에 Scale() 함수 예제에서 크기의 범위에서 최소, 최대값을 사용할 때 max() 함수를 사용했었는데 기억하실 지 모르겠네요. 우선은 위 함수들을 간단히 이런 함수들이 있구나 정도로 이해하시고 나서 나중에 D3.js 사이트의 있는 다양한 예제들 보시고 코딩 속의 있는 오늘 실험한 함수들을 찾아 보시고 어떻게 사용하는지 분석해보시면 재미있을 거에요.

저작자표시

'D3.js > D3.js' 카테고리의 다른 글

[D3.js] 추가 Scale 함수  (0) 2019.11.20
[D3.js] scaleLinear 함수  (0) 2019.11.19
[D3.js] Scale 함수 사용  (0) 2019.11.15
[D3.js] 코딩의 가독성 높이기  (0) 2019.11.14
[D3.js] CSV, TSV, JSON, XML 시각화  (0) 2019.11.13

댓글()

티스토리툴바