From 19ec345dd2e0359990882eb66f47e5ea3b11bbe4 Mon Sep 17 00:00:00 2001
From: sbosse <sbosse@uni-bremen.de>
Date: Mon, 21 Jul 2025 22:57:51 +0200
Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025

---
 .../network/data/importingFromGephi.html      | 174 ++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 js/dos/ext/vis/examples/network/data/importingFromGephi.html
diff --git a/js/dos/ext/vis/examples/network/data/importingFromGephi.html b/js/dos/ext/vis/examples/network/data/importingFromGephi.html
new file mode 100644
index 0000000..e287d85
--- /dev/null
+++ b/js/dos/ext/vis/examples/network/data/importingFromGephi.html
@@ -0,0 +1,174 @@
+<!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>Dynamic Data - Importing from Gephi (JSON)</title>
+  <script type="text/javascript" src="../exampleUtil.js"></script>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link type="text/css" rel="stylesheet" href="../../../dist/vis.css">
+
+  <style type="text/css">
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+
+    div.nodeContent {
+      position: relative;
+      border: 1px solid lightgray;
+      width: 480px;
+      height: 780px;
+      margin-top: -802px;
+      margin-left: 810px;
+      padding: 10px;
+    }
+
+    pre {
+      padding: 5px;
+      margin: 5px;
+    }
+
+    .string {
+      color: green;
+    }
+
+    .number {
+      color: darkorange;
+    }
+
+    .boolean {
+      color: blue;
+    }
+
+    .null {
+      color: magenta;
+    }
+
+    .key {
+      color: red;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
+
+<div style="width:700px; font-size:14px; text-align: justify;">
+  This example shows how to import a JSON file exported by Gephi. The two
+  options available for the import are
+  available through the checkboxes. You can download the Gephi JSON exporter
+  here:
+  <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
+  All of Gephi's attributes are also contained within the node elements. This
+  means you can access all of this data through the DataSet.
+  <br/>
+</div>
+
+<p>
+  <label><input type="checkbox" id="fixed" checked="checked"/> Fix in place after import.</label><br>
+  <label><input type="checkbox" id="parseColor"/> Parse the color instead of
+    copy (adds borders, highlights etc.)</label>
+</p>
+
+<div id="mynetwork"></div>
+<div class="nodeContent"><h4>Node Content:</h4>
+  <pre id="nodeContent"></pre>
+</div>
+
+<script type="text/javascript">
+  var network;
+
+  var nodes = new vis.DataSet();
+  var edges = new vis.DataSet();
+  var gephiImported;
+  var fixedCheckbox = document.getElementById('fixed');
+  fixedCheckbox.onchange = redrawAll;
+
+  var parseColorCheckbox = document.getElementById('parseColor');
+  parseColorCheckbox.onchange = redrawAll;
+
+  var nodeContent = document.getElementById('nodeContent');
+
+  loadJSON('../datasources/WorldCup2014.json', redrawAll, function(err) {console.log('error')});
+
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    nodes: {
+      shape: 'dot',
+      font: {
+        face: 'Tahoma'
+      }
+    },
+    edges: {
+      width: 0.15,
+      smooth: {
+        type: 'continuous'
+      }
+    },
+    interaction: {
+      tooltipDelay: 200,
+      hideEdgesOnDrag: true
+    },
+    physics: {
+      stabilization: false,
+      barnesHut: {
+        gravitationalConstant: -10000,
+        springConstant: 0.002,
+        springLength: 150
+      }
+    }
+  };
+
+  network = new vis.Network(container, data, options);
+  network.on('click', function (params) {
+    if (params.nodes.length > 0) {
+      var data = nodes.get(params.nodes[0]); // get the data from selected node
+      nodeContent.innerHTML = JSON.stringify(data, undefined, 3); // show the data in the div
+    }
+  })
+
+  /**
+   * This function fills the DataSets. These DataSets will update the network.
+   */
+  function redrawAll(gephiJSON) {
+    if (gephiJSON.nodes === undefined) {
+      gephiJSON = gephiImported;
+    }
+    else {
+      gephiImported = gephiJSON;
+    }
+
+    nodes.clear();
+    edges.clear();
+
+    var fixed = fixedCheckbox.checked;
+    var parseColor = parseColorCheckbox.checked;
+
+    var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
+      fixed: fixed,
+      parseColor: parseColor
+    });
+
+    // add the parsed data to the DataSets.
+    nodes.add(parsed.nodes);
+    edges.add(parsed.edges);
+
+    var data = nodes.get(2); // get the data from node 2 as example
+    nodeContent.innerHTML = JSON.stringify(data,undefined,3); // show the data in the div
+    network.fit(); // zoom to fit
+  }
+
+</script>
+
+
+</body>
+</html>
