지난 시간에는 간단히 사이트 소개만 했는데 오늘은 D3.js와 연동하여 웹페이지에서 시각화하는 방법에 대해 간단히 소개 합니다. 기초적인 부분이라서 저도 공부를 더해야 하는데 너무 괜찮아서 빨리 소개하고 싶어서 post로 작성합니다.
<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에 연동해 보겠습니다.
아래와 같이 기본틀이 간단합니다.
digraph G {
...
}
노드 코딩도 기초적인 표현은 아래와 같이 코딩을 합니다.
예)
digraph G {
a -> b;
a -> c -> d -> e;
b -> {1,2,3};
}
각 노드는 화살표 모양으로 개별적으로 지정할 수 있고 연속적으로 연결할 수 있고 배열씩으로 묶음으로 연결 할 수 있습니다. 그 결과를 살펴 볼까요.
[결과]
무지 간단하죠. 문제는 이 다음 코딩입니다. 이것만 있는게 아니라 여러가지 기교가 들어가면 이때부터서 복잡해 집니다.
클 틀로 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를 연동해서 해보도록 하겠습니다.
[실험 예제]
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를 공부한게 전부라 정교한 코딩은 못하지만 나중에 제대로 공부를 해봐야 겠네요.