5.1 D3.js 개요

5.1.1 D3.js는 무엇인가?

• D3.js(이하 D3)는 데이터를 시각화하기 위한 무료 오픈 소스 자바스크립트 라이브러리이다. D3는 웹 표준에 기반한 저수준 접근 방식을 택하고 있으며, 이는 동적이고 데이터 기반의 그래픽을 작성하는 데 있어 유연함을 제공한다.

5.1.2 D3 is a low level toolbox

• D3는 전통적인 차트 라이브러리가 아니다. 차트라는 개념이라기보다는 다음과 같은 구성 요소들로 데이터를 시각화한다.

5.1.3 D3 구성요소

stacked area chart를 만드는 예제를 기준으로 필요한 구성요소는 다음과 같다.

• a CSV parser to load data,
• a time scale for horizontal position (x),
• a linear scale for vertical position (y),
• an ordinal scale and categorical scheme for color,
• a stack layout for arranging values,
• an area shape with a linear curve for generating SVG path data,
• axes for documenting the position encodings, and
• selections for creating SVG elements.

이것만 보면 고려 사항이 많은 것처럼 보인다. 하지만 각 요소는 독립적으로 사용할 수 있으므로 모든 것을 한꺼번에 배울 필요는 없고 개별 요소를 배운 다음 조합해서 사용하면 된다.