사례 연구: D3.js

마이크 보스톡(Mike Bostock)이 만든 D3.js는 자바스크립트의 참모습을 보여주는 완벽한 예제다.

D3는 데이터에 따른 문서(Data-Driven Documents)의 약자로, 데이터에서 화려한 SVG 그래픽을 만들어낸다. 그림 1-1은 소프트웨어 시스템의 클래스 의존성(dependency)을 D3 다이어그램으로 표시한 그림이다(출처: http://bl.ocks.org/mbostock/4341134).

► 그림 1-1

 

그림 1-2는 같은 데이터를 방사형 레이아웃으로 나타낸 것이다(http://bl.ocks.org/mbostock/1044242). D3는 너무나 유연하고 깔끔하다. 잘 정돈된 수십 줄의 자바스크립트만으로 저렇게 멋진 다이어그램을 그려내다니!

► 그림 1-2