D3 라이브러리

 

 

자바스크립트 인포그래픽에 적합한 라이브러리 – D3

공식:  http://d3js.org/

 

공식사이트에 예시사이트가 나와있다.

GOOD~!

 

 

 

 

출처 : http://html5dev.tistory.com/520

 

전세계적으로 데이터가 어마어마하게 증가하면서 데이터를 잘 처리하고 취급하는 것도 중요하게 되었습니다. 이런 가운데 미국 New York Times가 적극적으로 활용하고 있거나, Github의 Watch 랭킹도 상위에 올라와 있어 인기가 빠르게 올라가고 있고 데이터를 비쥬얼하게 보여주는 d3.js라이브러리가 있습니다.

이 라이브러리를 사용하여 좀처럼 웹에서는 구현하기 어려웠던 부분을 데이터 가시화를 쉽게 할 수 있어, 복잡한 데이터를 빠르게 이해할 수 있는 사이트를 만들기 쉽게 됩니다.

 

미국 오바바 대통령의 국가 예산안을 쉽게 보여주는 뉴욕타임즈의 기사를 보면 다음과 같이 구현되어 있습니다.

복잡하고 정보량이 많은 오바마 대통령이 제안한 미국 국가 예산안이 비주얼하게 보여주고 있습니다. 데이터를 표로 보거나 그래프로 보는 것만으로 이해하기 어려운 것을 쉽게 보여줄 수 있는 성공적인 케이스라고 할 수 있습니다.

관련 기사 링크: http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html

 

이처럼 기본적인 그래프는 물론 지도관련 데이터를 렌더링,미디어 아트와 같은 여러가지가 구현이 가능합니다.

공식문서 내용의 정의를 살펴보면 다음과 같습니다.

D3는 임의의 데이터를 문서 객체 모델(DOM)과 결합시켜 데이터 실행을 위한 문서 변경을 가능하게 합니다. 예로 수치배열로부터 HTML 테이블을 만들거나 같은 데이터로부터 인터렉티브한 SVG기반의 막대그래프를 만들어 이를 깔끔하고 대화적인 형태로 변화시킬 수 있습니다.

D3의 목표는 모든 기능을 갖춘 획일화된 프레임웍이 되는 것이 아니라, D3가 제공하는 것은 문제의 핵심부분인 솔루션입니다. 즉, 데이터에 근거해 문서를 효율적으로 조작하는 방법입니다. 이를 통해 특수한 방법을 이용할 필요 없이 고도의 유연성을 유지하면서, CSS3, HTML5, SVG라는 웹표준이 가지는 능력을 통해 가능하게 됩니다.

즉 데이터라는 것을 표현하는 웹페이지에서 형태를 간단하게 관련짓는 라이브러리입니다. 이런 연동에 대한 것을 d3.js가 처리해주는 대신에 디자이너나 개발자는 데이터가 어떻게 표현될 것인지를 처리하는데 집중할 수 있게 됩니다.

소스코드만 본다면 메소드채인, CSS실렉터, jQuery와 같은 구조가 사용되어 jQuery를 사용할 주 아는 분들이라면 쉽게 이해할 수 있습니다.