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.

166 lines
5.4 KiB

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
  3. <html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
  4. <title>Dynamic Data - Importing from Gephi (JSON)</title>
  5. <script type="text/javascript" src="../../dist/vis.js"></script>
  6. <link type="text/css" rel="stylesheet" href="../../dist/vis.css">
  7. <style type="text/css">
  8. #mynetwork {
  9. width: 800px;
  10. height: 800px;
  11. border: 1px solid lightgray;
  12. }
  13. div.nodeContent {
  14. position: relative;
  15. border: 1px solid lightgray;
  16. width:480px;
  17. height:780px;
  18. margin-top: -802px;
  19. margin-left: 810px;
  20. padding:10px;
  21. }
  22. pre {padding: 5px; margin: 5px; }
  23. .string { color: green; }
  24. .number { color: darkorange; }
  25. .boolean { color: blue; }
  26. .null { color: magenta; }
  27. .key { color: red; }
  28. </style>
  29. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  30. <body>
  31. <h2>Dynamic Data - Importing from Gephi (JSON)</h2>
  32. <div style="width:700px; font-size:14px; text-align: justify;">
  33. This example shows how to import a JSON file exported by Gephi. The two options available for the import are
  34. available through the checkboxes. You can download the Gephi JSON exporter here:
  35. <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
  36. All of Gephi's attributes are also contained within the node elements. This means you can access all of this data through the DataSet.
  37. <br />
  38. </div>
  39. <input type="checkbox" id="allowedToMove">: Allow to move after import. <br/>
  40. <input type="checkbox" id="parseColor">: Parse the color instead of copy (adds borders, highlights etc.)
  41. <div id="mynetwork"></div>
  42. <div class="nodeContent"><h4>Node Content:</h4> <pre id="nodeContent"></pre></div>
  43. <script type="text/javascript">
  44. var network;
  45. var nodes = new vis.DataSet();
  46. var edges = new vis.DataSet();
  47. var gephiImported;
  48. var allowedToMoveCheckbox = document.getElementById("allowedToMove");
  49. allowedToMoveCheckbox.onchange = redrawAll;
  50. var parseColorCheckbox = document.getElementById("parseColor");
  51. parseColorCheckbox.onchange = redrawAll;
  52. var nodeContent = document.getElementById("nodeContent");
  53. loadJSON("./data/WorldCup2014.json",redrawAll);
  54. var container = document.getElementById('mynetwork');
  55. var data = {
  56. nodes: nodes,
  57. edges: edges
  58. };
  59. var options = {
  60. nodes: {
  61. shape: 'dot',
  62. fontFace: "Tahoma"
  63. },
  64. edges: {
  65. width: 0.15,
  66. inheritColor: "from"
  67. },
  68. tooltip: {
  69. delay: 200,
  70. fontSize: 12,
  71. color: {
  72. background: "#fff"
  73. }
  74. },
  75. smoothCurves: {dynamic:false, type: "continuous"},
  76. stabilize: false,
  77. physics: {barnesHut: {gravitationalConstant: -10000, springConstant: 0.002, springLength: 150}},
  78. hideEdgesOnDrag: true
  79. };
  80. network = new vis.Network(container, data, options);
  81. /**
  82. * This function fills the DataSets. These DataSets will update the network.
  83. */
  84. function redrawAll(gephiJSON) {
  85. if (gephiJSON.nodes === undefined) {
  86. gephiJSON = gephiImported;
  87. }
  88. else {
  89. gephiImported = gephiJSON;
  90. }
  91. nodes.clear();
  92. edges.clear();
  93. var allowedToMove = allowedToMoveCheckbox.checked;
  94. var parseColor = parseColorCheckbox.checked;
  95. var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {allowedToMove:allowedToMove, parseColor:parseColor});
  96. // add the parsed data to the DataSets.
  97. nodes.add(parsed.nodes);
  98. edges.add(parsed.edges);
  99. var data = nodes.get(2); // get the data from node 2
  100. nodeContent.innerHTML = syntaxHighlight(data); // show the data in the div
  101. network.zoomExtent(); // zoom to fit
  102. }
  103. // from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
  104. function syntaxHighlight(json) {
  105. if (typeof json != 'string') {
  106. json = JSON.stringify(json, undefined, 2);
  107. }
  108. json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  109. return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
  110. var cls = 'number';
  111. if (/^"/.test(match)) {
  112. if (/:$/.test(match)) {
  113. cls = 'key';
  114. } else {
  115. cls = 'string';
  116. }
  117. } else if (/true|false/.test(match)) {
  118. cls = 'boolean';
  119. } else if (/null/.test(match)) {
  120. cls = 'null';
  121. }
  122. return '<span class="' + cls + '">' + match + '</span>';
  123. });
  124. }
  125. function loadJSON(path, success, error) {
  126. var xhr = new XMLHttpRequest();
  127. xhr.onreadystatechange = function() {
  128. if (xhr.readyState === 4) {
  129. if (xhr.status === 200) {
  130. success(JSON.parse(xhr.responseText));
  131. }
  132. else {
  133. error(xhr);
  134. }
  135. }
  136. };
  137. xhr.open("GET", path, true);
  138. xhr.send();
  139. }
  140. </script>
  141. </body></html>