[D3.js] vis.js 라이브러리 시각화

codingman (64)in #dclick • 7 years ago (edited)

[D3.js] vis.js 라이브러리 시각화

D3.js 공식 홈페이지 : https://d3js.org
vis.js 홈페이지 : http://visjs.org

예전 post에서 D3.js 기반의 Britecharts 라이브러리 API 함수에 대해 이야기 했었는데 이번에 새롭게 찾은 vis.js 라이브러리를 소개 할까 합니다.

1. vis.js 라이브러리

vis.js 홈페이지 : http://visjs.org

링크된 주소로 가면 해당 사이트로 이동하게 됩니다.

1) 설치

다운로드를 항목을 누르시면 아래와 같은 위치로 가는데 설치, 링크, 다운로드 이렇게 제공 되는데 저는 간단히 링크을 이용해 보았습니다.

링크 :

<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" />

2) 예제

위 그림에서 보는 것 같이 view docs를 클릭하시면 소스를 볼 수 있습니다. 그걸 보시고 연습하시면 됩니다.

항목에 showcase를 누르면 만들어 놓은 겔러리 작품들이 있지만 modules 항목으로 예제들의 소스를 보면서 공부하시는 것이 좋을 거에요.

2. D3.js와 vis.js의 연동 예제들

제가 vis.js에 대해 알게 된 것은 D3.js 갤러리 예제에서 vis.js와 연동한 작품들을 올려놓은 "Pasha’s Blocks"의 블로그에 작품들을 통해서 알게 되었습니다. D3.js로만 데이터 시각화 코딩하는 것보다 vis.js을 연동하여 더 코딩량을 줄일 수 있고 간결하게 표현할 수 있다는 점이 괜찮아서 여러분들에게 소개합니다.

"Pasha’s Blocks" 링크 : https://bl.ocks.org/NPashaP

위 그림처럼 많은 작품들이 등록 되어 있어서 vis.js를 공부하는 분들에게 꽤 도움이 될 듯 싶네요. 참고로 vis.js 라이브러리 함수 자체가 너무 간결하기 때문에 코딩도 얼마 안되고 전체 소스를 보고 공부하더라도 그리 어렵지 않을 거에요. 참고로 함수의 요소들에 대해서는 따로 vis.js 사이트에 가셔서 FM으로 공부하셔야 합니다. 예제를 보고 따라서 하는 것은 쉬운데 딱 거기 까지이고 빠진 요소들에 대해서 추가할 수 없기 때문에 어떤 요소가 있는지를 정확히 공부해야만 응용하거나 확장할 수 있기 때문에 공부를 하셔야 합니다.

3. vis.js 예제 실험

vis.js의 예제에서 Network 튜토리얼 예제를 한번 실험해 보았습니다.

소스만 읽어봤는데 간단하더군요.

**[소스 출처] ** : http://visjs.org/docs/network/

<html>
<head>
   <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" />
   <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>  
  
<body>
<div id="mynetwork"></div>

<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}
    ]);

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};

    // initialize your network!
    var network = new vis.Network(container, data, options);
</script>
</body>
</html>

위소스는 vis.js에서 제공되는 튜토리얼 소스 입니다.

소스에서 vis.js의 동작 함수는 딱 한개입니다.

  var network = new vis.Network(container, data, options);

이 한줄로 container은 HTML의 div 태그를 가리키고 그 곳에 data 값이 대입되고, otions을 넣는 부분인데 이부분은 예제에서는 따로 설정값은 없네요. 이부분은 나중에 사용할 때 자세히 튜토리얼 문서의 요소들에 대한 공부가 필요해 보이네요. 여기에서는 굳이 알 필요가 없어 보이네요.

위 전체소스의 코딩 부분을 보면 data를 만드는 과정의 코딩이고 실제는 데이터가 세팅이 되면 딱 한줄 vis.Network()함수로 시각화가 이루어지는게 전부입니다. style 부분도 시각화한 데이터를 보여주는 참의 크기를 지정하는 것일뿐 따로 없네요.

그리고 데이터를 만드는 과정을 살펴보더라도 data는 기본 nodes. edges로 두개로 구성되어 있습니다. 그리고 각각 nodes은 id와 label로 구성되어 있는데 label은 node 이름을 담고 있네요. 이건 기본 정보 데이터로 보시면 될 듯요. 여기에 각 로드들이 연결선 부분을 edges로 데이터화 하는데 위 소스를 보면 각 node id별로 어디에 연결되는지만 데이터화 하면 되네요. 아무튼 이렇게 만들어진 nodes와 edges의 데이터를 합쳐서 data에 집어 넣고 이 데이터를 vis.Network()함수로 출력시키면 따로 시각화하는 효과 부분은 코딩할 부분은 없고 만들어진 틀에 집어 넣는 다고 생각하면 될 듯 싶네요.

[데이터수정]

[결과]

    // create an array with nodes
    var nodes = new vis.DataSet([
        {id: 1, label: '철수'},
        {id: 2, label: '영희'},
        {id: 3, label: '바둑이'},
        {id: 4, label: '만득이'},
        {id: 5, label: '행복이'}
    ]);

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

마무리

vis.js은 한마디로 표현하면 하나의 시각화 틀을 제공하고 그 틀에 맞게 각 요소들의 값을 대입하여 적절하게 시각화하는 라이브러리 함수들인 것 같아요. 이미 만들어진 틀이라 약간은 수정이 제한적일 수 있지만 그래도 다양한 으용을 할 수 있는 라이브러리 함수라고 생각되네요.

d3.js와 연동한 예제 소스를 실험으로 보여줬으면 좋았을텐데 이건 위의 링크된 블로그 페이지로 가셔서 소스를 분석하면서 공부해보세요. 간단히 예제들을 따라서 수정하고 코딩해 봤는데 현재 d3.js 순수 코딩 자체만 공부함으로 vis.js 내용을 깊게 들어가지 않을 생각이네요. 몇가지 재밌는 틀이 있는데 계기판 같은 틀인데 이걸 steem.js와 연동하여 보팅 RC 게이지판을 만들어 봤는데 재밌더군요. 암튼 여러분들도 vis.js에 대해 알아보시고 공부해보세요. 재미있을 거에요.