Mon 21 Jul 22:43:21 CEST 2025

2025-07-21 22:58:51 +02:00 · 2025-07-21 22:58:51 +02:00 · 35cb21fed5
commit 35cb21fed5
parent bc52ef89a6
1 changed files with 98 additions and 0 deletions
--- a/js/dos/ext/vis/examples/network/exampleApplications/worldCupPerformance.html
+++ b/js/dos/ext/vis/examples/network/exampleApplications/worldCupPerformance.html
@ -0,0 +1,98 @@
+<!doctype html>
+<!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
+<html>
+<head>
+  <meta http-equiv="content-type" content="text/html; charset=UTF8">
+  <title>Network | Static smooth curves - World Cup Network</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
+
+  <script src="../datasources/WorldCup2014.js"></script>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<h2>Performance - World Cup Network</h2>
+
+<div style="width:700px; font-size:14px;">
+  This example shows the performance of vis with a larger network. The edges in
+  particular (~9200) are very computationally intensive
+  to draw. Drag and hold the graph to see the performance difference if the
+  edges are hidden.
+  <br/><br/>
+  We use the following physics configuration: <br/>
+  <code>{barnesHut: {gravitationalConstant: -80000, springConstant: 0.001,
+    springLength: 200}}</code>
+  <br/><br/>
+</div>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  var network;
+
+
+  function redrawAll() {
+    // remove positoins
+    for (var i = 0; i < nodes.length; i++) {
+      delete nodes[i].x;
+      delete nodes[i].y;
+    }
+
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+      nodes: nodes,
+      edges: edges
+    };
+    var options = {
+      nodes: {
+        shape: 'dot',
+        scaling: {
+          min: 10,
+          max: 30
+        },
+        font: {
+          size: 12,
+          face: 'Tahoma'
+        }
+      },
+      edges: {
+        width: 0.15,
+        color: {inherit: 'from'},
+        smooth: {
+          type: 'continuous'
+        }
+      },
+      physics: {
+        stabilization: false,
+        barnesHut: {
+          gravitationalConstant: -80000,
+          springConstant: 0.001,
+          springLength: 200
+        }
+      },
+      interaction: {
+        tooltipDelay: 200,
+        hideEdgesOnDrag: true
+      }
+    };
+
+    // Note: data is coming from ./datasources/WorldCup2014.js
+    network = new vis.Network(container, data, options);
+  }
+
+  redrawAll()
+</script>
+</body>
+</html>