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
262 KiB

9 years ago
  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":1,"label":"VfL Wolfsburg","group":16,"value":0.00206,"x":1271,"y":3924},{"id":2,"label":"Ivica Olic","group":16,"value":0.00015,"x":948,"y":4262},{"id":10,"label":"Microsoft","group":34,"value":0.01004,"x":-4504,"y":-1652},{"id":11,"label":"Amazon","group":34,"value":0.00494,"x":-2855,"y":-864},{"id":12,"label":"SFV","group":5,"value":0.00101,"x":3832,"y":727},{"id":14,"label":"Karlsruher SC","group":18,"value":0.00062,"x":5297,"y":3566},{"id":15,"label":"Rot Weiss Ahlen","group":18,"value":0.00031,"x":5821,"y":3519},{"id":16,"label":"SSV Ulm","group":18,"value":0.00047,"x":6073,"y":3163},{"id":22,"label":"Governance Kodex\"","group":2,"value":0.00016,"x":171,"y":-6152},{"id":23,"label":"ORF","group":2,"value":0.0019,"x":243,"y":-5742},{"id":24,"label":"Axel Springer","group":34,"value":0.0003,"x":-4416,"y":-2139},{"id":26,"label":"Erdogan","group":34,"value":0.00229,"x":-931,"y":-3070},{"id":28,"label":"SPD","group":6,"value":0.00825,"x":2150,"y":-2976},{"id":29,"label":"Snowdens","group":6,"value":0.00031,"x":267,"y":-732},{"id":34,"label":"Wendelin Wiedeking","group":16,"value":0.00045,"x":-938,"y":4553},{"id":35,"label":"Holger H�rter","group":16,"value":0.0006,"x":-1163,"y":4763},{"id":37,"label":"Borussia Dortmund","group":8,"value":0.00221,"x":2755,"y":2785},{"id":40,"label":"Maly","group":6,"value":0.0003,"x":1836,"y":1270},{"id":41,"label":"Swisscom","group":30,"value":0.00227,"x":-993,"y":-6433},{"id":48,"label":"\"Russland","group":6,"value":0.00016,"x":1382,"y":2198},{"id":53,"label":"Boeing","group":34,"value":0.00139,"x":-842,"y":632},{"id":54,"label":"General Motors","group":34,"value":0.00092,"x":-1220,"y":47},{"id":55,"label":"Chrysler","group":34,"value":0.00031,"x":-885,"y":263},{"id":56,"label":"RBS","group":0,"value":0.00075,"x":-4405,"y":2905},{"id":60,"label":"dpa-AFX Analyser","group":0,"value":0.00463,"x":-3782,"y":2463},{"id":61,"label":"Die Privatbank Berenberg","group":0,"value":0.00075,"x":-4788,"y":2736},{"id":62,"label":"FMC","group":0,"value":0.0003,"x":-4340,"y":2661},{"id":63,"label":"FCB","group":2,"value":0.0009,"x":4338,"y":-5791},{"id":64,"label":"CDU","group":6,"value":0.00731,"x":3121,"y":-2498},{"id":65,"label":"Kreml","group":6,"value":0.00031,"x":1932,"y":-1019},{"id":66,"label":"John Kerry","group":6,"value":0.00124,"x":2356,"y":-1252},{"id":69,"label":"Nokia","group":34,"value":0.00405,"x":-3917,"y":-744},{"id":70,"label":"Twitter","group":35,"value":0.00436,"x":-2341,"y":-4049},{"id":76,"label":"Europ�ischen Parlaments","group":6,"value":0.00031,"x":751,"y":-5474},{"id":77,"label":"�VP","group":6,"value":0.00359,"x":832,"y":-4918},{"id":81,"label":"Kabel Deutschland","group":34,"value":0.00046,"x":-1010,"y":-1252},{"id":82,"label":"Ralf J�ger","group":6,"value":0.00016,"x":1948,"y":-2649},{"id":89,"label":"Dual EC","group":6,"value":0.00046,"x":502,"y":-1232},{"id":90,"label":"NSA","group":6,"value":0.00201,"x":957,"y":-1046},{"id":91,"label":"Microsoft Mobile","group":34,"value":0.0003,"x":-6343,"y":-1104},{"id":99,"label":"Larry Page","group":34,"value":0.00075,"x":-3739,"y":-2707},{"id":100,"label":"Cisco","group":34,"value":0.00285,"x":-4430,"y":-2354},{"id":102,"label":"Facebook","group":34,"value":0.00964,"x":-3023,"y":-2807},{"id":107,"label":"Google","group":34,"value":0.01155,"x":-3852,"y":-2120},{"id":108,"label":"Yahoo","group":34,"value":0.0018,"x":-4108,"y":-1712},{"id":109,"label":"eBay","group":34,"value":0.0009,"x":-3885,"y":-2328},{"id":110,"label":"Netflix","group":34,"value":0.0012,"x":-4004,"y":-2122},{"id":111,"label":"BMW","group":31,"value":0.003,"x":-2658,"y":4194},{"id":112,"label":"MINI","group":31,"value":0.00075,"x":-3154,"y":4020},{"id":113,"label":"Rolls-Royce Motor Cars","group":31,"value":0.00075,"x":-3133,"y":4424},{"id":114,"label":"BMW Welt","group":31,"value":0.00165,"x":-3136,"y":4706},{"id":120,"label":"Weatherford","group":34,"value":0.00015,"x":-4495,"y":-1517},{"id":132,"label":"Real Madrid","group":8,"value":0.00293,"x":3962,"y":2167},{"id":133,"label":"Bar�a","group":8,"value":0.00132,"x":4722,"y":1621},{"id":
  24. var edges = [{"id":5538,"from":5305,"to":9072},{"id":6606,"from":364,"to":3695},{"id":2685,"from":1835,"to":4006},{"id":3340,"from":40,"to":3199},{"id":5233,"from":2868,"to":6117},{"id":5206,"from":993,"to":8110},{"id":4551,"from":3577,"to":4841},{"id":4865,"from":178,"to":4098},{"id":3753,"from":956,"to":1122},{"id":5305,"from":5083,"to":8736},{"id":4964,"from":1898,"to":5248},{"id":5969,"from":148,"to":9607},{"id":4973,"from":217,"to":8292},{"id":5628,"from":1830,"to":3967},{"id":891,"from":566,"to":1203},{"id":4946,"from":1700,"to":5642},{"id":6839,"from":4366,"to":10615},{"id":550,"from":69,"to":1216},{"id":6498,"from":111,"to":3772},{"id":864,"from":642,"to":1834},{"id":146,"from":312,"to":313},{"id":4982,"from":28,"to":8313},{"id":6507,"from":99,"to":2300},{"id":218,"from":10,"to":517},{"id":6920,"from":3437,"to":10730},{"id":4309,"from":914,"to":6642},{"id":6516,"from":423,"to":2200},{"id":227,"from":526,"to":529},{"id":3627,"from":805,"to":6316},{"id":6175,"from":799,"to":1609},{"id":2981,"from":69,"to":3354},{"id":5529,"from":23,"to":9056},{"id":5843,"from":459,"to":2065},{"id":5188,"from":289,"to":8623},{"id":5502,"from":493,"to":1806},{"id":6597,"from":2330,"to":10261},{"id":6256,"from":4213,"to":9939},{"id":5915,"from":320,"to":2099},{"id":4542,"from":7655,"to":7656},{"id":5574,"from":9103,"to":9104},{"id":1833,"from":102,"to":3497},{"id":774,"from":10,"to":217},{"id":433,"from":679,"to":981},{"id":92,"from":173,"to":174},{"id":5269,"from":64,"to":148},{"id":4928,"from":3283,"to":8257},{"id":4587,"from":7708,"to":7709},{"id":6794,"from":216,"to":1087},{"id":442,"from":1000,"to":1001},{"id":4623,"from":3445,"to":7785},{"id":4937,"from":423,"to":446},{"id":4596,"from":943,"to":7726},{"id":855,"from":41,"to":1827},{"id":200,"from":169,"to":471},{"id":4255,"from":10,"to":7259},{"id":6803,"from":2006,"to":10560},{"id":3062,"from":77,"to":5004},{"id":514,"from":1132,"to":1133},{"id":209,"from":217,"to":496},{"id":6157,"from":1211,"to":9779},{"id":523,"from":218,"to":1155},{"id":182,"from":283,"to":423},{"id":6911,"from":3584,"to":3605},{"id":3277,"from":499,"to":5708},{"id":254,"from":597,"to":598},{"id":2802,"from":4951,"to":4952},{"id":6139,"from":4568,"to":9790},{"id":1061,"from":1270,"to":2211},{"id":4372,"from":3857,"to":7424},{"id":6579,"from":171,"to":353},{"id":6893,"from":102,"to":10681},{"id":6238,"from":1447,"to":9914},{"id":6552,"from":10259,"to":10260},{"id":2470,"from":493,"to":4446},{"id":1815,"from":217,"to":3458},{"id":2129,"from":178,"to":4029},{"id":1474,"from":11,"to":102},{"id":1070,"from":450,"to":1159},{"id":5906,"from":3106,"to":9514},{"id":1824,"from":3477,"to":3478},{"id":5224,"from":3046,"to":8652},{"id":828,"from":1787,"to":1789},{"id":6776,"from":1881,"to":7098},{"id":738,"from":1608,"to":1609},{"id":3349,"from":993,"to":1604},{"id":5637,"from":331,"to":2954},{"id":6785,"from":11,"to":100},{"id":496,"from":1086,"to":1088},{"id":1151,"from":107,"to":235},{"id":810,"from":107,"to":220},{"id":469,"from":1048,"to":1049},{"id":2676,"from":4770,"to":4772},{"id":3905,"from":3425,"to":6716},{"id":819,"from":107,"to":1780},{"id":3430,"from":2099,"to":5958},{"id":478,"from":1066,"to":4373},{"id":2003,"from":3573,"to":3799},{"id":6866,"from":1562,"to":10554},{"id":577,"from":1258,"to":1259},{"id":2784,"from":216,"to":4941},{"id":2443,"from":652,"to":4417},{"id":3098,"from":312,"to":5408},{"id":2757,"from":2396,"to":4886},{"id":2039,"from":220,"to":102},{"id":6534,"from":1383,"to":10232},{"id":245,"from":111,"to":579},{"id":2793,"from":3277,"to":4949},{"id":6193,"from":133,"to":9858},{"id":5852,"from":1211,"to":9432},{"id":2425,"from":10,"to":1839},{"id":2084,"from":69,"to":3930},{"id":3977,"from":645,"to":6853},{"id":2120,"from":218,"to":4002},{"id":1465,"from":28,"to":2912},{"id":1779,"from":263,"to":3418},{"id":1124,"from":60,"to":2332},{"id":3986,"from":24,"to":107},{"id":1097,"from":2285,"to":2286},{"id":3304,"from":1129,"to":5755},{"id":6615,"from":7629,"to":10344},{"id":5215,"from":12,"to":8652},{"id":4874,"from":798,"to":6602},{"id":1851,"from":1270,"to":3521},{"id":1133,"from":658,"to
  25. var nodesDataset = new vis.DataSet(nodes);
  26. var edgesDataset = new vis.DataSet(edges);
  27. var container = document.getElementById('mynetwork');
  28. var options = {
  29. nodes: {
  30. shape: 'dot',
  31. scaling: {
  32. min: 10,
  33. max: 200,
  34. label: {
  35. min: 50,
  36. max: 100,
  37. drawThreshold: 10,
  38. maxVisible: 60
  39. },
  40. },
  41. font: {
  42. size: 100,
  43. face: 'Tahoma'
  44. }
  45. },
  46. edges: {
  47. width: 0.2,
  48. color: {inherit: 'from'},
  49. smooth: {
  50. type: 'continuous'
  51. }
  52. },
  53. physics: false,
  54. configure:'physics',
  55. interaction: {
  56. tooltipDelay: 200,
  57. hideEdgesOnDrag: true
  58. }
  59. };
  60. var network = new vis.Network(container, {nodes: nodesDataset, edges: edgesDataset}, options);
  61. </script>
  62. </body>
  63. </html>