D3.js 라이브러리 소개

그래프를 보려면 파이어폭스 또는 크롬 브라우저를 이용합니다. 인터넷 익스플로러에서는 블로그에서 그래프가 보이도록 사용한 HTML iframe 태그와 문제가 있는 듯 합니다. 인터넷 익스플로러에서는 이곳에서 그래프를 직접 봅니다.

요즈음 빅 데이터가 유행하면서 인포그래픽에 대한 관심이 많아지고 있다. 인포그래픽이 정보를 시각화해 정보의 이해를 쉽게 해주기 때문이다. 이런 인포그래픽을 표현하기 위한 도구들과 라이브러리들은 다양하다. 이 글은 그 중에서 전혀 새로운 방식으로 인포그래픽을 지원하는 D3.js 라는 라이브러리를 소개하고자 한다.

D3.js 는 데이터 기반으로 문서를 처리하는 JavaScript 라이브러리이다. D3란 이름도 D3(Data-Driven Documents)에서 유래한다. 이 라이브러리는 HTML, CSS, SVG 도큐먼트 객체를 데이터 기반으로 접근하는 범용 기술로 부수적이지만 놀라운 방식으로 데이터의 시각화를 지원한다.

HTML로 간단한 페이지를 만들거나, 구글링을 하면서 CSS로 웹 페이지에 효과를 넣어보거나, JavaScript 책을 보면서 JavaScript를 작성하거나 소스를 분석하는 정도의 기술을 가진 필자도 D3.js 기술을 분석하여 그래프를 그리는 데 크게 어렵지는 않았다.

D3.js 라이브러리를 처음 알게 된 계기는 필자의 전문 분야인 Apache Camel, Apache ActiveMQ, Apache ServiceMix와 같은 기업 통합 제품들을 위한 새로운 웹 관리자 프로젝트인 hawt.io 프로젝트를 통해서이다. 이 프로젝트에서는 실시간 상태 감시 그래프를 위해 D3.js 를 사용한다. 그런데 D3.js 기술에 대해 좀더 알아 보니, D3.js 기술은 단순히 차트를 그리는 정도가 아닌, 그 이상으로 인포그래픽을 위한 라이브러리이면서 다른 라이브러리의 기반 기술임을 알게 되었다. D3.js 프로젝트 홈 페이지에 방문해 보면 독자들도 필자의 말을 어떤 의미인지 쉽게 납득할 수 있을 것이다.

D3.js 홈페이지에 가면 수많은 인포그래픽 데모들과 소스들을 볼 수 있다. D3.js 로 개발된 인포그래픽 소스들은 처음 보면 당연히 잘 이해가 되지 않는다. 필자도 JavaScript에 익숙하지 않고 데이터 기반이라는 전혀 낯선 접근 방식의 라이브러리였기 때문이다. 그러나 이렇게 멋진 인포그래픽을 표현해 주는 기술이 있다는 사실만을 알고 그냥 지나치기 보다는 좀더 학습할 필요가 있다고 생각했다.

이미 D3.js 기반으로 좀더 추상화한 많은 상위 라이브러리들이 존재한다. 그러나 오픈 소스 프로젝트들이 일반적으로 그러하듯이 학습을 위한 문서가 상당히 부족하다. 그리고 기반 기술을 이해하지 못하고 상위 기술만 익힌다는 것은 사상누각의 기술이 될 수도 있다. 그래서 D3.js 에 대한 필자의 접근 방법은 D3.js 기술을 먼저 직접 익히는 것이었다.

D3.js 기술을 학습하기 위해 좀더 구글링을 해보니 "D3 Tips and Tricks"라는 책을 찾을 수 있었다. 이 책은 0.99 달러에서 0 달러까지 독자가 스스로 값을 매겨 자유롭게 다운받을 수 있는 책이다.

필자도 이 책을 다운 받아 이클립스(또는 인텔리제이)로 동적 웹 프로젝트를 만들고 책에 나온 예제 HTML 을 입력해 보았다. 물론 이 책이 영어로 되어 있다. 그러므로 영어가 서투른 사람들은 읽기 쉽지 않을 수도 있다. 그러나 프로그램은 개발자들에게 세계 공통어이니까, 프로그램 부분 이외 설명 부분의 단어들은 모르면 사전을 찾아 가며 충분히 읽어 나갈 수 있을 것이다. 또 잘 모르면 구글 번역기를 돌려도 된다. 중요한 것은 배우고자 하는 의지이다. 필자도 기업 통합 패턴이라는 책을 번역했지만 여전히 이런 방식으로 영문을 읽고 해석한다. 그러므로 독자들도 영어에 두려움을 갖지 말자. 어느 정도 영어를 극복해야 소프트웨어 전문가가 될 수 있다.

책에 나온 예제를 따라 HTML 을 입력하면 D3.j의 원리를 이해하면서 간단한 그래프를 그릴 수 있게 된다. 하지만 잘 동작하지 않을 수 있다. 일부 소스는 혼란스럽거나, 틀린 부분도 있는 것 같다. 그러나 수백 페이지에 달하는 책을 독자의 선택이기는 하지만 무료로까지 배포하는 저자를 생각한다면 이런 정도는 당연히 극복해야 할 어려움일 것이다. 어떤 경우든지 시행착오를 겪으며 습득하는 지식이 진짜 지식이다. 이런 과정이 없다면 진정한 전문가가 될 수 없다. 필자도 마찬가지로 책에 나온 소스를 하나하나 입력해가며 시행착오를 거치면서 사용된 방법이나 기술들을 익혔다. 그리고 필요하면 구글링도 하면서 보완했다.

필자가 겪은 문제들은 책에 나온 그래프 데이터가 D3.js 의 날짜 포맷과 달라서 웹 페이지 로딩 중에 D3.js 안에서 에러가 감지되기도 했고, TSV 포맷의 헤더에 데이터 필드의 이름을 반드시 적어 주어야 된다는 사실을 뒤늦게 알게 됐고, 스케일 변수 x 와 D3.js 내의 x 함수의 혼란으로 프로그램이 제대로 실행되지 않기도 했다. 그 외에도 이런 저런 문제들을 만났었다.

이렇게 문제들을 해결해가면서 마침내 완성된 예를 만들었다. 이렇게 완성된 예를 만들어 보니, 이제 D3.js 에서 등장하는 도메인(이 개념은 중학교 때 배운 함수의 정의역이다.), 레인지(이 개념은 중학교 때 배운 함수의 치역이다.), 스케일(이 개념은 고등학교 때 배운 함수이다.)들에 대해 좀더 이해할 수 있게 되었고 몇 가지 입력 값들을 변경하면서 그래프에 효과를 추가하거나 표시 방식을 변경해 보기도 했다. 결과적으로 책에 예제를 좀더 보강하여 필자만의 완성한 예를 완성했다. 그러면서 부수적으로 CSS와 JavaScript에 대해 좀더 더 잘 이해하게 되는 성과(?)도 얻었다.

이 글에 게시된 완성된 예가 작성되기까지 "D3 Tips and Tricks" 책의 95 페이지까지 읽었다. 시간은 약 일주일이 걸린 것 같다. 물론 업무 중에 짬짬이 진행했고, 집에 가서도 조금 더 작업했다. 그리고 이 블로그를 작성하는 데 약 삼 일이 걸렸다. 그러므로 필자는 약 십여 일 투자해서 웹 페이지에 멋진 그래프를 그릴 수 있는 기초를 갖게 된 것이다. 만약 이 글을 읽는 독자도 필자처럼 십여 일을 노력해 D3.js 기술을 검토해 본다면 독자들도 멋진 인포그래픽을 그릴 수 있는 기초를 완성할 수 있을 것이다. 이 정도 시간 투자면 누구라도 한번 도전해 볼 수 있지 않을까? 생각된다.

이 글은 D3.js 기술에 대해 처음 관심을 가진 독자가 D3.js 기술에 접근했을 때, 어떤 마음가짐을 가지고 어느 정도 시간을 투자해야 하는지를 보여주고, "D3 Tips and Tricks"책을 공부하면서 독자가 입력한 예제가 잘 동작하지 않을 때, 비교해 볼 수 있도록 동작하는 "D3 Tips and Tricks"의 예제 소스를 제공하기 위해 씌어졌다. 그러므로 D3.js 기술을 검토하면서 "D3 Tips and Tricks" 책을 읽는 독자들은 아래 참고 사이트의 필자 샘플을 참고하기 바란다.

참고 사이트

다음은 필자가 D3.js 를 검토하면서 참조한 사이트들이다.

• 1) D3.js 홈 페이지

아름답고 다양한 그래프로 눈이 휘둥그래진다. D3.js 로 표현 가능한 인포그래픽을 확인해 보라.

• 2) D3 Tips and Tricks

필자가 D3.js 기술을 익힌 책이다. 이 글의 그래프도 이 책의 예다.

• 3) NVD3 라이브러리

필자가 다음으로 검토하려는 D3.js 기반의 JavaScript 차트 라이브러다.

• 4) Cubism.js 라이브러리

D3.js 기반의 시계열 시각화 라이브러다

• 5) http://bl.ocks.org/

Gist의 웹 페이지 소스를 D3 그래프 페이지로 그려주는 사이트이다. 필자도 이 사이트를 이용해 첫 머리에 그래프를 포함시켰다. Gist의 소스를 그래프로 포함시키는 방법은 이 사이트의 설명을 참조한다.

• 6) 필자 샘플 소스

첫 머리에 보이는 "D3 Tips and Tricks"의 샘플이다. 첫 머리 그래프를 표시하는 소스는 index.html이다.