HOME > 상세정보

상세정보

D3.js 실시간 데이터 시각화 : Node.js 환경에서 실시간 대시보드 만들기 (7회 대출)

자료유형
단행본
개인저자
Castillo, Pablo Navarro 오명운, 역
서명 / 저자사항
D3.js 실시간 데이터 시각화 : Node.js 환경에서 실시간 대시보드 만들기 / 파블로 나바로 카스틸로 지음 ; 오명운 옮김
발행사항
의왕 :   에이콘,   2015  
형태사항
398 p. : 삽화, 도표 ; 24 cm
총서사항
Acorn+PACKT technical book
원표제
Mastering D3.js : bring your data to life by creating and deploying complex data visualizations with D3.js
ISBN
9788960777538 9788960772106 (Set)
일반주기
색인수록  
기술감수: 앤드류 벌스(Andrew Berls), 사이먼 하임러(Simon Heimler), 라스 코토프(Lars Kotthoff), 네이선 반데르 빌트(Nathan Vander Wilt)  
D3 = Data-Driven Documents  
일반주제명
Information visualization --Data processing JavaScript (Computer program language) Visual analytics
000 00000cam c2200205 c 4500
001 000045880562
005 20160906102053
007 ta
008 160906s2015 ggkad 001c kor
020 ▼a 9788960777538 ▼g 94000
020 1 ▼a 9788960772106 (Set)
035 ▼a (KERIS)BIB000013846273
040 ▼a 241044 ▼c 241044 ▼d 211009
041 1 ▼a kor ▼h eng
082 0 4 ▼a 005.133 ▼a 001.4226028566 ▼2 23
085 ▼a 005.133 ▼2 DDCK
090 ▼a 005.133 ▼b J41 2015z18
100 1 ▼a Castillo, Pablo Navarro
245 1 0 ▼a D3.js 실시간 데이터 시각화 : ▼b Node.js 환경에서 실시간 대시보드 만들기 / ▼d 파블로 나바로 카스틸로 지음 ; ▼e 오명운 옮김
246 1 9 ▼a Mastering D3.js : ▼b bring your data to life by creating and deploying complex data visualizations with D3.js
260 ▼a 의왕 : ▼b 에이콘, ▼c 2015
300 ▼a 398 p. : ▼b 삽화, 도표 ; ▼c 24 cm
440 0 0 ▼a Acorn+PACKT technical book
500 ▼a 색인수록
500 ▼a 기술감수: 앤드류 벌스(Andrew Berls), 사이먼 하임러(Simon Heimler), 라스 코토프(Lars Kotthoff), 네이선 반데르 빌트(Nathan Vander Wilt)
500 ▼a D3 = Data-Driven Documents
650 0 ▼a Information visualization ▼x Data processing
650 0 ▼a JavaScript (Computer program language)
650 0 ▼a Visual analytics
700 1 ▼a 오명운, ▼e
900 1 0 ▼a 카스틸로, 파블로 나바로, ▼e
945 ▼a KLPA

소장정보

No. 소장처 청구기호 등록번호 도서상태 반납예정일 예약 서비스
No. 1 소장처 과학도서관/Sci-Info(1층서고)/ 청구기호 005.133 J41 2015z18 등록번호 121237557 도서상태 대출가능 반납예정일 예약 서비스 B M

컨텐츠정보

책소개

D3.js는 HTML5 기반 데이터 시각화 라이브러리의 대명사라고 해도 좋을 만큼 훌륭한 시각화 도구다. D3.js의 기본 내용과 백본(BackBone) 같은 MVC 프레임워크, Socket.io 같은 실시간 동기화 네트워크 라이브러리와 함께 Node.js상에서 실시간 데이터 시각화를 만들어가는 과정을 담았다.

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

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) 트윗의 지리 분포를 볼 수 있는 실시간 애플리케이션을 만들어 본다.


정보제공 : Aladin

저자소개

파블로 나바로 카스틸로(지은이)

수학 공학자이자 개발자로서, 프랑스의 쌩떼띠엔느 대학(Ecole des Mines de Saint-Etienee)에서 응용수학 석사학위를 받았다. 수년간 오퍼레이션 리서치 분야와 데이터 분석 분야에서 일한 후 지금은 데이터 시각화 컨설턴트 및 개발자로 일하고 있다. 『d3.js를 이용한 데이터 시각화』(에이콘, 2014)와 『Data Visualization with D3.js Cookbook』의 기술 감수자로 팩트출판사와 함께 일해왔다. 2014년에 칠레 산티아고에 마세가(Masega)라는 데이터 시각화 에이전시를 설립하여 운영하고 있다.

오명운(옮긴이)

언제나 버그와 씨름하는 개발자다. 번역을 통해 개발자 생태계에 조금이라도 보탬이 되고자 노력한다. 『스프링 5.0 마이크로서비스 2/e』(에이콘출판, 2018), 『D3.js 실시간 데이터 시각화』(에이콘출판, 2015), 『클라우드 네이티브 자바』(책만, 2018), 『엔터프라이즈 데이터 플랫폼 구축』(책만, 2020) 등을 번역했으며, 앞으로도 적은 양이라도 꾸준히 번역 작업을 이어갈 생각이다. https://homoefficio.github.io/에서 개발 관련 지식을 정리해서 나누고 있고, 잡다한 문제 해결 기록을 https://github.com/HomoEfficio/dev-tips에 남기면서 기억력 감퇴를 기록력 증진으로 메꾸고 있다. 현재 네이버제트에서 글로벌 메타버스 서비스인 제페토(Zepeto)를 만들며 백발 개발자의 꿈을 이어가고 있다.

정보제공 : Aladin

목차

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 
____스트리밍 서버 구현 
__클라이언트 애플리케이션 생성 
____애플리케이션 구조 
________모델과 컬렉션 
________토픽 컬렉션 뷰 구현 
________애플리케이션 뷰 생성 
________애플리케이션 준비 
__정리

관련분야 신착자료

Ramamurthy, Bina (2021)
윤관식 (2020)