12장 연속형 데이터의 시각화

12.1 점그래프

점그래프(Dot Graph)는 데이터의 개수가 적은 연속형 데이터를 정리하는데 많이 사용된다. 데이터가 모두 표시될 수 있도록 x축을 그리고 각각의 데이터 값을 점으로서 표시한다.

점그래픽을 그리면 쉽게 데이터의 분포형태, 이상점 등을 잘 알 수 있다.

12.2 히스토그램

데이터에 대한 점그래픽을 그리면 데이터의 전반적인 분포나 중심집중 경향 등을 잘 관찰할 수 있다. 하지만 데이터의 수가 많게 되면 점그래프의 점들을 구분하기 힘들 수 있다. 이런 경우 여러 개의 구간을 나누어 도수분포표를 작성한 후 이에 대한 막대그래프(막대 사이에 간격이 없는)를 그리는데 이를 히스토그램(histogram)이라 부른다. 히스토그램은 데이터의 전반적인 분포형태를 파악하는데 많이 이용된다.

d3.js에서는 히스토그램을 그리는데 필요한 레이아웃을 제공하기 때문에 간단하게 히스토그램을 그릴 수 있다.

앞의 예제에서 .thresholds(x.ticks(4))는 .thresholds([50,60,70,80,90])과 같이 직접 배열을 지정할 수 있다. 또는 범위 50에서 90까지를 증분 10으로 하는 d3.range(50,90,10)를 이용하여 thresholds(d3.range(50,90,10))과 같이 사용할 수 있다. 이를 응용하면 사용자로부터 초기값과 증분을 입력받아 히스토그램을 그리는 프로그램으로 확장할 수 있다.

12.3 줄기와 잎 그림

줄기와 잎 그림(Stem and Leaf Graph)은 연속형 데이터를 정리할 때 많이 쓰이는 그림으로 관측값의 범위, 분포의 모양, 집중도 등을 쉽게 알 수 있다.

데이터를 줄기(stem)와 잎(leaf)의 형태로 보여주는 것인데 여러 가지 종류가 있다. 여기서는 제일 마지막 자리 숫자에 대한 잎을 그리고 그 앞자리 숫자들을 줄기로하는 그래픽을 살펴본다.

일반적으로는 데이터를 오름차순으로 정렬한 후  각각의 데이터에 대해 어느 줄기에 속하는지 알아본 후 그 데이터의 잎에 해당하는 숫자를 해당줄기 오른쪽에 적는다. 여기서는 앞의 히스토그램을 그릴 때 사용하였던 .thresholds(x.ticks())와 bins = histogram(data)를 이용하여 줄기와 잎 그림을 그려보자.

12.4 상자그래프

상자그래프(Box and Whisker Plot)는 데이터의 최소(min), 일사분위수(25 percentile, Q1), 중앙값(median), 삼사분위수(75 percentile, Q3), 최댓값(max) 등을 구한 후 일사분위수와 삼사분위수를 연결하는 직사각형을 그린다. 이 직사각형 좌 우에 최솟값과 최댓값을 연결하고 중앙값을 그린다. 즉 데이터의 상 하 25%를 제외했을 때 전체적인 분포 모양을 관찰하는 것으로서 여러 데이터의 비교에 많이 사용된다.

EX120401.htm에서 주석 처리한 다음 명령문을 사용하면 그룹화된 도형과 텍스트를 쉽게 회전 시킬 수 있다. -90도 회전하면 <그림 12.4.2>의 수직형 상자그림이 된다.

var g.attr(“transform”, “rotate(-90, 200, 150)”);

<그림 12.4.2> 수직형 상자그림

12.5 산점도

산점도(Scatter Plot)는 두 개의 연속형 변수가 있을 때 한 변수를 가로축, 다른 변수를 세로축으로 하여 각각의 관찰값을 평면상의 좌표값으로 하여 점으로 나타낸다. 두 변수의 관계를 분석하는 그래프인데 두 개의 연속형 데이터의 관계를 분석하는데 매우 효율적이다.

(x,y) 데이터가 있을 때 SVG 캔버스의 x축과 y축 상대적 위치를 계산하여 원을 그리면 된다.