d3.js는 현재 웹에서 가장 각광받는 언어인 자바스크립트로 만들어진 오픈소스 데이터 시각화 라이브러리다. 이 책은 d3.js를 사용하기 위한 환경의 구축에서부터, 간단한 예제를 통한 d3.js의 기본 개념 해설, 화려한 데이터 시각화를 만드는 고급 기법까지 설명하고 있어, 자바스크립트를 알고 있는 모든 분을 데이터 시각화의 세계로 친절하게 안내해 줄 것이다. 데이터 시각화에 관심을 갖고 있고 자바스크립트를 조금이라도 아는 사람이라면 누구에게나 아주 좋은 길잡이가 될 책이다.

d3.js를 혼자서 공부하다 보면, '1단계: 두 개의 동그라미 그리기', '2단계: 부엉이의 나머지 부분 그리기'처럼 중간 과정이 뭔가 빠져있다는 느낌을 받을 수도 있다. 이 책은 바로 그런 공백을 채우는 역할을 맡고자 한다.

그러기 위해 기본적인 도형에서부터 많은 기능을 포함한 시각화까지 다양한 예제를 동원할 것이다. 여기에는 마술도 없고 설명되지 않은 절차도 없다. d3.js를 써서 시각화를 만드는 데 필요한 모든 것을 이해할 수 있게 될 것이다.

또, 데이터를 다루기 쉽게 조작하는 것에서부터 좌표 계산으로부터 그리기를 분리하는 고급 기능까지 모든 부문도 살펴볼 것이다.

이 책은 d3.js를 스스로 공부해보면서 몇 가지 예제를 보고 "이거 대체 어떻게 동작하는 거야?"라고 자문해 본 적이 있는 사람 모두를 대상으로 한다. 이 책은 자바스크립트 코딩 경험이 있고, 웹 개발에 대한 일반 지식을 보유하고 있으며, 프로그래밍 기초에 대한 이해와 d3.js의 예제를 본 적이 있는 사람을 독자로 가정한다.

'1장, d3.js 시작하기'는 d3.js의 기초를 보여주는 예제와 이 책의 끝까지 사용하게 될 일반적인 개발 환경 설정에 대한 내용이 들어있다.

'2장, DOM, SVG, CSS 입문'은 웹 페이지의 내용물에 대해 어떻게 d3.js를 사용해야 하는지 자세하게 설명한다. 특히, SVG와 이미지를 생성하는 핵심 도구를 집중적으로 다룬다.

'3장, 데이터'는 데이터를 함수형 프로그래밍 방식으로 다루는 법을 보여준다. 외부 소스에서 데이터를 읽어오는 방법, d3.js에 내장된 도구를 써서 지루하고 반복적인 코딩을 피하는 방법을 살펴본다.

'4장, 애니메이션'은 d3.js로 데이터 시각화에 애니메이션 효과를 적용하고 사용자가 인터렉티브하게 상호작용할 수 있는 데이터 시각화를 만드는 법을 알아본다.

'5장, 레이아웃: d3의 마술'에서는 d3.js 레이아웃의 작동 원리를 알아보고, 동일한 데이터셋으로 완전히 다른 데이터 시각화를 만들어 본다. 5장을 다 읽고 나면, 인터넷에서 볼 수 있었던 화려한 데이터 시각화가 따라할 수 없는 마술로만 보이지는 않을 것이다.

'6장, 뛰어난 데이터 시각화 디자인'은 웹에서 볼 수 있는 뛰어난 데이터 시각화의 예를 살펴보고, 어떤 요소가 그 시각화에 우월함을 불어넣었는지 설명한다.

본문에 쓰인 컬러 이미지는 여기에서 내려 받으세요.

d3.js는 HTML와 SVG, CSS를 이용해서 아름다운 시각화를 만들고 데이터에 생명을 불어넣어줄 수 있는 플랫폼을 제공한다. 또한, 사용자 브라우저의 기능을 충분히 사용할 수 있도록 웹 표준을 준수한다.

이 책은 화면에 선을 그리는 간단한 작업부터 시작해서 기초를 튼튼히 다지고, d3.js의 레이아웃을 이용해 애니메이션 효과가 적용되고 상호작용이 가능한 복잡한 데이터 시각화까지 만들 수 있도록 구성했다.

이 책을 통해 독자는 d3.js를 사용해서 SVG로 벡터 그래픽을 다루고, HTML로 레이아웃을 잡고, CSS로 스타일을 지정하는 법을 배우게 될 것이다. 또한, 함수형 프로그래밍의 기초를 알아보고, 시간을 다루는 데이터와 공간 투영에 관련된 데이터처럼 다양한 데이터 구조를 효율적으로 사용하는 법을 살펴볼 것이다. 그리고 데이터 시각화를 인터렉티브하게 만드는 방법과 자동화된 레이아웃이 어떻게 작동하는지도 이 책에서 배울 수 있을 것이다.

이 책은 여러 가지 화려한 데이터 시각화의 뒤에 숨어있는 신비의 문을 열어줄 것이다.

스위첵 텔러(Swizec Teller)

모자를 쓴 괴짜이다. 21세에 처음 창업했고, 현재 스타트업 회사에서 프리랜서로 일하고 있는 풀스택 웹 전문가로서 다음 꿈을 키워가고 있다.

코딩하지 않을 때는 보통 블로깅이나 독서를 하며, 슬로베니아나 가까운 다른 나라에서 열리는 다양한 세미나에 연사로 나선다. 앞으로 더 큰 대규모의 국제 컨퍼런스에 연사로 나갈 수 있기를 기대하고 있다.

2012년 11월에 『프로그래머는 왜 밤에 일하는가(Why Programmers Work at Night)』라는 책을 쓰기 시작했고, 개발자의 삶을 개선할 방법을 탐구하고 있다.

거의 십 년 만에 개발 현장에 돌아왔는데, 어쩌면 걱정보다는 많은 것들이 그리 달라지지 않고 그대로였다. 여전히 자바는 주류 언어이고, RDB(Relational Database)가 주류 DBMS를 이루고, 이클립스가 주류 IDE다. 변화가 적다는 것은 오랜만에 돌아온 사람에게는 다행한 일이었다.

하지만 역시나, 오래지 않아 큰 변화가 눈에 들어왔는데 정말로 의외였다. 예전에는 조금 하찮게까지 여기던 것이었는데, 지금은 정말 밝게 빛나고 있는 것이 있었으니, 바로 자바스크립트였다.

지금의 개발자들은 상상하기 어렵겠지만, 예전에는 웹이 지금처럼 동적이지 않았고, 그래서 자바스크립트는 브라우저상에서 폼의 입력 값을 검증하고, 서버에 요청을 날리는 이벤트 처리 정도만을 담당했다. 그래서 웹상에서 여러 가지 차트를 구현할 때도 고가의 전문 그래픽 라이브러리를 쓰지 않는 한 자바 기반의 라이브러리를 사용해 정적인 이미지 파일 형태로 만드는 수준에 머물렀다.

이제는 오히려 자바로 차트를 구현한다고 하면 ‘왜?’, ‘자바스크립트로 안하고?’라는 반문에 바로 직면하게 될 정도로 수많은 자바스크립트 차트 라이브러리가 유료도 아닌 무료로, 그것도 오픈소스로 구현되어 있다.

d3.js는 그중에서도 가장 뛰어난 자바스크립트 기반의 오픈소스 데이터 시각화 라이브러리다. HTML 요소와 데이터를 연결해 SVG로 화려한 데이터 시각화를 만들어내고, 함수형 프로그래밍 개념을 도입해 적은 코드로 쉽게 사용할 수 있는 API를 제공해 줄 뿐 아니라, 수많은 예제를 통해 어떤 식으로 데이터 시각화를 만들어내는 것이 좋은지에 대한 가이드까지 제공해준다.

이 책을 통해 자바스크립트를 사용하는 많은 개발자들이 d3.js라는 호화 유람선을 타고 데이터 시각화라는 색다른 세계에서 마음껏 놀 수 있기를 기대한다.

오명운

천성을 모르고 다른 일을 하다가 한참만에 다시 돌아온 개발자다. 데이터 시각화, 자바스크립트, 리눅스에 관심이 많으며, 꾸준히 기술서 번역 일도 한다. 백발이 되어서도 개발을 하며 수수하게 늙어가고 싶은 꿈이 있으며, http://hanmomhanda.blogspot.kr/에 이것저것 정리하려고 애만 쓰고 있다.