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.

75 lines
46 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:"ORGANIZATION"
  24. var edges = [{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:1700},{id:2767,from:312
  25. // create a network
  26. var container = document.getElementById('mynetwork');
  27. var data = {
  28. nodes: nodes,
  29. edges: edges
  30. };
  31. var options = {nodes:{shape:'circle'},layout:{randomSeed:8}, edges:{smooth:false},physics:{stabilization:false}, configure:'physics'};
  32. var network = new vis.Network(container, data, options);
  33. network.on("selectNode", function(params) {
  34. if (params.nodes.length == 1) {
  35. if (network.isCluster(params.nodes[0]) == true) {
  36. network.openCluster(params.nodes[0])
  37. }
  38. }
  39. })
  40. // clusterByCid()
  41. function clusterByCid() {
  42. for (var i = 0; i < 39; i++) {
  43. var clusterOptionsByData = {
  44. joinCondition:function(childOptions) {
  45. return childOptions.group == i;
  46. },
  47. clusterNodeProperties: {id:'cidCluster' + i, label: 'cluster: ' + i, borderWidth:3, shape:'database'}
  48. }
  49. network.cluster(clusterOptionsByData);
  50. }
  51. }
  52. </script>
  53. <button id="btnPrevious" type="button" onclick="StepBack();"><<</button>
  54. <button id="btnNext" type="button" onclick="StepNext();">>></button>
  55. </body>
  56. </html>