RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/network/other/animationShowcase.html ADDED

@@ -0,0 +1,279 @@
+<!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="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/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>
+</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>

data/examples_for_vis/network/other/changingClusteredEdgesNodes.html ADDED

@@ -0,0 +1,107 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Clustering</title>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/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>
+</head>
+<body>
+<p>
+Demonstrating getBaseEdges, 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 getBaseEdges 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_edges = network.clustering.getBaseEdges(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>

data/examples_for_vis/network/other/chosen.html ADDED

@@ -0,0 +1,466 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Chosen Elements</title>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    #mynetwork {
+      width: 900px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    code {
+      font-size: 14px;
+      background: #dddddd;
+    }
+    p {
+      max-width: 600px;
+    }
+    .indented {
+      margin-left: 30px;
+    }
+    .sep {
+      height: 1px;
+      width: 35%;
+      margin-left: 40px;
+      background-color: #dddddd;
+    }
+  </style>
+</head>
+<body>
+<p>When a node or edge is selected or hovered its visible characteristics can be changed.</p>
+<div id="mynetwork"></div>
+<p>In this network, an element (node, edge or label) will change a characteristic when hovered, and it will be locked in when selected.
+   This is managed by setting up a 'chosen' function that will be called when the element containing the function is chosen.
+   These functions may be set on nodes, edges and labels, at the individual or group level.</p>
+<p>All states (unselected, hover-over-unselected, selected, and hover-over selected) may be handled as needed by the application using vis, as the select and hover states are passed to the chosen function when called.
+   Additionally, the id of the element is passed to allow context-specific characteristic adjustment on select or hover as needed.</p>
+<p><i>It should be noted that the characteristics which might affect the position of elements have been left out on purpose.
+   While it might be interesting to make them changeable, this is problematic on hovering.
+   Consider that the user hovers over an object.
+   If it changed characteristics that moved it outside of the hover-distance, it would then no longer be hovering.
+   So it would be moved back to its original prosition, within the hover-distance and then again be hovering over the object.
+   This hysteresis loop is kept from occurring by leaving out the characteristics that could cause it.
+   Some seemingly innocuous changes (such as resizing a node's label on hover that would in turn cause the node to resize and move out of hover-distance) may still cause hysteresis, but with care they should be avoidable.</i></p>
+<script type="text/javascript">
+  var changeChosenLabelColor =
+    function(ctx, values, id) {
+      values.color = "#ff0000";
+    }
+  var changeChosenLabelSize =
+    function(ctx, values, id) {
+      values.size += 1;
+    }
+  var changeChosenLabelFace =
+    function(ctx, values, id) {
+      values.face = "serif";
+    }
+  var changeChosenLabelMod =
+    function(ctx, values, id) {
+      values.mod = "bold italic";
+    }
+  var changeChosenLabelStrokeWidth =
+    function(ctx, values, id) {
+      values.strokeWidth = 5;
+    }
+  var changeChosenLabelStrokeColor =
+    function(ctx, values, id) {
+      values.strokeColor = "#00ff00";
+    }
+  var changeChosenNodeColor =
+    function(values, id, selected, hovering) {
+      values.color = "#ffdd88";
+    }
+  var changeChosenNodeBorderWidth =
+    function(values, id, selected, hovering) {
+      values.borderWidth = 3;
+    }
+  var changeChosenNodeBorderColor =
+    function(values, id, selected, hovering) {
+      values.borderColor = "#ff0000";
+    }
+  var changeChosenNodeSize =
+    function(values, id, selected, hovering) {
+      values.size = 30;
+    }
+  var changeChosenNodeBorderDashes =
+    function(values, id, selected, hovering) {
+      values.borderDashes = [ 10, 10 ];
+    }
+  var changeChosenNodeBorderRadius =
+    function(values, id, selected, hovering) {
+      values.borderRadius = 15;
+    }
+  var changeChosenNodeShadow =
+    function(values, id, selected, hovering) {
+      values.shadow = true;
+    }
+  var changeChosenNodeShadowColor =
+    function(values, id, selected, hovering) {
+      values.shadowColor = "#ff0000";
+    }
+  var changeChosenNodeShadowSize =
+    function(values, id, selected, hovering) {
+      values.shadowSize = 30;
+    }
+  var changeChosenNodeShadowX =
+    function(values, id, selected, hovering) {
+      values.shadowX = -5;
+    }
+  var changeChosenNodeShadowY =
+    function(values, id, selected, hovering) {
+      values.shadowY = -5;
+    }
+  var changeChosenEdgeToArrow =
+    function(values, id, selected, hovering) {
+      values.toArrow = true;
+    }
+  var changeChosenEdgeToArrowScale =
+    function(values, id, selected, hovering) {
+      values.toArrowScale = 2;
+    }
+  var changeChosenEdgeToArrowType =
+    function(values, id, selected, hovering) {
+      values.toArrowType = "circle";
+    }
+  var changeChosenEdgeMiddleArrow =
+    function(values, id, selected, hovering) {
+      values.middleArrow = true;
+    }
+  var changeChosenEdgeMiddleArrowScale =
+    function(values, id, selected, hovering) {
+      values.middleArrowScale = 2;
+    }
+  var changeChosenEdgeMiddleArrowType =
+    function(values, id, selected, hovering) {
+      values.middleArrowType = "circle";
+    }
+  var changeChosenEdgeFromArrow =
+    function(values, id, selected, hovering) {
+      values.fromArrow = true;
+    }
+  var changeChosenEdgeFromArrowScale =
+    function(values, id, selected, hovering) {
+      values.fromArrowScale = 2;
+    }
+  var changeChosenEdgeFromArrowType =
+    function(values, id, selected, hovering) {
+      values.fromArrowType = "circle";
+    }
+  var changeChosenEdgeArrowStrikethrough =
+    function(values, id, selected, hovering) {
+      values.arrowStrikethrough = false;
+    }
+  var changeChosenEdgeColor =
+    function(values, id, selected, hovering) {
+      values.color = "#00ff00";
+    }
+  var changeChosenEdgeInheritsColor =
+    function(values, id, selected, hovering) {
+      values.inheritsColor = "both";
+    }
+  var changeChosenEdgeOpacity =
+    function(values, id, selected, hovering) {
+      values.opacity = 0.25;
+    }
+  var changeChosenEdgeHidden =
+    function(values, id, selected, hovering) {
+      values.hidden = true;
+    }
+  var changeChosenEdgeShadow =
+    function(values, id, selected, hovering) {
+      values.shadow = true;
+    }
+  var changeChosenEdgeShadowColor =
+    function(values, id, selected, hovering) {
+      values.shadowColor = "#00ffff";
+    }
+  var changeChosenEdgeShadowSize =
+    function(values, id, selected, hovering) {
+      values.shadowSize = 20;
+    }
+  var changeChosenEdgeShadowX =
+    function(values, id, selected, hovering) {
+      values.shadowX = -5;
+    }
+  var changeChosenEdgeShadowY =
+    function(values, id, selected, hovering) {
+      values.shadowY = -5;
+    }
+  var changeChosenEdgeWidth =
+    function(values, id, selected, hovering) {
+      values.width = 5;
+    }
+  var changeChosenEdgeDashes =
+    function(values, id, selected, hovering) {
+      values.dashes = [10, 10];
+    }
+  var nodes = [
+    { id: 1000, label: "label does not change",
+                x: -400, y: -300,
+                chosen: { label: false, node: false } },
+    { id: 1010, label: "label default settings",
+                x: -400, y: -225,
+                chosen: { label: true, node: false } },
+    { id: 1020, label: "label changes color",
+                x: -400, y: -150,
+                chosen: { label: changeChosenLabelColor, node: false } },
+    { id: 1030, label: "label changes size",
+                x: -400, y: -75,
+                chosen: { label: changeChosenLabelSize, node: false } },
+    { id: 1040, label: "label changes face",
+                x: -400, y: 0,
+                chosen: { label: changeChosenLabelFace, node: false } },
+    { id: 1050, label: "label changes modifier",
+                x: -400, y: 75,
+                chosen: { label: changeChosenLabelMod, node: false } },
+    { id: 1060, label: "label changes stokeWidth",
+                x: -400, y: 150,
+                chosen: { label: changeChosenLabelStrokeWidth, node: false } },
+    { id: 1070, label: "label changes stokeColor",
+                x: -400, y: 225, font: { strokeWidth: 2 },
+                chosen: { label: changeChosenLabelStrokeColor, node: false } },
+    { id: 2000, label: "node does not change",
+                x: 0, y: -300,
+                chosen: { label: false, node: false } },
+    { id: 2010, label: "node default settings",
+                x: 0, y: -225,
+                chosen: { label: false, node: true } },
+    { id: 2020, label: "node changes color",
+                x: 0, y: -150,
+                chosen: { label: false, node: changeChosenNodeColor } },
+    { id: 2030, label: "node changes borderWidth",
+                x: 0, y: -75,
+                chosen: { label: false, node: changeChosenNodeBorderWidth } },
+    { id: 2040, label: "node changes borderColor",
+                x: 0, y: 0,
+                chosen: { label: false, node: changeChosenNodeBorderColor } },
+    { id: 2050, label: "shaped nodes change size",
+                x: 0, y: 70, shape: 'star',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2051, x: -60, y: 70, shape: 'dot',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2052, x: -120, y: 70, shape: 'diamond',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2053, x: 60, y: 70, shape: 'square',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2054, x: 120, y: 70, shape: 'triangle',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2055, x: 165, y: 70, shape: 'triangleDown',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2060, label: "node changes borderDashes",
+                x: 0, y: 150,
+                chosen: { label: false, node: changeChosenNodeBorderDashes } },
+    { id: 2070, label: "node changes borderRadius",
+                x: 0, y: 225,
+                chosen: { label: false, node: changeChosenNodeBorderRadius } },
+    { id: 2080, label: "node changes shadow",
+                x: 0, y: 300,
+                chosen: { label: false, node: changeChosenNodeShadow } },
+    { id: 2090, label: "node changes shadowColor",
+                x: 0, y: 375, shadow: true,
+                chosen: { label: false, node: changeChosenNodeShadowColor } },
+    { id: 2100, label: "node changes shadowSize",
+                x: 0, y: 450, shadow: true,
+                chosen: { label: false, node: changeChosenNodeShadowSize } },
+    { id: 2110, label: "node changes shadowX",
+                x: 0, y: 525, shadow: true,
+                chosen: { label: false, node: changeChosenNodeShadowX } },
+    { id: 2120, label: "node changes shadowY",
+                x: 0, y: 600, shadow: true,
+                chosen: { label: false, node: changeChosenNodeShadowY } },
+    { id: 3000, x: 275, y: -310, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3001, x: 525, y: -210, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3010, x: 275, y: -235, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3011, x: 525, y: -135, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3020, x: 275, y: -160, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3021, x: 525, y:  -60, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3030, x: 275, y:  -85, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3031, x: 525, y:   15, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3040, x: 275, y:  -10, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3041, x: 525, y:   90, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3050, x: 275, y:   65, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3051, x: 525, y:  165, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3060, x: 275, y:  140, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3061, x: 525, y:  240, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3070, x: 275, y:  215, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3071, x: 525, y:  315, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3080, x: 275, y:  290, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0},
+    { id: 3081, x: 525, y:  390, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3090, x: 275, y:  365, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3091, x: 525, y:  465, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3100, x: 275, y:  440, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3101, x: 525, y:  540, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3110, x: 275, y:  515, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3111, x: 525, y:  615, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3120, x: 575, y: -310, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3121, x: 825, y: -210, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3130, x: 575, y: -235, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3131, x: 825, y: -135, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3140, x: 575, y: -160, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3141, x: 825, y:  -60, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3150, x: 575, y:  -85, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3151, x: 825, y:   15, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3160, x: 575, y:  -10, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3161, x: 825, y:   90, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3170, x: 575, y:   65, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3171, x: 825, y:  165, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3180, x: 575, y:  140, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3181, x: 825, y:  240, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3190, x: 575, y:  215, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3191, x: 825, y:  315, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3200, x: 575, y:  290, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3201, x: 825, y:  390, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3210, x: 575, y:  365, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3211, x: 825, y:  465, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3220, x: 575, y:  440, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3221, x: 825, y:  540, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+  ];
+  var edges = [
+    { id: 4000, from: 3000, to: 3001, label: "edge does not change",
+                chosen: false },
+    { id: 4010, from: 3010, to: 3011, label: "edge has default settings",
+                chosen: { label: false, edge: true } },
+    { id: 4020, from: 3020, to: 3021, label: "edge changes toArrow",
+                chosen: { label: false, edge: changeChosenEdgeToArrow } },
+    { id: 4030, from: 3030, to: 3031, label: "edge changes toArrowScale",
+                arrows: { to: true },
+                chosen: { label: false, edge: changeChosenEdgeToArrowScale } },
+    { id: 4040, from: 3040, to: 3041, label: "edge changes toArrowType",
+                arrows: { to: true },
+                chosen: { label: false, edge: changeChosenEdgeToArrowType } },
+    { id: 4050, from: 3050, to: 3051, label: "edge changes middleArrow",
+                chosen: { label: false, edge: changeChosenEdgeMiddleArrow } },
+    { id: 4060, from: 3060, to: 3061, label: "edge changes middleArrowScale",
+                arrows: { middle: true },
+                chosen: { label: false, edge: changeChosenEdgeMiddleArrowScale } },
+    { id: 4070, from: 3070, to: 3071, label: "edge changes middleArrowType",
+                arrows: { middle: true },
+                chosen: { label: false, edge: changeChosenEdgeMiddleArrowType } },
+    { id: 4080, from: 3080, to: 3081, label: "edge changes fromArrow",
+                chosen: { label: false, edge: changeChosenEdgeFromArrow } },
+    { id: 4090, from: 3090, to: 3091, label: "edge changes fromArrowScale",
+                arrows: { from: true },
+                chosen: { label: false, edge: changeChosenEdgeFromArrowScale } },
+    { id: 4100, from: 3100, to: 3101, label: "edge changes fromArrowType",
+                arrows: { from: true },
+                chosen: { label: false, edge: changeChosenEdgeFromArrowType } },
+    { id: 4110, from: 3110, to: 3111, label: "edge changes arrowStrikethrough",
+                arrows: { to: true, from: true }, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeArrowStrikethrough } },
+    { id: 4120, from: 3120, to: 3121, label: "edge changes color",
+                chosen: { label: false, edge: changeChosenEdgeColor } },
+    { id: 4130, from: 3130, to: 3131, label: "edge inherits color",
+                chosen: { label: false, edge: changeChosenEdgeInheritsColor } },
+    { id: 4140, from: 3140, to: 3141, label: "edge changes opacity",
+                chosen: { label: false, edge: changeChosenEdgeOpacity } },
+    { id: 4150, from: 3150, to: 3151, label: "edge changes hidden",
+                chosen: { label: false, edge: changeChosenEdgeHidden } },
+    { id: 4160, from: 3160, to: 3161, label: "edge changes shadow",
+                width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadow } },
+    { id: 4170, from: 3170, to: 3171, label: "edge changes shadowColor",
+                shadow: true, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadowColor } },
+    { id: 4180, from: 3180, to: 3181, label: "edge changes shadowSize",
+                shadow: true, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadowSize } },
+    { id: 4190, from: 3190, to: 3191, label: "edge changes shadowX",
+                shadow: true, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadowX } },
+    { id: 4200, from: 3200, to: 3201, label: "edge changes shadowY",
+                shadow: true, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadowY } },
+    { id: 4210, from: 3210, to: 3211, label: "edge changes width",
+                chosen: { label: false, edge: changeChosenEdgeWidth } },
+    { id: 4220, from: 3220, to: 3221, label: "edge changes dashes",
+                chosen: { label: false, edge: changeChosenEdgeDashes } },
+  ];
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    edges: {
+      font: {
+        size: 16
+      },
+      selfReferenceSize: 30
+    },
+    nodes: {
+      shape: 'box',
+      widthConstraint: 250,
+      color: "#cccccc",
+      margin: 10,
+      font: {
+        size: 16
+      }
+    },
+    physics: {
+      enabled: false
+    },
+    interaction: {
+      hover: true
+    }
+  };
+  var network = new vis.Network(container, data, options);
+</script>
+</body>
+</html>