석사2학기 김혜영

2007. 11. 14

연세대학교 문헌정보학과 대학원

2007년 가을학기 정보시각화

웹에서의 정보시각화 현황

Part1 : Searching & Analyzing

0. 웹에서의 정보시각화 Overview

1. 웹 검색결과 시각화

2. 웹 컨텐츠DB 시각화

3. 웹 로그분석 시각화

4. 웹 링크분석 시각화

목 차

3

웹에서의 정보시각화 Overview

웹 검색결과 시각화

웹 컨텐츠 DB 시각화

웹 로그 분석 시각화

웹 링크 분석 시각화

Tree Network Focus & Context

3D/Metaphor

Searching & Analyzing

웹사이트/페이지브라우저 시각화

웹 지도브라우저 시각화

태그 네트워크 시각화

소셜 네트워크 시각화

Browsing & Networking

Fisheye View

HyperbolicView

Map

ZoomView

Bivariate/Multivariate

SchatterPlot

Parallel CoordinatesCluster Geo GraphDocu

Spiral TileBar

DocuRelevance

BargramView

웹 검색결과 시각화1

5

1.1 검색결과 : Tree

MS Tafini

live.com 웹 검색결과의 제목 텍스트들을 Tree 형태로 표현

ex. ‘Information Visualization’결과

나뭇잎의 풍성함 정도에 따라

Tile Bar를 이용해 결과 필터링

www.blackdogair.com

amazon.com 책, 영화, 음반들 검색결과들을

Tree형태로 표현

좌측에는 Tree형 디렉토리 네비게이션 제공

검색결과에서 상품 이미지와 소개 정보를

페이지 클릭 없이 바로 열람 가능

6

1.2 검색결과 : Network

liveplasma

가수, 영화명, 영화배우 등 검색 시

해당 검색어와 관련이 있는 네트워크 결과 생성

URL : www.liveplasma.com

각 노드에 마우스 오버 시 해당 가수의 앨범 리스트

좌측에 노출

TouchGraph

Google 웹 검색결과, 아마존 상품 결과 사이에

네트워킹된 형태로 검색결과 표현

URL : www.touchgraph.com/TGGoogleBrowser.html

7

1.2 검색결과 : Network

엠파스 인물관계검색

관련성이 있는 두 인물 검색어를 동시에 입력 시,ex. ‘옥소리 박철’ 결과

두 인물과 관련성이 높은 인물 순으로

순위가 매겨짐, Top5 관계 인물 노출

8

1.3 검색결과 : Focus & Context - Fisheye

Tagnautica

Flicker 태그들을 대상으로 검색

URL : http://www.quasimondo.com/tagnautica.php

검색결과를 Fisheye View 방식으로 노출

9

1.3 검색결과 : Focus & Context - bargram

Pluggd

오디오, 비디오 검색에서 ‘음성인식’ 기능 제공

URL : www.pluggd.com

전체 오디오 클립 내에서

검색어와 매칭되는 음성 정보를 가진 영역을

“heatmap”이라는 bargram 형태로 표현

Thefind.com

검색된 상품검색 결과를 ‘가격대’별로 bargram 형생

전체 가격대에서의 검색결과 수 (Context)와, 특정 가격대에서의 검색결과 수 (Focus) 확인 가능

ex. ‘skirt’ 결과

10

1.4 검색결과 : Relevance – Document Spiral

SearchCrystal

이미지 검색결과를 Relevance순으로 Spiral로 표현

URL : www.searchcrystal.com

Spiral Veiw 이외에 Scatter Plot 형태의 View도 제공

KoolTorch

검색결과를 주제별로 원반형으로 그룹핑하고

(일종의 Cluster Map 기법 추가) 그룹핑 된 원 안에서 Relevance 순으로 Spiral로 표현

ex. ‘Information Visualization’결과

11

1.4 검색결과 : Relevance – TileBar

TileBar

검색결과를 시각화하는 초창기 연구 시 Marti Hearst(1997)에 의해 제안됨

Full-Text 검색 시, 문서 내에서 검색어가 매칭하는 분포, 문서 길이 등을

종합하여 각 검색결과들에 대해 TileBar 형태로 표현

URL : people.ischool.berkeley.edu/~hearst/tb-overview.html

o

12

1.5 검색결과 : Cluster Map

Kartoo

검색결과를 주제별로 클러스터링한 결과를

결과 내에서 특정 ‘영역’으로 표시, 관련 문서 링크 표현

URL : www.kartoo.com

Quintura

검색결과를 주제 개념별로 클러스터링 한 결과를

좌측에 Topic Map 형태로 표현

URL : www.quintura.com

Topic Map 간의 네트워크도 화면에서 표시

13

1.5 검색결과 : Cluster Map

Ujiko.com

검색결과를 주제 개념으로 클러스터링 한 결과를

가운데 원 내에 표시, 같은 클러스터에 속하는 문서는 컬러 바로 표현

URL : www.ujiko.com

14

1.6 검색결과 : Geographical Map

Google Map View

웹페이지 검색결과를

해당 페이지 관련 지도 상에

위치를 표시하는 형태로 노출

ex. Olympics view:map 결과

Properazzi

유럽 지역 내 부동산 매물 검색결과를

구글 Map에 지역별 검색결과 분포 및 지역 제한 검색이

가능하도록 기능 구현

ex. Paris 검색결과

15

1.7 검색결과 : Scatter Plot

Envision

도서관 장서 검색결과를 시각화하기 위해

Fox(1993), Health(1995)에 의해 진행된 초기 연구 프로젝트

문헌 검색결과를 출판년도, Index Term, 적합성 정도에 따라

Scatter Plot 에 분포도 표현

URL : www.dlib.vt.edu/projects/Envision/index.html

oskope

Amazon.com 상품 검색결과를 가격, 인기도 등을

축으로 하는 Plot에 결과 분포도를 표현

URL : www.oskope.com

웹 컨텐츠 DB 시각화2

17

2.1 웹 컨텐츠 : Tree

ecotonohaNEC에서 환경보호 캠페인을 위해 제공하는 서비스로

이용자들이 모바일이나 웹에서 매일 자라나는 캠페인 Tree에

URL : www.ecotonoha.com/ecotonoha.html

18

2.2 웹 컨텐츠 : Network

Websites as Graphs웹 사이트의 HTML 소스태그들의 성격에 따라

분류를 해서 해당 사이트의 웹페이지 구성을

네트워크 방식으로 시각화

URL : http://www.aharef.info/static/htmlgraph/

blue: for links (the A tag)red: for tables (TABLE, TR and TD tags)green: for the DIV tagviolet: for images (the IMG tag)yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)black: the HTML tag, the root nodegray: all other tags

ex. CNN.com ex. apple.com

19

2.3 웹 컨텐츠 : Focus & Context

야후 이슈n야후 뉴스에서 실시간으로 올라오는 기사들의

전체적인 양을 시간 Bargram을 통해서 표현

시간대별, 순위별 핫 기사들은

우측에 Focus해서 표현

URL : kr.issuen.search.yahoo.com/issuenp/timezone.html

Digg.com StackDigg.com 에서 실시간으로 digging이 되고 있는

문서들의 현황을 전체적으로 보여줌

Zooming 기법을 이용해 일부 문서들의

digging 현황 만을 확대해서 보거나, 개별 digging 대상 문서들의 세부 정보를 확인 가능

URL : labs.digg.com/stack

20

2.3 웹 컨텐츠 : Focus & Context

네이버 블로그 인기 태그

특정 날짜의 블로그 포스트에 많이 달린

태그들의 전체적인 분포를

태그 폰트 크기, 컬러 등을 이용해서 표현

개별 태그들 클릭 시 해당 태그로 태깅된

포스트로 연결 가능

URL : section.blog.naver.com/BlogSenseTagList.nhn

Daum 검색 트렌드

실시간 검색어 리스트를 Fisheye View 방식으로

Daum 검색 트렌드 Top에 노출

URL : trend.search.daum.net

21

2.3 웹 컨텐츠 : Focus & Context

네이버 증권 - 증시차트

증권 서비스에서 제공하는 업체별 증권 시세 차트에서

특정 기간 시세 현황을 Focus 하기 위해 Zooming 등의 기법 활용

ex. NHN 증시 차트

22

2.4 웹 컨텐츠 : Geographical Map

구글 My Map여러 가지 테마를 가진 컨텐츠들을 구글 Map에 쉽게 표현할 수 있는 기능으로, 아래는 Panoramio 사이트 사진들을 지도 좌표에 맵핑해서 전체 사진 지역 분포를 확인

Ex. My Maps > Photos from Panoramio

23

2.5 웹 컨텐츠 : Scatter Plot

네이트 뉴스 이슈맵

네이트 뉴스에 실시간으로 올라오는 뉴스 중

네티즌들이 많이 클릭하거나 댓글 등을 활발히 단 ‘이슈’ 기사를 분야별로 선정,‘최신성’ 축과 ‘인기지수’ 축에 배치하는 방식으로 표현

URL : newscomm.nate.com/nc/issue/issuehome.asp

24

2.6 웹 컨텐츠 : Parallel Coordinates

딜리셔스 Cronology딜리셔스에서 링크 북마킹에 의해서

태그가 달리는 ‘날짜일시’를 X축, 일별 시간 흐름을 Y축, 태그들을 X축, Y축 상의 점으로 해서

각 태그별로 하루 중에 태깅이 되는

일시를 연결하여 패턴 분석

URL : www.datadreamer.com/research

웹 로그분석 시각화3

26

3. 웹 로그 : Graph

Compete여러 사이트들의 이용자 체류 시간을 그래프로 비교한 시각화

URL : www.compete.com/

27

3. 웹 로그 : Graph

Compete여러 사이트들의 이용자 체류 시간을 그래프로 비교한 시각화

URL : www.compete.com/

웹 링크분석 시각화4

29

4. 웹 링크 : Network

mvblogosphere VisualizationMV Blog 들의 링크 분석결과

URL : www.mvblogs.org/visuals/visual.php

Mapping the Political Blogosphere and the 2004 U.S. Election

정치관련 주제를 다루는 블로거들 간의

Inlink, OutLink를 분석하되, 보수, 진보 성향을 (빨간색, 파란색)으로 시각화해서 이들 블로거들 사이의 링크 네트워크분석

URL : www.blogpulse.com/papers/2005/AdamicGlanceBlogWWW.pdf

30

4. 웹 링크 : Network

인터넷 IP Map인터넷 IP를 기반으로 한 링크 분석 결과

URL : www.fractalus.com/steve/stuff/ipmap

Cluster ball위키피디아 카테고리 페이지와 상세 페이지간의

링크를 분석한 결과

URL : www.chrisharrison.net/projects/clusterball

End of Document