d3. js 를 이용한 챠트 라이브러리들 (C3.js / NVD3.js / Cubism.js)

사실 d3 라이브러리를 사용하는것은 OpenGL 이나 SVG/GDI+ 를 사용하는것 만큼 나름 로우레벨 작업이다. 이름 자체가 나타내듯이 Data-Driven Documents 이지 그래프 / 차트 라이브러리가 아니기때문이다.개인적으로는 아주 가끔 가다가 차트작업을 했었고, 차트에 그려질 그래프 스타일이 그때 마다 가지각색 이었기때문에 chart FX 나 Teechart 를 사용하기보다는  GDI+  로 직접 그렸던것 같다.  (차트라이브러리를 공부해서 사용하는것보다 밑바닥부터 그린게  편하긴한데.. 대략 일주일정도 소모됬던것 같다) 

d3 라이브러리 경우 자유성은 분명 높지만, 간단하면서 아주 일반적인 차트를 그리는데 있어서는 공부도 좀 해야하고 신경써야할 부분이 많다. 이럴때  d3 를 이용하여 어느정도 템플릿화한 라이브러리가 필요한데 그런것들을 소개해본다.

---

그 전에 d3.js 로 작업한것을 잠시 살펴보자.

d3.js (http://d3js.org/)

- d3.js 를 그대로 이용하여 애니매이션 그래프 개발   (주의 : 동영상 클릭시 음악나옴) 

- d3 는  scale  및  axis 를 이용하여  x/y 축 그린다. 

- d3 에 transition 특성을 이용하여 애니매이션해준다. 

- d3 에 표시되길 원하는 데이터를 바인딩하는 방법만 알면된다. 

- d3 에서는 툴팁같은것도 직접 작성해야한다. 

- d3 는 SVG 기반의  2d 라이브러리이다.  3d 그래프를 그리려면 webGL 기반을 사용해야한다. 

- d3 는 highchart 나 google charts  와는 전혀 다른 성질의 것이다.

C3.js (http://c3js.org/)

- d3.js 를 이용한 범용 차트 라이브러리 

- d3.js 를 배워야하는 러닝커브를 완화시킨다.

NVD3.js (http://nvd3.org/index.html)

- d3.js 를 이용한 범용 차트 라이브러리 

- c3.js 와 비교되는데 이게 더 편하다는 글들이 인터넷에 많은듯~

Cubism.js (https://square.github.io/cubism/)

- d3.js 를 이용한 타임시리즈 데이터 특화 라이브러리 

- Graphite 같은 타임시리즈특화 NoSQL 의 데이터를 가시화할수있다.  (InfluxDB 도 가능한지는 모름)

MetricsGraphics.js (http://metricsgraphicsjs.org)

- d3.js 를 이용한 타임시리즈 데이터 특화 라이브러리