추가 적립 안내

아무리 진귀한 보물이라도 허름한 상자에 담기게 되면 그 가치를 알아주는 사람을 찾기는 힘들 것이다. 특히 정보의 홍수 속에서는 정보 자체의 가치가 훌륭하더라도 표현을 어떻게 하느냐에 따라서 그 가치를 재평가받을 수도 있다. 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를 이용해 대화형 차원 차트를 만드는 방법을 다룬다.

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