UNPKG

visjs-network

Version:

A dynamic, browser-based network visualization library.

129 lines (127 loc) 3.8 kB
<!doctype 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>