아무리 진귀한 보물이라도 허름한 상자에 담기게 되면 그 가치를 알아주는 사람을 찾기는 힘들 것이다. 특히 정보의 홍수 속에서는 정보 자체의 가치가 훌륭하더라도 표현을 어떻게 하느냐에 따라서 그 가치를 재평가받을 수도 있다. D3.js는 소중한 정보에 효율성과 정확성을 더할 뿐만 아니라, 심미적인 아름다움까지 추가해 정보의 가치를 증대시킬 것이다. 이 책에서는 웹 기반의 데이터 시각화에서 가장 많이 사용되는 d3.js를 통해서 기본 개념과 더불어 실무에 응용할 수 있는 다양한 예제를 제공한다.

[목 차]

1장. D3.js 시작
__소개
__간단하게 D3 개발 환경 설정
__NPM 기반 개발 환경 설정
__D3 스타일 자바스크립트 이해

2장. 선택
__소개
__단일 요소 선택
__다중 요소 선택
__선택 반복
__부분 선택 수행
__함수 연결
__원시 선택 조작

3장. 데이터 다루기
__소개
__데이터로 배열 바인딩
__데이터로 객체 리터럴 바인딩
__데이터로 함수 바인딩
__배열 다루기
__데이터 필터링
__데이터 정렬
__서버에서 데이터 불러오기

4장. 스케일 사용
__소개
__양적 스케일 사용
__시간 스케일 사용
__순서 스케일 사용
__문자열 보간
__색상 보간
__복합 객체 보간
__사용자 정의 보간자 구현

5장. 축 다루기
__소개
__기본적인 축 사용법
__틱 사용자 정의
__눈금선 그리기
__동적으로 축의 스케일 조절

6장. 스타일 전환
__소개
__단일 요소 애니메이션
__다중 요소 애니메이션
__완화 사용
__트위닝 사용
__전환 연결 사용
__전환 필터 사용
__전환 이벤트 살펴보기
__사용자 정의 보간자 구현
__타이머 사용

7장. 모양 다루기
__소개
__간단한 모양 만들기
__선 생성자 사용
__선 보간 사용
__선장력 변경
__영역 생성자 사용
__영역 보간 사용
__아크 생성자 사용
__아크 전환 구현

8장. 차트 다루기
__소개
__선 차트 만들기
__영역 차트 만들기
__분산형 차트 만들기
__버블 차트 만들기
__막대 차트 만들기

9장. 레이아웃 다루기
__소개
__파이 차트 만들기
__누적 영역 차트 만들기
__트리맵 만들기
__트리 만들기
__인클로저 도표 만들기

10장. 시각화 상호작용
__소개
__마우스 상호작용
__멀티터치 디바이스 상호작용
__줌과 이동 구현
__드래그 구현

11장. 포스 사용
__소개
__중력과 전하 사용
__운동량 생성
__링크 제약 설정
__시각화를 위한 포스 사용
__포스 조절
__포스-방향 그래프 만들기

12장. 맵 다루기
__소개
__US 지도 투영
__세계 지도 투영
__등치 지역도 만들기

13장. 시각화 테스트
__소개
__Jasmine을 통한 테스트 환경 구축
__시각화 테스트: 차트 생성
__시각화 테스트: SVG 렌더링
__시각화 테스트: pixel-perfect 막대 렌더링

부록. 몇 분 안에 대화형 분석 기능 구현
__소개
__Crossfilter.js 라이브러리
__차원 차트: dc.js

아무리 진귀한 보물이라도 허름한 상자에 담기게 되면 그 가치를 알아주는 사람을 찾기는 힘들 것이다. 특히 정보의 홍수 속에서는 정보 자체의 가치가 훌륭하더라도 표현을 어떻게 하느냐에 따라서 그 가치를 재평가받을 수도 있다. D3.js는 소중한 정보에 효율성과 정확성을 더할 뿐만 아니라, 심미적인 아름다움까지 추가해 정보의 가치를 증대시킬 것이다. 이 책에서는 웹 기반의 데이터 시각화에서 가장 많이 사용되는 d3.js를 통해서 기본 개념과 더불어 실무에 응용할 수 있는 다양한 예제를 제공한다.

★ 이 책에서 다루는 내용 ★
■ D3 스타일의 자바스크립트 활용 방법
■ D3에서 HTML과 SVG의 효율적인 선택 및 조작
■ 데이터를 사용한 시각화
■ D3 스케일과 보간자
■ 다양한 스타일의 애니메이션
■ D3 레이아웃과 포스 조작
■ 터치 지원을 하는 모바일용 시각화
■ 테스트 주도 시각화 구현
■ Crossfilter와 dc.js와 함께하는 쉽고 빠른 다차원 데이터 시각화

★ 이 책의 대상 독자 ★
이 책은 HTML과 CSS, 자바스크립트의 개발자이거나 이러한 언어들에 굉장히 익숙하며, D3를 사용해보고자 하는 독자들을 대상으로 한다. 기존 데이터 시각화 개발자들에게는 빠르게 찾아 볼 수 있는 참고서가 될 것이다.

★ 이 책의 구성 ★
1장, *D3.js 시작*에서는 D3.js가 무엇인가에서부터 D3.js 데이터 시각화를 시작하기 위한 환경을 구성하는 방법을 다룬다.

2장, *선택*에서는 D3를 사용해 데이터 시각화를 수행할 때 가장 중요한 작업인 선택에 대해 다룬다. 선택은 페이지 내에서 어떤 요소를 목표로 하도록 도와준다.

3장, *데이터 다루기*에서는 데이터 시각화 프로젝트를 진행하면서 데이터가 프로그래밍 구조와 이를 나타내는 시각화 메타포(은유)에서 어떻게 표현될 수 있는지 알아본다.

4장, *스케일 사용*에서는 데이터 시각화에서 가장 중요한 세부 주제 중 하나인 스케일을 사용하는 방법을 다룬다. 데이터 시각화 개발자로서 반복해서 수행해야 될 작업은 데이터 도메인에서 시각화 도메인으로 값을 매핑하는 작업일 것이다. 4장에서는 값을 매핑하는 방법을 중점적으로 다룬다.

5장, *축 다루기*에서는 직교 좌표계 기반의 시각화에서 사용되는 축 요소와 이와 관련된 기술을 다룬다.

6장, *스타일 전환*에서는 주로 D3 라이브러리에서 제공되는 전환과 애니메이션 지원에 대해 다룬다. *한 장의 그림은 수천 마디의 가치를 가진다.*라는 속담처럼 6장에서 다루는 다양한 주제는 데이터 시각화의 초석이 된다.

7장, *모양 다루기*에서는 W3C 표준으로 현재 시각화 프로젝트에서 널리 사용되는 SVG를 다룬다.

8장, *차트 다루기*에서는 데이터 시각화에서 사용된 가장 오래되고 신뢰할 만한 기법 중 하나며, 데이터 시각화의 표현으로 정의가 잘돼 있고 이해가 쉬운 차트의 몇 가지 표현을 다룬다.

9장, *레이아웃 다루기*에서는 D3 레이아웃을 집중적으로 다룬다. D3 레이아웃은 꽤나 복잡하고 흥미로운 시각화를 생성할 수 있는 요소 그룹에 대한 위치 정보를 계산하고 생성할 수 있게 하는 알고리즘이다.

10장, *시각화 상호작용*에서는 D3가 인간과 시각적으로 상호작용할 수 있도록 지원하는 데 초점을 맞춘다.

11장, *포스 사용*에서는 D3의 가장 매력적인 주제 중 하나며, 시각화에 추가할 수 있는 가장 멋진 기법 중 하나인 포스 시뮬레이션을 다룬다.

12장, *맵 다루기*에서는 기본적인 D3 지도의 시각화 기법을 소개하고, 완벽하게 동작하는 지리적인 시각화를 구현한다.

13장, *시각화 테스트*에서는 TDD(Test Driven Development) 기법을 사용해 전문가처럼 시각화를 테스트하는 방법을 다룬다.

부록, *몇 분 안에 대화형 분석 기능 구현*에서는 Crossfilter.js와 dc.js를 이용해 대화형 차원 차트를 만드는 방법을 다룬다.

닉 치 주(Nick Qi Zhu)
소프트웨어 개발 분야에서 10년 이상의 경력을 쌓은 전문 프로그래머이자 시각화의 열광적인 팬이다. D3에 기반을 둔 다차원 차트 라이브러리인 dc.js의 개발자이기도 하다. 현재 ThoughtWorks에서 리드 컨설턴트로 즐겁게 일하며 또 배우고 있다.


옮긴이 김동영
미국 아이오와 주립대학교(Iowa State University)에서 컴퓨터 과학(Computer Science) 전공으로 학부를 졸업하고, 동 대학원에서 HCI(Human Computer Interaction)로 석사 학위를 받았다. 현재는 DGIST(대구경북과학기술원)에서 머신 러닝과 영상처리 관련 연구를 수행 중에 있으며, 이와 관련된 다수의 논문과 특허를 보유하고 있다.