D3.js 환경설정

팀 프로젝트 메인화면에 회원들의 취향이나 관광 데이터를 이용해 데이터를 시각화 하기 위해 D3.js를 사용 해보려고 한다.

D3.js(Data-Driven Documents)

데이터 기반 문서의 약자이다. 데이터를 렌더링 할 수 있는 자바스크립트 기반의 라이브러리, 쉽게는 데이터 시각화 라이브러리다. D3의 코어 라이브러리는 Javascript와 W3C DOM API만 칠수 사항으로 전재한다.
D3 공식 홈페이지에 라이센스 BSD로 영리, 비영리 모두 사용, 수정 가능한 그래프들이 존재한다.
D3는 HTML, SVG, CSS를 사용해서 데이터에 활기를 부어준다.
주안점 : 최신 브라우저의 호환성 보장

D3.js 작업 순서

1. 데이터를 불러온다.
2. 작업할 공간 선택한다.
3. 공간에 불러온 데이터를 연결(바인딩)한다.
4. 각각 연결한 것을 원하는대로 그린다.

D3.js 동작 과정

loarding - 시각화 하기 위해 불러오고자 하는 데이터를 불러옴
Selecting-Binding - 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동
Transform - 그래프의 유형, 색상, 축 등 다양한 요소 지정
Transition - 클릭, 드래그 등 인터렉션 효과 지정

SVG

scaleable Vector Graphics
웹용 벡터 그래픽, html문서에 직접 포함, 삽입할 수 있다. IE8 이하를 제외한 모든 브라우저에서 지원한다.

장점 : 토드 작업으로 이미지 편집 가능, 품질 손상 없이 확대/축소 가능

D3 CDN 방식으로 사용하기

누구나 쉽게 다운로드 없이 인터넷만 연결되면 바로 사용할 수 있다. 하지만 아무래도 인터넷이 끊기는 상황이 올 수도 있기 때문에 선택은 자신의 몫이다.

<script src="https://d3js.org/d3.v5.min.js"></script>

D3 라이브러리 다운로드받아 사용하기

1.D3 홈에이지 접속

2. 메인 하단에 d3.zip 클릭 다운로드
   
   

3. 스프링 resource에 d3라는 폴더 안에 방금 받은 파일을 압축 해제한 .js파일을 넣어준다. 폴더 이름은 어느것으로 해도 상관은 없다.
   

4. HTML 문서에 다음 삽입한다.

<script src="d3/d3.min.js"></script>