D3.js V4

D3.js는 뛰어난 유연성과 데이터 시각화로 원하는 모든 작업을 부팅할 수 있는 기능으로  

지금까지 다양한 D3 차트를 구현하면서 항상 놀라게 했다.

D3.js는 데이터 기반 문서(D3, Data-Driven Documents)를 표방하는 SVG 기반의 시각화 기술이다. 

SVG는 ‘Scalable Vector Graphics’의 약자다.

SVG는 HTML 페이지 안에서 다른 태그와 같은 방식으로 화면을 그리고, 

코드 작업으로 이미지를 편집하여 이벤트를 처리할 수 있고,

그려야 할 선의 위치, 길이, 방향 등을 수학적으로 결정하기 때문에 여타 이미지와는 다르게 

벡터 기반 그래픽으로 더 나은 화질을 화면에 보여주면서 확대·축소시 그림이 깨지는 등의 품질 손상이 없는 장점을 지녔다.

D3.js는 이런 SVG의 장점을 충분히 활용해서 고품질의 화려한 데이터 시각화를 쉽게 만들어낼 수 있는 다양한 API를 제공한다. 

D3.js를 사용해 시각화를 구현하기 위해 필요한 가장 핵심 기능은 ‘체이닝 메서드’다. 

체이닝 메서드는 앞 단계에서 수행되는 동작을 온점(.)으로 이어가며 다음 동작으로 넘겨주는 역할을 한다. 

D3.js 체이닝 메서드 구현방식 예시

D3.js의 기본 동작 원리를 정리하면 이렇다.

1. 데이터를 불러오고(csv, json 등)   2. 문서 요소에 데이터를 엮고, 필요한 요소를 만들어낸 다음(체이닝 메서드)   3. 각 문서 요소에 엮인 개별 데이터를 토대로 해당 문서요소를 변환(g, transition)   4. 사용자의 입력에 대한 반응으로 문서요소의 상태를 한 값에서 다른 값으로 이동(mouseover 등)

D3.js는 기본적으로 데이터를 불러오고, 

이 데이터를 표현하는 데 적합한 HTML 문서 요소를 새로 만들어 데이터를 엮는 데서 시작된다. 

이후 엮인 데이터를 토대로 해당 문서 요소에 시각적인 값을 부여하는 과정을 거쳐 구현된다. 

예컨대 막대그래프라면 데이터를 ‘막대’에 엮고, 데이터를 막대의 길이 값으로 지정하는 식으로 그린다. 

이후 추가 조작이나 사용자와의 상호작용을 통해 문서 요소의 상태가 한 값에서 다른 값으로 변하는 과정이 더해진다.

D3.js는 클릭이나 마우스 오버 등의 작용이 있으면 해당 행위에 지정된 값으로 길이나 색상 값의 변화를 계산해서 바꿔주는 방식 등을 사용해서 동적 요소를 구현하는 형태다.

지금까지 모든 장에서는 D3라이브러리의 v4버젼에 대해서 다루었다.

때문에 D3.js에 대해서 깊이있게 학습하다보면 D3에 있는 공식 API외에도

다른 제공하는 함수나 기능이 많다는 것을 알 수 있다.

이 점은 구글링을 통해서 따로 학습해야 할 필요가 있다.

그래서 관련 URL Reference를 아래에 남긴다.

API Reference 

d3 Shape

https://github.com/d3/d3-shape/

d3 Selection

http://bost.ocks.org/mike/selection/

d3 Join[또는 .data()]

http://bost.ocks.org/mike/join/

d3 Circle (Selection과 Join의 example)

https://bost.ocks.org/mike/circles/

d3 간단요약설명 - 체이닝메서드의 이해

https://www.slideshare.net/yakuyaku/d3-55915496

D3 V3 ↦ V4 변환

https://github.com/d3/d3/

D3 SVG Axes - tick

https://github.com/zziuni/d3/SVG-Axes

D3 format

https://github.com/zziuni/d3/d3_format

D3 tutorial - D3 튜토리얼 자습서(용어정리가 상당히 잘되어있다.)

http://www.tutorialsteacher.com/d3js/scales-in-d3