visualization using d3.js

현재 소속된 회사에서 빅데이터를 시각화 하는 방법을 찾던 중 D3.js를 학습하게 되었다. 처음에는 쉽게 접근 가능한 highcharts 와 같은 라이브러리를 사용하려고 했으나 D3.js의 확장성과 유연성으로 D3.js를 선택하게 되었다. 역시나 D3.js는 쉽지 않다.... 몇가지의 메서드는 그냥 이런 기능이다 정도만 알겠더라... 설명도 이해하기도 쉽지 않다. 개인학습용도로 정리하고자 한다.

1. D3.js란

D3.js는 데이터 시각화 프레임워크로 잘 알려져 있고, 자바스크립트로 개발을 한다.

HTML5의 SVG을 통하여 다양한 화면 해상도에서 깨짐없는 Visualizing이 가능하다.

이와 같은 막강한 시각화를 쉽게(?) 작성할 수 있다.(D3 Example 더보기)

2. 기본설정

D3.js 라이브러리는 여기 에서 다운받을 수 있다.

JS 파일 하나만 내려받게 되면 준비끝이다.

3. D3.js 코딩

아래와 같은 pie 그래프를 그려보자

실행화면 보기

D3.js의 경우도 jquery와 같은 CSS 선택자, 메소드 체인 등과 같은 기능이 제공된다. 

jquery를 해보았다면 수월하게 접근 가능하다.

자 이제 위와 같은 pie그래프를 그려주기 위한 Data가 필요하다. D3.js의 경우 JSON, CSV와 같은 데이터 타입을 쉽게 사용가능하며 아래 예제는 몇가지 데이터가 필요하지 않은 관계로 자바 배열 객체를 사용하였다.

우선 Data 객체를 선언한다.

var DATA = [10, 40, 80];

이제 SVG를 이용하여 시각화 하기 위하여 캔버스(HTML5와 혼돈하지 마시기를...) 영역을 생성한다. 쉽게 얘기하면 그림을 그리기 위한 용지영역을 생성한다고 보면 된다.

var canvas = d3.select("body").append("svg")
	.attr("width", 1500)
	.attr("height", 1500);

javascript나 jquery를 조금 아시는 분이라면 위 코드를 굳이 설명하지 않아도 알 수 있을 것이다.

그렇다 jquery와 매우 유사하다. select 메서드에 셀렉터 문자열 body를 인자로 넘기게 되면 html문서 중 일치하는 첫번째 dom 노드를 반환한다. 그리고 append 메서드로 svg tag를 추가하고 width, height를 각각 1500식 주었다. canvas는 객체이면서 함수로 사용가능하다.

이와 같이 추가된다.

이제 group tag g를 추가하고 캔버스에서 상단과 좌측으로 부터 각 300식 이동 시킨다.

var group = canvas.append("g")
	.attr("transform", "translate(300, 300)");

arc(호)의 경로 데이터 문자열을 반환하는 arc 메서드를 선언한다. innerRadius는 안쪽 호의 반지름이고 outerRadius는 바깥쪽 반지름 수치이다.

var arc = d3.svg.arc()
	.innerRadius(100)
	.outerRadius(200);

D3.js는 레이아웃을 제공한다. 해당 레이아웃 메서드를 사용하면 조금 수월하게 그래프를 그릴 수 있다. 

pie layout 을 사용한다.

var pie = d3.layout.pie()
	.value(function(d) { return d; });

arc(호)를 그리기 위한 group tag g를 생성한다.

var arcs = group.selectAll(".arc")
	.data(pie(DATA))
	.enter()
	.append("g")
	.attr("class", "arc");

data 메서드는 데이터 집합의 각 데이터를 빈 셀렉션에 연결시킨다. 

DATA 개수 만큼 생성하게 된다. enter 메서드를 이용하여 데이터를 추가할 수 있다.

앞서 pie 객체에 DATA를 인자로 넘기면 pie layout에 의하여 아래와 같이 객체에 프로퍼티에 값이 할당 된다.

arc(호)에 path를 추가한다.

arcs.append("path")
	.attr("d", arc);

이제까지 작업한 내용을 확인하면 아래와 같다.

arc(호)별로 색상과 text를 삽입해보자.

arc(호)에 text를 삽입한다.

	arcs.append("text")
	.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
	.attr("text-anchor", "middle")
	.attr("text-size", "10px")
	.text(function(d) { return d.data});

색상을 추가한다.

	var color = d3.scale.ordinal()
	.range(["red", "orange", "blue"]);

	arcs.append("path")
	.attr("d", arc)
	.attr("fill", function (d) { return color(d.data); });

전체소스

var DATA = [10, 40, 80];

var canvas = d3.select("body").append("svg")
	.attr("width", 1500)
	.attr("height", 1500);

var group = canvas.append("g")
	.attr("transform", "translate(300, 300)");

var color = d3.scale.ordinal()
	.range(["red", "orange", "blue"]);

var arc = d3.svg.arc()
	.innerRadius(100)
	.outerRadius(200);

var pie = d3.layout.pie()
	.value(function(d) { return d; });

var arcs = group.selectAll(".arc")
	.data(pie(DATA))
	.enter()
	.append("g")
	.attr("class", "arc");

arcs.append("path")
	.attr("d", arc)
	.attr("fill", function (d) { return color(d.data); });

arcs.append("text")
	.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
	.attr("text-anchor", "middle")
	.attr("text-size", "10px")
	.text(function(d) { return d.data});

.arc text{
	font-family: arial;
	font-size:2em;
	fill: #fff;
	font-weight:bold;
}

해당샘플소스는 여기를 참고하였으며

위 소스에 대하여 자세한 API Reference를 알고 싶다면 여기를 참고하길 바란다.