들어가며
D3.js란?
D3는 Data Driven Documents의 약자로, 데이터를 중심으로 document를 조작하는 자바스크립트 라이브러리다. D3는 HTML, CSS그리고 SVG로 데이터를 시각화 프레임워크로 많이 쓰이고 있다.
D3의 공식 문서에는 D3의 장점 중 웹 표준을 기반으로 구현 되었다는 점을 강조하고 있다. 웹 표준을 기반으로 구현되었기 때문에 프레임 워크와 브라우저에 크게 구애받지 않고 사용할 수 있는 장점을 가지고 있다(IE의 경우 9이상에서 야 겨우 웹 표준을 지키기 때문에, 웹 표준을 지키지 않는 이전 버젼에서는 올바르게 동작하지 않는다) .https://goo.gl/maps/sLahM98xd5hUCVEz6
D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
D3의 가장 주요한 특징은 메서드 체이닝을 활용하여 우리가 원하는 시각화를 SVG로 쉽게 그려낼 수 있다는 점입니다. 이로 인해, SVG가 가지는 장점을 그대로 갖게 됩니다. 메서드 체이닝으로 필요한 변수들을 쉽게 추가 가능하며 메서드들의 나열을 쭉 읽었을 때 직관적으로 해당 코드를 이해할 수 있습니다.
d3.select('div')
.selectAll('p')
.data(dataset)
.append('p')
.text('Hello D3.js')장단점
장점
- 라이브러리 패키지 크기가 작은 편에 속한다.
- 예제가 많은 편이다.
- 시각화에 SVG를 활용한다. → SVG가 가지는 장점을 지님
- 웹 표준에 가깝다.
- DOM 기반으로 활용도가 높다.
단점
- 러닝커브가 높은 편이다.
- 외부 이미지로 저장이 불가능하다.
- 이미지 요소가 많아질 경우 CANVAS에 비해 성능이 좋지 못할 가능성이 있다.
- pre-build 차트가 아니기 때문에 브라우저에서 호출하여 그린다.
- IE9+ 이상에서만 지원한다.
활용
설치
D3.js는 공식 페이지에서 확인할 수 있듯이 아래와 같은 스크립트를 import 하여 쉽게 사용할 수 있습니다.
<script src="https://d3js.org/d3.v6.min.js"></script>