다른 애플리케이션에서 사용하기 위해 데이터를 재구성해야 하는가? 지도에 넣을 생각인가? 상호작용형 웹 그래픽에? 이 오픈 소스(Open Source) 라이브러리들은 분석 또는 설득력 있는 온라인 표현(Presentation)을 위해 데이터를 적절한 형식으로 변경할 때 도움이 된다.
용도: CTS의 목적은 CSS(Cascacint Style Sheets)가 기본적인 HTML에 대하여 제공하는 기능처럼 복잡한 표현을 위해 구조화된 데이터의 스타일을 정의하는데 도움을 준다. 지도 또는 도표에 CTS 코드 위젯을 추가하여 사용자는 자바스크립트(JavaScript)에 대한 지식 없이도 기본적인 HTML로 시각화 객체를 생성할 수 있다.장점: 구글 지도, 막대 그래프, 버블 차트 등을 위한 6 종류의 위젯을 이용해 사용자들은 간단한 HTML 표와 목록을 코드로 작성하여 강력한 온라인 시각화 객체를 생성할 수 있다.
단점: 시각화 옵션은 현재까지 꽤 제한적이기 때문에 등치 지역도 위젯 등은 오직 미국 등의 지도만을 취급한다. 그리고 해당 프로젝트는 여전히 초기 단계이기 때문에 샘플 CTS 테마 등이 아직 준비되지 않았다.
숙련도: 초급자
예제 및 세부사항: 예제 및 샘플 코드는 CTS 위젯 페이지참조. http://www.treesheets.org/widgets/
D3(Data-Driven Documents) 용도: 이 라이브러리는 데이터를 HTML 문서의 일부에 묶어 사용자는 "문서에 데이터 중심적인 변화를 적용"할 수 있도록 한다. 이것은 사용자가 수정할 수 있는 다양한 데이터 시각화 템플릿을 제공하는 구글 차트 도구(Google Chart Tools)와는 다른 라이브러리로 HTML이라는 캔버스에 처음부터 더욱 쉽게 디자인을 생성할 수 있도록 도와주는 특화된 언어에 더욱 가깝다.
장점: 재능이 있는 디자이너들은 상상하는 거의 모든 것을 생성하고 원하는 대로 상호적인 디자인을 정확하게 구현할 수 있다. D3는 jQuery와 CSS와 유사한 셀렉터를 사용해 HTML 문서에서 (기술적으로 DOM(Document Object Model) 내의) 엘레먼트를 선택하고 변경하기 때문에 직접적인 자바스크립트를 사용하는 것보다 더 쉬울 수 있다. XML, CSV 뿐만이 아니라 JSON 등 다양한 데이터 형식을 취급하고 데이터 세트를 통한 루프(Loop)를 용이하게 하는 기능을 포함하고 있다.
단점: D3가 강력하기는 하지만 여기에 기술한 다른 라이브러리에 비해 학습 곡선이 다소 가파르기는 하다. 그리고 말 그대로 완전히 처음부터 시작하는 것이기 때문에 다른 곳에서 "빌려온" 코드를 수정할 생각이 아니라면 코딩과 디자인 기술 모두가 필요하다. 업데이트: 한 독자가 언급했듯이, D3는 일부 예전 브라우저에서 작동하지 않기 때문에 인터넷 익스플로러의 옛날 버전을 지원하기 위해서는 시즐(Sizzle) 또는 라파엘(Raphael) 등의 라이브러리를 이용한 추가적인 코딩이 필요할 수 있다.
숙련도: 전문가
예제: The Tech I.P.O.'s와 오바마의 2013년 예산 제안서를 삭감하는 4가지 방법(Four Ways to Slice Obama's 2013 Budget Proposal) 등 뉴욕 타임즈(The New York Times)의 기사를 참조.
추가 정보 확인: D3 튜토리얼 페이지 https://github.com/mbostock/d3/wiki/Tutorials 에서 다양한 리소스 목록을 찾을 수 있으며 스콧 머레이(Scott Murray)가 저서 웹을 위한 상호작용형 데이터 시각화(Interactive Data Visualization for the Web) http://oreilly.com/shop/product/0636920026938.html 에서 기본적으로 다루고 있는 것들도 찾을 수 있다.
데이터세트(Dataset) 용도: "변화 및 관리 라이브러리"라는 이름의 데이터세트는 "모든 종류의 소스로부터 얻은 데이터의 로딩, 분석, 분류, 질의, 조작" 등을 간소화함으로써 다른 애플리케이션에서 사용하기 위한 데이터 처리 작업을 용이하게 한다.
장점: 데이터세트는 구글 스프레드시트(Google Spreadsheet)에 저장된 데이터를 유입시키는 것부터 원격으로 라이브 데이터 피드를 폴링(Polling)하는 것까지 다양한 작업을 수행하는데 도움이 된다. 사용자는 상황에 따라 계산된 칼럼을 추가할 뿐만 아니라 데이터를 집단화 및 선택할 수 있다. API는 강력하며 라이브러리에 대한 문서가 잘 준비되어 있다.
데이터세트는 오픈 소스 미소 프로젝트(Miso Project)의 파생물이며 의존성의 중요성을 인식할 가능성이 높은 잘 알려진 다수의 기관들이 지원하고 있고 빌 앤드 멜리사 게이츠 재단(Bill and Melissa Gates Foundation)의 재정지원을 통해 확장해야 한다 (영국의 미디어 회사 가디언(The Guardian) 등).
단점: 기능이 많기 때문에 제대로 활용하려면 많은 기능의 사용법을 익혀야 한다. 데이터 I/O 및 조작만이 가능하기 때문에 고급 분석 및 표시를 위해서는 다른 애플리케이션이 필요할 수 있다.
숙련도: 파워유저 - 전문가
예제: 영국 정부의 지출에 대한 상호작용형 트리 지도(또한 D3와 Backbone.js사용);원격 데이터의 선도표 (또한 하이차츠(Highcharts)사용).
추가 정보 확인: 데이터세트 웹 사이트의 튜토리얼부터 시작하는 것이 좋다. 생산 애플리케이션에서 데이터세트와 구글 스프레드시트를 사용한 간단한 사용예제는 데일리 베스트(Daily Best)의 개발자 마이클 켈러(Michael Keller)가 작성한 구글 문서도구 + 미소로 개발한 앱: 협업 작업흐름에 대한 단상(Google Docs + Miso-Powered Aps: a note on collaborative workflow) 참조.
용도: 리플렛은 상호작용 지도를 위한 가볍지만 탄탄한 라이브러리로 특히 모바일 친화적인 것이 특징이다. "대부분의 개발자들이 온라인 지도를 위해 필요로 하는 모든 기능을 갖추고 있다." 그러면서도 "단순성, 성능, 사용성을 염두에 두고 개발되었다"고 해당 프로젝트 웹 사이트에서는 밝히고 있다.
리플렛 코드는 지도 상에서 지도 제작기, 폴리곤(Polygon), 상호작용 (모바일 터치 화면과 마우스 클릭 등) 등을 생성할 수 있지만 자체적인 지도제작 데이터가 없기 때문에 기본적인 지도 계층이 필요하다. 프로젝트 튜토리얼에서는 (리플렛을 개발하고 오픈 소스화 한) 클라우드메이드(CloudMade)를 추천하고 있지만 맵박스(MapBox) 와 오픈스트리트맵(OpenStreetMap) 등 다른 지도제작 플랫폼과도 잘 호환된다.
장점: 리플렛은 타일 계층, 메이커, 팝업, 폴리곤 등뿐만이 아니라 데스크톱에서 마우스 스크롤 휠 줌과 iOS, 안드로이드4.0 이상, 윈도우 폰 8 등의 멀티터치 줌 등 사용자 상호작용을 지원한다. 그리고 전체 라이브러리가 28K에 불과하다.
단점: 개발자들은 가벼운 리플렛이 "모두에게 모든 것을 제공하지는 않는다"고 말한다. 즉, 다양한 옵션이나 복잡한 지도 상호작용은 포함되어 있지 않을 수 있다. 예를 들어, 리플렛 포럼에서 다양한 사용자들이 라이브러리에 단순한 파란색 대신에 표준 색상 메이커를 포함시켜 "maker-icon-red" 같은 명령어로 메이커 색상을 변경할 수 있기를 원한다.
숙련도: 전문가
예제: 텍사스 트리뷴(The Texas Tribune)의 선거결과 지도, 워싱턴 포스트(The Washingto Post)의 2012 미국 상원 선거 결과, 공공 라디오 방속국 WNYC의 허리케인 후 지하철 복구 지도 참조.
추가 정보 확인: 리플렛 사이트에는 다수의 튜토리얼이 준비되어 있음. 또한 오픈스트리트맵 리플렛(OpenStreetMap Leaflet) 안내정보도 참조.
용도: 이 라이브러리는 구글의 퓨전 테이블과 호환되어 퓨전 테이블 지도에 검색 및 필터링 기능을 추가하도록 개발되었다.
장점: 퓨전 테이블은 뛰어나고 사용이 용이한 데이터 시각화 툴이지만 기본 지도제작 기능에는 검색이나 정렬이 포함되어 있지 않다. 이 템플릿으로 자바스크립트 코딩을 처음부터 실시하지 않고도 이 기능을 추가할 수 있다. 또한 사용자가 지도 검색을 실시할 때 텍스트 결과 목록을 추가하는 방법에 관한 안내정보도 존재한다.
단점: 구글 맵스(Google Maps) API에 의존하기 때문에 구글이 자사의 서비스를 변경 또는 제한하면 애플리케이션이 무용지물이 될 수 있다.
숙련도: 초중급자.
예제: 어반 스트레터지스 카운실(Urban Strategies Council)의 시카고 공립학교 위치찾기(Chicago Public School Locator) 또는 무료 베이지역 세금 준비위치 등 참조.
추가 정보 확인: 단계별 설명정보를 해당 프로젝트의 Github 페이지에서 확인할 수 있다. 구글의 퓨전테이블스레이어 마법사(FusionTablesLayer Wizard) 또한 퓨전 테이블 지도를 검색하기 위한 코드를 생성하는데 도움이 될 수 있다.
테이블탑(Tabletop) 용도: 자신의 웹 사이트에서 사용하기 위해 온라인 스프레드시트로부터 데이터를 추출하고 싶다면 데이터세트는 과분하며 테이블탑으로 "구글 스프레드시트를 가져와 자바스크립트로 손쉽게 접근하도록 할 수 있다"고 해당 프로젝트의 웹 사이트에서 밝히고 있다. "의존성은 전혀 없다!" (참고: 테이블탑은 밸런스 미디어(Balance Media)가 WNYC용으로 개발한 것이다)
장점: 구글 스프레드시트는 다수의 사람들에게 업데이트를 제공하기에 적합하며, 단 한 번의 클릭으로 사이트의 데이터를 갱신할 수 있다. 구글이 호스팅, 접속, 보안 문제를 처리하며, 사용자는 데이터를 제공하는 방식에만 집중하면 된다.
완전한 기능을 갖춘 백엔드(Back-end) 데이터베이스만큼은 못하지만 테이블탑을 사용하면 서버와 데이터베이스를 관리할 필요가 없다. 단, 모든 공공 프로젝트에 이런 특징이 유리하게 작용하는 것은 아니다. 사용자가 질문에 대답하고 이런 대답에 따라 새로운 결과를 볼 수 있는"자신만의 모험을 선택하세요" 슬라이드쇼 등 스프레드시트 데이터를 온라인으로 제공하는 것 이상의 기능을 웹 애플리케이션에 추가할 수 있다.
단점: 이것은 분명 거대한 데이터 세트 또는 트위터 수준의 트래픽 양에 대응하도록 설계되지 않았다. 일부 개발자들은 구글이 사용량이 많은 애플리케이션의 속도를 제한하거나 API를 변경하여 앱이 무용지물이 될 수도 있는 상황을 걱정하고 있다. 이런 잠재적인 문제점을 해결하기 위해서는 사용자들이 접근하는 웹 페이지 대신에 서버에 정적인 CSV 파일로 데이터를 옮겨놓는 것이 나을 수도 있다. 물론, 이로 인해 복잡성이 증가하는 것은 사실이다.
숙련도: 초중급자.
예제: WNYC의 시장 후보 추적기는 테이블탑과 구글 스프레드시트로 운용된다. 클릭하면 텍스트 외에 많은 것들을 볼 수 있을 것이다. 또한 마더 존스(Mother Jones)의 이야기 구성을 위한 오픈 소스 자신만의 모험을 선택하자(Choose Your Own Adventure) 플러그인도 있다.
추가 정보 확인: 테이블탑 메인 사이트에는 "시작하기" 튜토리얼이 준비되어 있다. 그리고 시카고 트리뷴(Chicago Tribune)의 개발자 앤디 보일(Andy Boyle)은 테이블탑에 초보자들을 위한 90분 비디오를 게시했다.
더 많은 라이브러리
데이터를 처리하는데 도움이 되는 더 많은 자바스크립트 라이브러리가 존재하며, 그 중 일부는 우리가 이미 다룬 바 있다. 예전에 컴퓨터월드(Computerworld)에서 다룬 구글 차트도구(Google Chart Tools), 하이차츠(Highcharts),자바스크립트 인포비스 툴킷(JavaScript InfoVis Toolkit), MIT 스마일(Smile) 프로젝트의 파생물 엑서빗(Exhibit)도 참조하기 바란다.
그리고 자바스크립트 라이브러리 외의 데이터 도구는 데이터 시각화 및 분석을 위한 30여 종의 무료 툴 차트를 참조하자. editor@itworld.co.kr