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.

174 lines
4.2 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>Dynamic Data - Importing from Gephi (JSON)</title>
  7. <script type="text/javascript" src="../exampleUtil.js"></script>
  8. <script type="text/javascript" src="../../../dist/vis.js"></script>
  9. <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css">
  10. <style type="text/css">
  11. #mynetwork {
  12. width: 800px;
  13. height: 800px;
  14. border: 1px solid lightgray;
  15. }
  16. div.nodeContent {
  17. position: relative;
  18. border: 1px solid lightgray;
  19. width: 480px;
  20. height: 780px;
  21. margin-top: -802px;
  22. margin-left: 810px;
  23. padding: 10px;
  24. }
  25. pre {
  26. padding: 5px;
  27. margin: 5px;
  28. }
  29. .string {
  30. color: green;
  31. }
  32. .number {
  33. color: darkorange;
  34. }
  35. .boolean {
  36. color: blue;
  37. }
  38. .null {
  39. color: magenta;
  40. }
  41. .key {
  42. color: red;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <h2>Dynamic Data - Importing from Gephi (JSON)</h2>
  48. <div style="width:700px; font-size:14px; text-align: justify;">
  49. This example shows how to import a JSON file exported by Gephi. The two
  50. options available for the import are
  51. available through the checkboxes. You can download the Gephi JSON exporter
  52. here:
  53. <a href="https://gephi.org/plugins/#/plugin/jsonexporter-plugin" target="_blank">https://gephi.org/plugins/#/plugin/jsonexporter-plugin</a>.
  54. All of Gephi's attributes are also contained within the node elements. This
  55. means you can access all of this data through the DataSet.
  56. <br/>
  57. </div>
  58. <p>
  59. <label><input type="checkbox" id="fixed" checked="checked"/> Fix in place after import.</label><br>
  60. <label><input type="checkbox" id="parseColor"/> Parse the color instead of
  61. copy (adds borders, highlights etc.)</label>
  62. </p>
  63. <div id="mynetwork"></div>
  64. <div class="nodeContent"><h4>Node Content:</h4>
  65. <pre id="nodeContent"></pre>
  66. </div>
  67. <script type="text/javascript">
  68. var network;
  69. var nodes = new vis.DataSet();
  70. var edges = new vis.DataSet();
  71. var gephiImported;
  72. var fixedCheckbox = document.getElementById('fixed');
  73. fixedCheckbox.onchange = redrawAll;
  74. var parseColorCheckbox = document.getElementById('parseColor');
  75. parseColorCheckbox.onchange = redrawAll;
  76. var nodeContent = document.getElementById('nodeContent');
  77. loadJSON('../datasources/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
  78. var container = document.getElementById('mynetwork');
  79. var data = {
  80. nodes: nodes,
  81. edges: edges
  82. };
  83. var options = {
  84. nodes: {
  85. shape: 'dot',
  86. font: {
  87. face: 'Tahoma'
  88. }
  89. },
  90. edges: {
  91. width: 0.15,
  92. smooth: {
  93. type: 'continuous'
  94. }
  95. },
  96. interaction: {
  97. tooltipDelay: 200,
  98. hideEdgesOnDrag: true
  99. },
  100. physics: {
  101. stabilization: false,
  102. barnesHut: {
  103. gravitationalConstant: -10000,
  104. springConstant: 0.002,
  105. springLength: 150
  106. }
  107. }
  108. };
  109. network = new vis.Network(container, data, options);
  110. network.on('click', function (params) {
  111. if (params.nodes.length > 0) {
  112. var data = nodes.get(params.nodes[0]); // get the data from selected node
  113. nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
  114. }
  115. })
  116. /**
  117. * This function fills the DataSets. These DataSets will update the network.
  118. */
  119. function redrawAll(gephiJSON) {
  120. if (gephiJSON.nodes === undefined) {
  121. gephiJSON = gephiImported;
  122. }
  123. else {
  124. gephiImported = gephiJSON;
  125. }
  126. nodes.clear();
  127. edges.clear();
  128. var fixed = fixedCheckbox.checked;
  129. var parseColor = parseColorCheckbox.checked;
  130. var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
  131. fixed: fixed,
  132. parseColor: parseColor
  133. });
  134. // add the parsed data to the DataSets.
  135. nodes.add(parsed.nodes);
  136. edges.add(parsed.edges);
  137. var data = nodes.get(2); // get the data from node 2 as example
  138. nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
  139. network.fit(); // zoom to fit
  140. }
  141. </script>
  142. </body>
  143. </html>