Embed Size (px)
Citation preview
hci+d lab.
빅데이터 비주얼라이제이션
Joonhwan Lee, Ph.D. Human-Computer Interaction & Design Lab. Seoul National University
hci+d lab.
정보 시각화(Information Visualization)
hci+d lab.
Data Explosion
3
hci+d lab.
Data Explosion
✦ 출간된 혹은 인터넷 등의 네트워크에 공유된 정보의 급속한 증가
✦ 정보의 양이 증가할 수록 정보를 다루는 일이 더욱 어려워 진다. → data overload.- http://en.wikipedia.org/wiki/Information_explosion
4
hci+d lab.
소셜네트워크의 데이터 양
✦ 뉴욕 타임즈가 하루에 싣는 정보의 양은 17세기 영국의 평범한 한 사람이 평생 소비하는 정보의 양과 비슷Wurman, S.A. (1987) "Information Anxiety" New York: Doubleday
✦ 페이스북에서는 하루에 30페타 바이트 이상의 정보가 저장, 공유
http://wikibon.org/blog/taming-big-data/✦ 전 세계에서 하루에 50억 건 이상의 트윗, 문자 메시지 등이 사용http://www.sas.com/resources/whitepaper/wp_46345.pdf
5
hci+d lab.
빅데이터 연구
✦ 엄청나게 많은 데이터로부터 의미를 찾는 노력✦ 무수히 나열된 데이터는 우리에게 숫자와 문자의 행과 열, 그 이상의 어떠한 의미도 부여하지 않는다
6?
hci+d lab.
Sensemaking & Issue
✦ Data 를 Information 으로 변환하여 유용하게 사용하자!✦ Q: Data와 Information의 차이?
✦ Sensemaking: 데이터에 의미와 통찰력을 부여하는 과정
✦ Issue✦ “Human attention is the scarce resource”
- Herbert Simon, 1969
✦ 사람은 매우 빠른 정보 처리 속도를 가졌지만, 그렇다 하더라도 너무 많은 정보가 전달되면 정보를 처리할 수 없다 → information overload
✦ Solution?✦ People think visually. 7
hci+d lab.
Think Visually..?
✦ 19세기 중반까지 유럽인들은 콜레라가 하수나 폐수에서 발생하는 독기(毒氣), 즉 나쁜 공기에 의해 발생한다고 믿었다. 1854년, 이를 의심하던 영국의 젊은 의사 존 스노우는 런던에서 발생한 콜레라 집단 발병이 눈에 보이지 않는 작은 벌레에 의한 것일 수 있다는 생각으로 이를 추적하기로 한다.
✦ 이듬해 런던의 소호에서 콜레라가 다시 집단 발생했을 때, 스노는 가가호호(家家戶戶)를 방문하면서 콜레라 환자를 조사했다. 그리고 환자가 발생한 지역과 환자 수를 지도에 일일이 기입했다.
8서울대 자연과학대학 천종식 교수, 조선일보 (2006)
hci+d lab.
Think Visually..?
9
hci+d lab.
Think Visually..?
9
hci+d lab.
Think Visually..?
✦ 어느 정도 일이 진척되자 슬슬 수수께끼가 풀렸다. 가구당 콜레라 환자의 수는 브로드가(街)의 우물에 가까울수록 많다는 것을 발견한 것이다. 그리고 환자 대부분이 이 우물에서 물을 길어 식수로 이용했다는 사실도 확인했다. 콜레라를 일으킨다고 믿던 독기(毒氣)를 중화시키기 위해 거리에 석회를 열심히 뿌리던 런던 시당국은 그에게 속는 셈치고 우물을 폐쇄했다. 그러자 기적같이 콜레라 전염이 멈추게 된 것이다.
10
데이터의 시각화는 보이지 않는 문제점을 발견하게 해준다.
서울대 자연과학대학 천종식 교수, 조선일보 (2006)
hci+d lab.
Sensemaking의 예
11
6
Some Examples
• Why visualization helps…
Fall 2012 CS 7450 11
Fall 2012 CS 7450 12
Which cereal has the most/least potassium? Is there a relationship between potassium and fiber? If so, are there any outliers? Which manufacturer makes the healthiest cereals?
Questions:
Q: 가장 많은/적은 칼륨(potassium)을 가진 시리얼은? potassium과 fiber의 상관관계는? 가장 건강에 좋은 시리얼은?
slide courtesy: John Stasko, GATech
hci+d lab.
Example of Sensemaking
12
7
Fall 2012 CS 7450 13 Potassium
Fibe
r
Fall 2012 CS 7450 14
Even Tougher?
• What if you could only see one cereal’s data at a time? (e.g. some websites)
• What if I read the data to you?
slide courtesy: John Stasko, GATech
data visualization
hci+d lab.
Power of Visualization
13
hci+d lab.
정보 시각화(information visualization)
✦ 컴퓨터를 사용하여 인지를 넓힐 수 있도록 데이터를 상호작용이 가능한 시각적 형태로 만드는 것✦ 그래픽이나 이미지를 만드는 과정 X
✦ 인지 프로세스를 도와주는 과정 자체
✦ 외부인지보조(External Cognition Aid)✦ 데이터의 숨은 의미를 발견하고, 설명하고, 그걸 통해 의사결정을 내리는 통찰력Card, Mackinlay, Shneiderman (1998), "Readings in Information Visualization: Using Vision to Think"
14
hci+d lab.
정보 시각화 도구
hci+d lab.
R
✦ 범용 통계 프로그램
✦ 기본 그래프 그리기 기능 제공✦ R: 추가 패키지 설치를 통해 다양한 visualization 제작 가능
✦ e.g., 지도 (Lab1)library(ggmap)library(mapproj)css <- get_map('서울대학교 사회과학대학', zoom=17, maptype='hybrid')ibk <- data.frame(lon=126.949335, lat=37.463842)ggmap(css, base_layer=ggplot(aes(x=lon, y=lat), data=ibk)) + geom_point(colour='red', size=5) + geom_text(label='IBK Communication Center', colour='red', size=3, hjust=-0.1)* install.packages('ggmap')을 먼저 수행하여야 함. 16
● IBK Communication Center
37.461
37.462
37.463
37.464
37.465
37.466
126.948 126.950 126.952 126.954lon
lat
hci+d lab.
processing
✦ MIT의 aesthetics+computation group의 Ben Fry와 Casey Reas가 만든 오픈소스 프로젝트
✦ 자바 언어를 이용하여 만들어 짐✦ 자바의 문법구조를 따름✦ 자바에서 사용되는 복잡한 개념과 설정 등을 제외 → 초보자나 비 전산전공자도 손쉽게 사용 가능
✦ 손쉬운 그래픽✦ 텍스트 보다 그래픽 위주의 접근으로 미디어 아티스트들이 많이 사용
✦ 오픈소스! (무료) - http://www.processing.org✦ 맥/윈도/리눅스 등 다양한 플랫폼 제공 17
hci+d lab.
processing
18
Lab2(Source from Visualizing Data, Ben Fry)
hci+d lab.
processing
18
Lab2(Source from Visualizing Data, Ben Fry)
hci+d lab.
processing
19
hci+d lab.
d3.js
✦ 데이터 비주얼라이제이션을 위한 JavaScript 라이브러리✦ 자바스크립트는 뛰어난 그래픽 기능과 인터랙티비티, 웹페이지에 임베드 할 수 있다는 장점 때문에 최근에 많이 사용. 뉴욕타임즈에서는 자바스크립트를 사용한 인터랙티브한 인포그래픽을 뉴스와 함께 웹페이지에서 제공하고 있다.
✦ Stanford Visualization Group 에서 개발 (Protovis를 계승한 toolkit) - Mike Bostock, Jeffrey Heer
✦ HTML의 DOM(Document Object Model)을 이용하여 데이터를 visualize → web을 이용한 interactive visualization이 가능
✦ HTML5, CSS3, SVG를 활용20
hci+d lab.
d3.js
✦ Examples
21http://projects.flowingdata.com/life-expectancy/
hci+d lab.
d3.js
✦ Examples
22http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html
hci+d lab.
Tableau Desktop
✦ 스탠포드 대학의 Information Visualization Group에서 개발되었으며 관계형 데이터베이스를 위한 쿼리, 분석 툴을 제공.
✦ 손쉬운 시각화 도구와 사용자와의 인터랙션 도구를 제공하여 데이터를 손쉽게 조작하여 분석할 수 있다.
✦ 여러 빅데이터 시스템과의 원활한 연결 기능을 제공하여 현재 빅데이터 분석을 위한 비주얼라이제이션 도구로 많이 사용.
24
hci+d lab.
Tableau Desktop
25이베이에서 상품과 고객 관리를 위해 타블로를 이용해 정보를 시각화 한 사례
hci+d lab.
Many Eyes
✦ 웹을 위한 Information Visualization Tool
✦ IBM infovis group - F. Viégas et al.✦ Information Visualization 의 두가지 문제점
✦ 새로운 비주얼라이제이션을 만드는게 일반인에게 쉽지 않다.
✦ 비주얼라이제이션 → 전문가들을 위한 도구..? 보다 손쉽게 데이터와 관련한 논의를 하려면..?
✦ 일반인을 위한 비주얼라이제이션 도구
✦ public sense-making26http://www-958.ibm.com/
hci+d lab.
Many Eyes
✦ Data upload → Select Visualization Style!
27http://www-958.ibm.com/software/analytics/manyeyes/visualizations/movie-genres-1888-2012-count
hci+d lab.
Many Eyes
28
Public Discussion!!
hci+d lab.
정보시각화 방법
hci+d lab.
빅데이터 시각화 방법
✦ 소셜 네트워크로 부터 수집한 빅데이터를 시각화하는 방법은 매우 다양하나 일반적으로 크게 네가지 방법이 주로 사용된다✦ 시간 시각화
✦ 텍스트 시각화
✦ 네트워크 시각화
✦ 지도기반 시각화
30
hci+d lab.
시간 시각화
✦ 시계열 데이터는 시각화의 가장 기본적인 형태✦ 신문 인포그래픽의 75%가 시계열 데이터 (E. Tufte)
✦ 시계열 데이터를 통해 우리가 파악할 수 있는 대표적인 것은 “경향성(trend)”✦ 시간에 따라 특정한 값이 증가 혹은 감소를 하는지, 최고값과 최저값은 무엇인지 예측하는데 도움을 줌
31
hci+d lab.
시간 시각화
32Google Flu Trend
http://www.google.org/flutrends/us/#US
hci+d lab.
Lab 3: 시간 시각화 실습
✦ 스포츠 경기 댓글 데이터 시각화✦ 포털 사이트에서 스포츠 경기를 보면서 남기는 실시간 댓글의 증감 패턴 시각화✦ 데이터 수집: Naver 인터넷 경기 중계 창
✦ sample-timeseries-data.csv : 네이버에서 수집한 댓글의 분당 빈도수를 기록한 파일
✦ sample-peaks-data.csv : 댓글의 피크를 계산하여 따로 기록한 파일
34
hci+d lab.
Lab 3: 시간 시각화 실습
✦ 데이터 로딩✦ timeseries_data <- read.csv("sample-timeseries-data.csv", header=T)
✦ peaksfinding_result <- read.csv("sample-peaks-data.csv", header=T, stringsAsFactor=F)
35
hci+d lab.
Lab 3: 시간 시각화 실습
✦ 데이터 타입 변환✦ 수집된 데이터 중, 시간 데이터는 현재 텍스트 상태이기 때문에
as.POSIXct 함수를 이용하여 시간 객체로 변환✦ timeseries_data$time <- as.POSIXct(timeseries_data$time, format = "%m/%d/%y %H:%M")
36
hci+d lab.
Lab 3: 시간 시각화 실습
✦ ggplot2를 이용하여 선 그래프 작성✦ ggplot() 함수에 + 기호를 이용하여 필요한 그래프 요소를 추가
✦ ggplot() + geom_line(…) + geom_line(…) + geom_rect(…) + geom_point(…) + labs(…)
37
hci+d lab.
Lab 3: 시간 시각화 실습
38
hci+d lab.
텍스트 (Text)
✦ 가장 대표적인 정보의 저장 단위✦ 월드와이드웹(WWW) 등장 이후 인류가 만들어 내는 텍스트의 양은 현저한 증가 추세✦ 인터넷에 존재하는 모든 텍스트를 읽기 위해서는 20만 년 소요
✦ 문서(Documents)✦ 뉴스기사, 책, 소설✦ 이메일, 웹페이지, 블로그, 트위터✦ 태그, 코멘트✦ 컴퓨터 프로그램 소스, 로그데이터
✦ 문서의 집합(Collection of Documents)40
hci+d lab.
텍스트 시각화 (Text Visualization)
✦ 왜 텍스트를 시각화하는가?✦ 이해(Understanding)
✦ 문서의 핵심(gist)를 파악하기 위해서
✦ 그룹/분류(Grouping)✦ 전체를 조망하기 위한 클러스터를 만들거나 분류를 하기 위해서
✦ 비교(Compare)✦ 문서들을 비교하거나 문서의 집합이 어떻게 시간에 따라 변해왔는지 파악하기 위해서
✦ 연관성(Correlate)✦ 텍스트에 나타나는 패턴을 다른 데이터와 비교하기 위해서
41
hci+d lab.
텍스트 시각화 (Text Visualization)
✦ 텍스트 시각화 방법✦ 텍스트 데이터는 숫자와는 달리 명목 데이터(nominal data)
✦ 그래프로 표현하기 쉽지 않음
✦ 몇 가지 전처리 과정을 거쳐 텍스트를 시각화할 수 있는 형태로 변환✦ 단어의 빈도수 계산
✦ 문장 내에서 단어들 사이의 관계나 구조를 표현
42
hci+d lab.
텍스트 시각화 (Text Visualization)
✦ 태그 클라우드 (Tag Cloud)✦ 문서에 등장한 단어의 빈도수를 분석하여 많이 사용된 단어를 강조하여 보여주는 방법✦ 태그의 빈도수 측정
✦ 가장 많이 사용한 태그의 글자 크기를 키워서 강조
✦ 워들(Wordle)등의 서비스 등장
43
hci+d lab.
텍스트 시각화 (Text Visualization)
✦ 태그 클라우드 (Tag Cloud)
44
클린턴 대통령(1993)과 오바마 대통령(2009)의 헬스캐어 법안 연설문 분석 http://economix.blogs.nytimes.com/2009/09/09/obama-in-09-vs-clinton-in-93/
hci+d lab.
텍스트 시각화
45
2014 대통령 연두 국정연설태그 클라우드
hci+d lab.
텍스트 시각화
46오바마 대통령의 2009년 연설을 분석한 워드 트리
hci+d lab.
Lab 4: 텍스트 시각화 실습
✦ R 형태소 분석기 KoNLP✦ KoNLP
✦ http://cran.r-project.org/web/packages/KoNLP/KoNLP.pdf
✦ install.packages("KoNLP")install.packages("rJava")install.packages("hash")install.packages("tau")install.packages("Sejong")
✦ library("KoNLP")
47
hci+d lab.
Lab 4: 텍스트 시각화 실습
✦ R 형태소 분석기 KoNLP✦ 간단한 명령어
✦ is.hangul / is.ascii → TRUE/FALSE
✦ extractNoun("한글 형태소 분석기로 분석한 한글문장")=> [1] "한글" "형태소" "분석" "기" "분석" "한" “한글문장"
✦ sapply("한글 형태소 분석기로 분석한 한글문장", extractNoun)
48
hci+d lab.
Lab 4: 텍스트 시각화 실습
✦ 워드클라우드 R 패키지✦ install.packages("wordcloud")
✦ library(wordcloud)
✦ library(RColorBrewer) #color palette
✦ library(KoNLP)
49
hci+d lab.
Lab 4: 텍스트 시각화 실습
✦ KoNLP를 이용하여 주요 단어 추출✦ 텍스트 불러오기f <- file("sample-data.txt", blocking=F)
✦ 텍스트의 라인을 읽어 저장lines <- readLines(f)
✦ 명사 추출nouns <- sapply(lines, extractNoun)
50
hci+d lab.
Lab 4: 텍스트 시각화 실습
✦ 데이터 클린업✦ 명사 리스트 중, 빈 문자열 ("")을 삭제 nouns <- nouns[-which(nouns=="")]
✦ 빈도수 계산 wcount <- table(unlist(nouns))
51
hci+d lab.
Lab 4: 텍스트 시각화 실습
✦ 워드 클라우드 작성✦ wordcloud(names(wcount), freq=wcount, scale=c(8,.2), min.freq=2, max.words=Inf, random.order=FALSE, rot.per=.1, colors=pal)
52
hci+d lab.
소셜 네트워크 시각화
✦ 소셜 네트워크를 통한 정보 공유 활동이 활발해 지면서 이 안에서 이루어지는 여러 사회현상을 탐색적으로 분석하고자 하는 노력이 시도됨✦ 타인과 어떤 관계를 맺는가
✦ 정보는 어떻게 확산되는가
✦ 누가 네트워크의 중심인가
53
✦ Social Network Analysis✦ Reachability✦ Distance & Number of Paths✦ Degree of Node✦ Centrality✦ Morphology Changes
hci+d lab.
소셜 네트워크 시각화
54미국 정치 블로거의 소셜 네트워크 연결망 구조의 시각화 (Lazer et al. 2009)
hci+d lab.
소셜 네트워크 시각화
✦ 야코프 모레노(Jacob Moreno)가 1934년 원형을 제시
55
hci+d lab.
소셜 네트워크 시각화
✦ 그래프(Graph), 노드(node 혹은 vertex), 에지(Edge)
56
hci+d lab.
소셜 네트워크 시각화
✦ 에지의 디그리 (Degree of Edge) 와 가중치 (Weight)
57
hci+d lab.
Lab 5: 소셜네트워크 시각화 실습
✦ 페이스북 관계망 시각화✦ 파일로 부터 데이터를 읽어온다.socdata <- read.table("sns-data.txt", sep=',', dec=',', header=T)
✦ socdata 를 그래프 포맷으로 변환. 그래프의 방향성은 고려하지 않아 directed=F 로 지정socdata.network <- graph.data.frame(socdata, directed=F)
58
hci+d lab.
Lab 5: 소셜네트워크 시각화 실습
✦ 데이터 확인✦ V(socdata.network) # Vertex 확인
✦ E(socdata.network) # Edge 확인
✦ degree(socdata.network) # Degree 확인
59
hci+d lab.
Lab 5: 소셜네트워크 시각화 실습
✦ 버텍스와 에지 값 설정✦ Vertex 크기 조절V(socdata.network)$size <- degree(socdata.network)/5
✦ Edge 색상 조절 (interaction이 12 이상일 때 빨간색으로 표시) E(socdata.network)$color <- ifelse(E(socdata.network)$interaction>12, "red", "grey")
60
hci+d lab.
Lab 5: 소셜네트워크 시각화 실습
✦ 소셜 네트워크 그래프 그리기✦ plot(socdata.network, layout=layout.fruchterman.reingold, main='Social network example')
61
hci+d lab.
GIS
62
hci+d lab.
GIS로 무엇을 할 수 있는가?
✦ 다른 정보와 mash-up✦ analysis → decision
63
hci+d lab.
GIS로 무엇을 할 수 있는가?
✦ 다른 정보와 mash-up✦ analysis → decision
64http://www.trulia.com/
hci+d lab.
Earth at Night
65
September 24, 2012 http://earthobservatory.nasa.gov/IOTD/view.php?id=79796
hci+d lab.
Earth at Night
66Apr 18, 2012 http://earthobservatory.nasa.gov/IOTD/view.php?id=79800
hci+d lab.
A Map of Olympic Medals
68http://www.nytimes.com/interactive/2008/08/04/sports/olympics/20080804_MEDALCOUNT_MAP.html
hci+d lab.
지도 기반 시각화
✦ 소셜 네트워크가 모바일 중심으로 발전하면서 지리정보(geographic information)가 활발하게 공유됨✦ 모바일에서 전송되는 트위터나 페이스북 메시지는 위도/경도의 지리 정보가 포함되어 있음
70
hci+d lab.
지도 기반 시각화
71
트위터가 포스팅된 위치를 시각화
빨간색 - 영어파란색 - 스페인어+포루투갈어
hci+d lab.
Geography of Hate
✦ 동성연애자, 인종, 장애인에 대한 혐오 트윗 메시지 발생 지역 시각화
72http://users.humboldt.edu/mstephens/hate/hate_map.html#
hci+d lab.
Lab 6: 지도기반 시각화 실습
✦ 트위터에서 수집한 애플 개발자 컨퍼런스 댓글 데이터✦ iPhone 5s가 발표되었을 때의 데이터
✦ WWDC2013 데이터
✦ WWDC2014 데이터
73
hci+d lab.
Lab 6: 지도기반 시각화 실습
✦ Data Cleanup✦ tweet.geo.coordinates 는 텍스트 데이터를 담고 있음.✦ 해당 데이터를 parsing 하여 두개의 숫자 컬럼으로 만들어야.✦ 불필요한 캐릭터 삭제
✦ tweet.geo.coordinates <- gsub("\\[ ", "", tweet.geo.coordinates)
✦ tweet.geo.coordinates <- gsub("\\ ]", "", tweet.geo.coordinates)
✦ 두개로 분리✦ strsplit(tweet.geo.coordinates, split=", “)
✦ 문자열 데이터를 숫자형 데이터로 변환✦ as.numeric(as.character(df$lat)) 74
hci+d lab.
Lab 6: 지도기반 시각화 실습
✦ 지도 그리기✦ library("gdata")
✦ library(“maps")
✦ map('world', plot=TRUE, fill=FALSE, col='black', lwd=0.3, resolution=0)
✦ points(x=df_iphone$lon, y=df_iphone$lat, col='red', cex=0.3, pch=16)
✦ points(x=df_wwdc13$lon, y=df_wwdc13$lat, col='blue', cex=0.3, pch=16)
✦ points(x=df_wwdc14$lon, y=df_wwdc14$lat, col='orange', cex=0.3, pch=16)
75
hci+d lab.
Lab 6: 지도기반 시각화 실습
76
hci+d lab.
Questions…?
![Disclaimer - Seoul National University...반도체 제조 공정에서 발생하는 데이터의 양은 [그림 1]과 같이 급격하게 증가되고 있으며, 특히 2010 년을](https://img.pdfslide.tips/doc/110x75/61166c3644081d435e6b18db/disclaimer-seoul-national-university-ee-oe-eoe-eoefe.jpg)
