소셜 네트워크 빅데이터 비주얼라이제이션hosting02.snu.ac.kr/~snucss/wp-content/uploads/2016/04/%E1%84%89%E1%85... · hci + d lab. 소셜네트워크의 데이터

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..?

✦ 어느 정도 일이 진척되자 슬슬 수수께끼가 풀렸다. 가구당 콜레라 환자의 수는 브로드가(街)의 우물에 가까울수록 많다는 것을 발견한 것이다. 그리고 환자 대부분이 이 우물에서 물을 길어 식수로 이용했다는 사실도 확인했다. 콜레라를 일으킨다고 믿던 독기(毒氣)를 중화시키기 위해 거리에 석회를 열심히 뿌리던 런던 시당국은 그에게 속는 셈치고 우물을 폐쇄했다. 그러자 기적같이 콜레라 전염이 멈추게 된 것이다.

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

- L. Hugh Newman, Man and Insects (1965)

Charles Joseph Minard, Fate of Napoleon’s army in Russia (1869)

hci+d lab.

Power of Visualization

14

hci+d lab.

정보 시각화(information visualization)

✦ 컴퓨터를 사용하여 인지를 넓힐 수 있도록 데이터를 상호작용이 가능한 시각적 형태로 만드는 것✦ 그래픽이나 이미지를 만드는 과정 X

✦ 인지 프로세스를 도와주는 과정 자체

✦ 외부인지보조(External Cognition Aid)✦ 데이터의 숨은 의미를 발견하고, 설명하고, 그걸 통해 의사결정을 내리는 통찰력Card, Mackinlay, Shneiderman (1998), "Readings in Information Visualization: Using Vision to Think"

15

hci+d lab.

Visualization is NOT...!

16

?All 193% of Republicans Support Palin, Romney and Huckabeehttp://wonkette.com/412361/all-193-of-republicans-support-palin-romney-and-huckabee

hci+d lab.

Visualization is NOT...!

17

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')을 먼저 수행하여야 함. 19

● 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✦ 맥/윈도/리눅스 등 다양한 플랫폼 제공 20

hci+d lab.

processing

21

hci+d lab.

processing

22

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를 활용23

hci+d lab.

d3.js

✦ Examples

24http://projects.flowingdata.com/life-expectancy/

hci+d lab.

d3.js

✦ Examples

25http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html

hci+d lab.

d3.js

✦ Examples

26http://exposedata.com/parallel/

hci+d lab.

Tableau Desktop

✦ 스탠포드 대학의 Information Visualization Group에서 개발되었으며 관계형 데이터베이스를 위한 쿼리, 분석 툴을 제공.

✦ 손쉬운 시각화 도구와 사용자와의 인터랙션 도구를 제공하여 데이터를 손쉽게 조작하여 분석할 수 있다.

✦ 여러 빅데이터 시스템과의 원활한 연결 기능을 제공하여 현재 빅데이터 분석을 위한 비주얼라이제이션 도구로 많이 사용.

27

hci+d lab.

Tableau Desktop

28이베이에서 상품과 고객 관리를 위해 타블로를 이용해 정보를 시각화 한 사례

hci+d lab.

Many Eyes

✦ 웹을 위한 Information Visualization Tool

✦ IBM infovis group - F. Viégas et al.✦ Information Visualization 의 두가지 문제점

✦ 새로운 비주얼라이제이션을 만드는게 일반인에게 쉽지 않다.

✦ 비주얼라이제이션 → 전문가들을 위한 도구..? 보다 손쉽게 데이터와 관련한 논의를 하려면..?

✦ 일반인을 위한 비주얼라이제이션 도구

✦ public sense-making29http://www-958.ibm.com/

hci+d lab.

Many Eyes

✦ Data upload → Select Visualization Style!

30http://www-958.ibm.com/software/analytics/manyeyes/visualizations/movie-genres-1888-2012-count

hci+d lab.

Many Eyes

31

Public Discussion!!

hci+d lab.

정보시각화 방법

hci+d lab.

빅데이터 시각화 방법

✦ 소셜 네트워크로 부터 수집한 빅데이터를 시각화하는 방법은 매우 다양하나 일반적으로 크게 네가지 방법이 주로 사용된다✦ 시간 시각화

✦ 텍스트 시각화

✦ 네트워크 시각화

✦ 지도기반 시각화

33

hci+d lab.

시간 시각화

✦ 시계열 데이터는 시각화의 가장 기본적인 형태✦ 신문 인포그래픽의 75%가 시계열 데이터 (E. Tufte)

✦ 시계열 데이터를 통해 우리가 파악할 수 있는 대표적인 것은 “경향성(trend)”✦ 시간에 따라 특정한 값이 증가 혹은 감소를 하는지, 최고값과 최저값은 무엇인지 예측하는데 도움을 줌

34

hci+d lab.

시간 시각화

35Google Flu Trend

http://www.google.org/flutrends/us/#US

hci+d lab.

시간 시각화

36

Github Scan, http://hcidex.snu.ac.kr:8090/

hci+d lab.

텍스트 시각화

✦ 빅데이터 연구에서 텍스트 분석의 중요성이 점차 커짐✦ 최근 수년간 급속도로 성장한 소셜네트워크 서비스의 영향

✦ 텍스트는 숫자와 달리 명목 데이터 (nominal data) 이기 때문에 그래프로 표현하기 어려워 몇가지 전처리 과정을 거쳐 시각화✦ 태그클라우드(tag cloud) - 단어의 노출 빈도수를 계산하여 시각화

✦ 워드트리(word tree) - 문장 내에서 단어 간 연결 구조를 시각화

37

hci+d lab.

텍스트 (Text)

✦ 가장 대표적인 정보의 저장 단위✦ 월드와이드웹(WWW) 등장 이후 인류가 만들어 내는 텍스트의 양은 현저한 증가 추세✦ 인터넷에 존재하는 모든 텍스트를 읽기 위해서는 20만 년 소요

✦ 문서(Documents)✦ 뉴스기사, 책, 소설✦ 이메일, 웹페이지, 블로그, 트위터✦ 태그, 코멘트✦ 컴퓨터 프로그램 소스, 로그데이터

✦ 문서의 집합(Collection of Documents)38

hci+d lab.

텍스트 시각화 (Text Visualization)

✦ 왜 텍스트를 시각화하는가?✦ 이해(Understanding)

✦ 문서의 핵심(gist)를 파악하기 위해서

✦ 그룹/분류(Grouping)✦ 전체를 조망하기 위한 클러스터를 만들거나 분류를 하기 위해서

✦ 비교(Compare)✦ 문서들을 비교하거나 문서의 집합이 어떻게 시간에 따라 변해왔는지 파악하기 위해서

✦ 연관성(Correlate)✦ 텍스트에 나타나는 패턴을 다른 데이터와 비교하기 위해서

39

hci+d lab.

텍스트 시각화 (Text Visualization)

✦ 텍스트 시각화 방법✦ 텍스트 데이터는 숫자와는 달리 명목 데이터(nominal data)

✦ 그래프로 표현하기 쉽지 않음

✦ 몇 가지 전처리 과정을 거쳐 텍스트를 시각화할 수 있는 형태로 변환✦ 단어의 빈도수 계산

✦ 문장 내에서 단어들 사이의 관계나 구조를 표현

40

hci+d lab.

텍스트 시각화 (Text Visualization)

✦ 태그 클라우드 (Tag Cloud)✦ 문서에 등장한 단어의 빈도수를 분석하여 많이 사용된 단어를 강조하여 보여주는 방법✦ 태그의 빈도수 측정

✦ 가장 많이 사용한 태그의 글자 크기를 키워서 강조

✦ 워들(Wordle)등의 서비스 등장

41

hci+d lab.

텍스트 시각화 (Text Visualization)

✦ 태그 클라우드 (Tag Cloud)

42

클린턴 대통령(1993)과 오바마 대통령(2009)의 헬스캐어 법안 연설문 분석 http://economix.blogs.nytimes.com/2009/09/09/obama-in-09-vs-clinton-in-93/

hci+d lab.

텍스트 시각화

43

2014 대통령 연두 국정연설태그 클라우드

hci+d lab.

텍스트 시각화

44오바마 대통령의 2009년 연설을 분석한 워드 트리

hci+d lab.

소셜 네트워크 시각화

✦ 소셜 네트워크를 통한 정보 공유 활동이 활발해 지면서 이 안에서 이루어지는 여러 사회현상을 탐색적으로 분석하고자 하는 노력이 시도됨✦ 타인과 어떤 관계를 맺는가

✦ 정보는 어떻게 확산되는가

✦ 누가 네트워크의 중심인가

45

✦ Social Network Analysis✦ Reachability✦ Distance & Number of Paths✦ Degree of Node✦ Centrality✦ Morphology Changes

hci+d lab.

소셜 네트워크 시각화

46미국 정치 블로거의 소셜 네트워크 연결망 구조의 시각화 (Lazer et al. 2009)

hci+d lab.

소셜 네트워크 시각화

✦ 야코프 모레노(Jacob Moreno)가 1934년 원형을 제시

47

hci+d lab.

소셜 네트워크 시각화

✦ 그래프(Graph), 노드(node 혹은 vertex), 에지(Edge)

48

hci+d lab.

소셜 네트워크 시각화

✦ 에지의 디그리 (Degree of Edge) 와 가중치 (Weight)

49

hci+d lab.

GIS

50

hci+d lab.

GIS로 무엇을 할 수 있는가?

✦ 다른 정보와 mash-up✦ analysis → decision

51

hci+d lab.

GIS로 무엇을 할 수 있는가?

✦ 다른 정보와 mash-up✦ analysis → decision

52http://www.trulia.com/

hci+d lab.

Earth at Night

53

September 24, 2012 http://earthobservatory.nasa.gov/IOTD/view.php?id=79796

hci+d lab.

Earth at Night

54Apr 18, 2012 http://earthobservatory.nasa.gov/IOTD/view.php?id=79800

hci+d lab.

Zipdecode

55http://benfry.com/zipdecode

hci+d lab.

A Map of Olympic Medals

56http://www.nytimes.com/interactive/2008/08/04/sports/olympics/20080804_MEDALCOUNT_MAP.html

hci+d lab.

6.4 지방선거 결과 (2014)

57

http://www.ilwar.com/poli/141022

hci+d lab.

지도 기반 시각화

✦ 소셜 네트워크가 모바일 중심으로 발전하면서 지리정보(geographic information)가 활발하게 공유됨✦ 모바일에서 전송되는 트위터나 페이스북 메시지는 위도/경도의 지리 정보가 포함되어 있음

58

hci+d lab.

지도 기반 시각화

59

트위터가 포스팅된 위치를 시각화

빨간색 - 영어파란색 - 스페인어+포루투갈어

hci+d lab.

애플 개발자 컨퍼런스 데이터 시각화

✦ 트위터에서 수집한 애플 개발자 컨퍼런스 댓글 데이터✦ iPhone 5s가 발표되었을 때의 데이터

✦ WWDC2013 데이터

✦ WWDC2014 데이터

60

hci+d lab.

애플 개발자 컨퍼런스 데이터 시각화

61

hci+d lab.

Geography of Hate

✦ 동성연애자, 인종, 장애인에 대한 혐오 트윗 메시지 발생 지역 시각화

62http://users.humboldt.edu/mstephens/hate/hate_map.html#

hci+d lab.

Questions…?