▶d3.js 튜토리얼 :: ① d3.js 이해 및 설치

▶d3.js 튜토리얼 :: ① d3.js 이해 및 설치

---

D3는 데이터 중심의 문서(Data-Driven Documents)라는 긴 이름의 약어다. 여기서 데이터(data)는 여러분이 가진 데이터를 의미하고, 문서(document)는 HTML이나 SVG처럼 웹 브라우저에서 렌더링 할 수 있는 웹 기반 문서를 말한다. D3는 웹문서를 데이터 중심으로 다룬다(drive).^[각주:1]

D3의 공식사이트 주소 : http://d3js.org

D3의 핵심개발자의 Github

---

D3는 여러개발자들의 힘이 모아졌지만, 그중에서도 핵심 개발자는 영국 출신의 마이크 보스탁이라고 한다.

d3는 완전히 오픈소스이고 Github에서 자유롭게 받을 수 있다. 아래보이는 사진은 마이크보스탁의 Gitghub로, d3관련 저장소가 2만5천개이고, 관련 기능별로 저장소가 나누어져있다.

Mike Bostock의 Github(깃허브)주소 : http://githun.com/mbostock/d3/

D3의 라이선스

---

D3의 라이선스는 BSD다. 추가비용없이 영리목적이든 비영리목적이든 코드를 마음대로 사용, 수정, 보강할 수 있다.

*BSD라이센스 : 자유소프트 웨어 저작원의 한가지이며, 소프트웨어라이센스라고 할 수 없을 만큼 미약하여, 해당 소프트웨어는 아무나 개작할 수 있고, 수정한 것을 제한 없이 배포할 수 있다.^[각주:2]

웹기반의 데이터시각화인 이유

---

"시각화를 왜 웹기반으로 해야하는 걸까?"라는 물음에 스캇머레이(2014)는 "아무도 열람하지 않은 시각화는 진정한 의미로는 아직 시각적 산물이 아니다."라며, 시각화를 웹기반에 함으로써 전세계를 대상으로 자신의 시각화를 전시할 수 있기 때문이라고 설명했다.

또한 d3.js책 내에 포함된 내용은 저작권 문제가 없는 도구를 사용했으며, 오픈소스와 웹 표준기술을 사용한다고 미리 밝히고 있다. 쉽게말해서 특정업체의 상용소프트웨어나 플러그인을 구매하지않아도 우리가 만든 결과물을 PC, 스마트폰, 태블릿등 다양한 디바이스에서 이용할 수 있다. 이러한 점은 우리나라의 웹접근성을 생각해보면 매우 매력적이라고 할 수 있겠다.

d3,js에서 다루는 내용

---

새그림이 그려진 d3.js책의 도입 부분에서 저자는 "이 책은 데이터시각화, 상호작용 설계, 웹 개발 이라는 세 가지 주제를 하나로 엮는 현실적인 안내서이다."라고 설명하고 있다. 

이책은 절대로 컴퓨터 공학 교재가 아니다. 그래서 웹 기술(HTML, CSS, 자바스크립트, SVG)의 복잡함을 깊게 알려줄 생각은 없다.^[각주:3]

여기서 멈칫하게 되는부분은 '상호작용 설계'와 '웹 개발'부분이다. 데이터시각화를 배우러왔더니 같이 배우라고 두 개 더 얹어주는 느낌이랄까. 하지만 이 저자 스캇머레이역시 컴퓨터공학관점이 아니라 디자인 관점의 배경지식을 가지고 D3를 접했다고했고, 컴퓨터공학적인 지식까지 모두 다룰만큼 책인 두껍지도 않다는 점에서 용기를 가져도 좋을 것 같다.

저자는 여기에 덧붙여 d3를 배우려면 html, css, 자바스크립트, svg같은 연관된 웹기술에 대한 지식이 필요하다고 말하고 있다. 물론, 이것들을 다 먼저 배우고오라는 말은 아니다. d3.js의 예제를 통해 공부를 해도 웹에서 동작하는 멋진 시각화프로젝트를 만들 수 있다. 다만, d3의 뿌리가 되는 기술들의 중요성을 알고, 여건이 된다면 꼼꼼히 공부해두는 것이 좋을 것 같다.

1. 스캇 머레이 지음, 변치훈 옮김, "D3.js : 쉽고 빠른 인터랙티브 데이터 시각화", 인사이트, 2014.3 [본문으로]
2. 위키백과, "BSD라이센스", 열람일 : 2015. 3.6 [본문으로]
3. 위의 책, 7쪽 [본문으로]