[D3.js] grphviz 차트 실전 응용(연습)
[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
예전에 연재한 post의 한대목인 플로우 차트 하나를 정해 최대한 비슷하게 표현하는 실험을 해보았습니다. 아직은 더 알아야 것들이 많지만 최대한 쉽게 코딩을 해보도록 노력했네요.
1. grphviz 준비
실험을 하기 전 사전 공부를 해야 하는 부분만 간단히 살펴 봅시다.
위 내용들은 한번 읽어보면 좋지만 사용할 부분만 몇개 보도록 하죠.
1) 모양
아래와 같이 node 모양이 다양하게 제공됩니다.
차트를 만들 때 위 모양을 보시고 원하는 걸 선택하시면 됩니다.
2) node Edge 스타일
node의 선에 관련 된 스타일을 설정할 수 있습니다.
3) 색상
Color는 다양하게 표현이 가능합니다.
전 단지 Red, Blue, Yellow 색상만 사용했네요.
기본 3가지 내용만 간단히 기초적인 것만 살펴본 뒤에 실험을 해보았습니다.
2. 실험
실험의 주제는 예전에 아두이노 코딩에서 For문에 대한 이론 공부를 하기 위한 예제의 소스입니다. For문이 어떻게 돌아가는지에 대한 설명을 하기 위해 최대한 단순하게 A[i]값을 시리얼모니터로 출력하는 코딩입니다.
[예제]
for(int i=0;i<6;i++){
Serial.println(A[i]);
}
그때, 플로우 차트를 파워포인터로 만들어서 이미지를 떴는데 아래와 같습니다.
위 그림을 grphviz로 만들어 볼까요.
- 노드명 [설정값] : 해당 노드명에 대한 다양한 속성을 설정하게 됩니다.
start [shape=Mdiamond color="blue"];
start 노드에 모양은 Mdiamond이고 Color은 blue이다라고 설정했는데 좀 더 기교를 넣고 싶다면 여기에 계속 추가하시면 됩니다.
- edge[설정값] : 노드와 노드를 연결하는 선에 대한 다양한 속성을 설정하게 됩니다.
edge [color="blue"];
이렇게 하면 모든 선을 blue로 바꿔 버립니다. 특정 선에 색을 지정하고 싶다면 다음과 같이 노드와 노드을 연결 코딩하고 그 안에 color색을 지정하면 개별적으로 노드 연결선에 색을 지정할 수 있습니다.
node2 -> end[color = "red" ];
각 node에 label로 해단 순서도로 표현한 각 문자열을 집어 넣고 표현하면 차트를 만들 수 있는데 한번 만들어 봤습니다.
[코딩]
digraph G {
start [shape=Mdiamond color="blue"];
end [shape=Msquare color="blue"];
node1 [shape=rect label="int i=0;"];
node2 [shape=diamond style=filled label="i<6"];
node3 [shape=rect label="Serial.println(A[i]);"];
node4 [shape=rect label="i++;"];
edge [color="blue"];
start -> node1 -> node2;
node2 -> node3[fontcolor="blue" label="True"];
node3 -> node4;
node4 -> node2;
node2 -> end[color = "red" fontcolor="red" label ="False"];
}
위 코딩을 보면 여러줄로 복잡해 보일 수 있는데 진짜 단순합니다. 중복되는 코딩이 대부분이고 label 부분과 노드 "->" 표시한 부분만 이해하시면 나머진 스타일 설정이라서 복잡하게 느낄 필요가 없습니다.
[결과]
결과를 보시면 아직 걸음마 단계라 원하는 이미지로 만들어 내지 못했지만 그래도 완성이 되었네요.
3. 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>
[코딩틀]
<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('코딩삽입부분');
</script>
</body>
위 코딩 틀에서 코딩삽입부분이 있는데 이 부분을 방금전 grphviz 실험한 코딩을 삽입하시면 됩니다. 어렵지 않죠.
[전체소스]
<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 { start [shape=Mdiamond color="blue"]; end [shape=Msquare color="blue"]; node1 [shape=rect label="int i=0;"]; node2 [shape=diamond style=filled label="i<6"]; node3 [shape=rect label="Serial.println(A[i]);"]; node4 [shape=rect label="i++;"]; edge [color="blue"]; start -> node1 -> node2; node2 -> node3[fontcolor="blue" label="True"]; node3 -> node4; node4 -> node2; node2 -> end[color = "red" fontcolor="red" label ="False"];}');
</script>
</body>
[결과]
이렇게 해서 웹페이지로 차트를 바로 만들어서 출력을 할 수 있게 되었습니다.
마무리
이렇게 웹페이지에 다른 문서 편집기에서 작업해서 이미지로 만들어서 웹페이지에 이미지로 올릴 수도 있지만 코딩으로 아예 차트형태로 만들어서 올릴 수도 있어서 활용도는 무궁무진 합니다. 뭔가 완벽하게 차트를 만들어서 실전 활용도를 보여드렸으면 좋았을텐데 차트가 영 마음에 안들게 만들어 졌네요. 아직은 기초 단계라 표현의 한계가 있네요.
Sponsored ( Powered by dclick )
올라가기만 하는 코인은 코딩을 어떻게 하나요 ㅠㅠ
올라가는 코인이라 구체적으로 어떤 코인을 말하는지 잘 이해가 ... ^^
코딩을 잘하면 올라가기만 하는 코인도 만들수 있느냐는 뜻입니다요 ^^ ㅋㅋ
그렇겠지요. ^^
짱짱맨 호출에 응답하여 보팅하였습니다.
추천! 이 세대의 교양서 「빨간맛 B컬처」
스팀달러 특별가로 금일부터 스팀달러 에어드랍 프로그램 시작합니다.
짱짱맨 방문에 감사합니다.
코딩맨님 시작은 제일 먼저 무얼 하면 좋을까요?
서적을 봐도 눈만 돌지...
아시다시피 제가 직관적 그림에 최적화된 눈과 머리라... ㄷ ㄷ
추천 서적이나, 없을까요?
서적이 사람마다 다 다르거든요. 나에게 보기 좋은책이 상대방에게 꼭 맞는 것은 아니여서요.
우선 관심있는 분야를 선택하시고 해당 분야에 대한 인터넷 강좌를 추천 드려요.
참가로 무료 강좌로 구글에서 "생활코딩"이라고 치시면 왠만한 서적보다 나을 거에요.
그걸 공부해서 나에게 맞고 재미있다고 생각되면 그 배운 기초지식을 가지고 서점에서 자기에게 보기 편한 책으로 선택하시면 돼요.
처음에는 얇은 서적을 추천 드려요. 많이 배울려고 두꺼운 천페이지 이상 차리 책을 사서 공부하시는 분들이 있는데 입문자들은 추천드리지 않습니다.
사람마다 다르니 우선 인터넷 무료 강좌를 보고 공부하시고 나서 서점에 가시면 됩니다.
전 생가만하면 머리가아파서.ㅎㅎ
코딩만 보면 좀 머리가 아플 수도 있겠네요