▶d3.js 튜토리얼 :: ② d3.js 를 배운다는 것이란?

▶d3.js 튜토리얼 :: ② d3.js 를 배운다는 것이란?

---

스캇머레이(2014)는 저서《d3.js》에서, D3를 배우는 것을 "데이터를 불러오고, 엮어서, 문서요소를 변환, 전이시키기 위해 사용할 문법을 배우는과정"^[각주:1]이라고 소개한 바 있다. 뭔가 두루뭉술한 느낌이 든다면, 조금더 세부적으로 D3의 기능에 대해서 살펴보자.

개인적으로, D3는 "어려운만큼 유연한 것"이라고 생각한다. 사실 우리는 엑셀이나 파워포인트에서도 꽤 많은 그래프를 별다른 노력없이도 그릴 수 있었다. 조금 더 나아가서는 일러스트레이터와 같은 그래픽프로그램으로 보정하여 아름다운 그래프들을 만들어낼 수 있다. 그런 편한 방법들을 뒤로하고, 이렇게 D3를 배우고자하는 이유는 무엇일까? 

D3의 매력은 인터랙티브한 콘텐츠를 웹상에서 구현할 수 있다는 것에 있다. 덧붙여 다양한 라이브러리들이 오픈소스로 공유되고있다는 점이 매력적이라고 할 수 있다.

d3가 하는 것.

- Loading : 브라우저 메모리로 데이터를 불러온다. 

- Binding : 필요한 HTML문서요소를 새로 만들어서 데이터를 엮는다.

- Transforming : 각 문서요소에 엮인 개별 데이터를 토대로 해당 문서요소를 변환시킨다. 즉, 관련 시각적 프로퍼티를 지정한다.

- Transitioning : 사용자 입력에 대한 반응으로 문서요소의 상태를 한 값에서 다른 값으로 전이시킨다.

자료: 스캇 머레이 지음, 변치훈 옮김, "D3.js : 쉽고 빠른 인터랙티브 데이터 시각화", 인사이트, 2014.3, 10쪽

D3의 제한사항

---

- D3는 오래된 브라우저들을 지원하지 않는다. 윈도우 익스플로러 8이하등이 바로 그 예이다.

- D3의 핵심 기능은 구글맵스(Google Maps)나 클라우드메이드(Cloudmade)가 지원하는 형태의 비트맵 이미지 타일을 다루지 않는다. D3는 전통적인 타일방식의 지도가 아닌 SVG이미지나 GeoJSON 데이터 같은 벡터(vector)방식에 최적화되어있다.

자료: 위의 책, 11쪽

웹 서버(Web server)는 서버 소프트웨어가 실행되는 인터넷에 연결된 컴퓨터다. 웹서버를 호출하는 이유는 이 서버가 필요한 웹 문서를 제공하기 때문이다. 서버는 보통 늘 켜져있고 항상 인터넷에 연결되어 있다. 

위의 책, 22쪽

한 방문자가 웹사이트에 들어갈 때 일어나는 일련의 과정을 단계별로 살펴보자. 여기서 중요한 것은 클라이언트와 서버사이의 대화가 웹의 '근간'이 된다는 것이다.

1. 사용자는 선호하는 브라우저를 실행한다. 그리고 주소창에 alignedileft.com/tutorials/d3/ 와 같은 URL을 친다. 사용자가 프로토콜을 지정하지 않았기 때문에 브라우저는 HTTP라고 짐작하고 URL앞에 "http://"를 붙인다.

2. 브라우저는 네트워크를 가로질러서 HTTP의 기본 포트 넘버인 80을 통해 도메인 alignedleft.com/tutorials/d3 뒤에 숨어 있는 서버로 연결을 시도한다.

3. alignedleft.com과 연관된 서버는 연결을 승인하고 요청을 받기 시작한다.

4. 브라우저는 tutorials/d3/에 있는 페이지에 대한 요청(request)을 보낸다.

5. 서버는 요청 받은 해당 페이지에 대한 HTML콘텐츠를 보낸다.

6. 서버는 요청받은 해당 페이지에 대한 html콘텐츠를 보낸다.

7. 클라이언트브라우저는 서버로부터 받은 html소스에서 페이지 전체를 출력하고 조립하는 데 필요한 다른 참파일을 찾는다. CSS스타일시트와 이미지 파일이 여기 포함된다. 브라우저는 다시 서버에 접속해서 각 파일당 추가로 필요한 정보를 한 번씩 요청한다.

7.서버는 파일 전송으로 으답(response)을 한다.

8. 마침내, 모든 웹 문서가 건너왔다. 이제 클라이언트는 콘텐츠를 렌더링하기위한 정말 힘든 작업을 수행한다. 먼저 콘텐츠의 구조를 이해하기 위해서 html을 분석한다( 이 단계를 파싱(parsing)이라고 한다. 그리고 일치하는 문서요소에 속성을 적용하는 ㅊss선택자를 검토한다. 끝으로 이미지를 추가하고 자바스크립트 코드를 실행한다.

자료: 위의 책, 23쪽

1. 스캇 머레이 지음, 변치훈 옮김, "D3.js : 쉽고 빠른 인터랙티브 데이터 시각화", 인사이트, 2014.3, 10쪽 [본문으로]