자바스크립트와 SVG로 쉽게 만드는 웹 기반 데이터 비주얼라이제이션 D3

마이크 드워 지음

한빛미디어 2012년 11월 16일 출간

작품소개

책소개

쉽게 배우는 웹 기반 데이터 비주얼라이제이션

이 책은 D3 자바스크립트 라이브러리를 이용하여 유려하고 상호 연동되는 웹 브라우저 기반의 데이터 비주얼라이제이션(시각화) 방법에 대해서 설명한다. 자바스크립트와 SVG를 이용하여 간단한 막대그래프에서 복잡한 인포그래픽까지 비주얼라이제이션되는 모든 과정을 볼 수 있다. 뉴욕교통청의 실제 데이터를 비주얼라이제이션하는 과정을 통해서, 쉽고 재미있게 D3를 배울 수 있다.

[대상 독자]
웹 개발자, 자바스크립트 개발자

목차

1장 D3 소개
1.1 D3의 특징
1.2 기본 설정
1.3 뉴욕교통청의 데이터 집합
1.3.1 데이터 정제
1.3.2 데이터 제공

2장 엔터 셀렉션
2.1 간단한 지하철 상황판 만들기
2.1.1 draw 함수
2.1.2 데이터에 따른 스타일 추가
2.2 프라자의 일일 평균 교통량 그래프 만들기
2.2.1 div 태그를 이용하여 수평 막대 차트 만들기
2.2.2 CSS를 사용하여 시각화 스타일 적용하기
2.2.3 라벨 붙이기

3장 스케일, 축, 선
3.1 버스 고장, 사고, 상해
3.1.1 Tiny SVG 입문
3.1.2 데이터를 픽셀로 그리기 위해 extent와 scale 사용하기
3.1.3 축 추가하기
3.1.4 축 제목 넣기
3.2 개찰구 통행량 그래프 만들기
3.2.1 뷰포트 설정하기
3.2.2 시간 크기 조정 함수 생성하기
3.2.3 축 삽입하기
3.2.4 패스 추가하기

4장 상호작용 및 전환
4.1 지하철 지연 평가 UI (Ⅰ) - 상호작용
4.1.1 뷰포트 설정하기
4.1.2 상호작용 추가하기
4.2 지하철 지연 평가 UI (II) - 전환
4.2.1 간단한 상호작용 트랜잭션
4.2.2 툴팁 추가하기
4.2.3 지연 시간을 이용한 진입 애니메이션
4.2.4 노선 라벨 추가하기
4.2.5 스타일

5장 레이아웃
5.1 지하철 연결
5.1.1 포스 다이렉티드 그래프
5.2 예정 대기 시간 분포
5.2.1 히스토그램 레이아웃 사용하기
5.2.2 스택 레이아웃 사용하기

6장 결론
6.1 다음에 익혀야 할 것

출판사 서평

웹의 가치를 높여주는 비주얼라이제이션, D3!

당신이 만드는 웹의 가치를 높여주고 싶은가? 그렇다면 D3를 이용하여 데이터 비주얼라이제이션(시각화)을 해보자. 데이터 비주얼라이제이션은 대용량 데이터 시대에서 주목받고 있는 분야 중 하나로, D3 자바스크립트 라이브러리는 자료를 보다 효율적으로 비주얼라이제이션하여 웹에 대한 사용자의 만족도를 높여준다. 그리고 D3는 새로운 내용을 학습하지 않고 대부분의 최신 웹 브라우저가 기본적으로 지원하는 자바스크립트와 SVG만으로도 데이터를 표현할 수 있으므로 쉽고 빠르게 배울 수 있다.

작가정보

저자(글) 마이크 드워

지은이 마이크 드워는 단축 URL 주소를 만드는 뉴욕의 기술 회사 Bitly의 데이터 과학자다. 영국 셰필드 대학교University of Sheffield에서 데이터의 동적 시스템 모델링 분야의 박사 과정을 수료하였고, 에든버러 대학과 콜롬비아 대학에서 기계 학습의 초빙 연구원으로 일했다.

옮긴이 : 양성일
양성일은 13년간 자바 프로그래머로 기업 솔루션, 홈네트워크, 전자상거래, 검색엔진, 보안, 스마트 폰 앱 등 다양한 분야의 소프트웨어를 개발하였으며, 2010년 11월에 허그루를 창업하여 현재 소프트웨어 프리랜서 활동하고 있다. ADK, 아두이노 보드를 기반으로 한 오픈소스 하드웨어 플랫폼 개발에 전념하고 있으며 관련 지식과 정보를 여러 사람들과 공유하기 위한 하드로이드 커뮤니티(http://www.hardroid.net)를 운영하고 있다.