D3.js 로 만든 Bar Chart

D3.js 는 자료를 시각화하는데 사용할 수 있는 자바스크립트 라이브러리 입니다. SVG를 사용해서 차트와 그래프, 그리고 이외에 다양한 형태를 가진 모양을 만들어낼 수 있습니다. D3.js로 SVG뿐 아니라 div, li 등 다른 HTML 엘리먼트를 사용할 수도 있지만 SVG를 사용하면 circle, line 등 차트나 그래프를 그리는데 필요한 다양한 모양을 사용할 수 있습니다.

D3.js를 사용해서 만든 다양한 example들 을 보면 D3.js의 활용범위를 가늠하실 수 있으실 것 같습니다.

D3.js에서 D3는 Data-Driven Documents를 의미합니다. 여기서 Document는 HTML Document, DOM을 의미합니다. D3.js는 자료를 받아서 해당자료 하나하나를 DOM 엘리먼트로 만들어서 화면에 뿌려줍니다. SVG를 사용해서 뭔가 그래픽적인 요소를 만드는 데 사용할 수도 있는 라이브러리이지만, 자료의 시각화를 하는데 사용하려는 목적으로 만들어진 라이브러리인 것 같습니다. D3.js example을 아무곳이나 방문하셔서 웹브라우저의 개발자도구로 선택해보시면, circle, line, bar 등 다양한 비주얼 요소가 하나하나의 DOM 엘리먼트로 되어 있는 것을 보실 수 있습니다. 자료를 가지고 그에 대응하는 DOM 엘리먼트를 만든 것 입니다.

D3.js는 SVG와 CSS Selector를 지원하지 않는 IE8 이하 버전에서는 작동하지 않습니다. IE8 이하 버전에서 D3.js를 사용하기 위해서는, SVG를 플래시로 대체해서 표현해주는 svgweb을 사용하거나 또는 D2.js 처럼 SVG를 사용하는 라이브러리이지만 IE8 이하 버전에서는 VML을 사용하는 Raphaël을 사용해서 D3.js를 표현하는 d34raphael 또는 r2d3을 사용하고 추가로 CSS Selector engine Sizzle을 사용하면 된다고 하는데, 제가 사용해본적은 없습니다.

D3.js를 사용해서 간단한 Bar Chart를 만들어봤습니다.

[데모보기]

[소스보기]

별로 도움될만한 코드들은 아니지만, 앞으로 데모를 만들어서 계속 올리려고 합니다.