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.

98 lines
2.3 KiB

  1. <!doctype html>
  2. <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF8">
  6. <title>Network | Static smooth curves - World Cup Network</title>
  7. <script type="text/javascript" src="../../../dist/vis.js"></script>
  8. <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css">
  9. <script src="../datasources/WorldCup2014.js"></script>
  10. <style type="text/css">
  11. #mynetwork {
  12. width: 800px;
  13. height: 800px;
  14. border: 1px solid lightgray;
  15. }
  16. </style>
  17. <script src="../../googleAnalytics.js"></script>
  18. </head>
  19. <body>
  20. <h2>Performance - World Cup Network</h2>
  21. <div style="width:700px; font-size:14px;">
  22. This example shows the performance of vis with a larger network. The edges in
  23. particular (~9200) are very computationally intensive
  24. to draw. Drag and hold the graph to see the performance difference if the
  25. edges are hidden.
  26. <br/><br/>
  27. We use the following physics configuration: <br/>
  28. <code>{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001,
  29. springLength: 200}}</code>
  30. <br/><br/>
  31. </div>
  32. <div id="mynetwork"></div>
  33. <script type="text/javascript">
  34. var network;
  35. function redrawAll() {
  36. // remove positoins
  37. for (var i = 0; i < nodes.length; i++) {
  38. delete nodes[i].x;
  39. delete nodes[i].y;
  40. }
  41. // create a network
  42. var container = document.getElementById('mynetwork');
  43. var data = {
  44. nodes: nodes,
  45. edges: edges
  46. };
  47. var options = {
  48. nodes: {
  49. shape: 'dot',
  50. scaling: {
  51. min: 10,
  52. max: 30
  53. },
  54. font: {
  55. size: 12,
  56. face: 'Tahoma'
  57. }
  58. },
  59. edges: {
  60. width: 0.15,
  61. color: {inherit: 'from'},
  62. smooth: {
  63. type: 'continuous'
  64. }
  65. },
  66. physics: {
  67. stabilization: false,
  68. barnesHut: {
  69. gravitationalConstant: -80000,
  70. springConstant: 0.001,
  71. springLength: 200
  72. }
  73. },
  74. interaction: {
  75. tooltipDelay: 200,
  76. hideEdgesOnDrag: true
  77. }
  78. };
  79. // Note: data is coming from ./datasources/WorldCup2014.js
  80. network = new vis.Network(container, data, options);
  81. }
  82. redrawAll()
  83. </script>
  84. </body>
  85. </html>