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.

155 lines
48 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Network | Basic usage</title>
  5. <script type="text/javascript" src="../dist/vis.js"></script>
  6. <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
  7. <style type="text/css">
  8. #mynetwork {
  9. width: 1400px;
  10. height: 1000px;
  11. border: 1px solid lightgray;
  12. }
  13. </style>
  14. <script type="text/javascript">
  15. </script>
  16. </head>
  17. <body>
  18. <p>
  19. Create a simple network with some nodes and edges.
  20. </p>
  21. <div id="mynetwork"></div>
  22. <script type="text/javascript">
  23. // var nodes = [{id:5538,label:"Wladimir Wladimirowitsch Putin",type:"PERSON",image:"",group:13,zoom:0},{id:9728,label:"Klaus und Sorg",type:"PERSON",image:"",group:15,zoom:0},{id:137,label:"Ola John",type:"PERSON",image:"",group:30,zoom:0},{id:5305,label:"Barclays",type:"ORGANIZATION",image:"",group:0,zoom:0},{id:218,label:"Intel",type:"ORGANIZATION",image:"",group:36,zoom:0},{id:559,label:"Roger Schmidt",type:"PERSON",image:"",group:8,zoom:0},{id:765,label:"Fresenius",type:"ORGANIZATION",image:"",group:32,zoom:0},{id:173,label:"Eintracht Braunschweig",type:"ORGANIZATION",image:"",group:28,zoom:0},{id:1707,label:"\"Wall Street Journal\"",type:"ORGANIZATION",image:"",group:36,zoom:0},{id:182,label:"1.FC N�rnberg",type:"ORGANIZATION",image:"",group:8,zoom:0},{id:8077,label:"Medica",type:"ORGANIZATION",image:"",group:21,zoom:0},{id:1142,label:"Durow",type:"PERSON",image:"",group:8,zoom:0},{id:828,label:"Sky",type:"ORGANIZATION",image:"",group:8,zoom:0},{id:478,label:"WEX",type:"ORGANIZATION",image:"",group:11,zoom:0},{id:577,label:"Elke Strathmann",type:"PERSON",image:"",group:26,zoom:0},{id:1806,label:"Gribkowsky",type:"PERSON",image:"",group:38,zoom:0},{id:1447,label:"Franziskus",type:"PERSON",image:"",group:31,zoom:0},{id:1788,label:"Premier League",type:"ORGANIZATION",image:"",group:8,zoom:0},{id:451,label:"K+S",type:"ORGANIZATION",image:"",group:10,zoom:0},{id:2658,label:"Thomas Bach",type:"PERSON",image:"",group:24,zoom:0},{id:10114,label:"Bongarts/Getty Images Hertha BSC",type:"ORGANIZATION",image:"",group:19,zoom:0},{id:4076,label:"Wladimirs",type:"PERSON",image:"",group:13,zoom:0},{id:2703,label:"Nintendo Pocket Football Club",type:"ORGANIZATION",image:"",group:37,zoom:0},{id:5332,label:"AWD",type:"ORGANIZATION",image:"",group:27,zoom:0},{id:23,label:"ORF",type:"ORGANIZATION",image:"",group:2,zoom:0},{id:2302,label:"Beiersdorf",type:"ORGANIZATION",image:"",group:10,zoom:0},{id:517,label:"Nokias",type:"PERSON",image:"",group:36,zoom:0},{id:3953,label:"Peter L�scher",type:"PERSON",image:"",group:6,zoom:0},{id:4805,label:"Maserati",type:"ORGANIZATION",image:"",group:26,zoom:0},{id:2374,label:"Fitch",type:"PERSON",image:"",group:26,zoom:0},{id:4213,label:"Christian Catrina",type:"PERSON",image:"",group:17,zoom:0},{id:2580,label:"Kumbela",type:"PERSON",image:"",group:19,zoom:0},{id:77,label:"�VP",type:"ORGANIZATION",image:"",group:6,zoom:0},{id:804,label:"SiK",type:"ORGANIZATION",image:"",group:17,zoom:0},{id:158,label:"FIFA",type:"ORGANIZATION",image:"",group:5,zoom:0},{id:8654,label:"Gill�rons",type:"PERSON",image:"",group:5,zoom:0},{id:3047,label:"Bayer 04 Leverkusen\"",type:"ORGANIZATION",image:"",group:29,zoom:0},{id:364,label:"S&P",type:"ORGANIZATION",image:"",group:26,zoom:0},{id:7748,label:"Chris Beard",type:"PERSON",image:"",group:23,zoom:0},{id:8089,label:"Moodys Investors Service",type:"ORGANIZATION",image:"",group:4,zoom:0},{id:41,label:"Swisscom",type:"ORGANIZATION",image:"",group:32,zoom:0},{id:2006,label:"BDP",type:"ORGANIZATION",image:"",group:17,zoom:0},{id:113,label:"Rolls-Royce Motor Cars",type:"ORGANIZATION",image:"",group:33,zoom:0},{id:9695,label:"Frankfurter Wertpapierb�rse ( Prime Standard",type:"ORGANIZATION",image:"",group:3,zoom:0},{id:1333,label:"Warschauer B�rse",type:"ORGANIZATION",image:"",group:3,zoom:0},{id:346,label:"Bongarts/Getty Images",type:"ORGANIZATION",image:"",group:18,zoom:0},{id:9103,label:"Simyo",type:"ORGANIZATION",image:"",group:12,zoom:0},{id:768,label:"Sony",type:"ORGANIZATION",image:"",group:37,zoom:0},{id:5535,label:"Schweizerischen Bankiervereinigung",type:"ORGANIZATION",image:"",group:7,zoom:0},{id:134,label:"Defensivstratege Milan Badelj",type:"ORGANIZATION",image:"",group:30,zoom:0},{id:5436,label:"EU-Kommission",type:"ORGANIZATION",image:"",group:12,zoom:0},{id:6100,label:"Orhan Ademi",type:"PERSON",image:"",group:28,zoom:0},{id:2969,label:"Thorsten Dirks",type:"PERSON",image:"",group:12,zoom:0},{id:2637,label:"Wladimir",type:"PERSON",image:"",group:13,zoom:0},{id:26,label:"Erdogan",type:"PERSON",image:"",group:36,zoom:0},{id:1659,label:"SNB",type:"ORGANIZ
  24. //
  25. //
  26. // var edges = new vis.DataSet([{id:6692,from:3048,to:10417},{id:6732,from:208,to:985},{id:6484,from:261,to:10185},{id:6610,from:217,to:1868},{id:5503,from:1270,to:9036},{id:5915,from:320,to:2099},{id:5828,from:3048,to:9413},{id:879,from:178,to:993},{id:2857,from:5042,to:5043},{id:5404,from:898,to:8909},{id:768,from:468,to:1700},{id:1498,from:887,to:2969},{id:6401,from:337,to:3953},{id:1277,from:318,to:577},{id:1385,from:328,to:542},{id:6364,from:223,to:346},{id:1276,from:318,to:2650},{id:76,from:134,to:137},{id:2259,from:4212,to:4213},{id:6277,from:26,to:8263},{id:95,from:182,to:183},{id:3324,from:887,to:5033},{id:1430,from:2856,to:2857},{id:5721,from:2020,to:9317},{id:6039,from:3087,to:9695},{id:702,from:364,to:1018},{id:354,from:804,to:807},{id:5154,from:60,to:208},{id:2369,from:898,to:4283},{id:1281,from:577,to:2651},{id:4951,from:1898,to:7200},{id:281,from:69,to:652},{id:2736,from:2059,to:3577},{id:3166,from:1659,to:5534},{id:2151,from:28,to:563},{id:307,from:710,to:711},{id:5219,from:8651,to:8652},{id:777,from:655,to:743},{id:5148,from:1272,to:4213},{id:774,from:10,to:217},{id:2933,from:1186,to:3034},{id:218,from:10,to:517},{id:2806,from:4971,to:4972},{id:734,from:782,to:1447},{id:4138,from:1828,to:5821},{id:5413,from:2236,to:5305},{id:248,from:578,to:580},{id:245,from:111,to:579},{id:1105,from:2302,to:2303},{id:4432,from:7501,to:7502},{id:208,from:69,to:217},{id:769,from:111,to:468},{id:4885,from:28,to:8184},{id:1439,from:26,to:148},{id:2851,from:2820,to:5033},{id:5222,from:8651,to:8654},{id:900,from:147,to:1447},{id:6063,from:320,to:5934},{id:2239,from:844,to:1049},{id:5216,from:12,to:8653},{id:2096,from:158,to:3965},{id:389,from:866,to:868},{id:5214,from:12,to:8651},{id:1525,from:877,to:2200},{id:4326,from:887,to:2820},{id:6076,from:4030,to:9728},{id:5411,from:1122,to:5305},{id:2667,from:132,to:787},{id:5056,from:346,to:1359},{id:5717,from:9306,to:9307},{id:4294,from:345,to:7307},{id:4430,from:1270,to:7501},{id:66,from:113,to:114},{id:6807,from:40,to:8184},{id:3961,from:887,to:5436},{id:1306,from:158,to:171},{id:6742,from:10486,to:10487},{id:3024,from:60,to:5305},{id:3119,from:5446,to:5447},{id:61,from:111,to:112},{id:5269,from:64,to:148},{id:1211,from:216,to:2255},{id:6031,from:353,to:877},{id:385,from:865,to:866},{id:3818,from:320,to:6563},{id:65,from:112,to:114},{id:6583,from:3148,to:10321},{id:5848,from:346,to:1211},{id:6042,from:154,to:9695},{id:2299,from:107,to:1426},{id:1532,from:337,to:3034},{id:5587,from:173,to:298},{id:2852,from:64,to:1835},{id:4203,from:23,to:1174},{id:1598,from:337,to:1245},{id:1151,from:107,to:235},{id:1288,from:1397,to:2658},{id:2130,from:1881,to:4032},{id:6618,from:298,to:7629},{id:5572,from:887,to:9103},{id:6438,from:169,to:208},{id:3753,from:956,to:1122},{id:51,from:102,to:107},{id:388,from:866,to:867},{id:1349,from:63,to:434},{id:5224,from:3046,to:8652},{id:3801,from:37,to:914},{id:62,from:111,to:113},{id:517,from:1141,to:1142},{id:2974,from:838,to:5231},{id:2440,from:652,to:3314},{id:6735,from:493,to:844},{id:1987,from:216,to:484},{id:1772,from:2118,to:3408},{id:1472,from:11,to:217},{id:4932,from:1659,to:8263},{id:3048,from:28,to:64},{id:4797,from:11,to:1707},{id:1425,from:450,to:2859},{id:1590,from:1659,to:3167},{id:6620,from:7629,to:10345},{id:305,from:709,to:710},{id:867,from:28,to:642},{id:572,from:343,to:1141},{id:6107,from:2703,to:2872},{id:2807,from:478,to:4972},{id:379,from:64,to:597},{id:2131,from:562,to:2200},{id:1522,from:223,to:413},{id:2923,from:655,to:3437},{id:1672,from:37,to:2200},{id:401,from:884,to:885},{id:6857,from:562,to:877},{id:1391,from:70,to:768},{id:1952,from:1270,to:3721},{id:1072,from:60,to:2059},{id:6619,from:298,to:10346},{id:3520,from:320,to:1397},{id:3930,from:60,to:985},{id:4995,from:8343,to:8344},{id:2426,from:655,to:4373},{id:2240,from:845,to:2591},{id:6113,from:2703,to:9759},{id:3103,from:5418,to:5419},{id:6096,from:2020,to:2580},{id:394,from:876,to:877},{id:4010,from:563,to:1835},{id:859,from:1827,to:1828},{id:3227,from:446,to:1898},{id:17,from:37,to:693},{id:4315,from:7345,to:7347},{id:4948,from:1700,to:7200},{id:3081,from:446,to:1
  27. var nodes = [{
  28. "id": 4213,
  29. "label": "Christian Catrina",
  30. "type": "PERSON",
  31. "image": "",
  32. "group": 17,
  33. "zoom": 0
  34. }, {"id": 804, "label": "SiK", "type": "ORGANIZATION", "image": "", "group": 17, "zoom": 0}, {
  35. "id": 2006,
  36. "label": "BDP",
  37. "type": "ORGANIZATION",
  38. "image": "",
  39. "group": 17,
  40. "zoom": 0
  41. }, {"id": 1288, "label": "EVP", "type": "ORGANIZATION", "image": "", "group": 17, "zoom": 0}, {
  42. "id": 459,
  43. "label": "M�ller",
  44. "type": "PERSON",
  45. "image": "",
  46. "group": 17,
  47. "zoom": 0
  48. }, {"id": 1033, "label": "Ueli Maurer", "type": "PERSON", "image": "", "group": 17, "zoom": 0}, {
  49. "id": 1287,
  50. "label": "CVP",
  51. "type": "ORGANIZATION",
  52. "image": "",
  53. "group": 17,
  54. "zoom": 0
  55. }, {"id": 4212, "label": "SRF", "type": "ORGANIZATION", "image": "", "group": 17, "zoom": 0}, {
  56. "id": 1272,
  57. "label": "VBS",
  58. "type": "ORGANIZATION",
  59. "image": "",
  60. "group": 17,
  61. "zoom": 0
  62. }, {
  63. "id": 5982,
  64. "label": "Europ�ische Volkspartei",
  65. "type": "ORGANIZATION",
  66. "image": "",
  67. "group": 14,
  68. "zoom": 0
  69. }, {"id": 805, "label": "SVP", "type": "ORGANIZATION", "image": "", "group": 17, "zoom": 0}, {
  70. "id": 807,
  71. "label": "Thomas Hurter",
  72. "type": "PERSON",
  73. "image": "",
  74. "group": 17,
  75. "zoom": 0
  76. }]
  77. var edges = [
  78. {"id": 2259, "from": 4212, "to": 4213},
  79. {"id": 5148, "from": 1272, "to": 4213},
  80. {
  81. "id": 352, "from": 804, "to": 805
  82. }, {"id": 354, "from": 804, "to": 807}, {"id": 3352, "from": 804, "to": 4212}, {
  83. "id": 956,
  84. "from": 1835,
  85. "to": 2006
  86. }, {"id": 958, "from": 1287, "to": 2006},
  87. {
  88. "id": 6391,
  89. "from": 805,
  90. "to": 2006
  91. }, {"id": 592, "from": 1287, "to": 1288}, {"id": 3452, "from": 1288, "to": 5982}, {
  92. "id": 6388,
  93. "from": 1288,
  94. "to": 2006
  95. }, {"id": 6389, "from": 805, "to": 1288}, {
  96. "id": 3628,
  97. "from": 805,
  98. "to": 1033
  99. }, {"id": 5845, "from": 459, "to": 1033}, {
  100. "id": 3353,
  101. "from": 807,
  102. "to": 4212
  103. }, {"id": 356, "from": 805, "to": 807}, {
  104. "id": 1098,
  105. "from": 805,
  106. "to": 1287
  107. }, {"id": 6172, "from": 312, "to": 805}]
  108. // create a network
  109. var container = document.getElementById('mynetwork');
  110. var data = {
  111. nodes: nodes,
  112. edges: edges
  113. };
  114. var options = {layout: {randomSeed: 8}, physics: {stabilization: false}};
  115. var network = new vis.Network(container, data, options);
  116. network.on("selectNode", function (params) {
  117. if (params.nodes.length == 1) {
  118. if (network.isCluster(params.nodes[0]) == true) {
  119. network.openCluster(params.nodes[0])
  120. }
  121. }
  122. })
  123. clusterByCid()
  124. function clusterByCid() {
  125. for (var i = 0; i < 39; i++) {
  126. var clusterOptionsByData = {
  127. joinCondition: function (childOptions) {
  128. return childOptions.group == i;
  129. },
  130. clusterNodeProperties: {id: 'cidCluster' + i, label: 'cluster: ' + i, borderWidth: 3, shape: 'database'}
  131. }
  132. network.cluster(clusterOptionsByData);
  133. }
  134. }
  135. network.openCluster('cidCluster14')
  136. </script>
  137. <button id="btnPrevious" type="button" onclick="StepBack();"><<</button>
  138. <button id="btnNext" type="button" onclick="StepNext();">>></button>
  139. </body>
  140. </html>