[D3.js] 배우는 방법

D3.js 는 데이터 시각화 프레임워크로 잘 알려져 있고, 자바스크립트로 개발을 한다. HTML5의 SVG(Scalable Vector Graphic) 을 통하여 다양한 화면 해상도에서도 깨짐없는 Visualizing이 가능하다. D3.js를 익히기 위한 과정을 정리해 본다. 

개념 익히기 

   - 일반적인 사항에 대하여 알자

    + D3 는 웹표준기술을 이용해 데이터를 비쥬얼라이징할 수 있는 라이브러리다. 

    + D3.js 창시자인 엠보스톡의 워크샵을 통해 개념을 잡자

    + mbostock의 작업내역 감상하기

  - 기본적인 접근 방법에 대한 생각

  - 중요한 6가지 개념에 대해서 설명한다

    + Selectors : 기초이해, Selection의 동작원리

    + Data & Joins(Enter, Update, Exit) : Thinking with Joins, Update/Enter/Exit에 대한 이해, 코드로 이해하기, 다시 기본부터 이해하기

    + Scales

    + Axis

    + Shapes

    + Layouts 

    

   D3.js workshop from Anton Katunin

초급 학습하기 

  - http://www.dashingd3js.com/ 

    + 직접 실습한 내용 [1], [2], [3], [4]

    + D3.js 의 중요성 -> D3.js 안에 구현된 SVG API사용 -> Scale -> Axis 만들기

  - http://misoproject.com/d3-chart/tutorials/quickstart 

    + 순서대로 차트 만들어 나가기 

  - http://christopheviau.com/d3_tutorial/

    + Try D3 now -> 페이지 위쪽에 있는 도형모양을 클릭해 보라

    + 따라하며 기초개념 잡기   

  - http://www.youtube.com/user/d3Vienno 

    + 동영상 강좌를 따라한다

    + dashingd3js.com 과 유사한 과정이지만 좀 더 재미난 것들을 다룬다

    + 따라서 dashingd3js.com 을 다 본후 따라해 본다 

중급 학습하기 

  - D3.js 한글화 문서

    + 한글화 API

  - http://www.recursion.org/d3-for-mere-mortals/

    + d3 차트 만드는 기술 & 디버깅  

  - http://www.d3noob.org/

    + d3 차트 만들기 Tip & Tricks

  - D3로 구현된 다양한 Chart와 Visualization 사이트

  - Dimensional Charting Framework

    + Chart간의 interactive 표현에 능함

 

  - http://nvd3.org/ 에서 D3.js 를 가지고 만들어진 차트를 살펴보자

    + 실시간 코딩으로 차트 만들어 보기

고급 학습하기 

  - D3 Tip & Tricks 실습하기 : 구글링하면 PDF자료 얻을 수 있다 (d3 tips and tricks pdf)

  - D3.js 위키의 튜토리얼을 참조하자.

  - D3.js를 이용해 자신만의 차트 컴포넌트를 만든다면 다음의 가이드를 따른다. 

    + Resuability Chart를 만들기 개념 :  Repeatable, Modifiable, Configurable, Extensible 

    + 오픈소스 차트를 연구하자 : xCharts, C3.js

  - Functional Reactive Programming(FRP)와 D3.js의 관계도 살펴보면 어떨까?

    + Bacon.js와 D3.js 사용예

  - 어차피 서버에서 데이터를 받아서 화면 처리를 해야 하므로 웹앱프레임워크와 연동해 보자

    + AngularJS & D3.js 연동 예, 다른 연동 예 

    + D3.js를 Angular Directive로 만들어 놓는 OSS

  - Socket.IO를 통하여 System Realtime Monitoring 하기  (샘플소스)

  - Node.js + Express + Socket.io + D3.js 구성하기  (소스)

 ** 중급, 고급은 포스팅이나 소스를 통하여 스스로 익히는게 답!

<참조>

  - D3 강좌

  - Stanford 대학교 Visualization Group

    + Visualization에 대한 논문을 볼 수 있다. 내가 해보고 싶은 연구분야