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.

132 lines
3.8 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Custom Groups</title>
  5. <style>
  6. body {
  7. color: #d3d3d3;
  8. font: 12pt arial;
  9. background-color: #222222;
  10. }
  11. #mynetwork {
  12. width: 800px;
  13. height: 800px;
  14. border: 1px solid #444444;
  15. background-color: #222222;
  16. }
  17. </style>
  18. <script type="text/javascript" src="../../../dist/vis.js"></script>
  19. <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
  20. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  21. <script src="../../googleAnalytics.js"></script>
  22. </head>
  23. <body>
  24. <i class="fa fa-flag"></i> We use an icon once in the DOM so the CSS for fontAwesome is loaded.</h2>
  25. <div id="mynetwork"></div>
  26. <script type="text/javascript">
  27. var nodes = [
  28. {id: 0, label: "0", group: 'source'},
  29. {id: 1, label: "1", group: 'icons'},
  30. {id: 2, label: "2", group: 'icons'},
  31. {id: 3, label: "3", group: 'icons'},
  32. {id: 4, label: "4", group: 'icons'},
  33. {id: 5, label: "5", group: 'icons'},
  34. {id: 6, label: "6", group: 'icons'},
  35. {id: 7, label: "7", group: 'icons'},
  36. {id: 8, label: "8", group: 'icons'},
  37. {id: 9, label: "9", group: 'icons'},
  38. {id: 10, label: "10", group: 'mints'},
  39. {id: 11, label: "11", group: 'mints'},
  40. {id: 12, label: "12", group: 'mints'},
  41. {id: 13, label: "13", group: 'mints'},
  42. {id: 14, label: "14", group: 'mints'},
  43. {id: 15, group: 'dotsWithLabel'},
  44. {id: 16, group: 'dotsWithLabel'},
  45. {id: 17, group: 'dotsWithLabel'},
  46. {id: 18, group: 'dotsWithLabel'},
  47. {id: 19, group: 'dotsWithLabel'},
  48. {id: 20, label: "diamonds", group: 'diamonds'},
  49. {id: 21, label: "diamonds", group: 'diamonds'},
  50. {id: 22, label: "diamonds", group: 'diamonds'},
  51. {id: 23, label: "diamonds", group: 'diamonds'},
  52. ];
  53. var edges = [
  54. {from: 1, to: 0},
  55. {from: 2, to: 0},
  56. {from: 4, to: 3},
  57. {from: 5, to: 4},
  58. {from: 4, to: 0},
  59. {from: 7, to: 6},
  60. {from: 8, to: 7},
  61. {from: 7, to: 0},
  62. {from: 10, to: 9},
  63. {from: 11, to: 10},
  64. {from: 10, to: 4},
  65. {from: 13, to: 12},
  66. {from: 14, to: 13},
  67. {from: 13, to: 0},
  68. {from: 16, to: 15},
  69. {from: 17, to: 15},
  70. {from: 15, to: 10},
  71. {from: 19, to: 18},
  72. {from: 20, to: 19},
  73. {from: 19, to: 4},
  74. {from: 22, to: 21},
  75. {from: 23, to: 22},
  76. {from: 23, to: 0},
  77. ]
  78. // create a network
  79. var container = document.getElementById('mynetwork');
  80. var data = {
  81. nodes: nodes,
  82. edges: edges
  83. };
  84. var options = {
  85. nodes: {
  86. shape: 'dot',
  87. size: 20,
  88. font: {
  89. size: 15,
  90. color: '#ffffff'
  91. },
  92. borderWidth: 2
  93. },
  94. edges: {
  95. width: 2
  96. },
  97. groups: {
  98. diamonds: {
  99. color: {background:'red',border:'white'},
  100. shape: 'diamond'
  101. },
  102. dotsWithLabel: {
  103. label: "I'm a dot!",
  104. shape: 'dot',
  105. color: 'cyan'
  106. },
  107. mints: {color:'rgb(0,255,140)'},
  108. icons: {
  109. shape: 'icon',
  110. icon: {
  111. face: 'FontAwesome',
  112. code: '\uf0c0',
  113. size: 50,
  114. color: 'orange'
  115. }
  116. },
  117. source: {
  118. color:{border:'white'}
  119. }
  120. }
  121. };
  122. var network = new vis.Network(container, data, options);
  123. </script>
  124. </body>
  125. </html>