D3.js

Contents

Data-Driven Documents의 줄임말이라고 한다. Javascript 기반의 비쥬얼라이제이션 툴이다. SVG와 CSS를 처리하기 때문에 이를 제대로 지원하는 브라우저를 사용해야 한다. http://caniuse.com/svg 를 방문해보자. 최신의 브라우저는 대부분 지원하는 것 같다. 나는 2013년 5월 현재 chrome 브라우저 버전 26.0을 기준으로 문서를 작성했다.

나는 서버측 개발을 주로해왔다. 클라이언트측 개발은 HTML 기반의 Joinc가 아마 유일할 것 같다. 그나마도 귀차니즘으로 인해서 유저 인터페이스는 거의 신경을 쓰지 않았다. 그러니 javascript에 관심을 가질 이유도 없었고, 비쥬얼라이제이션은 꿈에도 생각해본 적이 없다. 예컨데 비쥬얼라이제이션? 그게 무슨 필요 그냥 정보만 잘 보여주면 되지 뭐..이게 내 마인드다.

그렇다고 아주 비쥬얼라이제이션에 신경을 안 쓴건 아니다. 과거 QA 를 위해서 모니터링시스템 개발한 적이 있는데, 모니터링정보를 숫자만으로 보여줄 수는 없는 노릇이라서, 비쥬얼라이제이션에 신경을 쓴적이 있긴 하다. 하지만 (외부 솔류션이 아니고 내부에서 내가 사용할 솔류션이었기 때문에) 엔지니어 관점에서, 그러니까 시스템/네트워크 관리자가 봐서 문제 없을 정도로만 신경쓴 정도다. RRD로 비쥬얼하게 표현해봤자 어디까지 가겠는가.

좀 더 높은 수준의 비쥬얼라이제이션에 관심을 가지게 된 것 역시 모니터링 때문이다. Zabbix를 이용해서 모니터링 환경을 구축을 했는데, zabbix는 모니터링 환경 구축을 위한 백앤드 시스템일 뿐이다. 시스템관리자가 뭔가 제대로 모니터링할 수 있는 환경을 만들려면 zabbix api를 이용해서 프론트앤드 시스템을 개발해야 한다. 프론트앤드 시스템을 개발하려면 모니터링 정보의 시각화가 반드시 필요하다.

만약 zabbix가 zenoss처럼 RRD 기반으로 데이터를 쌓았다면, 그냥 rrd를 사용해서 프론트앤드 시스템을 개발했을 거다. 그러나 불행히도 zabbix가 RRD 기반이 아닌 관계로 "정말 어쩔 수 없이" 시각화를 위한 도구를 찾아야 했고, javascript 기반의 D3.js를 선택하게 됐다.

인터넷 서핑 중 눈에 띄어서 선택하게 됐다. 꽤나 유명했던 Obama’s 2013 Budget Proposal을 보고 "우와 HTML과 javascript만으로 이런게 되는 구나하고 감탄을 하게 된게 선택의 원인이다. 이 레포트가 d3.js로 만들어졌던 거다. 관심을 가지고 둘러봤더니 이러한 류의 툴이 상당히 많다는걸 알게 됐는데, 그냥 d3.js로 밀고가기로 했다. 내 신조가 "툴에 큰 문제가 없으면, 그냥 손에 잡히는 것 쓰자."이다.

asdfasf

D3는 그래픽라이브러리가 아니다.

D3는 범용 그래픽라이브러리가 아니다. 데이터를 시각화 하기 위한 용도, 즉 챠트에 특화된 라이브러리다.

문서들

제목	저자	변경일