visjs-network
Version:
A dynamic, browser-based network visualization library.
129 lines (127 loc) • 3.8 kB
HTML
<html>
<head>
<title>Network | DOT language playground</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src='../../../../dist/vis.js'></script>
<link href='../../../../dist/vis-network.min.css' rel='stylesheet' type='text/css' />
<style type='text/css'>
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id='header'>
<h1>DOT language playground</h1>
<p>
Play around with the DOT language in the textarea below, or select one of the following examples:
</p>
<p style='margin-left: 30px;'>
<a href='#' class='example' data-url='data/simple.gv.txt'>simple</a>,
<a href='#' class='example' data-url='data/computer_network.gv.txt'>computer network</a>,
<a href='#' class='example' data-url='data/cellular_automata.gv.txt'>cellular automata</a>,
<a href='#' class='example' data-url='graphvizGallery/fsm.gv.txt'>fsm *</a>,
<a href='#' class='example' data-url='graphvizGallery/hello.gv.txt'>hello *</a>,
<a href='#' class='example' data-url='graphvizGallery/process.gv.txt'>process *</a>,
<a href='#' class='example' data-url='graphvizGallery/siblings.gv.txt'>siblings *</a>,
<a href='#' class='example' data-url='graphvizGallery/softmaint.gv.txt'>softmaint *</a>,
<a href='#' class='example' data-url='graphvizGallery/traffic_lights.gv.txt'>traffic lights *</a>,
<a href='#' class='example' data-url='graphvizGallery/transparency.gv.txt'>transparency *</a>,
<a href='#' class='example' data-url='graphvizGallery/twopi2.gv.txt'>twopi2 *</a>,
<a href='#' class='example' data-url='graphvizGallery/unix.gv.txt'>unix *</a>,
<a href='#' class='example' data-url='graphvizGallery/world.gv.txt'>world *</a>
</p>
<p>
The examples marked with a star (*) come straight from the <a href='http://www.graphviz.org/Gallery.php'>GraphViz gallery</a>.
</p>
<div>
<button id='draw' title='Draw the DOT graph (Ctrl+Enter)'>Draw</button>
<span id='error'></span>
</div>
</div>
<div id='contents'>
<div id='left'>
<textarea id='data'>
digraph {
node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black]
A -> A[label=0.5];
B -> B[label=1.2] -> C[label=0.7] -- A;
B -> D;
D -> {B; C}
D -> E[label=0.2];
F -> F;
A [
fontcolor=white,
color=red,
]
}
</textarea>
</div>
<div id='right'>
<div id='mynetwork'></div>
</div>
</div>
<script src='./index.js' type='text/javascript'></script>
</body>
</html>