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.

162 lines
5.1 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>Network | Static smooth curves - World Cup Network</title>
  5. <script type="text/javascript" src="../../../dist/vis.js"></script>
  6. <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.css">
  7. <script src="../datasources/WorldCup2014.js"></script>
  8. <style type="text/css">
  9. #mynetwork {
  10. width: 800px;
  11. height: 800px;
  12. border: 1px solid lightgray;
  13. }
  14. </style>
  15. <script src="../../googleAnalytics.js"></script>
  16. </head>
  17. <body>
  18. <h2>Dynamic Data - Neighbourhood Highlight</h2>
  19. <div style="width:800px; font-size:14px;">
  20. This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
  21. In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
  22. they are connected to the selected node. The code doing the highlighting only takes about 1ms, the rest of the time is the redrawing of the network (9200 edges..).
  23. <br /><br />
  24. </div>
  25. <div id="mynetwork"></div>
  26. <script type="text/javascript">
  27. var network;
  28. var allNodes;
  29. var highlightActive = false;
  30. var nodesDataset = new vis.DataSet(nodes); // these come from WorldCup2014.js
  31. var edgesDataset = new vis.DataSet(edges); // these come from WorldCup2014.js
  32. function redrawAll() {
  33. var container = document.getElementById('mynetwork');
  34. var options = {
  35. nodes: {
  36. shape: 'dot',
  37. scaling: {
  38. min: 10,
  39. max: 30,
  40. label: {
  41. min: 8,
  42. max: 30,
  43. drawThreshold: 12,
  44. maxVisible: 20
  45. }
  46. },
  47. font: {
  48. size: 12,
  49. face: 'Tahoma'
  50. }
  51. },
  52. edges: {
  53. width: 0.15,
  54. color: {inherit: 'from'},
  55. smooth: {
  56. type: 'continuous'
  57. }
  58. },
  59. physics: false,
  60. interaction: {
  61. tooltipDelay: 200,
  62. hideEdgesOnDrag: true
  63. }
  64. };
  65. var data = {nodes:nodesDataset, edges:edgesDataset} // Note: data is coming from ./datasources/WorldCup2014.js
  66. network = new vis.Network(container, data, options);
  67. // get a JSON object
  68. allNodes = nodesDataset.get({returnType:"Object"});
  69. network.on("click",neighbourhoodHighlight);
  70. }
  71. function neighbourhoodHighlight(params) {
  72. // if something is selected:
  73. if (params.nodes.length > 0) {
  74. highlightActive = true;
  75. var i,j;
  76. var selectedNode = params.nodes[0];
  77. var degrees = 2;
  78. // mark all nodes as hard to read.
  79. for (var nodeId in allNodes) {
  80. allNodes[nodeId].color = 'rgba(200,200,200,0.5)';
  81. if (allNodes[nodeId].hiddenLabel === undefined) {
  82. allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
  83. allNodes[nodeId].label = undefined;
  84. }
  85. }
  86. var connectedNodes = network.getConnectedNodes(selectedNode);
  87. var allConnectedNodes = [];
  88. // get the second degree nodes
  89. for (i = 1; i < degrees; i++) {
  90. for (j = 0; j < connectedNodes.length; j++) {
  91. allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j]));
  92. }
  93. }
  94. // all second degree nodes get a different color and their label back
  95. for (i = 0; i < allConnectedNodes.length; i++) {
  96. allNodes[allConnectedNodes[i]].color = 'rgba(150,150,150,0.75)';
  97. if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
  98. allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
  99. allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
  100. }
  101. }
  102. // all first degree nodes get their own color and their label back
  103. for (i = 0; i < connectedNodes.length; i++) {
  104. allNodes[connectedNodes[i]].color = undefined;
  105. if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
  106. allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
  107. allNodes[connectedNodes[i]].hiddenLabel = undefined;
  108. }
  109. }
  110. // the main node gets its own color and its label back.
  111. allNodes[selectedNode].color = undefined;
  112. if (allNodes[selectedNode].hiddenLabel !== undefined) {
  113. allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
  114. allNodes[selectedNode].hiddenLabel = undefined;
  115. }
  116. }
  117. else if (highlightActive === true) {
  118. // reset all nodes
  119. for (var nodeId in allNodes) {
  120. allNodes[nodeId].color = undefined;
  121. if (allNodes[nodeId].hiddenLabel !== undefined) {
  122. allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
  123. allNodes[nodeId].hiddenLabel = undefined;
  124. }
  125. }
  126. highlightActive = false
  127. }
  128. // transform the object into an array
  129. var updateArray = [];
  130. for (nodeId in allNodes) {
  131. if (allNodes.hasOwnProperty(nodeId)) {
  132. updateArray.push(allNodes[nodeId]);
  133. }
  134. }
  135. nodesDataset.update(updateArray);
  136. }
  137. redrawAll()
  138. </script>
  139. </body></html>