[D3.js] Scatter_산포도

이전 시간에 SVG를 이용하여 시각화를 진행할 것이다. 이번에는 '산포도'를 그려보자

 

산포도는 가로, 세로 즉, x y 축 위에 관련된 두 값을 넣는 시각화이다.

 

데이터는 Javascript의 배열에 배열을 담은 원소로 나타낸다. 

 

C++의 pair<> 컨테이너와 비슷하다고 생각하면 좋을 것 같다. 

 

이전 막대그래프와의 차이는 산포도이기에 원으로 표현하는 것이다. SVG의 'circle'을 사용한다.

 

이때까지의 코드를 보면 아래와 같다.

 

1 2 3 4 5 6 7 8 9 10 11 12 13

var w = 500, h = 100;         var datas = [                         [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],                         [410, 12], [475, 44], [25, 67], [85, 21], [220, 88]                     ]; // 산포도를 위한 데이터, vector<pair<int,int>> 처럼 이해         var svg = d3.select("body")                     .append("svg")                     .attr("width", w)                     .attr("height", h);         //svg변수 선언 : body안에 svg객체를 크기를 w,h로     http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter

 

 

이제 도화지를 지정했으니 위의 데이터에 알맞는 좌표로 원을 그려보자

 

'cx', 'cy' 'r' 로 x좌표와 y좌표를 지정하고 r이 반지름을 나타낸다.

 

 

 
 
         svg.selectAll("circle")
            .data(datas)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return d[0]+5;
            })
            .attr("cy", function (d) {
                return d[1];
            })
            .attr("r", function (d) {
                return Math.sqrt(h - d[1]);
            });
        // 원인 svg를 datas에 있는 값들로 attr을 통해 위치와 ㅈ반지름 그림
 

 

여기서 반지름의 익명함수부분이 궁금할 수 있다. 크기를 동적으로 변환하기 위함인데, 반지름의 공식에 따라 sqrt를 사용한다. sqrt는 제곱근 계산이다.

 

d[1], 배열의 배열에서 2번째 값, 즉 y값을 기준으로 반지름의 크기가 정해진다. SVG는 왼쪽 상단을 기준으로 그린다고 했다. 위 코드에서 h를 제거한다면 아래로 갈수록 원의 크기가 커질 것이다. 코드를 변경하여 확인해보길 바란다.

 

라벨(텍스트)는 이전과 유사하므로 직접 작성해보길 바란다. 차이점은 'x', 'y'의 위치의 return값과 .text의 return값이 '(x,y)' 형태로 나와야 하는 것이다. 그것은 return d[0] + ' ' + d[1]; 로 하면 된다.

 

자 이제 실습 결과를 한번 보자.

 

코드를 실행하면 위와 같다. 개발자 도구를 통해 보면,

 

위와 같은 값을 볼 수 있다. 원과 텍스트가 데이터에 있는 값에 정확히 바인딩된것을 볼 수 있다.

 

여기서, 결과의 그림이 너무 단순할 수 있다. 원 색상이 검은색이고 먼가 부족하다고 느낄 수 있다. 

 

다음 포스팅에서 척도를 배우고 이후에 축을 통해 위의 산포도를 가공해보자.