네트워크 시각화 구현은 어떻게?
복잡한 네트워크 시각화는 어떻게?!
* 공부한 내용 요약할 겸 정리해봤습니다 (부실한 업데이트를 반성하며..)
Network Visualization 시작!
요즘 네트워크 시각화는 굉장히 많이 활용되고 있다. 특히 언론에서는 관계를 시각화를 활용하여 직관적으로 보여주기 위해 많이 사용하는 시각화 유형 중 하나이다.
SBS | 전염병처럼 번진 왜곡의 실체 '극우인사-일베'의 분업
한국언론진흥재단 | 브렉시트 전후 비교: '잔류, 탈퇴, 우려' vs '달러, 금값, 엔화'
<네트워크 시각화 예시>
문제는 네트워크 시각화 제작이 까다롭고 디테일한 수정이 까다롭다. 시각화는 눈대중으로 그리는 게 아니라 데이터를 기반으로 정확하게 표현되어야 하는데 이게 말처럼 쉽지가 않다. (특히 비정형 데이터 기반의 시각화) Mike Bostock님께서 요즘 네트워크 시각화 라이브러리 개발에 공을 들이는 것 같은데 국내 미디어에서 인터랙티브 시각화 구현 환경은 쩜쩜쩜. (네이버는 인포그램, 카토그램 등에서 만든 시각화 코드를 아예 차단한다. Youtube만 허가. 사실 브런치도 iframe을 열어주지 않는다... 제작한 코드를 넣을 수 없다면 iframe이라도 열어줘야지.. 보여주고 싶어면 이미지에 링크 넣어서 새로운 URL로 보내는 방법밖에 없다)
그렇다면 그래픽 이미지로 제작하는 방법이 있는데 설마 Illustrator에서 노드 한 땀 한 땀! 엣지 한올 한올 만들 사람은 없겠지. 그렇게 해서도 안된다. 그럼 정확한 시각화를 위해 일단 어디로부터 데이터에 근거해서 제작된 Illustrator 벡터 형식으로 만들어 와야 하는데 그게 어렵다. 정확히 말하면 그걸 지원해주는 게 많이 없다. R에서 networkD3란 패키지로 제작하고 벡터 파일(svg, pdf)로 뽑으려고 했더니 이건 d3.js로 만들어주는 패키지라 PNG와 벡터가 정상적으로 export 되지 않는다. 그렇다고 igraph 패키지를 써서 만들어보니 그냥 시각적으로 별로였다.
그래서 연구 주제 중에 하나인 빅 카인즈를 통해 한번 살펴보려고 했다. 한국언론진흥재단 빅 카인즈는 기자들의 편의성을 높여주기 위해 기사 속 텍스트 데이터를 제공해주는데, 빅 카인즈의 관계형 데이터는 시각화에 용이하도록 처음부터 xml 형태로 export 시킬 수 있다. 그래서 별도의 정제 작업 없이 작업을 시작할 수 있는 게 장점이죠. (글을 썼던 시점이 꽤 지났는데 이젠 csv 형태로도 제공해준다)
그리고 시각화에서 활용한 방법은 R과 Gephi + Illustrator 두 가지 입니다. 다른 언어나 툴도 있을 것이라고 생각하는데 전 언급한 두 가지 방법으로 알아봤어요!
* 여기서 빅 카인즈는 프로버전입니다
참고로 나는 xml에 보기 너무 불편해서 간단하게 xml을 csv로 변환하는 도움을 여기서 받았다. 구조화에 맞춰서 CSV를 뽑아주는데 빅 카인즈는 시각화하기 좋게 Node와 Edge를 구분시켜 변환해줬다. (Node와 Edge는 곧 뒤에서 바로 설명할 거예요) 저처럼 xml 구조가 보기 싫으시다면 위의 컨버터 사이트의 도움을 받는 것도 좋은 방법입니다. 아무튼 이제 데이터부터 한번 살펴보도록 할게요.
네트워크 시각화를 위한 데이터 구조
(그저 텍스트로 한 줄 표현할 수밖에 없어 아쉽긴 하지만 데이터 시각화는 데이터 구조의 이해에서부터 시작한다고 해도 과언이 아님!)
위에서 언급했듯 모든 시각화의 시작은 데이터 형태의 파악으로부터 시작합니다. 시각화를 구현하는 원리는 해당 데이터의 구조를 바탕으로 이루어집니다. 예를 들어 Mike Bostock의 네트워크 시각화 라이브러리를 살펴봐도 샘플데이터 miserables.json 필요 데이터 구조는 node에 관한 name, group(category), id(여기선 순서대로 알아서 index 번호를 매겨서 따로 없다) 그리고 link에 관한 source, target, weight(value)가 필요하죠.
어렵게 생각할 것이 없는데요. 위의 Node, Edge 구조는 네트워크 시각화를 위한 최소한의 변수라고 생각하시면 되는데 네트워크 시각화는 결국 관계에 관한 것이기 때문에 (1) 어떤 노드로 구성되어 있고, (2) 어떤 노드로 향하는지, (3)그 관계성은 얼마나 강한지 혹은 카테고리의 구분 그리고 link가 그릴 수 있도록 node의 참조값만 있으면 된다.
위의 데이터를 자세히 보자위에 두 가지 csv가 있는데 왼쪽이 Node.csv 오른쪽이 Edge.csv입니다. 먼저 Node부터 설명하면 name칼럼은 노드의 이름을 뜻합니다. 본 데이터는 '반기문', '인천', '경북'.... 등으로 구성되어 있는 것이고 group칼럼을 통해 카테고리를 구분합니다. 중요한 건 name칼럼의 각 요소에 index번호를 할당한 것이 중요한데요. 그 이유는 Edge.csv에서 노드와 노드를 연결시킬 때 이름으로 연결하는 것이 아니라 index번호로 연결하기 때문입니다. Edge.csv를 보시면 source칼럼과 target칼럼이 있죠. 각 칼럼은 숫자를 값으로 가지고 있는 그 숫자가 바로 Node.csv의 index칼럼을 의미하기 때문에 source:0, target:1이라고 하면 반기문->인천을 연결하게 되는 것입니다. 그리고 카테고리는 색으로 구분 짓고요.
networkD3에 넣어보기
R코드는 이렇게 생겼습니다R에서 위와 같이 코드를 활용했다. (1) 패키지를 설치하고 불러오고, (2) 데이터를 가지고 오고, (3) 데이터 확인, (4) 네트워크 시각화 구현 이렇게 요약할 수 있겠다. forceNetwork 함수를 통해 제작할 수 있는데 각 인자의 의미는 위의 데이터 구조를 이해했다면 이해가 쉽다. Links와 Nodes는 각 해당 데이터를 뜻하고 Soure와 Target은 노드의 연결 대상(아래 데이터에선 칼럼 이름이 fromID, toID이다), NodeID는 노드의 이름이 담긴 칼럼 Group은 카테고리, opacityNoHover, zoom, fontsize, fontfamily, opacity, linkDistance 등의 디테일하게 시각화를 수정. 그렇게 만들면 시각화는 아래와 같다. networkD3 패키지는 export 기능에 html로 export 해주기 때문에 바로 서버에 올릴 수도 있다. [인터랙티브 바로가기]
R뿐만 아니라 d3.js 네트워크 시각화 라이브러리에 들어가는 데이터 구조는 동일하다. 입맛에 맞는 시각화로 구현하면 될 것 같다.
* networkD3 제작에 대한 자세한 내용은 이민호님의 블로그에서 배워볼 수 있습니다
networkD3 패키지를 활용한 네트워크시각화 구현Gephi는 네트워크 시각화에 특화된 도구!
Gephi는 제목에서 보듯 네트워크 시각화에 특화된 오픈소스 도구이다. Gephi까지 모두 설명하고 싶었지만 아쉽게 Java 버전 이슈 때문에 텍스트가 뽑히질 않는다. (작업은 이상이 없는데 export에서 막힌다) 자바 이슈가 없으신 분들이라면 Gephi 사용하시면 좋을 듯 합니다. Gephi가 잘된다면 유용한 점은 export 옵션에 svg, pdf가 있다. 즉 일러스트레이터에서 세부 디자인 작업까지 연결될 수 있기 때문에 시각적으로 개선될 여지가 크다. 만약 png만 줬다면 읔.... 생각하기도 싫다. 암튼 Gephi는 길게 설명하지 않으려고 합니다. 중요한 건 Node.csv, Edge.csv로 데이터 구분을 확실히 지어주는 게 중요해요.
아래 이미지 보시면 왼쪽 위에 Nodes, Edges 구분되어 있는걸 확인할 수 있습니다.
Gephi 역시 데이터구조가 중요!* 자세한 설명(사용법)은 여기서 참조해보세요 [바로가기]
네트워크 시각화를 Gephi에서 구현하는 스크린샷궁금하신 건 언제든 물어보세요!
오류가 있는 부분은 woons.2016@gmail.com으로 연락주세요
