Live, Vast and Deep: Web-native Information Visualization

Stamen Design의 탐 카든(Tom Carden)이 발표했습니다.

참석자는 개발자가 많았지만 통계전문가도 있었습니다.

디자인이나 창의력은 손에서 일어나지만 시각화는 눈에서 일어나는 것이다. 웹에서 데이터는 항상 살아있는 것이고, 데이터 속에서 반복되는 행위에서 패턴이나 프로세스를 찾을 수 있다고 얘기합니다.

Showing Everything: 모든 것을 보여주고, 이를 시각적으로 처리해서 다시 결과를 보는 것을 반복합니다. zipdecode 프로젝트는 미국의 우편번호를 각각의 픽셀로 매핑한 시각화입니다.

숫자 0을 누르면 버몬트 주가 강조되는 식으로 동작합니다. 숫자를 입력할 때마다 이에 매핑된 지역이 강조됩니다. 이것만으로도 수많은 우편번호를 시각적으로 볼 수 있고, 어떤식으로 매핑되어 있는지 알 수 있게 됩니다.


Cabspotting 프로젝트



샌프란시스코에서 택시의 위치를 추적한 것입니다. 이런 방식을 통해 시내에서 교통흐름이 많은 곳, 번화가 인곳과 번화가가 아닌 곳, 사람들이 모이는 곳을 나타낸 겁니다.




가운데에 보시면 네모난 사각형 안에 하얀 점이 두 개 있습니다. 이 부분은 주유소나 가스 충전소를 의미합니다. 많은 택시가 주유나 가스 충전을 위해 가기 때문이죠.

Cabspotting Project: http://cabspotting.org/
더 많은 사진은 http://content.stamen.com/eddie_elliotts_cab_spots를 참고하세요.

Stamen Design에서는 Digg.com의 데이터를 이용한 시각화도 다양하게 시도하고 있습니다.

Digg.com Labs에서 데이터 시각화를 확인할 수 있습니다.



Digg.com에 올라오는 실시간 데이터를 토대로 원으로 표현합니다. 큰 분야에 따라 나뉘게 되고, 사람과 사람 사이의 관계도 볼 수 있게 되죠.

Chris Jordan의 시각화도 소개됩니다.


TV 화면인가? 하는 생각도 했는데, 미국에서 5분마다 버려지는 2백만개의 플라스틱 병을 나타낸 겁니다. 사진을 확대하면 이렇습니다.




매퍼(Mappr) 프로젝트는 미국내 위치와 플리커(Flickr)에 올라온 사진을 매핑하는 서비스입니다. 이 프로젝트 역시 Stamen Design에서 한 것입니다. 플래시에서 사용할 수 있게 OpenAPI를 제공하고 있습니다.(http://code.google.com/p/as3mapprlib/)




TruliaHindsight는 전국을 지도로 매핑한 것입니다. 시간 순으로 부동산 개발 정보를 통해 어느 시기에 어느 지역이 활발하게 개발되었는지 알 수 있습니다.

샌프란시스코를 볼까요.
http://hindsight.trulia.com/map/#lat=37.782&lon=-122.405&zoom=15&mix=0.500




언어에 대한 것도 얘기합니다. 단순한 패턴이 끊임없이 반복되는 것이죠.

현재 시각화는 Processing도 이용하지만 대부분을 플래시를 이용한 게 많다고 합니다.

샌프란시스코 디지털 시티(Digital City)
http://studio.stamen.com/som/digital_city/01/

인디애나주에서 INDigital Telecom 전화회사에서 911 통화를 시각화한 예도 소개합니다.



오른쪽은 시간 순서로 흐르는 정보이고, 지도에 위치를 매핑해서 911 전화가 많은 지역과 낮은 지역을 알 수 있습니다. 점 하나가 하나의 통화를 의미합니다.

그래프 형태의 시각화 도구로는 GraphViz와 TouchGraph를 소개했습니다.

- 사람들이 어떻게 서로 연결될까? 같이 데이터에서 표면적으로 보이는 것 외에 보이지 않는 것을 찾는 시도도 있습니다. 웹에서 사람들이 서로 어떻게 연결되어 있는지 보여주는 시도로는 구글의 Social Graph API가 소개되었습니다.

























이처럼 정보 사이에 숨겨진 관계를 파악하는 것, 숨겨진 데이터를 파악하는 것도 할 수 있고, 이를 시각화할 수 있다는 내용이었습니다. 여기에 좋은 책이 있다며 소개한 것은 오라일리의 <<Programming Collective Intelligence>>입니다.


 

아마존에서 사람들이 구매하는 상품 정보를 통해 "이 상품을 구매한 사람들이 구매한 상품"을 알 수 있고, 사람들이 클릭하는 정보로부터 "이 상품을 본 사람이 본 다른 상품"을 알 수 있습니다. 웹2.0에서 사용자의 데이터를 찾는 것이 중요하죠. 현재 이 책은 한빛미디어에서 번역중이고, 5월 중에는 번역서를 서점에서 볼 수 있을 것 같습니다. 제목은 모르지만 아마 "집단 지성 프로그래밍"이 되지 않을까요??


- 오클랜드 범죄 정보 시각화




범죄 정보를 실시간으로 볼 수 있고, 유형별로 볼 수 있습니다.

런던에서 내가 간 장소, 머무르는 시간등을 이용해서 시각화한 예도 있습니다.
http://www.tom-carden.co.uk/p5/tube_map_travel_times/applet/


중간에 시각화와 관련된 오래된 비디오를 하나 보여줍니다. 1993년 9월에 제작된 비디오라고 하는데, 여기서는 Film Finder를 소개합니다.

http://www.sapdesignguild.org/community/book_people/visualization/controls/FilmFinder.htm에 방문하면 볼 수 있습니다.

사람들이 도서나 영화를 찾으려면 수없이 많은 목록에서 찾아야 합니다. 영화 이름으로 찾거나 백과사전식으로 검색하거나 친구에게 물어보겠죠. FilmFinder를 이용하면 관심있는 영역을 확대해서 볼 수 있고, 슬라이더 UI를 이용해서 동적으로 필름을 질의할 수 있습니다.
이런 검색 시각화에서 3가지 요소를 강조합니다.

첫번째는 동적 쿼리(dynamic query)입니다. 사람들은 슬라이더 UI를 사용해서 다양한 것을 선택하는 것이지만 이는 실제로 동적 쿼리에 해당합니다.
두번째는 스타필드 디스플레이인데, 관계형 데이터베이스에서 여러 컬럼을 선택하는 것과 같습니다.
세번째는 타이트 커플링입니다. 위 두 가지를 통해 전체 데이터베이스를 한 화면에서 보고 검색할 수 있는데, 이처럼 데이터와 강하게 연결하는 것을 얘기합니다. 간단한 소개 비디오가 있으니 한 번 보시면 이해가 쉬울 겁니다.

이런 데이터 시각화에 Processing을 사용할 수도 있지만, prefuse visualization toolkit을 사용할 수 있습니다.
http://prefuse.org/

prefuse flare가 있고, 갤러리를 방문하면 prefuse로 만들 수 있는 시각화 예제가 있습니다.
http://prefuse.org/gallery/

prefuse는 오픈소스이고, 자바 버전과 플래시 버전이 있습니다.

데이터 시각화를 통해 거의 모든 것을 보이게 만들 수 있습니다. 숫자 데이터가 아닌 것은 MD5 해시를 이용한 방법을 적용해서 시각화하는 것도 고려할 수 있습니다.

부족하지만 첫날에 가장 인상적인 세션이었습니다. ^^;