1. 네트워크 시각화 툴 탐색

이번주 활동 요약

---

이번주에 어떤 것들을 해야할지 정리

먼저 해야 할 것은, 어떤 툴을 사용해서 데이터를 시각화할 것인지를 선정하는 것이다.

최우선으로 고려해야 할 점은 웹 페이지에 나타낼 수 있는지이다.

웹 서비스를 구축하는 것이 최종 목표이기 때문에 웹 페이지에 그래프를 나타낼 수 있는지 여부가 툴을 선정하는 데 있어 가장 중요했다.

 

우리는 총 3가지의 툴을 살펴보았다.

1. GraphViz (Graph Visualizer)

2. SocNetV (Social Network Visualizer)

3. Cytograph

 

각 프로그램마다 기능 비교

공식 문서를 찾아보면서 기능들을 간략히 정리해 보았다.

 

SocNetV (Social Network Visualizer)

---

SocNetV는 기본적으로는 소셜 네트워크 분석과 시각화를 위해 만들어진 Cross-platform tool.

 

Features of SocNetV

• Social Network Analysis
  • 감염병의 확산 역시 사회적 네트워크의 일부이기 때문에, 우리의 주제와 적합하다 생각했다.
• Easy Graphical User Interface
  • 몇 번의 클릭으로 손쉽게 네트워크를 로드하는 것이 가능하다.
  • GraphML, GraphViz, Adjacency 등의 여러 형식의 파일 업로드 지원
  • Node와 Edge를 자유롭게 추가할 수 있다.
• Random Network Generation
  • 여러 생성 모델들을 사용해서 무작위 네트워크를 생성하는 것이 가능하다.
• Layout
  • 다양한 Layout algorithm들을 제공하기 때문에 데이터를 다양한 형태로 표현할 수 있습니다.
• Fast Algorithm for Community Detection
  • Maximal Clique를 Detection 할 수 있는 알고리즘을 제공한다.

 

하지만 치명적으로 웹 페이지 상에서 그래프를 렌더링 할 수 있는 방법을 찾지 못했다.

분석 결과를 HTML파일로 export 하는 것 정도는 가능했지만 그래프를 웹 페이지 상에 나타내는 방법은 찾지 못했다.

 

Cytoscape

---

Cytoscape는 생물계의 네트워크를 표현하기 위해서 만들어졌으나, 현재는 네트워크라는 개념이 도입될 수 있다면 어디든 사용되고 있다

Features of Cytoscape

• Cytosacpe.js
  • Cytoscape.js는 Cytoscape를 웹 환경에서 사용하기 위해 만들어진 Javascript Library
  • 라이브러리의 목적 자체가 웹 환경에서 사용하기 위해 만들어졌으므로 우리 주제와 적합하다
• Create Graphs
  • Node, Edge 데이터를 추가함으로써 그래프를 생성하는 것이 가능하다.
  • JSON, CSV 형태의 파일을 읽어서 생성할 수도 있다.
• Layout
  • 다양한 Layout algorithm들을 제공하기 때문에 데이터를 다양한 형태로 표현할 수 있다.
• Interactivity
  • 사용자와의 상호작용이 가능하다 (클릭, 드래그 등).

 

애초에 Cytoscape.js 가 Cytoscape를 웹 환경에서 사용하기 위해 만들어졌으므로, 우리와 가장 적합할 것이라 예상했다.

또한 생태계가 꽤 커서 우리가 가져다 쓸 수 있는 라이브러리가 많을 것이라 생각했고, 유력한 후보가 될 것 같다.

 

GraphViz

---

graphviz.org에서 개발한 다이어그램 생성. GraphViz는 다양한 종류의 그래프를 시각화하기 위해 널리 사용되고 있다.

Features of GraphViz

• Layout
  • 그래프 속성을 다양하게 커스터 마이즈 할 수 있다.
  • 이렇게 나와 있었지만 웹에 적용했을 때는 생각만큼 자유롭게 커스텀하는 것이 어려웠다.
• 호환성
  • Graphviz는 독자적인 언어인 Graphviz DOT를 사용하는데, 스크립트기반 그래프 언어이기에 어떤 프레임워크든 쉽게 호환이 가능하다.
• 간편한 설치 및 사용
  • node 패키지 매니저에서 graphViz를 오픈소스로 제공하고 있으며, 적용 방법이 꽤 간단하다.
• 서버와의 호환성
  • 웹 페이지용 이미지 및 SVG와 같은 형식으로 다이어그램을 만들 수 있다.
  • 이를 통해 서버에서 이미지로 export 한 후 클라이언트에서 렌더링이 가능합니다.
  • 서버에서 이미지를 그려서 -> 클라이언트로 전송하는 것이 가능

 

웹 환경에서 사용할 수 있다는 점에서 역시 사용을 고려해볼만 하지만, 그래프의 스타일을 커스텀하기가 어렵고 사용자와의 상호작용이 어렵다는 문제가 있었다.

 

실제 구현

---

웹 환경에서 사용할 수 있는 Cytoscape와 GraphViz를 각각 리액트에 적용해서 간단한 웹 페이지를 만들어보았다.

Cytoscape 웹 구현

데이터의 양이 많아지면 렌더링이 매우 느려진다는 문제가 있었다.

 

결과 정리

---

이번주 활동 내용 정리

• Cytoscape
  • 웹 페이지에서 사용이 가능하다.
  • 데이터의 양이 많아지면 렌더링이 너무 느려진다는 문제 발생한다.
  • 노드가 많아지면 알아보기가 어렵다는 문제 발생한다.
• GraphViz
  • 웹 페이지에서 사용이 가능하다.
  • 렌더링 시간이 Cytoscape에 비해 짧을 것으로 예상
  • 사용자와의 상호작용이 Cytoscape에 비해서 자유롭지 않다.
  • 그래프 커스텀이 Cytoscape에 비해서는 자유롭지 못하다.
• SocNetV의 경우엔 웹 페이지에 적용하는 방법을 찾지 못했다.

 

웹 페이지는 사용자와의 상호작용이 중요한 만큼 Cytoscape가 우리에겐 더 좋을 것이라 판단 했다.

하지만 그러기 위해서는 데이터의 양이 많아졌을 때, 최적화를 하는 방법을 찾아야 할 것이다.