메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

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

리얼타임 eBook

번역서

판매중

  • 저자 : 마이크 드워
  • 번역 : 양성일
  • 출간 : 2012-11-16
  • 페이지 : 93 쪽
  • ISBN : 9788979149777
TAG :
초급 초중급 중급 중고급 고급
3점 (2명)
좋아요 : 24

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

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

대상 독자

  • 웹 개발자, 자바스크립트 개발자

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

저자

마이크 드워

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

양성일

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

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 기능에 비해 예제가 좀 단조롭고 쉬워서 아쉽네요.

    중간중간 코드가 틀린 부분이 있어서 오류나는 것을 찾아서 해야 하는데,

    기본 개념 설명이 제대로 되어 있지 않으니 찾기도 쉽지 않구요.

     

    사실은 코딩하는 것 자체도 중요하지만, 어떤 데이터를 어떻게 표현할까 하는 부분도 중요하다고 생각하는데

    그런 부분에 대해서는 거의 언급되고 있지 않은 것도 아쉽네요.

     

    분량에 비해 예제가 많아 좋은 점도 있지만

    초보가 보기에도 개념 부분이 아쉽고, 어느 정도 실력이 있는 사람이 보기에도 예제 부분의 난이도가 낮아 아쉬운 책인 것 같습니다.

  • 한 해가 지나가면 주식 시장에서는 많은 기업들이 실적 발표를 하는데 이 때 가장 많이 사용되는 발표 요소 중에는 시각적인 이해를 도와주는 그림과 그래프가 있다.


    그림과 그래프는 시각적인 이해를 쉽게 도와주는데 그 목적이 있지만 웹에서는 이런 목적 조차도 달성되지 않았던 것이 사실이다. 웹의 태생이 정보 링크에 있다는 것을 감안한다면 웹에서의 이미지 표현이 그리 발전하지 않았던 것 또한 사실이다. 부분적으로나 서버 프로그램을 이용한 이미지 표현이 이루어지기는 했지만 브라우저 차원에서는 여전히 불가능했다. 이는 HTML의 최신 버전인 4.01을 보더라도 HTML 요소 중에는 img 태그 하나와 그나마 내용과 표현의 분리를 제창해온 덕에 발전한 CSS 3에서 작게나마 이미지 표현 방법이 발전했다.

    한빛미디어에서 출간된 "웹 기반 데이터 비주얼라이제이션 D3"(ebook)은 HTML 5대에 이르러 웹에 자유롭게 그림을 그리기 위한 요소인 svg 요소를 사용하여 그림을 표현하는 자바스크립트 라이브러리인 d3에 대한 소개서이다.

    HTML 5에서 화면에 바로 그림을 그릴 수 있는 요소로 잘 알려져 있는 것은 canvas 요소인데 canvas 요소와 더불어 웹 화면에 그림을 그릴 수 있는 요소가 바로 svg이다.

    물론 svg와 canvas 요소는 그래픽 표현 방법에 있어서는 다르다. 보통 canvas와 svg는 비트맵 방식과 벡터 방식으로 부르기도 한다. 이는 canvas가 그림 등을 표현하는데 적합한 반면 svg는 로고 등을 표현하는데 적합하다.

    D3는 svg를 그림을 그리는데 사용하는데 여기에는 canvas와 달리 svg의 개별 요소가 dom으로 관리할 수 있고 dom 조작을 통해 사용자와 인터랙션 할 수 있는 그래프를 만들 수 있기 때문이 아닐까 짐작된다. canvas도 이미지 조작이 가능하지만 점(point)을 기준으로 하는 동작 방식이어서 상대적으로 이미지 조작이 어렵다.

    "웹 기반 데이터 비주얼라이제이션 D3"는 웹에 데이터를 표현하기 위해 샘플 데이터로 뉴욕 교통청의 데이터를 이용해 D3를 사용하는 방법을 안내한다. D3를 배우는데 이와 같은 샘플 데이터는 유용하게 사용된다.

    D3는 사용방법에 있어 문법적 형태가 자바스크립트 라이브러리인 jQuery와 유사한 형태를 띄고 있어서 jQuery를 사용한다면 D3의 문법을 배우기가 그다지 어렵진 않다.

    D3를 사용하기 위해 알아야 할 것들

    D3가 웹에 데이터를 쉽게 표현하는데 도움을 주기는 하지만 그 사용 방법이 결코 쉽지만은 않다.  먼저 엔터 셀렉션 개념을 이해해야 한다. 엔터 셀렉션은 D3의 핵심 개념으로 웹 페이지 요소를 선택한 후 데이터 집합의 항목을 수정, 추가, 제거하는데 이용된다.

    뉴욕 교통청에서 제공하는 지하철 상황 정보를 받아 그림을 그리게 되는데 이 때 데이터는 D3가 이용할 수 있는 json 객체로 먼저 생성되어 있어야 한다. 책에서는 이미 가공된 json 데이터를 처리하지만 아쉽게도 책 전반에서 뉴욕 교통청에서 제공하는 데이터를 json으로 가공하는 실질적인 데이터 구성방법이 나와있지 않다. 

    그러나 엔터 셀렉션을 사용하기 위해선 json 데이터도 "미카의 황금률" 법칙을 따라야 하는데 D3에선 이 법칙이 지켜지지 않은 데이터가 들어올 경우 그래프를 표시할 수 없다.(6p 참고)

    그래프의 단짝 요소인 축, 선 그리기

    그래프에서 빠지지 않는 시각적 요소 중의 하나는 축과 선이다. 물론 여기에 더해서 축에 들어가는 레이블도 시각적 요소에 속한다.

    그래프는 보통 통계 데이터를 나타내는데  시각화하는데 자주 사용되는데 이때 그래프에 표시되는 데이터의 상한 값과 하한 값을 구하여 그래프를 그려야 한다. 보통 이와 같은 값 종류을  스케일 값이라 하는데 스케일 값은 직접  산출하려면 아주 복잡할 수 있다.

    책에서는 먼저 뉴욕 교통청에서 제공하는 버스 고장, 사고, 상해 데이터를 가지고 와서 D3에서 제공하는 스케일 값 산출 방법을 써서 스케일 값을 산출하고 여기에 축과 선을 그리는 D3 라이브러리의 메서드 사용 방법을 친절히 안내한다.

    사용자와 상호 작용하는 그래프 만들기

    보통 사용자는 그래프가 만들어졌다면 이를 조작해보고 싶어하기도 한다. 4장에서는 D3를 이용하여 그래프에 간단한 상호 작용(이후 interaction. 인터랙션이라고 표기)을 구현하고 나서 뉴욕 교통청이 제공하는 지하철 지연 정보를 이용해서 그래프에 툴팁과 지연시간을 이용한 진입 애니메이션을 구현하여 사용자 인터랙션을 경험해볼 수 있다.

    4장에서 안내하는 것과 같이 D3를 이용하면 그래프에 쉽게 사용자 인터랙션을 구현하여 반응하는 웹 프로그램을 쉽게 만들어볼 수 있어 이후 사용자의 인터랙션이 필요할 때 적절한 구현 방법을 찾을 수 있을 것으로 기대된다.

    다양한 그래프 그려보기

    데이터를 표시하는데 사용하는 그래프는 그 종류가 다양하다. 통계 분포를 알아보기 위한 점 그래프와 변화를 추적하기 위한 선 그래프 외에도 다양한 데이터를 한 그래프에 보일 때 사용하는 스택 그래프(막대 그래프가 세로로 여러개로 구성되어 있는 막대 그래프를 생각해보면 이해가 쉽다) 등을 그려보기 위해서도 D3에서는 레이아웃 기능을 이용하여 쉽게 이 같은 그래프를 그릴 수 있도록 도와준다.

    5장에서는 이와 같은 레이아웃이 적용된 그래프를 그리보며, 보다 쉽게 사용자 인터랙션 등을 추구하는데 있어서 자주 사용되는 포스 다이렉티드 알고리즘을 적용한 그래프와 히스토그램 레이아웃과 스택 레이아웃을 사용한 그래프를 소개하여 D3의 활용 영역을 보다 넓혀준다.


    마지막으로...

    "웹 기반 데이터 비주얼라이제이션 D3"는 웹 페이지에 쉽게 구현할 수 없었던 이미지 영역중에서 그래프나 통계 데이터를 보여주는데 특화되어 있는 D3 라이브러리를 소개하여 서버 영역에 부담을 덜 주며 반응성 높은 웹 애플리케이션을 쉽게 만들 수 있도록 하는데 그 의미를 둔 책으로 보인다.

    하지만 도서가 번역서이다 보니 사용되는 샘플 데이터도 해외 데이터인 것은 아쉽게 보인다. 국내서였다면 괜찮은 데이터가 나오지 않았을까 싶기도 했고 한국에서 D3를 사용하려면 다양한 종류의 데이터 타입을 D3가 이용할 수 있는 JSON 데이터로 변환하는 방법을 부록으로 첨가 했더라면 하는 아쉬움이 진하게 남았다.(국내에서 자주 사용되는 자바 환경과 PHP, Python 환경을 이용해서)

    개인적으로는 책에서 JSON 변환에 사용하는 파이썬 언어가 그렇게 맘에 들지 않을 수가 없었다. 그러고 보면 나 역시 특정 프로그램 언어에 대해선 팔불출이 아닐까 싶었다.

    "웹 기반 데이터 비주얼라이제이션 D3"가 eBook이다 보니 한 가지 더 아쉬움이 남는건 D3의 다양한 사례를 실어주었더라면 학습자에게 도움이 더 되지 않았을까?

    웹에서 데이터를 표현하는데 보다 적절한 방법을 찾고 있었거나 웹에서 재미있는 기능을 찾고자 했던 개발자라면 "웹 기반 데이터 비주얼라이제이션 D3"를 통해서 호기심 충족과 함께 효과적인 해결책을 찾아낼 수 있을 것이다.

결제하기
• 문화비 소득공제 가능

배송료 안내

  • 책, 아이템 등 상품을 1만원 이상 구매시 무료배송
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

리뷰쓰기

닫기
* 도서명 :
자바스크립트와 SVG로 쉽게 만드는 웹 기반 데이터 비주얼라이제이션 D3
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
자바스크립트와 SVG로 쉽게 만드는 웹 기반 데이터 비주얼라이제이션 D3
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
자바스크립트와 SVG로 쉽게 만드는 웹 기반 데이터 비주얼라이제이션 D3
구입처*
구입일*
부가기호*
부가기호 안내

* 인터넷 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 한빛 웹사이트에서 구입한 도서는 자동 인증됩니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실