[D3.js] D3.js 소개

D3.js란?

주어진 데이터를 시각적으로 표현하는 자바스크립트 라이브러리.

https://github.com/d3/d3/wiki/Gallery 사이트에 들어가면 D3.js를 이용해 그릴 수 있는 그래프 종류를 볼 수 있다.

D3.js는 아이디어에 따라 다양한 그래프를 그릴 수 있다. 이러한 점이 그릴 수 있는 그래프가 고정된 일반적인 그래프 그리기 라이브러리나 API 서비스와 큰 차이가 난다.

애니메이션은 다른 그래프 라이브러리와 비교해 아주 부드럽게 동작.

스마트폰이나 태블릿에서도 동작한다.

다른 그래프 그리기 라이브러리와 비교

일반적인 그래프 그리기 라이브러리인 jQuery의 jpPlot라이브러리나 API 서비스인 Google Charts API라면 데이터를 준비해 그래프 종류나 색상 등을 지정하거나 서버로 데이터를 보내면 그래프를 바로 그릴 수 있다.

D3.js는 특정 종류의 그래프 그리기 기능이 없다. D3.js가 가진 것은 데이터를 처리하여 어디에 그릴 것인가를 좌표나 넓이 등으로 반환하는 기능뿐이다.

만약 단순한 그래프를 표시하고 싶을 뿐이라면 굳이 D3.js를 사용할 필요가 없다. 가볍게 사용할 수 있는 jqPlot이나 Google Charts API 등을 이용하는 편이 시간이나 비용면에서 훨씬 이득이다.

그러나 데이터를 역동적으로, 더욱더 매력적으로 표현하고 싶을 때는 D3.js가 제격이다. 실시간으로 온도 변화를 반영하고자 하거나 지도와 연동하여 어느 곳으로부터의 접속이 많은가 등을 시각적으로 표현할 수 있다. 아이디어에 따라 다양하게 표현할 수 있는 것이 D3.js이다.

D3.js 원리

D3.js는 HTML의 DOM요소나 SVG 요소, Canvas요소를 이용하여 그래프를 그리는 것. 즉 페이지 위에 표시된 요소에 대해 속성이나 좌표를 지정하여 그래프를 표시하는 것. 즉 만드는 사람의 창의력과 상상력으로 구현된 것.

그리기 기능을 가지고 있지 않으므로 그리기 처리에 관해서는 브라우저의 지원 여부에 따라 달라진다. 즉. 브라우저가 지원하지 않으면 직접 이를 해결해야 하나, 뒤집어 보면 라이브러리의 버전 업을 기다리지 않아도 브라우저의 최신 그리기 기능을 이용할 수 있다.

D3.js와 지도

데이터와 지도를 연동할 수 있다. 다룰 수 있는 지도 데이터 형식에는 GeoJSON과 이보다 더 가벼운 TopoJSON이 있다.

메서드 체인

자바스크립트에서는 객체에 대해 메서드를 호출할 때 연속된 지시를 전달할 수 있는 메서드 체인이라는 기능이 있다. D3.js는 이 메서드 체인이 끊기지 않게 되어 있다.

ex) 객체이름.메서드이름().메서드이름().메서드이름()