jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1318 Commits
33 Branches
475 MiB
Tree: bf9684da30
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'bf9684da30'
${ noResults }
jrtechs-vis/www2/network_examples.html

348 lines
12 KiB
Raw Normal View History

added v2 of website (in alpha stage)
10 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Network Examples</title>
  8. 

  9.     <!-- Bootstrap -->
  10.     <link href="css/bootstrap.min.css" rel="stylesheet">
  11. 

  12.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  13.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  14.     <!--[if lt IE 9]>

  15.     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  16.     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  17.     <![endif]-->
  18. 

  19.     <link href="./css/prettify.css" rel="stylesheet" type="text/css" />
  20.     <script type="text/javascript" src="./js/prettify/prettify.js"></script>
  21.     <script type="text/javascript" src="./js/vis.js"></script>
  22. 

  23.     <style>
  24.         body {
  25.             padding:10px;
  26.         }
  27. 

  28.         pre {
  29.             width:450px;
  30.             height:552px;
  31.             overflow:auto;
  32.         }
  33. 

  34.         #visualization {
  35.             display:block;
  36.             margin-left:470px;
  37.             margin-top:-562px;
  38.             width:500px;
  39.             height:552px;
  40.             border: 1px solid #dddddd;
  41.             border-radius:4px;
  42.             background-color:#fcfcfc;
  43.         }
  44. 

  45.         div.textHTMLContent {
  46.             margin-top:10px;
  47.             margin-bottom:10px;
  48.             display:block;
  49.             width:800px;
  50.         }
  51. 

  52.         img {
  53.             border:1px solid #032740;
  54.             width:250px;
  55.             height:250px;
  56.             margin-top:10px;
  57.         }
  58.         div.exampleTitle {
  59.             width:250px;
  60.             height:30px;
  61.             background-color:#032740;
  62.             color:#ffffff;
  63.             text-align:center;
  64.             vertical-align:middle;
  65.             line-height: 30px;
  66.         }
  67.     </style>
  68.     <script language="JavaScript">
  69.         function loadVis() {
  70.             var nodes = [
  71.                 {id: 1, label: 'Node 1'},
  72.                 {id: 2, label: 'Node 2'},
  73.                 {id: 3, label: 'Node 3'},
  74.                 {id: 4, label: 'Node 4'},
  75.                 {id: 5, label: 'Node 5'}
  76.             ];
  77. 

  78.             // create an array with edges
  79.             var edges = [
  80.                 {from: 1, to: 2},
  81.                 {from: 1, to: 3},
  82.                 {from: 2, to: 4},
  83.                 {from: 2, to: 5}
  84.             ];
  85. 

  86.             // create a network
  87.             var container = document.getElementById('visualization');
  88.             var data = {
  89.                 nodes: nodes,
  90.                 edges: edges
  91.             };
  92.             var network = new vis.Network(container, data, {});
  93.         }
  94.     </script>
  95. 

  96. </head>
  97. <body onload="prettyPrint(); loadVis();">
  98. <h1>Network Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a>  <a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a>
  99. 

  100. <div class="textHTMLContent">This small code example shows the easiest way to get a network up and running. This code has been taken from example 1. The working example is shown next to it.</div>
  101. <pre class="prettyprint lang-html">
  102. &lt;div id="visualization"&gt;&lt;/div&gt;
  103. &lt;script type="text/javascript"&gt;
  104.     // create an array with nodes
  105.     var nodes = [
  106.         {id: 1, label: 'Node 1'},
  107.         {id: 2, label: 'Node 2'},
  108.         {id: 3, label: 'Node 3'},
  109.         {id: 4, label: 'Node 4'},
  110.         {id: 5, label: 'Node 5'}
  111.     ];
  112. 

  113.     // create an array with edges
  114.     var edges = [
  115.         {from: 1, to: 2},
  116.         {from: 1, to: 3},
  117.         {from: 2, to: 4},
  118.         {from: 2, to: 5}
  119.     ];
  120. 

  121.     // create a network
  122.     var container = document.getElementById('mynetwork');
  123.     var data = {
  124.         nodes: nodes,
  125.         edges: edges
  126.     };
  127.     var network = new vis.Network(container, data, {});
  128. &lt;/script&gt;
  129. </pre>
  130. <div id="visualization"></div>
  131. 

  132. <h2 id="allExamples">All examples</h2>
  133. <div class="container-fluid">
  134.     <div class="col-lg-3 col-md-3 col-sm-6">
  135.         <a href="examples/network/01_basic_usage.html">
  136.             <img src="./images/gallery/network/1.png" >
  137.             <div class="exampleTitle">basic usage</div>
  138.         </a>
  139.     </div>
  140.     <div class="col-lg-3 col-md-3 col-sm-6">
  141.         <a href="examples/network/02_random_nodes.html">
  142.             <img src="./images/gallery/network/2.png">
  143.             <div class="exampleTitle">random nodes</div>
  144.         </a>
  145.     </div>
  146.     <div class="col-lg-3 col-md-3 col-sm-6">
  147.         <a href="examples/network/03_images.html">
  148.             <img src="./images/gallery/network/3.png">
  149.             <div class="exampleTitle">images</div>
  150.         </a>
  151.     </div>
  152.     <div class="col-lg-3 col-md-3 col-sm-6">
  153.         <a href="examples/network/04_shapes.html">
  154.             <img src="./images/gallery/network/4.png">
  155.             <div class="exampleTitle">shapes</div>
  156.         </a>
  157.     </div>
  158.     <div class="col-lg-3 col-md-3 col-sm-6">
  159.         <a href="examples/network/05_social_network.html">
  160.             <img src="./images/gallery/network/5.png">
  161.             <div class="exampleTitle">social network</div>
  162.         </a>
  163.     </div>
  164.     <div class="col-lg-3 col-md-3 col-sm-6">
  165.         <a href="examples/network/06_groups.html">
  166.             <img src="./images/gallery/network/6.png">
  167.             <div class="exampleTitle">groups</div>
  168.         </a>
  169.     </div>
  170.     <div class="col-lg-3 col-md-3 col-sm-6">
  171.         <a href="examples/network/07_selections.html">
  172.             <img src="./images/gallery/network/7.png">
  173.             <div class="exampleTitle">selections</div>
  174.         </a>
  175.     </div>
  176.     <div class="col-lg-3 col-md-3 col-sm-6">
  177.         <a href="examples/network/08_mobile_friendly.html">
  178.             <img src="./images/gallery/network/8.png">
  179.             <div class="exampleTitle">mobile friendly</div>
  180.         </a>
  181.     </div>
  182.     <div class="col-lg-3 col-md-3 col-sm-6">
  183.         <a href="examples/network/09_sizing.html">
  184.             <img src="./images/gallery/network/9.png">
  185.             <div class="exampleTitle">sizing</div>
  186.         </a>
  187.     </div>
  188.     <div class="col-lg-3 col-md-3 col-sm-6">
  189.         <a href="examples/network/10_multiline_text.html">
  190.             <img src="./images/gallery/network/10.png">
  191.             <div class="exampleTitle">multiline text</div>
  192.         </a>
  193.     </div>
  194.     <div class="col-lg-3 col-md-3 col-sm-6">
  195.         <a href="examples/network/11_custom_style.html">
  196.             <img src="./images/gallery/network/11.png">
  197.             <div class="exampleTitle">custom style</div>
  198.         </a>
  199.     </div>
  200.     <div class="col-lg-3 col-md-3 col-sm-6">
  201.         <a href="examples/network/12_scalable_images.html">
  202.             <img src="./images/gallery/network/12.png">
  203.             <div class="exampleTitle">scalable images</div>
  204.         </a>
  205.     </div>
  206.     <div class="col-lg-3 col-md-3 col-sm-6">
  207.         <a href="examples/network/13_dashed_lines.html">
  208.             <img src="./images/gallery/network/13.png">
  209.             <div class="exampleTitle">dashed lines</div>
  210.         </a>
  211.     </div>
  212.     <div class="col-lg-3 col-md-3 col-sm-6">
  213.         <a href="examples/network/14_dot_language.html">
  214.             <img src="./images/gallery/network/14.png">
  215.             <div class="exampleTitle">dot language</div>
  216.         </a>
  217.     </div>
  218.     <div class="col-lg-3 col-md-3 col-sm-6">
  219.         <a href="examples/network/15_dot_language_playground.html">
  220.             <img src="./images/gallery/network/15.png">
  221.             <div class="exampleTitle">playground</div>
  222.         </a>
  223.     </div>
  224.     <div class="col-lg-3 col-md-3 col-sm-6">
  225.         <a href="examples/network/16_dynamic_data.html">
  226.             <img src="./images/gallery/network/16.png">
  227.             <div class="exampleTitle">dynamic data</div>
  228.         </a>
  229.     </div>
  230.     <div class="col-lg-3 col-md-3 col-sm-6">
  231.         <a href="examples/network/17_network_info.html">
  232.             <img src="./images/gallery/network/17.png">
  233.             <div class="exampleTitle">network info</div>
  234.         </a>
  235.     </div>
  236.     <div class="col-lg-3 col-md-3 col-sm-6">
  237.         <a href="examples/network/18_fully_random_nodes_clustering.html">
  238.             <img src="./images/gallery/network/18.png">
  239.             <div class="exampleTitle">fully random nodes clustering</div>
  240.         </a>
  241.     </div>
  242.     <div class="col-lg-3 col-md-3 col-sm-6">
  243.         <a href="examples/network/19_scale_free_graph_clustering.html">
  244.             <img src="./images/gallery/network/19.png">
  245.             <div class="exampleTitle">scale free graph clustering</div>
  246.         </a>
  247.     </div>
  248.     <div class="col-lg-3 col-md-3 col-sm-6">
  249.         <a href="examples/network/20_navigation.html">
  250.             <img src="./images/gallery/network/20.png">
  251.             <div class="exampleTitle">navigation</div>
  252.         </a>
  253.     </div>
  254.     <div class="col-lg-3 col-md-3 col-sm-6">
  255.         <a href="examples/network/21_data_manipulation.html">
  256.             <img src="./images/gallery/network/21.png">
  257.             <div class="exampleTitle">data manipulation</div>
  258.         </a>
  259.     </div>
  260.     <div class="col-lg-3 col-md-3 col-sm-6">
  261.         <a href="examples/network/22_les_miserables.html">
  262.             <img src="./images/gallery/network/22.png">
  263.             <div class="exampleTitle">les miserables</div>
  264.         </a>
  265.     </div>
  266.     <div class="col-lg-3 col-md-3 col-sm-6">
  267.         <a href="examples/network/23_hierarchical_layout.html">
  268.             <img src="./images/gallery/network/23.png">
  269.             <div class="exampleTitle">hierarchical layout</div>
  270.         </a>
  271.     </div>
  272.     <div class="col-lg-3 col-md-3 col-sm-6">
  273.         <a href="examples/network/24_hierarchical_layout_userdefined.html">
  274.             <img src="./images/gallery/network/24.png">
  275.             <div class="exampleTitle">hierarchical layout userdefined</div>
  276.         </a>
  277.     </div>
  278.     <div class="col-lg-3 col-md-3 col-sm-6">
  279.         <a href="examples/network/25_physics_configuration.html">
  280.             <img src="./images/gallery/network/25.png">
  281.             <div class="exampleTitle">physics configuration</div>
  282.         </a>
  283.     </div>
  284.     <div class="col-lg-3 col-md-3 col-sm-6">
  285.         <a href="examples/network/26_staticSmoothCurves.html">
  286.             <img src="./images/gallery/network/26.png">
  287.             <div class="exampleTitle">static smooth curves</div>
  288.         </a>
  289.     </div>
  290.     <div class="col-lg-3 col-md-3 col-sm-6">
  291.         <a href="examples/network/27_world_cup_network.html">
  292.             <img src="./images/gallery/network/27.png">
  293.             <div class="exampleTitle">world cup network</div>
  294.         </a>
  295.     </div>
  296.     <div class="col-lg-3 col-md-3 col-sm-6">
  297.         <a href="examples/network/28_world_cup_network_performance.html">
  298.             <img src="./images/gallery/network/28.png">
  299.             <div class="exampleTitle">world cup network performance</div>
  300.         </a>
  301.     </div>
  302.     <div class="col-lg-3 col-md-3 col-sm-6">
  303.         <a href="examples/network/29_neighbourhood_highlight.html">
  304.             <img src="./images/gallery/network/29.png">
  305.             <div class="exampleTitle">neighborhood highlight</div>
  306.         </a>
  307.     </div>
  308.     <div class="col-lg-3 col-md-3 col-sm-6">
  309.         <a href="examples/network/30_importing_from_gephi.html">
  310.             <img src="./images/gallery/network/30.png">
  311.             <div class="exampleTitle">importing from gephi</div>
  312.         </a>
  313.     </div>
  314.     <div class="col-lg-3 col-md-3 col-sm-6">
  315.         <a href="examples/network/31_localization.html">
  316.             <img src="./images/gallery/network/31.png">
  317.             <div class="exampleTitle">localization</div>
  318.         </a>
  319.     </div>
  320.     <div class="col-lg-3 col-md-3 col-sm-6">
  321.         <a href="examples/network/32_hierarchicaLayoutMethods.html">
  322.             <img src="./images/gallery/network/32.png">
  323.             <div class="exampleTitle">hierarchical layout methods</div>
  324.         </a>
  325.     </div>
  326.     <div class="col-lg-3 col-md-3 col-sm-6">
  327.         <a href="examples/network/33_animation.html">
  328.             <img src="./images/gallery/network/33.png">
  329.             <div class="exampleTitle">animation</div>
  330.         </a>
  331.     </div>
  332.     <div class="col-lg-3 col-md-3 col-sm-6">
  333.         <a href="examples/network/graphviz/graphviz_gallery.html">
  334.             <img src="./images/gallery/network/graphviz.png">
  335.             <div class="exampleTitle">graphviz gallery</div>
  336.         </a>
  337.     </div>
  338. </div>
  339. <br />
  340. <br />
  341. <br />
  342. <br />
  343. 

  344. <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  345. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  346. <!-- Include all compiled plugins (below), or include individual files as needed -->
  347. <script src="js/bootstrap.min.js"></script>
  348. </body>
  349. </html>