11장 범주형 데이터의 시각화

11.1 세로형 막대그래프

막대그래프(Bar Graph)는 범주형 데이터의 도수분포를 한 눈에 비교할 수 있도록 각 데이터 값의 빈도수에 비례하는 막대로 나타낸 것이다. 10.2절에서 d3를 이용한 가로형 막대그래프 그리는 것을 살펴보았는데 이 절에서는 실제  많이 이용되는 세로형 막대그래프에 대해서 알아보자. 세로형 막대그래픽을 그리는 기본적인 방법은 가로형과 유사하다.

<그림 11.1.4> 세로형 막대그래프 애니메이션

위의 예제에서는 독자들의 이해를 돕기 위해 지역명 및 학생수를 배열에 넣고, SVG 요소에 그리는 막대, 텍스트, 레이블 등의 위치에 대한 좌표를 직접 계산하여 필요한 매개변수에 숫자 또는 함수를 이용하여 기술하였다. 일반적으로 데이터는 다음과 같은 csv 파일을 만들고 이를 EX110104.htm 프로그램에서와 같이 불러온다.

EX110104.csv

11.2 원그래프

원그래프(Pie Chart)는 신문이나 잡지에서 많이 볼 수 있는 그림으로, 한 원을 변숫값의 도수에 비례하게 여러 개의 조각으로 나눈다. 일반적으로 도수의 크기가 큰 변숫값부터 작은 변숫값까지 순서대로 12시 방향에서 시계 오른쪽 방향으로 조각을 나눈다. 도넛그래프(Doughnut Graph)는 원그래프와 같은 것으로 모양을 도넛처럼 만들기 위해 원그래프의 가운데 부분을 원으로 잘라낸 형태이다.

원그래픽은 범주형 변수의 분석에 적합한 그래프인데, 연속형 데이터인 경우는 데이터값을 구간으로 나눈 후 원그래픽을 그릴 수 있다.

자바와 같은 프로그램언어를 이용하여 원그래픽을 직접 화면에 그리는 것은 좌표 계산이 매우 복잡하여 쉽지 않다. 하지만 d3.js에서는 미리 만들어진 레이아웃이 번거로운 계산을 해 주기 때문에 원그래픽을 쉽게 그릴 수 있다. d3.layout.pie() 메소드를 이용하여 원조각의 좌표를 계산한다.

원그래픽을 표시하려면 반지름을 지정하여야 하는데 outerRadius() 메소드를 이용한다. 안쪽 반지름도 innerRadius() 메소드를 이용하여 지정할 수 있는데 innerRadius(0)로 지정하면 원그래프이고 innerRadius(10) 등과 같이 숫자를 지정하면 원그래프 가운데 반지름이 10인 픽셀이 비워지게 되어 도넛그래프가 된다.

원그래픽을 그릴 경우 d3.layout.pie() 메소드를 이용하여 준비한 원조각 계산을 수행해야 하기 때문에 데이터의 지정은 지금까지와는 달리 data(pie(dataSet))로 한다. 이렇게 하지 않으면 에러가 발생하여 원그래프가 그려지지 않으므로 주의하여야 한다. 실제 원그래픽은 append(“path”)를 이용하여 그린다.

원조각의 좌표 계산은 attr(“d”,arc)이고 arc 메소드는 데이터로부터 원조각의 좌표를 계산하여 반환해 준다. 원그래프에서 각각의 원 조각은 서로 다른 색으로 구별해 주는 것이 일반적인데 style을 이용하여 지정할 수 있다.

11.3 띠그래프

띠그래프(Band Graph)는 원그래프와 유사하게 한 직사각형을 변숫값의 도수에 비례하게 여러 개의 직사각형 조각으로 나눈다. 여러 개의 색으로 구분한 띠(band)와 흡사해서 띠그래픽으로 부른다.

띠그래픽은 범주형 변수의 분석에 적합한 그래프인데, 연속형 데이터인 경우는 데이터값을 구간으로 나눈 후 띠그래픽을 그릴 수 있다.

11.4 꺽은선그래프

꺾은선그래프(line graph)는 범주형 데이터의 도수분포를 선을 연결하여 보여주는 그래프이다. 시간에 따라 변하는 데이터에 대해 시간변수를 가로축, 분석변수를 세로축으로 하여 모든 분석변수의 값을 선으로 이어주는 그래픽으로 이용된다. 이 경우 시계열그래프(time series graph)라고도 부른다.

데이터는 시간변수의 값에 따라 작은 값에서 큰 값으로 정렬한 후 점들을 연결해 준다. 꺽은선그래픽은 각각의 선(데이터)이 이어져 하나의 선이 그려지는데 대개 path를 이용하고 각각의 선은 d3.line() 메소드를 호출해서 그린다. line() 메소드는 하나의 선 전체(path)에 대한 속성을 지정하는 부분과 각각의 선(line)에 대한 속성을 지정하는 부분으로 구성된다.