밑에 웹에서 그래프 그리기 관련해서 글 남깁니다.

안녕하세요.

밑에 (http://www.todayhumor.co.kr/board/view.php?table=programmer&no=17234&s_no=17234&page=2) 글 "[질문] 웹에서 그래프 확인 (R Programming 관련)" 관련해서 혹시나 도움이 되실분이 더 계실것 같아 글로 남깁니다.

데이터 간의 관계나 그룹의 특징을 구하고자 할 때 그래프 구조는 굉장히 유용하게 사용 될 수 있고 대부분의 문제들도 그래프로 표현하여 의미를 추론할 수도 있습니다.

근데 문제는 웹에서 그래프를 표현시 어떻게 할 수 있을까 하는 것 입니다.

먼저 첫 번째로 간단히 웹에서 그래프를 그릴수 있도록 샘플을 하나 보여 드리고 그 뒤에 어떤 문제들이 더 있는지 얘기해보도록 하죠.

제가 찾은 그래프 관련 라이브러리는 vis js 입니다. 이 라이브러리 말고도 많은 라이브러리 들이 있긴 하지만 vis js 가 그나마 사용하기 쉽고 여러 옵션들이 있어 선택을 하였습니다. 사용방법은 간단합니다.

1. 먼저 홈페이지에 가셔서 라이브러리를 다운 받습니다.

http://visjs.org/#download_install

2. zip 파일을 압축을 풀면 dist 폴더가 있는데 여기서 vis.min.js 와 vis.min.css 를 작업할 폴더로 복사 합니다.

3. 아래 코드로 html 파일을 만듭니다. (샘플이라 간단히 만들었습니다.)

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 <html>
<head>
    <!-- jquery cdn -->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"
            integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="   
            crossorigin="anonymous"></script>
 
    <!-- vis js -->
    <script type="text/javascript" src="vis.min.js"></script>
    <link type="text/css" href="vis.min.css" rel="stylesheet" media="screen">
</head>
<body>
 
<!-- the graph will be rendered here -->
<div id="div_vis_graph" width="100%" height="100%"></div>
 
<script type="text/javascript">
 
$(document).ready( function() {
    // graph container
    var container = document.getElementById("div_vis_graph");
 
    // raw data for nodes
    var data_nodes = [
          {id: 1, label: 'Num 1', title: 'N1 Title'}, 
          {id: 2, label: 'Num 2', title: 'N2 Title'}, 
          {id: 3, label: 'Num 3', title: 'N3 Title'}, 
          {id: 4, label: 'Num 4', title: 'N4 Title'}, 
          {id: 5, label: 'Num 5', title: 'N5 Title'}, 
          {id: 6, label: 'Num 6', title: 'N6 Title'}, 
          {id: 7, label: 'Num 7', title: 'N7 Title'}
      ];
 
      // raw data for edges
    var data_edges = [
        {from: 1, to: 2, arrows: 'to'},
        {from: 1, to: 3, arrows: 'to, from'},
        {from: 1, to: 4, arrows: 'to'},
        {from: 2, to: 3, arrows: 'to'},
        {from: 2, to: 4, arrows: 'to'},
        {from: 3, to: 5, arrows: 'to from'},
        {from: 5, to: 6, arrows: 'to'},
        {from: 5, to: 7, arrows: 'to'}
    ];
 
    // translate raw data to vis format
    var nodes = new vis.DataSet(data_nodes);
    var edges = new vis.DataSet(data_edges);
 
    // setup whole data (node and edge)
    var data = {
        nodes : nodes,
        edges : edges
    };
 
    // other options
    var opt = {
        layout : {
            improvedLayout: false
        },
        height: "100%",
        width : "100%"
    };
 
    // render it !
    var network = new vis.Network(container, data, opt);
});
 
</script>
</body>
</html>
Colored by Color Scripter
 cs

4. 크롬이나 IE 9 이상에 html 파일을 올립니다. 그러면 브라우저에 아래와 같이 나오게 됩니다.

이런식으로 간단히 그래프를 만들 수 있고 홈페이지에 들어가 document 를 보시면 다양한 옵션들이 존재하며 showcase 를 보시면 엄청나게 응용이 가능하다는 것을 알 수 있습니다.

그런데 여기서 몇 가지 문제가 있습니다.

첫 번째로 그래프를 그리기 위해 서버에 데이터를 저장해야 하는데 node와 edge 정보를 갖을 수 있도록 디비를 설계를 해야 하고 특히 tracking 까지 고려를 한다면 reference 나 join 지옥에 빠질 수 있기 때문에 골치가 아픕니다.

두 번째로 클라이언트 사이드에서 렌더링을 해야 하기 때문에 덩치가 조금만 커져도 그려지는 시간이 굉장히 오래 걸리게 됩니다.

만약 작은 데이터를 뿌리길 원한다면 vis js 로 충분하지만 큰 데이터를 그려야 할 경우 그래프 구조에 특화된 디비와 라이브러리를 사용해야 하는데 제가 추천드리는 라이브러리는 neo4j 이며 apache spark 와 같이 사용하시는 것을 추천합니다. neo4j 는 그래프 디비로 사용되며 저장, 쿼리할때도 그래프 특성에 맞춰져 있으며 tracking 같은 문제들도 잘 해결할 수 있도록 제공되고 있습니다.

neo4j 가 이름처럼 neo for java 인데 다양한 언어에 대해 driver를 지원하고 있어 언어 자체에 크게 제한은 없습니다.

관련 내용은 홈페이지를 참고 하시면 더욱 자세한 내용을 볼 수 있으실 것 같습니다.

http://neo4j.com/