추가 적립 안내

D3.js는 HTML5 기반 데이터 시각화 라이브러리의 대명사라고 해도 좋을 만큼 훌륭한 시각화 도구다. 이 책은 D3.js의 기본 내용과 백본(BackBone) 같은 MVC 프레임워크, Socket.io 같은 실시간 동기화 네트워크 라이브러리와 함께 Node.js상에서 실시간 데이터 시각화를 만들어가는 과정을 담고 있다. 프론트엔드 개발의 한 축으로서 실전 데이터 시각화를 접해보고 싶은 분에게는 최고의 선택이 될 것이다.

[이 책에서 다루는 내용]
- 다른 프로젝트에서도 사용할 수 있는 재사용 가능한 차트 작성
- 폴리필(polyfill)을 사용해서 SVG가 지원되지 않는 브라우저에서도 작동하는 차트 작성
- D3와 백본(Backbone)을 사용한 대화형 단일 페이지 애플리케이션 작성
- D3 기반 차트 패키지 작성, 테스트, 배포
- 자체 제작 지도 작성 및 지도 라이브러리와 D3의 통합
- 노드(Node)와 D3를 활용한 실시간 애플리케이션 작성

[이 책의 대상 독자]
복잡한 데이터 시각화를 만들 수 있는 방법을 배우고 싶은 소프트웨어 개발자라면 이 책은 필수 아이템이다. D3에 대한 기초 지식이 있는 독자에게 적합하며, 실제 현장에서 사용되는 예제를 중심으로 데이터 시각화 애플리케이션의 구조를 설계하고 엔터프라이즈 수준의 차트와 인터랙티브 대시보드를 만들고 싶어 하는 사람에게 더없이 좋은 선물이 될 것이다.

[이 책의 구성]
1장, '데이터 시각화'에서는 데이터 시각화에 더 친숙해질 수 있도록 흥미로운 시각화 프로젝트나 레퍼런스 예제를 보여준다. 역사 속에서의 시각화 예제를 살펴보고 어떤 점이 D3를 데이터 시각화에 아주 적합한 도구로 만드는지 알아본다.

2장, '재사용 가능한 차트'에서는 다수의 프로젝트에서 사용될 수 있는 설정형 차트(configurable chart)를 만드는 법을 알아본다. 이 장에서는 웹 페이지 내의 요소들을 다루기 위해 셀렉션(selection)을 쓰는 방법과 재사용 가능한 바코드 차트를 만드는 법을 완전히 처음부터 익혀보고, 커스텀 레이아웃 알고리즘을 만들어서 방사형 막대 차트에 적용해 볼 것이다.

3장, 'SVG 없이 시각화 제작'에서는 현재 브라우저 시장에서의 SVG 지원 상태에 대해 토론해보고 SVG를 지원하지 않는 브라우저에서 시각화를 만드는 전략을 알아본다. div 요소를 써서 움직이는 버블 차트를 만들고, 브라우저의 SVG 지원 여부를 알아내는 방법을 배우고, HTML5의 canvas 요소를 사용해서 SVG 도형을 렌더링하는 폴리필(polyfill)을 적용해 볼 것이다. D3와 canvas를 함께 사용해서 시각화를 만드는 방법도 알아볼 것이다.

4장, 'D3로 색상 선택기 제작'에서는 사용자 상호작용을 위한 요소와 컨트롤을 만드는 데 필요한 개념들을 알아본다. 4장에서는 슬라이더 컨트롤을 만들기 위해 D3의 드래그 동작과 재사용 가능한 차트 패턴을 사용한다. 슬라이더 컨트롤을 이용해서 CIE Lab 컬러 모델 기반의 재사용 가능한 색상 선택기(color picker)를 만든다.

5장, '사용자 인터페이스 제작'에서는 차트에서 특정 요소를 강조하기 위해 이벤트 리스너를 사용하는 법을 알아본다. 툴팁을 만드는 방법을 살펴보고, 앞 장에서 만든 차트에 툴팁을 적용하는 방법을 배워본다. 영역 차트를 만들어서 brush 동작을 통해 차트의 일부 영역을 선택하는 방법을 익힌다.

6장, '차트끼리의 상호 작용'에서는 백본(Backbone)을 써서 데이터와 시각화를 분리하여 구조화된 웹 애플리케이션을 만들어보고, D3를 융합하는 방법을 알아본다. 애플리케이션 상태의 일관성을 유지할 수 있도록 모델과 뷰, 컬렉션과 라우터를 구현하는 방법을 배운다. 6장에서 배운 내용을 5장에서 구현한 영역 차트에 적용해서 시계열 주가(stock price)를 볼 수 있는 애플리케이션을 만들어 본다.

7장, '차트 패키지 제작'에서는 D3를 이용한 차트 패키지를 만드는 개발 작업흐름을 소개한다. 패키지를 구현하고, 조직화하고 배포하는 데 가장 적합한 도구와 모범 사례를 소개한다. 만들어 낸 차트 패키지를 외부 라이브러리처럼 사용하는 샘플 프로젝트를 만들어 볼 것이다.

8장, '데이터 기반 애플리케이션'에서는 웹 애플리케이션 예제를 통해 시각화 프로젝트를 배치(deploy)할 수 있는 도구를 소개한다. 세계은행의 데이터 API를 이용해서 인간 개발 지수(indicators of human development)의 추이를 볼 수 있는 시각화 애플리케이션을 만들어 본다. 시각화 프로젝트 호스팅을 위해 깃허브(GitHub) 페이지를 이용하는 방법을 알아보고, 정적인 웹 사이트(static website)를 호스팅하기 위해 아마존 S3를 사용하는 방법을 살펴본다.

9장, '대시보드 제작'에서는 대시보드를 만들기 위한 개념과 모범 사례를 소개한다. D3와 커스텀 차트를 써서 학급 내 학생들의 성적을 모니터링할 수 있는 대시보드를 직접 만들어 본다.

10장, '지도 제작'에서는 D3의 지리(geographic) 함수를 이용해서 벡터 지도를 만드는 방법을 알아본다. 지리 데이터를 획득하는 방법과 지리 데이터를 D3에서 사용하기 편리한 GeoJSON과 TopoJSON 형식으로 변환하는 방법을 배운다. D3를 사용해서 등치 지역도(choropleth map)를 만들고 TopoJSON 라이브러리를 써서 국가 간 인접과 경계를 시각화할 것이다. Mapbox와 함께 커스텀 D3 레이어를 만드는 방법도 알아본다.

11장, '고급 지도 제작'에서는 몇 가지 지리학적 투영법(geographic projections)을 소개하고 지도를 특정 위치에 중심과 축척을 맞추도록 투영법을 설정하는 방법을 알아본다. 회전하는 지구를 표현하기 위해 정사영법Orthographic projection을 적용해보고, 전체 화면의 별자리도(star map)를 만들기 위해 항성 목록(star catalog)과 평사도법(Stereographic projection)을 사용한다. 정사영법을 써서 지구를 래스터(raster) 이미지로 canvas에 투영하는 방법도 알아본다.

12장, '실시간 애플리케이션 제작'에서는 실시간 애플리케이션을 만들기 위해 필요한 개념과 도구를 소개한다. 애플리케이션의 상태를 실시간으로 업데이트하기 위해 Firebase를 쓰는 법을 배운다. 끝으로 Node, Socket.IO, D3를 함께 사용해서 사용자가 정의한 주제에 맞는 지오태그(geotag) 트윗의 지리 분포를 볼 수 있는 실시간 애플리케이션을 만들어 본다.

[지은이의 말]
D3는 아주 놀라운 라이브러리다. D3 웹 사이트에는 수백 가지의 아름다운 예제와 시각화와 차트가 있는데 대부분이 D3를 써서 만들어져 있다. 예제들을 보면 매우 다양한 시각적인 결과물을 D3로 만들어 낼 수 있음을 깨닫게 된다. 단순한 막대 차트에서 대화형 지도에 이르기까지 모든 시각화가 망라되어 있다.
D3를 사용해서 이런 다양한 결과물을 만들어내려면, 차트를 더 추상적인 수준에서 고민해보고, 페이지 내에 데이터와 화면 요소들을 연결 짓는 방법에 대해 배워야 한다. 복잡한 차트나 시각화 결과물은 데이터 아이템의 속성과 화면 요소의 시각적 속성 사이의 관계 속에서 탄생된다.
실제 프로젝트 환경에서는 D3로 만들어진 컴포넌트나 차트를 다른 컴포넌트나 라이브러리와 융합해야 한다. 이 책의 예제 대부분은 D3를 다른 라이브러리나 도구를 함께 사용해서 각 라이브러리의 장점을 최대한 살리면서 완전한 애플리케이션을 만들어 내는 방법을 알아본다.
예제를 통해 외부 데이터 소스를 이용하는 재사용 가능한 차트를 다뤄보고, D3를 사용해서 사용자 인터페이스와 대화형 지도를 만들어 볼 것이다. 마지막에는 실시간 트위터 멘션을 대상으로 하는 시각화 애플리케이션을 직접 구현해 볼 것이다.
D3는 시각화와 데이터를 경험해 볼 수 있는 정말로 훌륭한 도구다. 독자들이 책의 예제를 따라 하면서 재미를 느끼고, 자신만의 시각화 결과물을 만들어 볼 수 있기를 바란다.

이 책은 단순한 수준의 예제가 아니라 실제 현장에서 사용되는 예제를 다루고 있어 아주 실용적이다. 예제를 따라 하다 보면 커스텀 차트 작성, 서드 파티 라이브러리와 함께 사용해서 풍부하고 매력적인 데이터 시각화를 만드는 법을 자연스럽게 배울 수 있다. 이 책은 재사용 가능한 차트 패턴으로 시작해서 복잡한 실시간 데이터 시각화의 설계와 구현까지 단계적으로 안내해 주는 친절한 안내원으로서 손색이 없다.
이 책을 통해 D3 기반의 재사용 가능한 차트를 만드는 방법과 데이터 시각화에 재사용 가능한 차트를 녹여 넣는 방법을 배울 수 있다. 자체 제작한 차트 패키지를 만들어 배포할 수 있는 방법도 다루고 있으며, D3로 지리 정보를 처리하고 인터랙티브한 지도를 만들 수 있는 방법도 익힐 수 있다.
이 책으로 충실히 공부하면 실시간 데이터를 보여주는 화려한 엔터프라이즈 대시보드를 만들 수 있을 것이다.

[옮긴이의 말]
몇 년 전만 해도 눈길을 끌 만한 화려한 시각화는 대부분 플래시 기술로 만들어진 차트였다. 플래시는 결과물도 훌륭하고 생산성도 좋은 괜찮은 기술이었지만, 보안 문제, 모바일 적응 문제 등 여러 가지 이유로 이제는 시장에서 점차 퇴출되는 기술이 되고 말았다.

사라져가는 플래시의 빈 자리는 웹 표준인 HTML5가 채우고 있다. 더 구체적으로는 Canvas와 SVG(Scalable Vector Graphics)가 플래시를 대체하고 있다. 여느 기술과 마찬가지로 두 기술 역시 장단점을 함께 가지고 있어 어느 한쪽이 다른 한쪽보다 언제나 우월하다고 할 수는 없다.

D3.js는 데이터 기반 문서(D3, Data-Driven Documents)를 표방하는 SVG 기반의 시각화 기술이다. SVG는 HTML 페이지 안에서 다른 태그와 같은 방식으로 화면을 그리고, 이벤트를 처리할 수 있고, 벡터 기반 그래픽으로 더 나은 화질을 화면에 보여줄 수 있기 때문에 데이터 시각화 분야에 한해서는 Canvas에 비해 확실히 좋은 점이 많다. D3.js는 이런 SVG의 장점을 충분히 활용해서 고품질의 화려한 데이터 시각화를 쉽게 만들어낼 수 있는 다양한 API를 제공한다. D3.js의 홈페이지에 가보면 상상을 초월할 만큼 기묘하면서도 필요한 정보를 쉽게 파악할 수 있게 해 주는 수많은 예제를 볼 수 있다.

이 책은 이런 D3.js를 중심으로 프론트엔드 개발 환경 전반에 걸쳐 사용되는 다양한 도구를 함께 활용해서 실시간 데이터 시각화를 만들어가는 과정을 차근차근 알기 쉽게 보여준다. Node.js 환경에서의 프론트엔드 경험이 풍부한 개발자라면 D3.js를 실전 환경에 어떻게 도입해서 사용할 수 있는지에 대한 값진 정보를 얻을 수 있을 것이고, 프론트엔드 경험이 풍부하지 않은 개발자라면 D3.js에 더하여 Node.js를 중심으로 npm, 바우어(bower), 보우(vows), 그런트(grunt) 등 프론트엔드 개발 라이프 사이클 전반에 걸친 주요 도구에 대한 지식까지 덤으로 얻을 수 있을 것이다.

1 데이터 시각화
데이터 시각화의 정의
- 데이터 시각화의 종류
· 인포그래픽
· 탐색적 시각화
· 대시보드
· 데이터 시각화 배우기
D3 라이브러리 소개
정리

2 재사용 가능한 차트
재사용 가능한 차트 제작
- D3로 요소 생성
· 데이터 바인딩
· 요소 생성 캡슐화
· svg 요소 생성
- 바코드 차트
· 접근자 메소드
· 차트 초기화
· 데이터 추가
· 데이터 접근자 함수 추가
· 데이터셋 업데이트
· enter와 exit 전이 고정
바코드 차트 사용
레이아웃 알고리즘 생성
- 방사형 레이아웃
· 각도 계산
- 레이아웃 사용
정리

3 SVG 없이 시각화 제작
SVG 지원 브라우저 현황
SVG 없는 시각화
- 데이터 로딩 및 정렬
- 포오스 레이아웃 메소드
- 색상과 크기 설정
- 범례 만들기
폴리필
- 기능 검사
- canvg 예제
캔버스와 D3
- 캔버스에서 도형 그리기
· 도형 생성
· D3와 canvas 통합
정리

4 D3로 색상 선택기 제작
슬라이더 컨트롤 제작
- 드래그 반응
- 슬라이더 제작
- 슬라이더 사용
색상 선택기 제작
- 색상 선택기 호출기
· 색상 선택기 윈도우 추가
- 색상 선택기 윈도우
정리

5 사용자 인터페이스 제작
차트 요소 강조
툴팁 제작
- 툴팁 사용
브러시를 통한 영역 선택
- 영역 차트 생성
- 브러시 추가
- 브러시 리스너
정리

6 차트끼리의 상호 작용
백본의 기초
- 이벤트
- 모델
- 컬렉션
- 뷰
- 라우터
주식 탐색기 애플리케이션
- 주가 차트 생성
· 종목명 차트
· 주식 영역 차트
- 애플리케이션 구조 준비
· 인덱스 페이지
- 모델과 컬렉션 생성
· 주식 모델
· 주식 컬렉션
· 애플리케이션 모델
- 뷰 구현
· 타이틀 뷰
· 주식 선택기 뷰
· 주식 컨텍스트 뷰
· 주식 상세 뷰
· 애플리케이션 뷰
- 라우터 정의
- 애플리케이션 초기화
정리

7 차트 패키지 제작
개발 작업 흐름
- 코드 작성
- 릴리스 생성
· 시맨틱 버전 번호
패키지 내용 생성
- 열 지도 차트
- 행렬 레이아웃
프로젝트 셋업
- Node 모듈 설치
- 그런트로 빌드
· 소스 파일 합치기
· 라이브러리 압축
· JSHint로 코드 검사
· 패키지 테스트
· 태스크의 순서 등록
- 프론트엔드 의존성 관리
다른 프로젝트에서 패키지 사용
정리

8 데이터 기반 애플리케이션
웹 애플리케이션 생성
- 프로젝트 준비
- 제킬을 이용한 정적 사이트 생성
- 애플리케이션 컴포넌트 작성
· 모델 및 컬렉션 작성
· 뷰 작성
· 애플리케이션 셋업
- 깃허브 페이지를 이용한 호스팅
- 아마존 S3를 이용한 호스팅
· S3에 배포하기 위한 제킬 설정
· S3 버킷에 사이트 업로드
정리

9 대시보드 제작
대시보드 정의
대시보드 디자인에 도움이 되는 좋은 습관
대시보드 제작
- 대시보드의 목적 정의
- 데이터 수집
- 정보 조직화
- 대시보드 영역 생성
· 학생 영역
· 과목 영역
· 학급 영역
· 대시보드 영역 배치
정리

10 지도 제작
지리 데이터 수집
- GeoJSON과 ToppoJSON 형식의 이해
- 지리 데이터 파일 변환 및 조작
D3로 지도 제작
- 등치 지역도 제작
- 위상 매핑
- Mapbox와 D3 함께 사용
- Mapbox 프로젝트 생성
- Mapbox와 D3의 조합
정리

11 고급 지도 제작
지도 제작을 위한 여러 가지 투영 방식
- 정방형 투영법
- 원뿔 등거리 투영법
- 직교 투영법
지구 회전 기능 생성
대화형 별자리 지도 제작
- 항성 목록 선택
- 항성 그리기
- 투영 방식 변경과 회전 동작 추가
- 항성에 색과 레이블 추가
D3를 이용한 래스터 이미지 투사
- 래스터 이미지를 canvas에 렌더링
- 픽셀의 지도 상의 좌표값 계산
- 직교 투영을 이용한 이미지 재투영
정리

12 실시간 애플리케이션 제작
Firebase를 사용한 실시간 협업
- Firebase 설정
- Firebase와 애플리케이션 통합
트위터 탐색기 애플리케이션
스트리밍 서버 생성
- 트위터 스트리밍 API
· Twit을 이용하여 트위터 스트리밍 API에 접근
- Socket.IO
- 스트리밍 서버 구현
클라이언트 애플리케이션 생성
- 애플리케이션 구조
· 모델과 컬렉션
· 토픽 컬렉션 뷰 구현
· 애플리케이션 뷰 생성
· 애플리케이션 준비
정리