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

D3.js는 디지털 데이터를 동적인 시각화의 유형으로 보여주기 위해 설계된 자바스크립트 라이브러리며, HTML과 SVG, CSS와 함께 사용해 여러분의 데이터에 생명을 불어넣어 줄 것이다. D3는 시각화에 있어 막강한 제어를 가능하게 하며, 현재 웹 기반의 데이터 시각화 기술 중에서 가장 강력하고 가장 많이 사용되고 있다. 이 책은 D3에서 다룰 수 있는 모든 데이터 시각화 기술에 대한 실질적인 예제를 제공해 좀 더 쉽게 데이터 시각화를 이해할 수 있도록 돕고자 한다. 책에서 제공하는 예제와 그림, 코드 샘플을 참고해 거의 전문가 수준의 효율성과 정확성을 갖는 데이터 시각화를 만들 수 있다. 이 책은 데이터 시각화의 개념과 D3 기초에서부터 시작해 점차적으로 D3에 대해 알아야 하는 다양한 주제를 수많은 예제를 통해 다룬다. 데이터 시각화의 기본 개념과 함수형 자바스크립트, D3의 핵심 내용(요소 선택, 데이터 바인딩, 애니메이션, SVG 생성)을 다룬다. 그뿐만 아니라 사용자 정의 보간이나 트위닝, 타이머, 레이아웃 매니저, 포스 조작 등과 같이 좀 더 어려운 내용도 다룬다. 이 책은 빠르게 학습할 수 있도록 샘플 코드를 미리 준비해 놓았다.

닉 치 주(Nick Qi Zhu)

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

우리는 매일 반복되는 일상 속에서 수많은 정보를 접하게 된다. 각종 포탈에서 보여주는 음원 차트, 인간의 기대 수명, 대선 후보 지지율 등과 같은 다양한 자료들이 매일매일 쏟아지고 있습니다. 하지만 이들 중에서 과연 몇 가지나 우리 기억 속에 남아 있을까? 숫자와 문자열로 구성된 단순한 데이터에서 의미 있는 결과를 도출한 것을 정보라고 한다. 과거에는 이러한 정보를 시각적 표현을 위해 간단하게 엑셀이나 유사한 프로그램을 사용해 막대그래프나 선 그래프를 그리는 것이 최선이었으며, 정보의 양이 그리 많지 않았기 때문에 정보 전달 측면에서도 굉장히 효율적이었다. 하지만 최근 빅데이터의 출현으로 정보 생산자의 경우 어마어마한 정보를 다뤄야 할 뿐만 아니라, 정보의 소비 주체 또한 예전에 비해 그 범위가 넓어지고 정보를 해석할 수 있는 능력이 향상됐다. 따라서 이러한 새로운 요구에 부합하기 위해 정보 표현에 있어 좀 더 효율적이고 정확하며, 감성적인 기능까지 갖춘 D3.js가 데이터 시각화 분야에서 대세론의 흐름에 올라탄 것이 아닐까 싶다. 데이터 시각화는 무미건조한 일련의 정보 사막에서 오아시스 같은 역할로 꼭 필요한 정보를 더욱 효율적으로 전달할 수 있게 해준다. 이 책의 다양한 예제들을 하나씩 따라 해보면서 자신의 것으로 만들면 책을 마무리할 때쯤이면 데이터 시각화에 있어 상당한 자신감을 가질 수 있을 것이다. 아직까지 대부분이 엑셀로 그래프나 차트를 만들고 있을 때 웹 기반의 상호작용이 가능한 데이터 시각화 자료를 만들어 본인의 가치와 품격을 더욱 두드러져 보일 수 있게 되길 기원한다.

김동영

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