Front-end 노드와 링크로 구성된 네트워크 시각화 Vis.js 플러그인

안녕하세요. 씨앤텍시스템즈 홍정화 연구원입니다.

이번 포스트에서는 프론트엔드 Vis.js 사용방법에 대하여 정리해 보았습니다.

 

네트워크 시각화란?

네트워크 시각화로 데이터를 표시하여 관련 항목과 클러스터 간의 관계를 쉽고 빠르게 식별할 수 있습니다. 네트워크 시각화는 소셜 네트워크를 시각화하거나 시장 점유 분석을 수행할 때 유용합니다. 속성 요소는 시각화에서 노드로 표시되며, 요소 간의 관계를 나타내기 위해 노드 간에는 선(가장자리라고 함)으로 표시됩니다. 시각화가 만들어지면 노드 크기, 가장자리 두께, 가장자리 색상 등과 같은 표시 옵션을 사용하여 노드의 특성과 노드 간의 관계를 볼 수 있습니다. 특정 국가에서 각 매장에 대한 노드가 표시된 경우 두 매장이 많은 수의 고객을 공유한다면 더 두꺼운 선을 사용해 두 노드 간의 연결을 표시할 수 있습니다.

 

네트워크 시각화

 

JavaScript의 그래프 시각화 라이브러리

네트워크 그래프가 그려지려면 두 종류의 데이터가 있어야 한다. 하나는 그물망 속에서 연결선이 만나는 접점(node)이 되는 개체의 목록이고, 다른 하나는 개체와 개체 사이를 연결(link)하는 관계성에 대한 목록이다. 접점(node)과 연결(link) 두 가지는 온톨로지 설계에서 다루는 ‘개체’(individual) 및 ‘관계성’(relation)과 다르지 않다. 사실상 데이터를 시각화 하는 것은 그 데이터를 구조화 하는 작업이 전제되어야 하는 것이기 때문에, 온톨로지 설계 방법을 알면 데이터의 시각화를 훨씬 더 용이하게 할 수 있다.

 

Cytoscape.js

jQuery 규칙에 따라 모바일 지원을 통한 대화식 그래프 분석 및 시각화. NIH 보조금을 통해 자금을 지원하고 @maxkfranz가 여러 대학 및 기타 기관의 도움을 받아 개발했습니다.

Cytoscape.js

 

 

 

Protovis의 후속 제품인 강력한 다목적 JS 시각화 라이브러리. 참고 항목

D3.js - Data-Driven Documents

 

 

sigma.js 

그래프를 그리기위한 가볍지만 강력한 라이브러리

Sigma js

 

vis.js 

다양한 유형의 네트워크 / 에지 그래프와 타임 라인 및 2D / 3D 차트를 지원합니다. 자동 레이아웃, 자동 클러스터링, 탄력있는 물리 엔진, 모바일 친화적, 키보드 탐색, 계층 적 레이아웃, 애니메이션 등. MIT 는 자체 조직 네트워크 연구를 전문으로하는 네덜란드 회사에 의해 허가 되고 개발되었습니다.

vis.js

 

 

여러가지 라이브러리가 있지만 가장 추천드리는 라이브러리는

가장 가볍고 기본적인 Sigma.js와

재사용성과 확장성의 Vis.js를 꼽을수 있습니다.

대개 네트워크 그래프 라이브러리는 비슷한 코드 형식을 가지고 있어서

어떤것을 사용하시던 어렵지 않게 사용이 가능합니다.

 

1. Vis.js 라이브러리 설치

vis.js 홈페이지 : almende.github.io/vis/#download_install

vis.js - A dynamic, browser based visualization library.

v4.21.0.zip파일또는 Vis.min.js / Vis.min.css 를 다운받아줍니다.

 

2. 스크립트 추가

이제 HTML파일을 생성 후 아래 스크립트를 추가해줍니다.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />

 

src 부분과 hreff부분에 본인이 저장한 파일의 위치를 작성해줍니다.

웹으로 통신할 경우 위와같이 작성하시면 다운로드 하지 않고 사용이 가능합니다.

 

3. 예제 선택하거나 코드 작성

예제 중 하나를 선택 하거나 직접 코드를 작성할수 있습니다.

예제를 들어가 소스보기를 하시면 코드를 볼수 있습니다.

기본 작성방법은 아래와 같습니다.

 <script type="text/javascript">
      // create an array with nodes
      var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" },
      ]);

      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 },
      ]);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {};
      var network = new vis.Network(container, data, options);
    </script>

4. 옵션 및 노드 엣지 수정

var nodes - 노드를 생성할때 사용

{ id : 노드아이디값, label : "노드명"},

{ id : 노드아이디값, label : "노드명"},

 

var edges - 노드와 노드를 연결할때 사용

{ from : 첫번째 노드, to: 연결할 노드},

 

var container - 네트워크 그래프를 표시할 태그 작성(ID클래스)

 

var - option - 네트워크 그래프의 기능 또는 CSS 작성

5. 완성

<script language="JavaScript">
      (function bms() {
      
        const options = {
            layout: {randomSeed: 5,},            
            physics: {enabled: false,},
            nodes: {shape: "dot", size: 40, font: {size: 20,color: "#333",},
            borderWidth: -5,},
            edges: {width: 1, color: { color: "rgba(0,0,0,0.2)", highlight: "#c60215" },},
            interaction: { hover: true }, 
        };
          

        // create an array with nodes
        const nodes = [
          {id: 1, label: "Test.table", shape: "icon", icon: {code: "\uf0ce", size: 50, color: "#1f2942",},x: -500, y: 0, },
          {id: 2, label: "Test1.table", shape: "icon", icon: {code: "\uf0ce", size: 50, color: "#1f2942",},},
          {id: 3, label: "Test2.table", shape: "icon", icon: {code: "\uf0ce", size: 50, color: "#1f2942",},},
          {id: 4, label: "Test3.table", shape: "icon", icon: {code: "\uf0ce", size: 50, color: "#1f2942",},},
          {id: 5, label: "Test4.table", shape: "icon", icon: {code: "\uf0ce", size: 50, color: "#1f2942",},},
          {id: 6, label: "Local.table", shape: "icon", icon: {code: "\uf022", size: 100, color: "#00c8c8",},x: 500, y: 0,physics: false},
          {id: 7, label: "외부.table", shape: "icon", icon: {code: "\uf0ce", size: 80, color: "#ffd900",},},
          {id: 8, label: "외부.table", shape: "icon", icon: {code: "\uf0ce", size: 80, color: "#ffd900",},},
          
        ];

        // create an array with edges
        const edges = [
          { from: 1, to: 2, arrows: "to" },
          { from: 2, to: 3, arrows: "to" },
          { from: 3, to: 4, arrows: "to" },
          { from: 4, to: 5, arrows: "to" },
          { from: 5, to: 6, arrows: "to" },
          { from: 7, to: 3, arrows: "to" },
          { from: 8, to: 4, arrows: "to" },
 
            
        ];

        // prepare the arguments
        const container = document.getElementById("BMS_Lineage");
        const data = { nodes, edges };
          

 
   function getNodeID(params)
   {
     if (params != null && params.nodes != null && params.nodes[0] != null)
       return params.nodes[0];
     else
       return 0;
   }

        const network = new vis.Network(container, data, options);
          
      })();
        
    </script>

 

Vis.js 설명은 visjs.github.io/vis-network/docs-kr/network/를

클릭하면 자세히 볼수 있습니다.

---

프론트엔드에서 네트워크 그래프 구현 Vis.js 에서는 기초적인
프런트엔드 네트워크 그래프 구현에 대해 알아보았습니다.

감사합니다.