D3.js란?
D3는 Data - Driven Document에서 따온 것이다. D3.js는 웹으로 접근할 수 있고 데이터 시각화를 정교하게 하려는 요구를 만족하기 위해 만들어졌습니다. D3.js는 CSS3, HTML5, SVG(Scalable Vector Graphics)등 웹 표준 기능을 활용하여 여러가지 기능을 제공합니다.
D3.js는 웹 표준과 HTML의 핵심인 DOM(Document Object Model)과 통합되어 있다. D3를 사용하면 데이터 기반의 대화형 콘텐츠를 제작할 수 있습니다. 또한, 고성능 데이터 대시보드를 만들어 정교하게 데이터를 시각화하고 동적으로 웹 콘텐츠를 갱신할 수 있는 도구를 제공합니다.
D3.js의 작동 방식
D3를 사용하는 웹 페이지는 일반적으로 스타일, 데이터, 콘텐츠를 로딩하는 전통적인 HTML 웹 페이지를 만드는 방식으로 이루어집니다.초기화면은 HTML 요소의 D3 셀렉션을 이용하거나 선택적으로 데이터를 바인딩하고 페이지의 구조와 모습을 변경합니다. 구조가 변경되면 사용자가 반응하게 되며, 사용자의 반응은 페이지의 콘텐츠를 더 많이 바뀌게 합니다. 여기에서 1단계는 페이지를 로딩할 때 한 번만 일어나므로 회색으로 표시했으며, 그 밖에 다른 단계는 사용자의 입력에 따라 여러번 일어날 수 있습니다.
셀렉션 안의 요소에 바인딩된 데이터에 대한 참조를 이용해 요소의 모습을 변경할 수 있습니다. D3는 셀렉션 안의 요소에 바인딩된 데이터로 같은 작업을 반복 적용해 다양한 시각적 효과를 낼 수 있습니다. 같은 작업을 적용해도 데이터값이 다르면 효과도 다릅니다. 이번 장 마지막 부분에 데이터 바인딩 예제가 처음으로 나오며, 이후 다양한 예를 볼 수 있습니다.