summaryrefslogtreecommitdiff
path: root/www/lib/vis/examples/network/other
diff options
context:
space:
mode:
authorPliable Pixels <pliablepixels@gmail.com>2017-09-27 12:42:48 -0400
committerPliable Pixels <pliablepixels@gmail.com>2017-09-27 12:42:48 -0400
commit210e8feae2fb4842bfb2de38666e6c41671fef3c (patch)
treecbdafa34b1a6260bb20236d7e9de9eb1b690a1c5 /www/lib/vis/examples/network/other
parente7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff)
removed lib
Diffstat (limited to 'www/lib/vis/examples/network/other')
-rw-r--r--www/lib/vis/examples/network/other/animationShowcase.html279
-rw-r--r--www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html107
-rw-r--r--www/lib/vis/examples/network/other/clustering.html141
-rw-r--r--www/lib/vis/examples/network/other/clusteringByZoom.html160
-rw-r--r--www/lib/vis/examples/network/other/clustersOfclusters.html75
-rw-r--r--www/lib/vis/examples/network/other/configuration.html83
-rw-r--r--www/lib/vis/examples/network/other/manipulation.html193
-rw-r--r--www/lib/vis/examples/network/other/navigation.html135
-rw-r--r--www/lib/vis/examples/network/other/performance.html91
-rw-r--r--www/lib/vis/examples/network/other/saveAndLoad.html177
10 files changed, 0 insertions, 1441 deletions
diff --git a/www/lib/vis/examples/network/other/animationShowcase.html b/www/lib/vis/examples/network/other/animationShowcase.html
deleted file mode 100644
index 1e0d82ae..00000000
--- a/www/lib/vis/examples/network/other/animationShowcase.html
+++ /dev/null
@@ -1,279 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Network | Animation</title>
-
- <style type="text/css">
- body {
- font: 10pt sans;
- }
- #mynetwork {
- width: 600px;
- height: 600px;
- border: 1px solid lightgray;
- }
-
- div.left {
- position:relative;
- float:left;
- width:300px;
- border: 1px #c7c7c7 solid;
- height:590px;
- padding:5px;
- }
-
- div.right {
- padding-left:10px;
- float:left;
- width:600px;
- }
-
- div.bottom {
- position:absolute;
- bottom:5px;
- }
- </style>
-
- <script type="text/javascript" src="../exampleUtil.js"></script>
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript">
- var nodes = null;
- var edges = null;
- var network = null;
- var offsetx, offsety, scale, positionx, positiony, duration, easingFunction, doButton, focusButton, showButton;
- var statusUpdateSpan;
- var finishMessage = '';
- var showInterval = false;
- var showPhase = 1;
- var amountOfNodes = 25;
-
- function destroy() {
- if (network !== null) {
- network.destroy();
- network = null;
- }
- }
-
- function updateValues() {
- offsetx = parseInt(document.getElementById('offsetx').value);
- offsety = parseInt(document.getElementById('offsety').value);
- duration = parseInt(document.getElementById('duration').value);
- scale = parseFloat(document.getElementById('scale').value);
- positionx = parseInt(document.getElementById('positionx').value);
- positiony = parseInt(document.getElementById('positiony').value);
- easingFunction = document.getElementById('easingFunction').value;
- }
-
- function draw() {
- destroy();
- statusUpdateSpan = document.getElementById('statusUpdate');
- doButton = document.getElementById('btnDo');
- focusButton = document.getElementById('btnFocus');
- showButton = document.getElementById('btnShow');
-
- // randomly create some nodes and edges
- var data = getScaleFreeNetwork(amountOfNodes);
-
- // create a network
- var container = document.getElementById('mynetwork');
- var options = {
- physics: {
- stabilization: {
- iterations: 1200
- }
- }
- };
- network = new vis.Network(container, data, options);
-
- // add event listeners
- network.on('select', function(params) {
- document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
- });
- network.on('stabilized', function (params) {
- document.getElementById('stabilization').innerHTML = 'Stabilization took ' + params.iterations + ' iterations.';
- });
- network.on('animationFinished', function() {
- statusUpdateSpan.innerHTML = finishMessage;
- })
- }
-
- function fitAnimated() {
- updateValues();
-
- var options = {offset: {x:offsetx,y:offsety},
- duration: duration,
- easingFunction: easingFunction
- };
- statusUpdateSpan.innerHTML = 'Doing fit() Animation.';
- finishMessage = 'Animation finished.';
- network.fit({animation:options});
- }
-
- function doDefaultAnimation() {
- updateValues();
-
- var options = {
- position: {x:positionx,y:positiony},
- scale: scale,
- offset: {x:offsetx,y:offsety},
- animation: true // default duration is 1000ms and default easingFunction is easeInOutQuad.
- };
- statusUpdateSpan.innerHTML = 'Doing Animation.';
- finishMessage = 'Animation finished.';
- network.moveTo(options);
- }
-
- function doAnimation() {
- updateValues();
-
- var options = {
- position: {x:positionx,y:positiony},
- scale: scale,
- offset: {x:offsetx,y:offsety},
- animation: {
- duration: duration,
- easingFunction: easingFunction
- }
- };
- statusUpdateSpan.innerHTML = 'Doing Animation.';
- finishMessage = 'Animation finished.';
- network.moveTo(options);
- }
-
- function focusRandom() {
- updateValues();
-
- var nodeId = Math.floor(Math.random() * amountOfNodes);
- var options = {
- // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
- scale: scale,
- offset: {x:offsetx,y:offsety},
- animation: {
- duration: duration,
- easingFunction: easingFunction
- }
- };
- statusUpdateSpan.innerHTML = 'Focusing on node: ' + nodeId;
- finishMessage = 'Node: ' + nodeId + ' in focus.';
- network.focus(nodeId, options);
- }
-
-
-
- function startShow() {
- updateValues();
- if (showInterval !== false) {
- showInterval = false;
- showButton.value = 'Start a show!';
- network.fit();
- }
- else {
- showButton.value = 'Stop the show!';
- focusRandom();
- setTimeout(doTheShow, duration);
- showInterval = true;
- }
- }
-
- function doTheShow() {
- updateValues();
- if (showInterval == true) {
- if (showPhase == 0) {
- focusRandom();
- showPhase = 1;
- }
- else {
- fitAnimated();
- showPhase = 0;
- }
- setTimeout(doTheShow, duration);
- }
- }
- </script>
- <script src="../../googleAnalytics.js"></script>
-</head>
-
-<body onload="draw();">
-<h2>Camera animations</h2>
-<div style="width:700px; font-size:14px;">
- You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can
- also be (partially) supplied to the .fit() and .focusOnNode() methods. These are explained in the docs.
- <br /><br/>
- The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using
- the default animation values for duration and easing function. The focusOnNode takes everything except the position and the fit takes only the duration and easing function.
- <br/><br/>
- Here you can see a full description of the options you can supply to moveTo:
-</div>
-<pre>
-var moveToOptions = {
- position: {x:x, y:x}, // position to animate to (Numbers)
- scale: 1.0, // scale to animate to (Number)
- offset: {x:x, y:y}, // offset from the center in DOM pixels (Numbers)
- animation: { // animation object, can also be Boolean
- duration: 1000, // animation duration in milliseconds (Number)
- easingFunction: "easeInOutQuad" // Animation easing function, available are:
- } // linear, easeInQuad, easeOutQuad, easeInOutQuad,
-} // easeInCubic, easeOutCubic, easeInOutCubic,
- // easeInQuart, easeOutQuart, easeInOutQuart,
- // easeInQuint, easeOutQuint, easeInOutQuint
-</pre>
-<div class="left">
- <table>
- <tr>
- <td>position x</td><td><input type="text" value="300" id="positionx" style="width:170px;"></td>
- </tr>
- <tr>
- <td>position y</td><td><input type="text" value="300" id="positiony" style="width:170px;"></td>
- </tr>
- <tr>
- <td>scale</td><td><input type="text" value="1.0" id="scale" style="width:170px;"></td>
- </tr>
- <tr>
- <td>offset x</td><td><input type="text" value="0" id="offsetx" style="width:170px;"> px</td>
- </tr>
- <tr>
- <td>offset y</td><td><input type="text" value="0" id="offsety" style="width:170px;"> px</td>
- </tr>
- <tr>
- <td>duration</td><td><input type="text" value="1000" id="duration" style="width:170px;"> ms</td>
- </tr>
- <tr>
- <td>easingFunction</td><td>
- <select id="easingFunction" style="width:174px;">
- <option value="linear">linear</option>
- <option value="easeInQuad">easeInQuad</option>
- <option value="easeOutQuad">easeOutQuad</option>
- <option value="easeInOutQuad" selected="selected">easeInOutQuad</option>
- <option value="easeInCubic">easeInCubic</option>
- <option value="easeOutCubic">easeOutCubic</option>
- <option value="easeInOutCubic">easeInOutCubic</option>
- <option value="easeInQuart">easeInQuart</option>
- <option value="easeOutQuart">easeOutQuart</option>
- <option value="easeInOutQuart">easeInOutQuart</option>
- <option value="easeInQuint">easeInQuint</option>
- <option value="easeOutQuint">easeOutQuint</option>
- <option value="easeInOutQuint">easeInOutQuint</option>
- </select>
- </td>
- </tr>
- </table>
- <div class="bottom">
- <span id="statusUpdate"></span><br />
- Examples:
- <input type="button" onclick="doAnimation();" value="Animate with above settings." style="width:300px;" id="btnDo"> <br/>
- <input type="button" onclick="doDefaultAnimation();" value="Animate with default settings." style="width:300px;" id="btnDoDefault"> <br/>
- <input type="button" onclick="fitAnimated();" value="Animated fit()." style="width:300px;" id="btnZoom"> <br/>
- <input type="button" onclick="focusRandom();" value="Focus on random node." style="width:300px;" id="btnFocus"><br/>
- <input type="button" onclick="startShow();" value="Start a show!" style="width:300px;" id="btnShow"><br/>
- </div>
-</div>
-<div class="right">
- <div id="mynetwork"></div>
-
- <p id="selection"></p>
- <p id="stabilization"></p>
-</div>
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html
deleted file mode 100644
index 145dcb72..00000000
--- a/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html
+++ /dev/null
@@ -1,107 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Network | Clustering</title>
-
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
-
- <style type="text/css">
- #mynetwork {
- width: 600px;
- height: 600px;
- border: 1px solid lightgray;
- }
- p {
- max-width:600px;
- }
-
- h4 {
- margin-bottom:3px;
- }
- </style>
- <script src="../../googleAnalytics.js"></script>
-</head>
-
-<body>
-
-
-<p>
-Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li>
-<li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li>
-<li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li>
-</ul>
-</p>
-
-<div id="mynetwork"></div>
-<pre id="eventSpan"></pre>
-
-<script type="text/javascript">
- // create an array with nodes
- var nodes = [
- {id: 1, label: 'Node 1', color:'orange'},
- {id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}},
- {id: 3, label: 'Node 3', color:'orange'},
- {id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}},
- {id: 5, label: 'Node 5', color:'orange'},
- {id: 6, label: 'cid = 1', cid:1, color:'orange'},
- {id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}},
- {id: 8, label: 'cid = 1', cid:1, color:'lime'},
- {id: 9, label: 'cid = 1', cid:1, color:'orange'},
- {id: 10, label: 'cid = 1', cid:1, color:'lime'}
- ];
-
- // create an array with edges
- var edges = [
- {from: 1, to: 2},
- {from: 1, to: 3},
- {from: 10, to: 4},
- {from: 2, to: 5},
- {from: 6, to: 2},
- {from: 7, to: 5},
- {from: 8, to: 6},
- {from: 9, to: 7},
- {from: 10, to: 9}
- ];
-
- // create a network
- var container = document.getElementById('mynetwork');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {layout:{randomSeed:8}};
- var network = new vis.Network(container, data, options);
- var clusterOptionsByData = {
- joinCondition:function(childOptions) {
- return childOptions.cid == 1;
- },
- clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
- };
- network.cluster(clusterOptionsByData);
-
- network.on("selectNode", function(params) {
- if (params.nodes.length == 1) {
- if (network.isCluster(params.nodes[0]) == true) {
- network.clustering.updateClusteredNode(params.nodes[0], {shape : 'star'});
- }
- }
- });
-
- network.on("selectEdge", function(params) {
- if (params.edges.length == 1) {
- // Single edge selected
- var obj = {};
- obj.clicked_id = params.edges[0];
- network.clustering.updateEdge(params.edges[0], {color : '#aa0000'});
- obj.base_edge = network.clustering.getBaseEdge(params.edges[0]);
- obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]);
- document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4);
- }
- });
-
-
-</script>
-
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/clustering.html b/www/lib/vis/examples/network/other/clustering.html
deleted file mode 100644
index bd68c42f..00000000
--- a/www/lib/vis/examples/network/other/clustering.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Network | Clustering</title>
-
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
-
- <style type="text/css">
- #mynetwork {
- width: 600px;
- height: 600px;
- border: 1px solid lightgray;
- }
- p {
- max-width:600px;
- }
-
- h4 {
- margin-bottom:3px;
- }
- </style>
- <script src="../../googleAnalytics.js"></script>
-</head>
-
-<body>
-
-
-<p>
-Click any of the buttons below to cluster the network. On every push the network will be reinitialized first. You can click on a cluster to open it.
-</p>
-
-<input type="button" onclick="clusterByCid()" value="Cluster all nodes with CID = 1"> <br />
-<input type="button" onclick="clusterByColor()" value="Cluster by color"> <br />
-<input type="button" onclick="clusterByConnection()" value="Cluster 'node 1' by connections"> <br />
-<input type="button" onclick="clusterOutliers()" value="Cluster outliers"> <br />
-<input type="button" onclick="clusterByHubsize()" value="Cluster by hubsize"> <br />
-
-<div id="mynetwork"></div>
-
-<script type="text/javascript">
- // create an array with nodes
- var nodes = [
- {id: 1, label: 'Node 1', color:'orange'},
- {id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}},
- {id: 3, label: 'Node 3', color:'orange'},
- {id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}},
- {id: 5, label: 'Node 5', color:'orange'},
- {id: 6, label: 'cid = 1', cid:1, color:'orange'},
- {id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}},
- {id: 8, label: 'cid = 1', cid:1, color:'lime'},
- {id: 9, label: 'cid = 1', cid:1, color:'orange'},
- {id: 10, label: 'cid = 1', cid:1, color:'lime'}
- ];
-
- // create an array with edges
- var edges = [
- {from: 1, to: 2},
- {from: 1, to: 3},
- {from: 10, to: 4},
- {from: 2, to: 5},
- {from: 6, to: 2},
- {from: 7, to: 5},
- {from: 8, to: 6},
- {from: 9, to: 7},
- {from: 10, to: 9}
- ];
-
- // create a network
- var container = document.getElementById('mynetwork');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {layout:{randomSeed:8}};
- var network = new vis.Network(container, data, options);
- network.on("selectNode", function(params) {
- if (params.nodes.length == 1) {
- if (network.isCluster(params.nodes[0]) == true) {
- network.openCluster(params.nodes[0]);
- }
- }
- });
-
- function clusterByCid() {
- network.setData(data);
- var clusterOptionsByData = {
- joinCondition:function(childOptions) {
- return childOptions.cid == 1;
- },
- clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'}
- };
- network.cluster(clusterOptionsByData);
- }
- function clusterByColor() {
- network.setData(data);
- var colors = ['orange','lime','DarkViolet'];
- var clusterOptionsByData;
- for (var i = 0; i < colors.length; i++) {
- var color = colors[i];
- clusterOptionsByData = {
- joinCondition: function (childOptions) {
- return childOptions.color.background == color; // the color is fully defined in the node.
- },
- processProperties: function (clusterOptions, childNodes, childEdges) {
- var totalMass = 0;
- for (var i = 0; i < childNodes.length; i++) {
- totalMass += childNodes[i].mass;
- }
- clusterOptions.mass = totalMass;
- return clusterOptions;
- },
- clusterNodeProperties: {id: 'cluster:' + color, borderWidth: 3, shape: 'database', color:color, label:'color:' + color}
- };
- network.cluster(clusterOptionsByData);
- }
- }
- function clusterByConnection() {
- network.setData(data);
- network.clusterByConnection(1)
- }
- function clusterOutliers() {
- network.setData(data);
- network.clusterOutliers();
- }
- function clusterByHubsize() {
- network.setData(data);
- var clusterOptionsByData = {
- processProperties: function(clusterOptions, childNodes) {
- clusterOptions.label = "[" + childNodes.length + "]";
- return clusterOptions;
- },
- clusterNodeProperties: {borderWidth:3, shape:'box', font:{size:30}}
- };
- network.clusterByHubsize(undefined, clusterOptionsByData);
- }
-
-</script>
-
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/clusteringByZoom.html b/www/lib/vis/examples/network/other/clusteringByZoom.html
deleted file mode 100644
index e2391f16..00000000
--- a/www/lib/vis/examples/network/other/clusteringByZoom.html
+++ /dev/null
@@ -1,160 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Network | Clustering</title>
-
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
-
- <style type="text/css">
- #mynetwork {
- width: 600px;
- height: 600px;
- border: 1px solid lightgray;
- }
-
- p {
- max-width: 600px;
- }
-
- h4 {
- margin-bottom: 3px;
- }
- </style>
- <script src="../../googleAnalytics.js"></script>
-</head>
-
-<body>
-
-
-<p>
- You can zoom in and out to cluster/decluster.
-</p>
-Stabilize when clustering:<input type="checkbox" id="stabilizeCheckbox">
-<div id="mynetwork"></div>
-
-<script type="text/javascript">
- var clusterIndex = 0;
- var clusters = [];
- var lastClusterZoomLevel = 0;
- var clusterFactor = 0.9;
-
- // create an array with nodes
- var nodes = [
- {id: 1, label: 'Node 1'},
- {id: 2, label: 'Node 2'},
- {id: 3, label: 'Node 3'},
- {id: 4, label: 'Node 4'},
- {id: 5, label: 'Node 5'},
- {id: 6, label: 'Node 6'},
- {id: 7, label: 'Node 7'},
- {id: 8, label: 'Node 8'},
- {id: 9, label: 'Node 9'},
- {id: 10, label: 'Node 10'}
- ];
-
- // create an array with edges
- var edges = [
- {from: 1, to: 2},
- {from: 1, to: 3},
- {from: 10, to: 4},
- {from: 2, to: 5},
- {from: 6, to: 2},
- {from: 7, to: 5},
- {from: 8, to: 6},
- {from: 9, to: 7},
- {from: 10, to: 9}
- ];
-
- // create a network
- var container = document.getElementById('mynetwork');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {layout: {randomSeed: 8}, physics:{adaptiveTimestep:false}};
- var network = new vis.Network(container, data, options);
-
- // set the first initial zoom level
- network.once('initRedraw', function() {
- if (lastClusterZoomLevel === 0) {
- lastClusterZoomLevel = network.getScale();
- }
- });
-
- // we use the zoom event for our clustering
- network.on('zoom', function (params) {
- if (params.direction == '-') {
- if (params.scale < lastClusterZoomLevel*clusterFactor) {
- makeClusters(params.scale);
- lastClusterZoomLevel = params.scale;
- }
- }
- else {
- openClusters(params.scale);
- }
- });
-
- // if we click on a node, we want to open it up!
- network.on("selectNode", function (params) {
- if (params.nodes.length == 1) {
- if (network.isCluster(params.nodes[0]) == true) {
- network.openCluster(params.nodes[0])
- }
- }
- });
-
-
- // make the clusters
- function makeClusters(scale) {
- var clusterOptionsByData = {
- processProperties: function (clusterOptions, childNodes) {
- clusterIndex = clusterIndex + 1;
- var childrenCount = 0;
- for (var i = 0; i < childNodes.length; i++) {
- childrenCount += childNodes[i].childrenCount || 1;
- }
- clusterOptions.childrenCount = childrenCount;
- clusterOptions.label = "# " + childrenCount + "";
- clusterOptions.font = {size: childrenCount*5+30}
- clusterOptions.id = 'cluster:' + clusterIndex;
- clusters.push({id:'cluster:' + clusterIndex, scale:scale});
- return clusterOptions;
- },
- clusterNodeProperties: {borderWidth: 3, shape: 'database', font: {size: 30}}
- }
- network.clusterOutliers(clusterOptionsByData);
- if (document.getElementById('stabilizeCheckbox').checked === true) {
- // since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
- network.setOptions({physics:{stabilization:{fit: false}}});
- network.stabilize();
- }
- }
-
- // open them back up!
- function openClusters(scale) {
- var newClusters = [];
- var declustered = false;
- for (var i = 0; i < clusters.length; i++) {
- if (clusters[i].scale < scale) {
- network.openCluster(clusters[i].id);
- lastClusterZoomLevel = scale;
- declustered = true;
- }
- else {
- newClusters.push(clusters[i])
- }
- }
- clusters = newClusters;
- if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
- // since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
- network.setOptions({physics:{stabilization:{fit: false}}});
- network.stabilize();
- }
- }
-
-
-</script>
-
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/clustersOfclusters.html b/www/lib/vis/examples/network/other/clustersOfclusters.html
deleted file mode 100644
index 0e90bcf0..00000000
--- a/www/lib/vis/examples/network/other/clustersOfclusters.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Cluster Test</title>
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
- <style type="text/css">
- #network_graph {
- width: 1000px;
- height: 800px;
- border: 1px solid lightgray;
- }
- </style>
-</head>
-<body onload="draw()">
-<p>
- Clusters can contain other clusters, but clusters of a single node is only possible by adding
-<pre>allowSingleNodeCluster: true</pre>
-to clusterNodeProperties<br/>
-In this example repeatedly clicking on the node with open the Clusters.
-</p>
-<div id="network_graph"></div>
-<div id="info"></div>
-<script type="text/javascript">
- var network;
-
- var node_color = ['orange', 'green', 'red', 'yellow', 'cyan'];
- var node_shape = ['star', 'database', 'diamond', 'square', 'triangle'];
- var nodes = new vis.DataSet([
- {id: 'x', label: 'Node X'},
- {id: 'y', label: 'Node Y'},
- ]);
- var network_options = {};
- var edges = new vis.DataSet([
- {from: 'x', to: 'y'}
- ]);
-
- var cluster_id = 1;
-
- function draw() {
- network = new vis.Network(
- document.getElementById('network_graph'),
- {
- nodes: nodes,
- edges: edges
- },
- network_options
- );
- network.on('click', function (params) {
- if (params.nodes.length == 1) {
- if (network.isCluster(params.nodes[0]) == true) {
- network.openCluster(params.nodes[0]);
- }
- }
- });
- cluster();
- cluster();
- cluster();
- }
-
- function cluster() {
- var clusterOptions = {
- joinCondition: function (childOptions) {
- console.log(childOptions);
- return true;
- },
- clusterNodeProperties: {id: cluster_id, label: "Cluster " + cluster_id, color: node_color[cluster_id - 1], shape: node_shape[cluster_id - 1], allowSingleNodeCluster: true}
- };
- cluster_id++;
- network.cluster(clusterOptions);
- }
-</script>
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/configuration.html b/www/lib/vis/examples/network/other/configuration.html
deleted file mode 100644
index a13470d4..00000000
--- a/www/lib/vis/examples/network/other/configuration.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Network | Playing with Physics</title>
-
- <style type="text/css">
- body {
- font: 10pt sans;
- }
- #mynetwork {
- float:left;
- width: 600px;
- height: 600px;
- margin:5px;
- border: 1px solid lightgray;
- }
- #config {
- float:left;
- width: 400px;
- height: 600px;
- }
-
- p {
- font-size:16px;
- max-width:700px;
- }
- </style>
-
-
- <script type="text/javascript" src="../exampleUtil.js"></script>
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript">
- var nodes = null;
- var edges = null;
- var network = null;
-
- function draw() {
- nodes = [];
- edges = [];
- // randomly create some nodes and edges
- var data = getScaleFreeNetwork(25);
-
- // create a network
- var container = document.getElementById('mynetwork');
-
- var options = {
- physics: {
- stabilization: false
- },
- configure: true
- };
- network = new vis.Network(container, data, options);
-
- network.on("configChange", function() {
- // this will immediately fix the height of the configuration
- // wrapper to prevent unecessary scrolls in chrome.
- // see https://github.com/almende/vis/issues/1568
- var div = container.getElementsByClassName('vis-configuration-wrapper')[0];
- div.style["height"] = div.getBoundingClientRect().height + "px";
- });
-
- }
- </script>
- <script src="../../googleAnalytics.js"></script>
-</head>
-
-<body onload="draw();">
-
-<p>
- The configurator can be used to play with the options. In this example, all options that can be configured with this tool are shown.
- You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use
- this in the network.
-</p>
-<p><b>Note:</b> The configurator is recreated in the dom tree on input change. This may cause undesired scrolls in your application. In order to avoid this, explicitly set the height of the configurator (see this example's source code).
-</p>
-<br />
-<div id="mynetwork"></div>
-
-<p id="selection"></p>
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/manipulation.html b/www/lib/vis/examples/network/other/manipulation.html
deleted file mode 100644
index b399c098..00000000
--- a/www/lib/vis/examples/network/other/manipulation.html
+++ /dev/null
@@ -1,193 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <meta charset="utf-8"/>
- <title>Network | Manipulation</title>
-
- <style type="text/css">
- body, select {
- font: 10pt sans;
- }
- #mynetwork {
- position:relative;
- width: 800px;
- height: 600px;
- border: 1px solid lightgray;
- }
- table.legend_table {
- font-size: 11px;
- border-width:1px;
- border-color:#d3d3d3;
- border-style:solid;
- }
- table.legend_table,td {
- border-width:1px;
- border-color:#d3d3d3;
- border-style:solid;
- padding: 2px;
- }
- div.table_content {
- width:80px;
- text-align:center;
- }
- div.table_description {
- width:100px;
- }
-
- #operation {
- font-size:28px;
- }
- #network-popUp {
- display:none;
- position:absolute;
- top:350px;
- left:170px;
- z-index:299;
- width:250px;
- height:120px;
- background-color: #f9f9f9;
- border-style:solid;
- border-width:3px;
- border-color: #5394ed;
- padding:10px;
- text-align: center;
- }
- </style>
- <script type="text/javascript" src="../exampleUtil.js"></script>
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript">
- var nodes = null;
- var edges = null;
- var network = null;
- // randomly create some nodes and edges
- var data = getScaleFreeNetwork(25);
- var seed = 2;
-
- function setDefaultLocale() {
- var defaultLocal = navigator.language;
- var select = document.getElementById('locale');
- select.selectedIndex = 0; // set fallback value
- for (var i = 0, j = select.options.length; i < j; ++i) {
- if (select.options[i].getAttribute('value') === defaultLocal) {
- select.selectedIndex = i;
- break;
- }
- }
- }
-
- function destroy() {
- if (network !== null) {
- network.destroy();
- network = null;
- }
- }
-
- function draw() {
- destroy();
- nodes = [];
- edges = [];
-
- // create a network
- var container = document.getElementById('mynetwork');
- var options = {
- layout: {randomSeed:seed}, // just to make sure the layout is the same when the locale is changed
- locale: document.getElementById('locale').value,
- manipulation: {
- addNode: function (data, callback) {
- // filling in the popup DOM elements
- document.getElementById('operation').innerHTML = "Add Node";
- document.getElementById('node-id').value = data.id;
- document.getElementById('node-label').value = data.label;
- document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
- document.getElementById('cancelButton').onclick = clearPopUp.bind();
- document.getElementById('network-popUp').style.display = 'block';
- },
- editNode: function (data, callback) {
- // filling in the popup DOM elements
- document.getElementById('operation').innerHTML = "Edit Node";
- document.getElementById('node-id').value = data.id;
- document.getElementById('node-label').value = data.label;
- document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
- document.getElementById('cancelButton').onclick = cancelEdit.bind(this,callback);
- document.getElementById('network-popUp').style.display = 'block';
- },
- addEdge: function (data, callback) {
- if (data.from == data.to) {
- var r = confirm("Do you want to connect the node to itself?");
- if (r == true) {
- callback(data);
- }
- }
- else {
- callback(data);
- }
- }
- }
- };
- network = new vis.Network(container, data, options);
- }
-
- function clearPopUp() {
- document.getElementById('saveButton').onclick = null;
- document.getElementById('cancelButton').onclick = null;
- document.getElementById('network-popUp').style.display = 'none';
- }
-
- function cancelEdit(callback) {
- clearPopUp();
- callback(null);
- }
-
- function saveData(data,callback) {
- data.id = document.getElementById('node-id').value;
- data.label = document.getElementById('node-label').value;
- clearPopUp();
- callback(data);
- }
-
- function init() {
- setDefaultLocale();
- draw();
- }
-
- </script>
- <script src="../../googleAnalytics.js"></script>
-</head>
-
-<body onload="init();">
-<h2>Editing the nodes and edges (localized)</h2>
-<p style="width: 700px; font-size:14px; text-align: justify;">
- The localization is only relevant to the manipulation buttons.
-</p>
-
-<p>
- <label for="locale">Select a locale:</label>
- <select id="locale" onchange="draw();">
- <option value="en">en</option>
- <option value="de">de</option>
- <option value="es">es</option>
- <option value="it">it</option>
- <option value="nl">nl</option>
- <option value="pt-br">pt</option>
- <option value="ru">ru</option>
- </select>
-</p>
-
-<div id="network-popUp">
- <span id="operation">node</span> <br>
- <table style="margin:auto;"><tr>
- <td>id</td><td><input id="node-id" value="new value" /></td>
- </tr>
- <tr>
- <td>label</td><td><input id="node-label" value="new value" /></td>
- </tr></table>
- <input type="button" value="save" id="saveButton" />
- <input type="button" value="cancel" id="cancelButton" />
-</div>
-<br />
-<div id="mynetwork"></div>
-
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/navigation.html b/www/lib/vis/examples/network/other/navigation.html
deleted file mode 100644
index 760bb539..00000000
--- a/www/lib/vis/examples/network/other/navigation.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Network | Navigation</title>
-
- <style type="text/css">
- body {
- font: 10pt sans;
- }
- #mynetwork {
- width: 600px;
- height: 600px;
- border: 1px solid lightgray;
- }
- table.legend_table {
- border-collapse: collapse;
- }
- table.legend_table td,
- table.legend_table th {
- border: 1px solid #d3d3d3;
- padding: 10px;
- }
-
- table.legend_table td {
- text-align: center;
- width:110px;
- }
- </style>
-
- <script type="text/javascript" src="../exampleUtil.js"></script>
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript">
- var nodes = null;
- var edges = null;
- var network = null;
-
- function destroy() {
- if (network !== null) {
- network.destroy();
- network = null;
- }
- }
-
- function draw() {
- destroy();
-
- // create an array with nodes
- var nodes = [
- {id: 1, label: 'Node 1'},
- {id: 2, label: 'Node 2'},
- {id: 3, label: 'Node 3'},
- {id: 4, label: 'Node 4'},
- {id: 5, label: 'Node 5'}
- ];
-
- // create an array with edges
- var edges = new vis.DataSet([
- {from: 1, to: 3},
- {from: 1, to: 2},
- {from: 2, to: 4},
- {from: 2, to: 5}
- ]);
-
- // create a network
- var container = document.getElementById('mynetwork');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {
- interaction: {
- navigationButtons: true,
- keyboard: true
- }
- };
- network = new vis.Network(container, data, options);
-
- // add event listeners
- network.on('select', function(params) {
- document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
- });
- }
- </script>
- <script src="../../googleAnalytics.js"></script>
-</head>
-
-<body onload="draw();">
-<h2>Navigation controls and keyboad navigation</h2>
-<div style="width: 800px; font-size:14px; text-align: justify;">
- This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
- <table class="legend_table">
- <tr>
- <th>Icons: </th>
- <td><img src="../../../dist/img/network/upArrow.png" /> </td>
- <td><img src="../../../dist/img/network/downArrow.png" /> </td>
- <td><img src="../../../dist/img/network/leftArrow.png" /> </td>
- <td><img src="../../../dist/img/network/rightArrow.png" /> </td>
- <td><img src="../../../dist/img/network/plus.png" /> </td>
- <td><img src="../../../dist/img/network/minus.png" /> </td>
- <td><img src="../../../dist/img/network/zoomExtends.png" /> </td>
- </tr>
- <tr>
- <th>Keyboard shortcuts:</th>
- <td><div>Up arrow</div></td>
- <td><div>Down arrow</div></td>
- <td><div>Left arrow</div></td>
- <td><div>Right arrow</div></td>
- <td><div>=<br />[<br />Page up</div></td>
- <td><div>-<br />]<br />Page down</div></td>
- <td><div>None</div></td>
- </tr>
- <tr>
- <th>Description:</th>
- <td>Move up</td>
- <td>Move down</td>
- <td>Move left</td>
- <td>Move right</td>
- <td>Zoom in</td>
- <td>Zoom out</td>
- <td>Zoom extent</td>
- </tr>
- </table>
- <br />
- Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above.
- Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. <u>To correctly display the navigation icons, <b>vis.css</b> or <b>vis-network.min.css</b> must be included.</u>
- The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
-</div>
-
-<div id="mynetwork"></div>
-
-<p id="selection"></p>
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/performance.html b/www/lib/vis/examples/network/other/performance.html
deleted file mode 100644
index 0b3ea663..00000000
--- a/www/lib/vis/examples/network/other/performance.html
+++ /dev/null
@@ -1,91 +0,0 @@
-<!doctype html>
-<html>
-<head>
- <title>Network | Random nodes</title>
-
- <style type="text/css">
- body {
- font: 10pt sans;
- }
- #mynetwork {
- width: 600px;
- height: 600px;
- border: 1px solid lightgray;
- }
-
- #message {
- color:darkred;
- max-width:600px;
- font-size:16px;
- cursor:pointer;
- text-decoration: underline;
- }
- </style>
-
- <script type="text/javascript" src="../exampleUtil.js"></script>
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript">
- var nodes = null;
- var edges = null;
- var network = null;
- var setSmooth = false;
-
- function destroy() {
- if (network !== null) {
- network.destroy();
- network = null;
- }
- }
-
- function draw() {
- destroy();
- var nodeCount = document.getElementById('nodeCount').value;
- if (nodeCount > 100) {
- document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
- }
- else if (setSmooth === false) {
- document.getElementById("message").innerHTML = '';
- }
- // create a network
- var container = document.getElementById('mynetwork');
- var data = getScaleFreeNetwork(nodeCount);
- var options = {
- physics: { stabilization: false }
- };
- network = new vis.Network(container, data, options);
- }
-
- function disableSmoothCurves() {
- setSmooth = true;
- network.setOptions({edges:{smooth:{type:'continuous'}}});
- document.getElementById("message").innerHTML = '<a onclick="enableSmoothCurves()">Click here to reenable the dynamic smooth curves.</a>';
- }
-
- function enableSmoothCurves() {
- setSmooth = false;
- document.getElementById("message").innerHTML = '<a onclick="disableSmoothCurves()">You may want to disable dynamic smooth curves for better performance with a large amount of nodes and edges. Click here to disable them.</a>';
- network.setOptions({edges:{smooth:{type:'dynamic'}}});
- }
-
-
- </script>
- <script src="../../googleAnalytics.js"></script>
-</head>
-<body onload="draw();">
-<p>
- Generate a random network with nodes and edges.
-</p>
-<p>
- <form onsubmit="draw(); return false;">
- <label for="nodeCount">Number of nodes:</label>
- <input id="nodeCount" type="text" value="25" style="width: 50px;">
- <input type="button" value="Go" onclick="draw()">
-</form>
-</p>
-<span id="message"></span>
-<div id="mynetwork"></div>
-
-</body>
-</html>
diff --git a/www/lib/vis/examples/network/other/saveAndLoad.html b/www/lib/vis/examples/network/other/saveAndLoad.html
deleted file mode 100644
index 08165c85..00000000
--- a/www/lib/vis/examples/network/other/saveAndLoad.html
+++ /dev/null
@@ -1,177 +0,0 @@
-<!doctype html>
-<html>
- <head>
- <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
- <meta content="utf-8" http-equiv="encoding">
- <title>Network | Saving and loading networks</title>
-
- <style type="text/css">
- body {
- font: 10pt sans;
- }
- #network {
- float:left;
- width: 600px;
- height: 600px;
- margin:5px;
- border: 1px solid lightgray;
- }
- #config {
- float:left;
- width: 400px;
- height: 600px;
- }
- #input_output {
- height: 10%;
- width: 15%;
- }
-
- p {
- font-size:16px;
- max-width:700px;
- }
- </style>
-
- <script type="text/javascript" src="../exampleUtil.js"></script>
- <script type="text/javascript" src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
-
- <script src="../../googleAnalytics.js"></script>
- </head>
-
- <body>
- <p>
- In this example, the network data can be exported to JSON and imported back into the network.
-
- Try this out by exporting the network to JSON, clearing the network and then importing it again. The nodes will all appear in the same position as they were before the network was destroyed.
- </p>
-
- <div id="network"></div>
-
- <div>
- <textarea id=input_output></textarea>
- <input type="button" id="import_button" onclick="importNetwork()" value="import"></input>
- <input type="button" id="export_button" onclick="exportNetwork()" value="export"></input>
- <input type="button" id="destroy_button" onclick="destroyNetwork()" value="destroy"></input>
- </div>
-
- <script type="text/javascript">
- var network;
- var container;
- var exportArea;
- var importButton;
- var exportButton;
-
- function init() {
- container = document.getElementById('network');
- exportArea = document.getElementById('input_output');
- importButton = document.getElementById('import_button');
- exportButton = document.getElementById('export_button');
-
- draw();
- }
-
- function addContextualInformation(elem, index, array) {
- addId(elem, index);
- addConnections(elem, index);
- }
-
- function addId(elem, index) {
- elem.id = index;
- }
-
- function addConnections(elem, index) {
- // need to replace this with a tree of the network, then get child direct children of the element
- elem.connections = network.getConnectedNodes(index);
- }
-
- function destroyNetwork() {
- network.destroy();
- }
-
- function clearOutputArea() {
- exportArea.value = "";
- }
-
- function draw() {
- // create a network of nodes
- var data = getScaleFreeNetwork(5);
-
- network = new vis.Network(container, data, {manipulation:{enabled:true}});
-
- clearOutputArea();
- }
-
- function exportNetwork() {
- clearOutputArea();
-
- var nodes = objectToArray(network.getPositions());
-
- nodes.forEach(addContextualInformation);
-
- // pretty print node data
- var exportValue = JSON.stringify(nodes, undefined, 2);
-
- exportArea.value = exportValue;
-
- resizeExportArea();
- }
-
- function importNetwork() {
- var inputValue = exportArea.value;
- var inputData = JSON.parse(inputValue);
-
- var data = {
- nodes: getNodeData(inputData),
- edges: getEdgeData(inputData)
- }
-
- network = new vis.Network(container, data, {});
-
- resizeExportArea();
- }
-
- function getNodeData(data) {
- var networkNodes = [];
-
- data.forEach(function(elem, index, array) {
- networkNodes.push({id: elem.id, label: elem.id, x: elem.x, y: elem.y});
- });
-
- return new vis.DataSet(networkNodes);
- }
-
- function getEdgeData(data) {
- var networkEdges = [];
-
- data.forEach(function(node, index, array) {
- // add the connection
- node.connections.forEach(function(connId, cIndex, conns) {
- networkEdges.push({from: node.id, to: connId});
-
- var elementConnections = array[connId].connections;
-
- // remove the connection from the other node to prevent duplicate connections
- var duplicateIndex = elementConnections.findIndex(function(connection) {
- connection === node.id;
- });
-
- elementConnections = elementConnections.splice(0, duplicateIndex - 1).concat(elementConnections.splice(duplicateIndex + 1, elementConnections.length))
- });
- });
-
- return new vis.DataSet(networkEdges);
- }
-
- function objectToArray(obj) {
- return Object.keys(obj).map(function (key) { return obj[key]; });
- }
-
- function resizeExportArea() {
- exportArea.style.height = (1 + exportArea.scrollHeight) + "px";
- }
-
- init();
- </script>
- </body>
-</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 13:55:24 +0000