Post on 04-Jul-2020
석사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