DC.js-산점도

산점도는 수학적 다이어그램의 한 유형입니다. 데카르트 좌표를 사용하여 데이터 세트에 대한 일반적으로 두 개의 변수 값을 표시합니다. 데이터는 포인트 모음으로 표시되며 포인트는 색상이 지정 될 수 있습니다. 이 장에서는 산점도에 대해 자세히 설명합니다.

산점도 방법

산점도를 그리기 전에 다음 사항을 이해해야합니다. dc.scatterPlot클래스 및 메서드. dc.scatterPlot은 믹스 인을 사용하여 차트를 그리는 기본 기능을 얻습니다. dc.scatterPlot에서 사용하는 믹스 인은 다음과 같습니다.

  • dc.coordinateGridMixin

dc.scatterPlot의 전체 클래스 다이어그램은 다음과 같습니다.

dc.scatterPlot은 위에서 지정한 믹스 인의 모든 메서드를 가져옵니다. 다음과 같이 산점도를 그리는 자체 방법이 있습니다.

customSymbol ([symbol])

이 메서드는 기호 생성기를 가져 오거나 설정하는 데 사용됩니다.

emptySize ([크기])

이 메서드는 그룹이 비어있을 때 심볼의 반경을 설정하거나 가져 오는 데 사용됩니다.

excludedColor ([색상])

이 메서드는 차트의 필터에서 제외 된 기호의 색상을 가져 오거나 설정하는 데 사용됩니다.

excludedOpacity ([불투명도])

이 메서드는 차트의 필터에서 제외 된 기호의 불투명도를 가져 오거나 설정하는 데 사용됩니다.

excludedSize ([크기])

차트 필터에서 제외 된 심볼의 크기를 설정하거나 가져 오는 데 사용됩니다.

highlightSize ([크기])

강조 표시된 기호의 반경을 설정하거나 가져 오는 데 사용됩니다.

기호 ([유형])

각 포인트에 사용되는 기호 유형을 가져 오거나 설정하는 데 사용됩니다.

산점도 그리기

DC에서 산점도를 그리겠습니다. 이 예에서는 다음과 같은 데이터 세트를 사용합니다.howell1.csv파일. 샘플 데이터 파일은 다음과 같습니다-

"height","weight","age","male"
151.765,47.8256065,63,1
139.7,36.4858065,63,0
136.525,31.864838,65,0
156.845,53.0419145,41,1
145.415,41.276872,51,0
163.83,62.992589,35,1
149.225,38.2434755,32,0
168.91,55.4799715,27,1
147.955,34.869885,19,0
165.1,54.487739,54,1
154.305,49.89512,47,0

...............
...............

위의 샘플 파일에는 많은 레코드가 포함되어 있습니다. 다음 링크를 클릭하고 DC 위치에 저장하여 파일을 다운로드 할 수 있습니다.

howell1.csv

이제 DC에서 분산 형 차트를 그리는 다음 단계를 따르십시오.

1 단계 : 변수 정의

아래와 같이 변수를 정의하겠습니다.

var chart = dc.scatterPlot('#scatter');

여기서 scatterplot () 함수는 id scatter와 매핑됩니다.

2 단계 : 데이터 읽기

아래와 같이 howell1.csv 파일에서 데이터를 읽습니다.

d3.csv("data/howell1.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

데이터가 없으면 오류를 반환합니다. 나중에 데이터를 교차 필터에 할당합니다.

3 단계 : 레코드 가져 오기

아래에 주어진 코딩을 사용하여 레코드를 가져옵니다.

people.forEach(function(x) {
   if(x.male == 1) {
      x.gender = "Male";
   } else {
      x.gender = "Female";
   }
});

여기서는 성별을 확인했습니다.

4 단계 : 치수 설정

아래에 주어진 코딩을 사용하여 치수를 설정할 수 있습니다-

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [Math.floor(data.height), Math.floor(data.weight)];
});

차원이 할당 된 후 아래에 주어진 코딩을 사용하여 성별을 그룹화합니다.

var hwGroup = hwDimension.group().reduceCount();

5 단계 : 차트 생성

이제 아래에 주어진 코딩을 사용하여 히트 맵을 생성합니다.

chart
   .width(800)
   .height(600)
   .x(d3.scale.linear().domain([0,180]))
   .y(d3.scale.linear().domain([0,100]))
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Weight")
   .symbolSize(8)
   .clipPadding(10)
   .dimension(hwDimension)
   .group(hwGroup);

여기,

  • 차트 너비는 800으로, 높이는 600으로 지정했습니다.
  • x 및 y 축 모두에 d3.scale.linear () 함수를 적용했습니다.
  • brushOn 값을 false로 활성화했습니다.
  • 그런 다음 x 축 레이블을 높이로, y 축 레이블을 무게로 지정합니다.
  • 심볼 크기를 8로, 패딩 값을 10으로 설정합니다.
  • 마지막으로 데이터를 그룹화하고 차트를 렌더링합니다.

6 단계 : 작업 예

전체 코드 목록은 다음과 같습니다. 웹 페이지 만들기scatter.html 다음 변경 사항을 추가하십시오.

<html>
   <head>
   <title>Scatter plot Sample</title>
   <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
   <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

   <script src = "js/d3.js"></script>
   <script src = "js/crossfilter.js"></script>
   <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "scatter"></div>
      </div>

      <script language = "javascript">
         var chart = dc.scatterPlot('#scatter');

         d3.csv("data/howell1.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            people.forEach(function(x) {
               if(x.male == 1) {
                  x.gender = "Male";
               } else {
                  x.gender = "Female";
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [Math.floor(data.height), Math.floor(data.weight)];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .x(d3.scale.linear().domain([0,180]))
               .y(d3.scale.linear().domain([0,100]))
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Weight")
               .symbolSize(8)
               .clipPadding(10)
               .dimension(hwDimension)
               .group(hwGroup);

            chart.render();
         });
      </script>
   </body>
</html>

이제 브라우저를 요청하면 다음과 같은 응답이 표시됩니다.