Released version 3.1.0

dist/vis.css

@@ -703,4 +703,4 @@ div.network-navigation.zoomExtends {
     background-image: url("img/network/zoomExtends.png");
     bottom:50px;
     right:15px;
-}
+}

docs/dataset.html

@@ -691,6 +691,13 @@ DataSet.map(callback [, options]);
     <td>Order the items by a field name or custom sort function.</td>
   </tr>
 
+  <tr>
+      <td>returnType</td>
+      <td>String</td>
+      <td>Determine the type of output of the get function. Allowed values are <code>Array | Object | DataTable</code>.
+          The <code>DataTable</code> refers to a Google DataTable. The default returnType is an array. The object type will return a JSON object with the ID's as keys.</td>
+  </tr>
+
 </table>
 
 <p>

docs/network.html

@@ -54,6 +54,7 @@
       <li><a href="#Nodes">Nodes</a></li>
       <li><a href="#Edges">Edges</a></li>
       <li><a href="#DOT_language">DOT language</a></li>
+      <li><a href="#Gephi_import">Gephi import</a></li>
     </ul>
   </li>
   <li>
@@ -262,6 +263,21 @@ When using a DataSet, the network is automatically updating to changes in the Da
     <th>Description</th>
   </tr>
 
+  <tr>
+      <td>borderWidth</td>
+      <td>Number</td>
+      <td>1</td>
+      <td>The width of the border of the node when it is not selected, automatically limited by the width of the node.</td>
+  </tr>
+
+
+  <tr>
+      <td>borderWidthSelected</td>
+      <td>Number</td>
+      <td>undefined</td>
+      <td>The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used.</td>
+  </tr>
+
   <tr>
     <td>color</td>
     <td>String | Object</td>
@@ -672,6 +688,14 @@ When using a DataSet, the network is automatically updating to changes in the Da
         <td>physics.[method].springLength</td>
         <td>The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths.</td>
     </tr>
+
+    <tr>
+        <td>inheritColor</td>
+        <td>String | Boolean</td>
+        <td>false</td>
+        <td>Possible values: <code>"to","from", true, false</code>. If this value is set to false, the edge color information is used. If the value is set to true or "from",
+            the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.</td>
+    </tr>
   <tr>
     <td>title</td>
     <td>string | function</td>
@@ -736,7 +760,85 @@ var data = {
 var network = new vis.Network(container, data);
 </pre>
 
+<h3 id="Gephi_import">Gephi import (JSON)</h3>
+
+<p>
+    network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
+    <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
+    An example exists showing how to get a JSON file into Vis: <a href="../examples/Network/30_importing_from_gephi.html">30_importing_from_gephi</a>.
+</p>
+
+<p>
+    Example usage:
+</p>
+
+<pre class="prettyprint lang-js">
+// load the JSON file containing the Gephi network.
+var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30
+
+// create a data object with the gephi key:
+var data = {
+  gephi: gephiJSON
+};
+
+// create a network
+var network = new vis.Network(container, data);
+</pre>
+Alternatively you can use the parser manually:
+<pre class="prettyprint lang-js">
+// load the JSON file containing the Gephi network.
+var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30
+
+// parse the gephi file to receive an object
+// containing nodes and edges in vis format.
+var parsed = vis.network.gephiParser.parseGephi(gephiJSON);
+
+// provide data in the normal fashion
+var data = {
+  nodes: parsed.nodes,
+  edged: parsed.edges
+};
+
+// create a network
+var network = new vis.Network(container, data);
+</pre>
+
+<h4>Gephi parser options</h4>
 
+There are a few options you can use to tell Vis what to do with the data from Gephi.
+
+<pre class="prettyprint lang-js">
+var parserOptions = {
+  allowedToMove: false,
+  parseColor: false
+}
+var parsed = vis.network.gephiParser.parseGephi(gephiJSON, parserOptions);
+</pre>
+<table>
+<tr>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Default</th>
+    <th>Description</th>
+</tr>
+
+<tr>
+    <td>allowedToMove</td>
+    <td>Boolean</td>
+    <td>false</td>
+    <td>
+        If true, the nodes will move according to the physics model after import. If false, the nodes do not move at all.
+    </td>
+</tr>
+<tr>
+    <td>parseColor</td>
+    <td>Boolean</td>
+    <td>false</td>
+    <td>
+        If true, the color will be parsed by the vis parser, generating extra colors for the borders, highlighs and hover. If false, the node will be the supplied color.
+    </td>
+</tr>
+</table>
 
 <h2 id="Configuration_options">Configuration options</h2>
 
@@ -874,7 +976,22 @@ var options = {
             Toggle if the nodes can be dragged. This will not affect the dragging of the network.
         </td>
     </tr>
-
+  <tr>
+      <td>hideNodesOnDrag</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>
+          Toggle if the nodes are drawn during a drag. This can greatly improve performance if you have many nodes.
+      </td>
+  </tr>
+  <tr>
+      <td>hideEdgesOnDrag</td>
+      <td>Boolean</td>
+      <td>false</td>
+      <td>
+          Toggle if the edges are drawn during a drag. This can greatly improve performance if you have many edges.
+      </td>
+  </tr>
   <tr>
     <td><a href="#Navigation_controls">navigation</a></td>
     <td>Object</td>
@@ -895,11 +1012,31 @@ var options = {
 
     <tr>
         <td>smoothCurves</td>
+        <td>Boolean || object</td>
+        <td>object</td>
+        <td>If true, edges are drawn as smooth curves. This is more computationally intensive since the edge now is a quadratic Bezier curve. This can be further configured by the options below.</td>
+    </tr>
+
+    <tr>
+        <td>smoothCurves.dynamic</td>
         <td>Boolean</td>
         <td>true</td>
-        <td>If true, edges are drawn as smooth curves. This is more computationally intensive since the edge now is a quadratic Bezier curve with control points on both nodes and an invisible node in the center of the edge. This support node is also handed by the physics simulation.</td>
+        <td>By default, the edges are dynamic. This means there are support nodes placed in the middle of the edge. This support node is also handed by the physics simulation. If false, the smoothness will be based on the
+        relative positions of the to and from nodes. This is computationally cheaper but there is no self organisation.</td>
+    </tr>
+    <tr>
+        <td>smoothCurves.type</td>
+        <td>String</td>
+        <td>"continuous"</td>
+        <td>This option only affects NONdynamic smooth curves. The supported types are: <code>continuous, discrete, diagonalCross, straightCross, horizontal, vertical</code>. The effects of these types
+        are shown in examples <a href="../examples/Network/26_staticSmoothCurves.html">26</a> and <a href="../examples/Network/27_world_cup_network.html">27</a></td>
+    </tr>
+    <tr>
+        <td>smoothCurves.roundness</td>
+        <td>Number</td>
+        <td>0.5</td>
+        <td>This only affects NONdynamic smooth curves. The roundness can be tweaked with the parameter. The value range is from 0 to 1 with a maximum roundness at 0.5.</td>
     </tr>
-
   <tr>
     <td>selectable</td>
     <td>Boolean</td>
@@ -1223,6 +1360,14 @@ var options = {
     <td>The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths.</td>
   </tr>
 
+    <tr>
+        <td>inheritColor</td>
+        <td>String | Boolean</td>
+        <td>false</td>
+        <td>Possible values: <code>"to","from", true, false</code>. If this value is set to false, the edge color information is used. If the value is set to true or "from",
+            the color data from the borders of the "from" node is used. If this value is "to", the color data from the borders of the "to" node is used.</td>
+    </tr>
+
   <tr>
     <td>style</td>
     <td>String</td>
@@ -2366,7 +2511,8 @@ network.off('select', onSelect);
     </tr>
     <tr>
         <td>stabilized</td>
-        <td>Fired when the network has been stabilized after initialization. This event can be used to trigger the .storePosition() function after stabilization.</td>
+        <td>Fired when the network has been stabilized. This event can be used to trigger the .storePosition() function after stabilization. When the network in initialized, the parameter
+        iterations will be the amount of iterations it took to stabilize. After initialization, this parameter is null.</td>
         <td>
             <ul>
                 <li><code>iterations</code>: number of iterations used to stabilize</li>

docs/timeline.html

@@ -449,7 +449,21 @@ var options = {
     <td>margin.item</td>
     <td>Number</td>
     <td>10</td>
-    <td>The minimal margin in pixels between items.</td>
+    <td>The minimal margin in pixels between items in both horizontal and vertical direction.</td>
+</tr>
+
+<tr>
+    <td>margin.item.horizontal</td>
+    <td>Number</td>
+    <td>10</td>
+    <td>The minimal horizontal margin in pixels between items.</td>
+</tr>
+
+<tr>
+    <td>margin.item.vertical</td>
+    <td>Number</td>
+    <td>10</td>
+    <td>The minimal vertical margin in pixels between items.</td>
 </tr>
 
 <tr>
@@ -726,6 +740,12 @@ timeline.clear({options: true}); // clear options only
     <td>Get an array with the ids of the currently selected items.</td>
   </tr>
 
+  <tr>
+    <td>getVisibleItems()</td>
+    <td>Number[]</td>
+    <td>Get an array with the ids of the currently visible items.</td>
+  </tr>
+
   <tr>
     <td>getWindow()</td>
     <td>Object</td>

examples/network/02_random_nodes.html

@@ -31,7 +31,8 @@
       for (var i = 0; i < nodeCount; i++) {
         nodes.push({
           id: i,
-          label: String(i)
+          label: String(i),
+          radius:300
         });
 
         connectionCount[i] = 0;
@@ -81,12 +82,12 @@
     },
     stabilize: false
     };
-      network = new vis.Network(container, data, options);
+    network = new vis.Network(container, data, options);
 
-      // add event listeners
-      network.on('select', function(params) {
-        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
-      });
+    // add event listeners
+    network.on('select', function(params) {
+      document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
+    });
     }
   </script>
 </head>

examples/network/07_selections.html

@@ -56,7 +56,7 @@
   });
 
   // set initial selection (id's of some nodes)
-  network.setSelection([3, 4, 5]);
+  network.selectNodes([3, 4, 5]);
 </script>
 
 </body>

examples/network/23_hierarchical_layout.html

@@ -82,6 +82,7 @@
         edges: {
         },
         stabilize: false,
+        smoothCurves: false,
         hierarchicalLayout: {
             direction: directionInput.value
         }

examples/network/24_hierarchical_layout_userdefined.html

@@ -20,6 +20,7 @@
     var nodes = null;
     var edges = null;
     var network = null;
+    var directionInput = document.getElementById("direction");
 
     function draw() {
       nodes = [];
@@ -113,7 +114,9 @@
       };
 
     var options = {
-        hierarchicalLayout:true
+        hierarchicalLayout: {
+            direction: directionInput.value
+        }
     };
       network = new vis.Network(container, data, options);
 
@@ -122,6 +125,7 @@
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
+
   </script>
 </head>
 
@@ -129,11 +133,40 @@
 <h2>Hierarchical Layout - User-defined</h2>
 <div style="width:700px; font-size:14px;">
     This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
+    If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
 </div>
+<input type="button" id="btn-UD" value="Up-Down">
+<input type="button" id="btn-DU" value="Down-Up">
+<input type="button" id="btn-LR" value="Left-Right">
+<input type="button" id="btn-RL" value="Right-Left">
+<input type="hidden" id='direction' value="UD">
 <br />
 
 <div id="mynetwork"></div>
 
 <p id="selection"></p>
+<script language="JavaScript">
+    var directionInput = document.getElementById("direction");
+    var btnUD = document.getElementById("btn-UD");
+    btnUD.onclick = function() {
+        directionInput.value = "UD";
+        draw();
+    }
+    var btnDU = document.getElementById("btn-DU");
+    btnDU.onclick = function() {
+        directionInput.value = "DU";
+        draw();
+    };
+    var btnLR = document.getElementById("btn-LR");
+    btnLR.onclick = function() {
+        directionInput.value = "LR";
+        draw();
+    };
+    var btnRL = document.getElementById("btn-RL");
+    btnRL.onclick = function() {
+        directionInput.value = "RL";
+        draw();
+    };
+</script>
 </body>
 </html>

examples/network/26_staticSmoothCurves.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Static smooth curves</title>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 400px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+
+<body>
+
+<h2>Static smooth curves</h2>
+<div style="width:700px; font-size:14px;">
+    All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
+    support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
+    solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
+    nodes. There are multiple ways to determine the way this curve is drawn. This example shows the effect of the different
+    types. <br /> <br />
+    Drag the nodes around each other to see how the smooth curves are drawn for each setting. For animated system, we
+    recommend only the continuous mode. In the next example you can see the effect of these methods on a large network. Keep in mind
+    that the direction (the from and to) of the curve matters.
+    <br /> <br />
+</div>
+
+Smooth curve type:
+<select id="dropdownID">
+    <option value="continuous">continuous</option>
+    <option value="discrete">discrete</option>
+    <option value="diagonalCross">diagonalCross</option>
+    <option value="straightCross">straightCross</option>
+    <option value="horizontal">horizontal</option>
+    <option value="vertical">vertical</option>
+</select>
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+
+var dropdown = document.getElementById("dropdownID");
+dropdown.onchange = update;
+  // create an array with nodes
+  var nodes = [
+    {id: 1, label: 'Node 1'},
+    {id: 2, label: 'Node 2', x:150, y:130, allowedToMoveX: true, allowedToMoveY: true}
+  ];
+
+  // create an array with edges
+  var edges = [
+    {from: 1, to: 2}
+  ];
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {physics:{barnesHut:{gravitationalConstant:0, springConstant:0, centralGravity: 0}},
+  smoothCurves:{dynamic:false, type: '1'}};
+  var network = new vis.Network(container, data, options);
+
+    function update() {
+        var type = dropdown.value;
+        network.setOptions({smoothCurves:{type:type}});
+    }
+</script>
+
+</body>
+</html>

examples/network/30_importing_from_gephi.html

@@ -0,0 +1,166 @@
+<!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="../../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>
+</head>
+
+<body>
+
+<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
+<div style="width:700px; font-size:14px;">
+    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>
+
+
+<input type="checkbox" id="allowedToMove">: Allow to move after import. <br/>
+<input type="checkbox"  id="parseColor">: Parse the color instead of copy (adds borders, highlights etc.)
+<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 allowedToMoveCheckbox = document.getElementById("allowedToMove");
+allowedToMoveCheckbox.onchange = redrawAll;
+
+var parseColorCheckbox = document.getElementById("parseColor");
+parseColorCheckbox.onchange = redrawAll;
+
+var nodeContent = document.getElementById("nodeContent");
+
+loadJSON("./data/WorldCup2014.json",redrawAll);
+
+var container = document.getElementById('mynetwork');
+var data = {
+    nodes: nodes,
+    edges: edges
+};
+var options = {
+    nodes: {
+        shape: 'dot',
+        fontFace: "Tahoma"
+    },
+    edges: {
+        width: 0.15,
+        inheritColor: "from"
+    },
+    tooltip: {
+        delay: 200,
+        fontSize: 12,
+        color: {
+            background: "#fff"
+        }
+    },
+    smoothCurves: {dynamic:false, type: "continuous"},
+    stabilize: false,
+    physics: {barnesHut: {gravitationalConstant: -10000, springConstant: 0.002, springLength: 150}},
+    hideEdgesOnDrag: true
+};
+
+network = new vis.Network(container, data, options);
+
+/**
+ * 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 allowedToMove = allowedToMoveCheckbox.checked;
+    var parseColor = parseColorCheckbox.checked;
+    var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {allowedToMove:allowedToMove, 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
+    nodeContent.innerHTML = syntaxHighlight(data); // show the data in the div
+    network.zoomExtent(); // zoom to fit
+}
+
+// from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
+function syntaxHighlight(json) {
+    if (typeof json != 'string') {
+        json = JSON.stringify(json, undefined, 2);
+    }
+    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        var cls = 'number';
+        if (/^"/.test(match)) {
+            if (/:$/.test(match)) {
+                cls = 'key';
+            } else {
+                cls = 'string';
+            }
+        } else if (/true|false/.test(match)) {
+            cls = 'boolean';
+        } else if (/null/.test(match)) {
+            cls = 'null';
+        }
+        return '<span class="' + cls + '">' + match + '</span>';
+    });
+}
+
+function loadJSON(path, success, error) {
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                success(JSON.parse(xhr.responseText));
+            }
+            else {
+                error(xhr);
+            }
+        }
+    };
+    xhr.open("GET", path, true);
+    xhr.send();
+}
+
+</script>
+
+
+
+</body></html>

examples/network/index.html

@@ -37,6 +37,11 @@
   <p><a href="23_hierarchical_layout.html">23_hierarchical_layout.html</a></p>
   <p><a href="24_hierarchical_layout_userdefined.html">24_hierarchical_layout_userdefined.html</a></p>
   <p><a href="25_physics_configuration.html">25_physics_configuration.html</a></p>
+  <p><a href="26_staticSmoothCurves.html">26_staticSmoothCurves.html</a></p>
+  <p><a href="27_world_cup_network.html">27_world_cup_network.html</a></p>
+  <p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p>
+  <p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
+  <p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>

index.html

@@ -74,7 +74,7 @@ bower install vis
 <h3>download</h3>
 
 <a href="download/vis.zip">Click here to download vis.js</a>
-(version <span class="version">3.0.0</span>)
+(version <span class="version">3.1.0</span>)
 
 
 <h2 id="example">Example</h2>
@@ -379,8 +379,8 @@ The source code of the examples can be found in the
   </div>
   <div class="thumb">
     <a href="examples/network/24_hierarchical_layout_userdefined.html">
-      <img src="img/gallery/network/24_hierarchical_layout_predefined.png">
-      <div>hierarchical layout predefined</div>
+      <img src="img/gallery/network/24_hierarchical_layout_userdefined.png">
+      <div>hierarchical layout userdefined</div>
     </a>
   </div>
   <div class="thumb">
@@ -389,6 +389,36 @@ The source code of the examples can be found in the
       <div>physics configuration</div>
     </a>
   </div>
+  <div class="thumb">
+    <a href="examples/network/26_staticSmoothCurves.html">
+      <img src="img/gallery/network/26_staticSmoothCurves.png">
+      <div>static smooth curves</div>
+    </a>
+  </div>
+  <div class="thumb">
+    <a href="examples/network/27_world_cup_network.html">
+      <img src="img/gallery/network/27_world_cup_network.png">
+      <div>world cup network</div>
+    </a>
+  </div>
+  <div class="thumb">
+    <a href="examples/network/28_world_cup_network_performance.html">
+      <img src="img/gallery/network/28_world_cup_network_performance.png">
+      <div>world cup network performance</div>
+    </a>
+  </div>
+  <div class="thumb">
+    <a href="examples/network/29_neighbourhood_highlight.html">
+      <img src="img/gallery/network/29_neighbourhood_highlight.png">
+      <div>neighborhood heighlight</div>
+    </a>
+  </div>
+  <div class="thumb">
+    <a href="examples/network/30_importing_from_gephi.html">
+      <img src="img/gallery/network/30_importing_from_gephi.png">
+      <div>improting from gephi</div>
+    </a>
+  </div>
   <div class="thumb">
     <a href="examples/network/graphviz/graphviz_gallery.html">
       <img src="img/gallery/network/graphviz_gallery.png">