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.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. <script src="../../googleAnalytics.js"></script>
  46. </head>
  47. <body>
  48. <h2>Dynamic Data - Importing from Gephi (JSON)</h2>
  49. <div style="width:700px; font-size:14px; text-align: justify;">
  50. This example shows how to import a JSON file exported by Gephi. The two
  51. options available for the import are
  52. available through the checkboxes. You can download the Gephi JSON exporter
  53. here:
  54. <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
  55. All of Gephi's attributes are also contained within the node elements. This
  56. means you can access all of this data through the DataSet.
  57. <br/>
  58. </div>
  59. <p>
  60. <label><input type="checkbox" id="fixed" checked="checked"/> Fix in place after import.</label><br>
  61. <label><input type="checkbox" id="parseColor"/> Parse the color instead of
  62. copy (adds borders, highlights etc.)</label>
  63. </p>
  64. <div id="mynetwork"></div>
  65. <div class="nodeContent"><h4>Node Content:</h4>
  66. <pre id="nodeContent"></pre>
  67. </div>
  68. <script type="text/javascript">
  69. var network;
  70. var nodes = new vis.DataSet();
  71. var edges = new vis.DataSet();
  72. var gephiImported;
  73. var fixedCheckbox = document.getElementById('fixed');
  74. fixedCheckbox.onchange = redrawAll;
  75. var parseColorCheckbox = document.getElementById('parseColor');
  76. parseColorCheckbox.onchange = redrawAll;
  77. var nodeContent = document.getElementById('nodeContent');
  78. loadJSON('../datasources/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
  79. var container = document.getElementById('mynetwork');
  80. var data = {
  81. nodes: nodes,
  82. edges: edges
  83. };
  84. var options = {
  85. nodes: {
  86. shape: 'dot',
  87. font: {
  88. face: 'Tahoma'
  89. }
  90. },
  91. edges: {
  92. width: 0.15,
  93. smooth: {
  94. type: 'continuous'
  95. }
  96. },
  97. interaction: {
  98. tooltipDelay: 200,
  99. hideEdgesOnDrag: true
  100. },
  101. physics: {
  102. stabilization: false,
  103. barnesHut: {
  104. gravitationalConstant: -10000,
  105. springConstant: 0.002,
  106. springLength: 150
  107. }
  108. }
  109. };
  110. network = new vis.Network(container, data, options);
  111. network.on('click', function (params) {
  112. if (params.nodes.length > 0) {
  113. var data = nodes.get(params.nodes[0]); // get the data from selected node
  114. nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
  115. }
  116. })
  117. /**
  118. * This function fills the DataSets. These DataSets will update the network.
  119. */
  120. function redrawAll(gephiJSON) {
  121. if (gephiJSON.nodes === undefined) {
  122. gephiJSON = gephiImported;
  123. }
  124. else {
  125. gephiImported = gephiJSON;
  126. }
  127. nodes.clear();
  128. edges.clear();
  129. var fixed = fixedCheckbox.checked;
  130. var parseColor = parseColorCheckbox.checked;
  131. var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
  132. fixed: fixed,
  133. parseColor: parseColor
  134. });
  135. // add the parsed data to the DataSets.
  136. nodes.add(parsed.nodes);
  137. edges.add(parsed.edges);
  138. var data = nodes.get(2); // get the data from node 2 as example
  139. nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
  140. network.fit(); // zoom to fit
  141. }
  142. </script>
  143. </body>
  144. </html>