추가 적립 안내

누구나 자신이 상상하는 다채로운 그래픽을 만들어 낼 수 있는 『D3를 이용한 시각적 스토리텔링』. 시각적 스토리텔링과 D3의 장점 알아보기, SVG로 그래픽 요소 생성하기, D3로 웹페이지 요소 조작하기, D3의 데이터 결합 기능으로 시각화 그리기 등의 내용으로 구성되어 있다.

더 다양하게, 더 자유롭게, D3로 만드는 데이터 시각화의 세계!

전통적인 시각화는 종이에 그려진 고정된 이미지였지만, 오늘날의 시각화는 웹 브라우저를 통해 사용자가 마우스로 손쉽게 조작할 수 있는 인터랙티브(Interactive)한 형태로 발전했다. 따라서 각종 정보를 직관적인 형태로 웹에 표현해 주는 다양한 도구가 소개되고 있다. 그중에서도 D3는 단연 웹에서 시각화를 만드는 최적의 도구로 꼽힌다.
자바스크립트 라이브러리인 D3는 간단한 동작 방식으로 빠르게 시각화를 만들어 낸다. 그러나 D3로 데이터를 시각화하려면 최소한의 노력이 필요하다. HTML과 CSS가 낯설지 않고, 데이터 시각화에 흥미가 있다면 『D3를 이용한 시각적 스토리텔링』과 함께 웹에서 펼쳐지는 시각화 세계로 떠나 보자! 누구나 자신이 상상하는 다채로운 그래픽을 만들어 낼 수 있다.

* 이 책에서 다루는 내용
- 시각적 스토리텔링과 D3의 장점 알아보기
- SVG로 그래픽 요소 생성하기
- D3로 웹페이지 요소 조작하기
- D3의 데이터 결합 기능으로 시각화 그리기
- 자동으로 시각화 크기 조정하고 축 생성하기
- 시각화에 애니메이션 효과 추가하기
- 데이터 전처리하기
- D3로 대한민국 인구밀도 시각화하기

1장 시각적 스토리텔링과 D3
1.1 시각화를 ‘시각화’하기
1.2 시각화로 데이터에 형태를 입히고 형태에서 스토리 찾아내기
1.3 시각화의 품질은 내용이 좌우한다
1.4 어떤 시각적 요소와 속성을 사용하는지가 중요하다
1.5 시각적 스토리텔링
1.6 D3를 소개합니다!
1.7 디자이너가 D3를 사랑할 수밖에 없는 이유
1.8 프로그래머가 D3를 사랑할 수밖에 없는 이유
1.9 D3를 사용하면 안 되는 경우
1.10 D3를 사용할 때 유의사항
1.11 D3를 사용할 때 필요한 준비물
1.12 요약

2장 데이터 기반 스토리를 찾고 시각적으로 전달하기
2.1 시작하기
2.2 세상은‘늙어가고’있는가?
2.3 데이터를 찾고 탐색하기
2.4 콘셉트 갈고 닦기
2.5 형태 고르기
2.6 이 책에서 다룰 예제
2.7 요약

3장 SVG - 확장 가능한 벡터 그래픽
3.1 원리 살펴보기
3.2 SVG는 정확하게 무엇인가?
3.3 SVG를 통해 원 만들기
3.4 개발자 도구를 통해서 SVG 살펴보기
3.5 CSS를 이용해서 SVG 요소 꾸미기
3.6 다른 도형
3.7 SVG 문자
3.8 SVG 스타일 속성
3.9 출력 순서 조절 및 그룹화
3.10 변환
3.11 SVG로 막대 그래프 만들기
3.12 요약

4장 D3 선택영역으로 웹페이지 꾸미기 81
4.1 D3 설정하기
4.2 선택영역 만들기
4.3 선택영역 속성 변경하기
4.4 선언적인 D3
4.5 연속적으로 메서드 연결시키기
4.6 새로운 요소 추가하기
4.7 지금까지 배운 것 종합하기
4.8 d3.selectAll()을 사용해서 여러 요소 선택하기
4.9 선택영역으로 막대 그래프 만들기
4.10 요약

5장 데이터 결합
5.1 데이터를 결합한다는 것은?
5.2 데이터 결합의 개념 요약
5.3 들어온 데이터 엮기
5.4 데이터 결합으로 막대 그래프 생성하기
5.5 익명함수를 이용해 엮인 데이터에 접근하기
5.6 시각화 마무리하기
5.7 객체에 데이터 저장하기
5.8 요약

6장 그래프 크기 조정 및 축 추가하기
6.1 선형 척도
6.2 똑똑하게 여백 설정하기
6.3 축 추가하기
6.4 순서 척도와 축
6.5 요약

7장 외부 데이터 로딩하고 필터링하기
7.1 전체 연령 분포 데이터를 이용한 시각화 만들기
7.2 D3로 사용할 수 있는 데이터 포맷
7.3 데이터 올릴 서버 생성하기
7.4 데이터를 로딩하기 위한 D3 함수
7.5 비동기 요청 다루기
7.6 (더) 큰 데이터셋 로딩하고 필터링하기
7.7 전체를 하나로 합치기
7.8 요약

8장 인터랙티브한 동적 시각화 만들기
8.1 데이터 결합하기: 업데이트하고 나가기
8.2 인터랙티브한 버튼 만들기
8.3 시각화 업데이트하기
8.4 트랜지션 추가하기
8.5 키 사용하기
8.6 요약

9장 재생 버튼 추가하기
9.1 업데이트 단계를 함수로 바꾸기
9.2 웹페이지에 재생 버튼 추가하기
9.3 재생 가능한 재생 버튼 만들기
9.4 사용자가 재생을 중단할 수 있게 하기
9.5 요약

10장 나만의 시각화 만들기
10.1 이 책은 D3를 배우기 위한 기본서다
10.2 막혔을 때 뚫고 나오는 법
10.3 항상 코딩하라
10.4 요약

부록 A 초보자를 위한 자바스크립트
A.1 자바스크립트에 대한 간략한 설명
A.2 브라우저의 자바스크립트 콘솔
A.3 간단한 연산, 변수 및 데이터 종류
A.4 마크업과 .js 파일로 자바스크립트 사용하기
A.5 배열과 객체
A.6 메서드와 함수
A.7 If문과 for문
A.8 디버깅

부록 B 인구 분포 데이터 전처리하기

부록 C D3로 우리나라 인구밀도 시각화하기
C.1 다양한 형태의 지도 시각화
C.2 지도 및 인구 데이터 구하기
C.3 지도 데이터 로딩하기
C.4 지도 그리기
C.5 지도에 인구밀도 데이터로 색 입히기
C.6 시각화 마무리하기