Skip to content

Instantly share code, notes, and snippets.

@sevki

sevki/index.html

Forked from magjac/index.html
Last active April 2, 2018 09:51
Show Gist options
  • Save sevki/d6b70f424ebbf8ed31541cc68e0ccf58 to your computer and use it in GitHub Desktop.
Save sevki/d6b70f424ebbf8ed31541cc68e0ccf58 to your computer and use it in GitHub Desktop.
Download ZIP
d3-graphviz Demo
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.3.1/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var dotIndex = 0;
var graphviz = d3.select("#graph").graphviz()
.transition(function () {
return d3.transition("main")
.ease(d3.easeLinear)
.delay(500)
.duration(1500);
})
.logEvents(true)
.on("initEnd", render);
function render() {
var dotLines = dots[dotIndex];
var dot = dotLines.join('');
graphviz
.renderDot(dot)
.on("end", function () {
dotIndex = (dotIndex + 1) % dots.length;
render();
});
}
var dots = [
[
'digraph G { ',
'client [shape=Mdiamond]; ',
'data [shape=record,label="message | { 123 | 114 | 32 | 34 }|{ 34 | 116 | 56 | 104 }|{ 112 | 34 | 48 | 101 }|{ 111 | 58 | 44 | 108 }|{ 114 | 32 | 34 | 108 }|{ 116 | 56 | 104 | 111 }|{ 34 | 48 | 101 | 34 } "]; ',
'subgraph cluster0 { ',
'node [style=filled,color=white]; ',
'style=filled; ',
'color=lightgrey; ',
'443 [shape=record,label=" 443 | <f0> data"]; ',
'80 [shape=record,label=" 80 "]; ',
'label="Kernel Space" ',
'} ',
'subgraph cluster1 { ',
'node [style=filled] ',
'color=blue; ',
'"proxy" ',
'"httpd" ',
'label="User Space" ',
'} ',
'443:f0 -> data [style=dotted]; ',
'client -> 443 ',
'443 -> "proxy" [label="read"]; ',
'"proxy" -> 80 [label="write"]; ',
'80 -> "httpd" [label="read"]; ',
'}',
],
[
'digraph G { ',
'client [shape=Mdiamond]; ',
'data [shape=record,label="message | { 123 | 114 | 32 | 34 }|{ 34 | 116 | 56 | 104 }|{ 112 | 34 | 48 | 101 }|{ 111 | 58 | 44 | 108 }|{ 114 | 32 | 34 | 108 }|{ 116 | 56 | 104 | 111 }|{ 34 | 48 | 101 | 34 } "]; ',
'subgraph cluster0 { ',
'node [style=filled,color=white]; ',
'style=filled; ',
'color=lightgrey; ',
'443 [shape=record,label=" 443"]; ',
'80 [shape=record,label=" 80 "]; ',
'label="Kernel Space" ',
'} ',
'subgraph cluster1 { ',
'node [style=filled] ',
'color=blue; ',
'"proxy | <f0> data" ',
'"httpd" ',
'label="User Space" ',
'} ',
'proxy:f0 -> data [style=dotted]; ',
'client -> 443 ',
'443 -> "proxy" [label="read"]; ',
'"proxy" -> 80 [label="write"]; ',
'80 -> "httpd" [label="read"]; ',
'}',
],
[
'digraph G { ',
'client [shape=Mdiamond]; ',
'data [shape=record,label="message | { 123 | 114 | 32 | 34 }|{ 34 | 116 | 56 | 104 }|{ 112 | 34 | 48 | 101 }|{ 111 | 58 | 44 | 108 }|{ 114 | 32 | 34 | 108 }|{ 116 | 56 | 104 | 111 }|{ 34 | 48 | 101 | 34 } "]; ',
'subgraph cluster0 { ',
'node [style=filled,color=white]; ',
'style=filled; ',
'color=lightgrey; ',
'443 [shape=record,label=" 443"]; ',
'80 [shape=record,label=" 80 | <f0> data"]; ',
'label="Kernel Space" ',
'} ',
'subgraph cluster1 { ',
'node [style=filled] ',
'color=blue; ',
'"proxy " ',
'"httpd" ',
'label="User Space" ',
'} ',
'80:f0 -> data [style=dotted]; ',
'client -> 443 ',
'443 -> "proxy" [label="read"]; ',
'"proxy" -> 80 [label="write"]; ',
'80 -> "httpd" [label="read"]; ',
'}',
],
[
'digraph G { ',
'client [shape=Mdiamond]; ',
'data [shape=record,label="message | { 123 | 114 | 32 | 34 }|{ 34 | 116 | 56 | 104 }|{ 112 | 34 | 48 | 101 }|{ 111 | 58 | 44 | 108 }|{ 114 | 32 | 34 | 108 }|{ 116 | 56 | 104 | 111 }|{ 34 | 48 | 101 | 34 } "]; ',
'subgraph cluster0 { ',
'node [style=filled,color=white]; ',
'style=filled; ',
'color=lightgrey; ',
'443 [shape=record,label=" 443"]; ',
'80 [shape=record,label=" 80"]; ',
'label="Kernel Space" ',
'} ',
'subgraph cluster1 { ',
'node [style=filled] ',
'color=blue; ',
'"proxy " ',
'"httpd | <f0> data" ',
'label="User Space" ',
'} ',
'httpd:f0 -> data [style=dotted]; ',
'client -> 443 ',
'443 -> "proxy" [label="read"]; ',
'"proxy" -> 80 [label="write"]; ',
'80 -> "httpd" [label="read"]; ',
'}',
]
]
];
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment