[D3.js] D3.js+grphviz 시각화 차트

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

[D3.js] D3.js+grphviz 시각화 차트

grphviz 사이트 : http://www.graphviz.org/
grphviz 온라인 에디터 : http://viz-js.com/
참고 :
https://github.com/mdaines/viz.js
https://github.com/magjac/d3-graphviz

지난 시간에는 간단히 사이트 소개만 했는데 오늘은 D3.js와 연동하여 웹페이지에서 시각화하는 방법에 대해 간단히 소개 합니다. 기초적인 부분이라서 저도 공부를 더해야 하는데 너무 괜찮아서 빨리 소개하고 싶어서 post로 작성합니다.

1. grphviz 사용

링크 :

<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>

grphviz를 D3.js와 연동해서 실험하기 위해서는 위 링크를 붙여서 코딩하시면 됩니다.

우선 바로 실험하기 전에 간단히 문법을 조금 설명하고 나서 D3.js에 연동해 보겠습니다.

2. grphviz 기초 문법

아래와 같이 기본틀이 간단합니다.

digraph G {
  ...
}

노드 코딩도 기초적인 표현은 아래와 같이 코딩을 합니다.

예)

digraph G {
a -> b;
a -> c -> d -> e;
b -> {1,2,3};
}

각 노드는 화살표 모양으로 개별적으로 지정할 수 있고 연속적으로 연결할 수 있고 배열씩으로 묶음으로 연결 할 수 있습니다. 그 결과를 살펴 볼까요.

[결과]

무지 간단하죠. 문제는 이 다음 코딩입니다. 이것만 있는게 아니라 여러가지 기교가 들어가면 이때부터서 복잡해 집니다.

3. grphviz 코딩 연습

클 틀로 digraph로 하고 그 안에 서브 틀은 subgraph로 해서 세부적으로 나눌 수 있습니다. cluster 넘버로 해서 서부로 묶어서 표현을 할 수 있네요.

digraph G {

    subgraph cluster_0 {
        style=filled;
        color=yellow;
        node [style=filled,color=blue];
        a -> b;
        label = "cluster_0";
    }

    subgraph cluster_1 {
        style=filled;
        color=blue;
        node [style=filled,color=yellow];
        x -> y;
        label = "cluster_1";
    }
    subgraph cluster_2 {
        1 -> 2;
        label = "cluster_2";
    }
}

style, color를 보시는 것처럼 지정할 수 있고 그 안에 node의 style, color를 지정할 수 있습니다. 스타일을 지정하고 그 스타일의 영향은 {...} 괄호 범위에서만 적용됩니다.

[결과]

이외에도 좀 더 깊게 들어가는 코딩 연습은 D3.js를 연동해서 해보도록 하겠습니다.

3. D3.js+grphviz 코딩

[실험 예제]

digraph G{
    a -> b;
}

[결과]

보시는 것 처럼 간단한 예제를 D3.js와 연동해서 코딩을 해볼까요.

우선 링크로 연결해야 합니다.

<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>

위 코딩이 기본 베이스 코딩이고 이걸 기준으로 grphviz 코딩을 적용한 D3.js 코딩을 살펴 보죠.

[소스]

<body>
<div id="graph" style="text-align: center;"></div>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>
<script>
  d3.select("#graph")
     .graphviz()
     .renderDot('digraph G{a -> b}');
</script>
</body>

랜더링은 Dot 형태로 출력이 이루어집니다. 그리고 grphviz코딩은 renderDot()함수에 삽입하면 됩니다.

.renderDot('digraph G{a -> b}');

이렇게 코딩하면 그 결과는 웹페이지에서 출력되는데 동일한 결과가 나옵니다.

[결과]

추가 실험

좀 더 그럴싸한 코딩을 해 볼까요.


<body>
<div id="graph" style="text-align: center;"></div>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/[email protected]/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.min.js"></script>
<script>
var t = d3.transition()
    .duration(2000)
    .ease(d3.easeLinear);
  
d3.select("#graph").graphviz()
    .transition(t)
    .attributer(function(d) {
        if (d.tag == "ellipse") {
            d.attributes.fill = "yellow";
        }
    })
    .renderDot('digraph {start->a; a -> b; b->end; start [shape=Mdiamond];end [shape=Msquare]; label = "[ 테스트 ]"; }');
</script>
</body>

d3.js에서 attributes의 color를 지정해서 노드의 색을 채웁니다. renderDot()함수 안에서 grphviz 코딩으로 노드의 color를 지정할 수 있지만 이 부분은 앞에서 실험 했기에 d3.js로 외부에서 color를 지정해 봤네요. 그리고 순서도를 간단하게 만들어 보았네요. start와 end의 모형을 다른 예제에서 보고 가져와서 응용해 보았습니다. 개별적으로 모양을 만들 수 있는데 이부분은 따로 찾아보고 정리해서 공부를 해야 코딩을 할 수 있을 것 같네요.

[결과]

마무리

d3.js와 연동해서 코딩 할 수 있어서 다양한 것을 차트로 만들 수 있습니다. 활용도도 꽤 높아 보이고요. 플로우 차트 같은 것을 만들 때 이 방법으로 하면 구지 파워포인터나 워드같은 문서 편집기에서 디자인하고 그걸 이미지로 떠서 복사해서 이미지로 웹페이지에 올릴 필요가 없이 코딩으로 표현할 수 있다는 점이 꽤 매리트가 있는 것 같습니다.

지금은 간단히 한시간 정도 grphviz를 공부한게 전부라 정교한 코딩은 못하지만 나중에 제대로 공부를 해봐야 겠네요.