D3.js 로 만든 Bar Chart

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를 만들어봤습니다.

[데모보기]

[소스보기]

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

  • 진성 김

    올려주신 소스를 구글 블로그스팟의 가젯이나 포스트에 올리려고 해봤는데 전혀 안되는데, 도움 좀 주세요^^

    • codefactory

      안녕하세요

      제가 구글 블로그스팟의 가젯이나 포스트에 작성해 본 적이 없어서 정확한 답변이 될런지는 잘 모르겠지만

      일단 소스보기의 내용을 PC에서 먼저 html 파일로 만드시고 소스코드안에 있는 d3.v2.js 파일과 data/population.json 파일은 각각 http://d3js.org/d3.v2.jshttp://codefactory.kr/examples/d3/data/popuplation.json 로 바꿔주십시오

      그렇게 하고 저장하시면 PC에서는 잘 실행이 되셔야 하는데요

      제가 한 가지 예상이 되는 부분은, 혹시 인터넷 익스플로러 8이하 버전에서 실행하셨는지요? 이 소스에서 사용한 라이브러리인 d3.js 는 인터넷 익스플로러 8이하 버전에서는 작동하지 않습니다. 그 점을 확인해 주시면 좋을 것 같습니다.

  • sjh

    차트 라이브러리가 필요해서 이걸 받아서 써봤어요.. 단순한 꺽은선 그래프면 되는데 사인코싸인이라든지, 복잡한 함수차트로 표현되더라구요.. 혹시 x,y 데이터가 주어지면 단순하 꺽은선으로 나오게 할수 없을까요? 아시면 답변 부탁드립니다~~

    • codefactory

      안녕하세요, 제가 이 데모를 만드는데 사용한 D3.js 는 라이브러리의 사용법을 충분히 익히신 다음 사용하시기에 적합한데 단순한 꺽은선 그래프를 그리시는 작업이시라면 그렇게 하시는 것 보다는 D3.js 가 아닌 다른 라이브러리를 사용하시는 것이 더 좋으실 것 같습니다.

      꺽은선 그래프를 그리는데 사용하실 수 있는 차트 라이브러리들은 종류가 상당히 다양한데요, 제가 http://codefactory.kr/data-visualization-libraries/ 에 모아 놓았습니다. 참고하시면 좋을 것 같습니다.

      너무 많아서 고르시기 힘드시다면 제가 하나 골라드리면, http://www.highcharts.com/ 를 사용해 보시는 것도 좋을 것 같습니다.