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.

87 lines
2.3 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.css">
  7. <style type="text/css">
  8. #mynetwork {
  9. width: 800px;
  10. height: 800px;
  11. border: 1px solid lightgray;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h2>Dynamic Data - Neighbourhood Highlight</h2>
  17. <div style="width:700px; font-size:14px;">
  18. 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.
  19. 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
  20. they are connected to the selected node. The code doing the highlighting only takes about 20ms, the rest of the time is the redrawing of the network (9200 edges..).
  21. </div>
  22. <div id="mynetwork"></div>
  23. <script type="text/javascript">
  24. var network;
  25. var nodes = new vis.DataSet();
  26. var edges = new vis.DataSet();
  27. function redrawAll() {
  28. nodes.clear();
  29. edges.clear();
  30. network = null;
  31. // create an array with nodes
  32. nodes.add(nodesData);
  33. edges.add(edgesData);
  34. var container = document.getElementById('mynetwork');
  35. var data = {
  36. nodes: nodes,
  37. edges: edges
  38. };
  39. var options = {
  40. nodes: {
  41. shape: 'dot',
  42. radiusMin: 10,
  43. radiusMax: 30,
  44. fontSize: 12,
  45. fontFace: "Tahoma"
  46. },
  47. edges: {
  48. width: 0.15,
  49. inheritColor: "from"
  50. },
  51. tooltip: {
  52. delay: 200,
  53. fontSize: 12,
  54. color: {
  55. background: "#fff"
  56. }
  57. },
  58. smoothCurves: {dynamic:false, type: "continuous"},
  59. stabilize: false,
  60. physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0, springConstant: 0}},
  61. hideEdgesOnDrag: true
  62. };
  63. network = new vis.Network(container, data, options);
  64. }
  65. redrawAll()
  66. </script>
  67. </body></html>