refactor: graph --> network

Jakefile.js

@@ -49,8 +49,8 @@ task('build', {async: true}, function () {
       './src/timeline/component/css/dataaxis.css',
       './src/timeline/component/css/pathStyles.css',
 
-      './src/graph/css/graph-manipulation.css',
-      './src/graph/css/graph-navigation.css'
+      './src/network/css/network-manipulation.css',
+      './src/network/css/network-navigation.css'
     ],
     dest: VIS_CSS,
     separator: '\n'
@@ -88,25 +88,25 @@ task('build', {async: true}, function () {
       './src/timeline/Timeline.js',
       './src/timeline/Graph2d.js',
 
-      './src/graph/dotparser.js',
-      './src/graph/shapes.js',
-      './src/graph/Node.js',
-      './src/graph/Edge.js',
-      './src/graph/Popup.js',
-      './src/graph/Groups.js',
-      './src/graph/Images.js',
-      './src/graph/graphMixins/physics/PhysicsMixin.js',
-      './src/graph/graphMixins/physics/HierarchialRepulsion.js',
-      './src/graph/graphMixins/physics/BarnesHut.js',
-      './src/graph/graphMixins/physics/Repulsion.js',
-      './src/graph/graphMixins/HierarchicalLayoutMixin.js',
-      './src/graph/graphMixins/ManipulationMixin.js',
-      './src/graph/graphMixins/SectorsMixin.js',
-      './src/graph/graphMixins/ClusterMixin.js',
-      './src/graph/graphMixins/SelectionMixin.js',
-      './src/graph/graphMixins/NavigationMixin.js',
-      './src/graph/graphMixins/MixinLoader.js',
-      './src/graph/Graph.js',
+      './src/network/dotparser.js',
+      './src/network/shapes.js',
+      './src/network/Node.js',
+      './src/network/Edge.js',
+      './src/network/Popup.js',
+      './src/network/Groups.js',
+      './src/network/Images.js',
+      './src/network/networkMixins/physics/PhysicsMixin.js',
+      './src/network/networkMixins/physics/HierarchialRepulsion.js',
+      './src/network/networkMixins/physics/BarnesHut.js',
+      './src/network/networkMixins/physics/Repulsion.js',
+      './src/network/networkMixins/HierarchicalLayoutMixin.js',
+      './src/network/networkMixins/ManipulationMixin.js',
+      './src/network/networkMixins/SectorsMixin.js',
+      './src/network/networkMixins/ClusterMixin.js',
+      './src/network/networkMixins/SelectionMixin.js',
+      './src/network/networkMixins/NavigationMixin.js',
+      './src/network/networkMixins/MixinLoader.js',
+      './src/network/Network.js',
 
       './src/graph3d/Graph3d.js',
 
@@ -117,7 +117,7 @@ task('build', {async: true}, function () {
   });
 
   // copy images
-  wrench.copyDirSyncRecursive('./src/graph/img', DIST + '/img/graph', {
+  wrench.copyDirSyncRecursive('./src/network/img', DIST + '/img/network', {
     forceDelete: true
   });
   wrench.copyDirSyncRecursive('./src/timeline/img', DIST + '/img/timeline', {

dist/vis.css

@@ -546,7 +546,7 @@ div.graph-manipulation-closeDiv {
     margin-left:590px;
     background-position: 0px 0px;
     background-repeat:no-repeat;
-    background-image: url("img/graph/cross.png");
+    background-image: url("img/network/cross.png");
     cursor: pointer;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -586,7 +586,7 @@ span.graph-manipulationUI:active {
 }
 
 span.graph-manipulationUI.back {
-    background-image: url("img/graph/backIcon.png");
+    background-image: url("img/network/backIcon.png");
 }
 
 span.graph-manipulationUI.none:hover {
@@ -605,11 +605,11 @@ span.graph-manipulationUI.notification{
 }
 
 span.graph-manipulationUI.add {
-    background-image: url("img/graph/addNodeIcon.png");
+    background-image: url("img/network/addNodeIcon.png");
 }
 
 span.graph-manipulationUI.edit {
-    background-image: url("img/graph/editIcon.png");
+    background-image: url("img/network/editIcon.png");
 }
 
 span.graph-manipulationUI.edit.editmode {
@@ -620,11 +620,11 @@ span.graph-manipulationUI.edit.editmode {
 }
 
 span.graph-manipulationUI.connect {
-    background-image: url("img/graph/connectIcon.png");
+    background-image: url("img/network/connectIcon.png");
 }
 
 span.graph-manipulationUI.delete {
-    background-image: url("img/graph/deleteIcon.png");
+    background-image: url("img/network/deleteIcon.png");
 }
 /* top right bottom left */
 span.graph-manipulationLabel {
@@ -670,37 +670,37 @@ div.graph-navigation.active {
 }
 
 div.graph-navigation.up {
-    background-image: url("img/graph/upArrow.png");
+    background-image: url("img/network/upArrow.png");
     bottom:50px;
     left:55px;
 }
 div.graph-navigation.down {
-    background-image: url("img/graph/downArrow.png");
+    background-image: url("img/network/downArrow.png");
     bottom:10px;
     left:55px;
 }
 div.graph-navigation.left {
-    background-image: url("img/graph/leftArrow.png");
+    background-image: url("img/network/leftArrow.png");
     bottom:10px;
     left:15px;
 }
 div.graph-navigation.right {
-    background-image: url("img/graph/rightArrow.png");
+    background-image: url("img/network/rightArrow.png");
     bottom:10px;
     left:95px;
 }
 div.graph-navigation.zoomIn {
-    background-image: url("img/graph/plus.png");
+    background-image: url("img/network/plus.png");
     bottom:10px;
     right:15px;
 }
 div.graph-navigation.zoomOut {
-    background-image: url("img/graph/minus.png");
+    background-image: url("img/network/minus.png");
     bottom:10px;
     right:55px;
 }
 div.graph-navigation.zoomExtends {
-    background-image: url("img/graph/zoomExtends.png");
+    background-image: url("img/network/zoomExtends.png");
     bottom:50px;
     right:15px;
 }

dist/vis.js

@@ -4,8 +4,8 @@
  *
  * A dynamic, browser-based visualization library.
  *
- * @version 2.0.1-SNAPSHOT
- * @date    2014-07-01
+ * @version @@version
+ * @date    @@date
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -12292,9 +12292,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
  *                              {string} image  An image url
  *                              {string} title  An title text, can be HTML
  *                              {anytype} group A group name or number
- * @param {Graph.Images} imagelist    A list with images. Only needed
+ * @param {Network.Images} imagelist    A list with images. Only needed
  *                                            when the node has an image
- * @param {Graph.Groups} grouplist    A list with groups. Needed for
+ * @param {Network.Groups} grouplist    A list with groups. Needed for
  *                                            retrieving group properties
  * @param {Object}               constants    An object with default values for
  *                                            example for the color
@@ -13252,7 +13252,7 @@ Node.prototype.updateVelocity = function(massBeforeClustering) {
  *                                to (number), label (string, color (string),
  *                                width (number), style (string),
  *                                length (number), title (string)
- * @param {Graph} graph A graph object, used to find and edge to
+ * @param {Network} graph A graph object, used to find and edge to
  *                                nodes.
  * @param {Object} constants      An object with default values for
  *                                example for the color
@@ -13372,6 +13372,7 @@ Edge.prototype.setProperties = function(properties, constants) {
     else {
       if (properties.color.color !== undefined)     {this.color.color = properties.color.color;}
       if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
+      if (properties.color.hover !== undefined)     {this.color.hover = properties.color.hover;}
     }
   }
 
@@ -14232,7 +14233,7 @@ function Popup(container, x, y, text, style) {
       style = text;
       text = undefined;
     } else {
-      // for backwards compatibility, in case clients other than Graph are creating Popup directly
+      // for backwards compatibility, in case clients other than Network are creating Popup directly
       style = {
         fontColor: 'black',
         fontSize: 14, // px
@@ -16666,7 +16667,7 @@ var manipulationMixin = {
 var SectorMixin = {
 
   /**
-   * This function is only called by the setData function of the Graph object.
+   * This function is only called by the setData function of the Network object.
    * This loads the global references into the active sector. This initializes the sector.
    *
    * @private
@@ -17018,7 +17019,7 @@ var SectorMixin = {
    *
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
    *                              |   we dont pass the function itself because then the "this" is the window object
-   *                              |   instead of the Graph object
+   *                              |   instead of the Network object
    * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
    * @private
    */
@@ -17057,7 +17058,7 @@ var SectorMixin = {
    *
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
    *                              |   we dont pass the function itself because then the "this" is the window object
-   *                              |   instead of the Graph object
+   *                              |   instead of the Network object
    * @param {*} [argument]        |   Optional: arguments to pass to the runFunction
    * @private
    */
@@ -17086,7 +17087,7 @@ var SectorMixin = {
    *
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
    *                              |   we don't pass the function itself because then the "this" is the window object
-   *                              |   instead of the Graph object
+   *                              |   instead of the Network object
    * @param {*} [argument]            |   Optional: arguments to pass to the runFunction
    * @private
    */
@@ -17124,7 +17125,7 @@ var SectorMixin = {
    *
    * @param {String} runFunction  |   This is the NAME of a function we want to call in all active sectors
    *                              |   we don't pass the function itself because then the "this" is the window object
-   *                              |   instead of the Graph object
+   *                              |   instead of the Network object
    * @param {*} [argument]        |   Optional: arguments to pass to the runFunction
    * @private
    */
@@ -19280,7 +19281,7 @@ var graphMixinLoaders = {
   _loadMixin: function (sourceVariable) {
     for (var mixinFunction in sourceVariable) {
       if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        Graph.prototype[mixinFunction] = sourceVariable[mixinFunction];
+        Network.prototype[mixinFunction] = sourceVariable[mixinFunction];
       }
     }
   },
@@ -19295,7 +19296,7 @@ var graphMixinLoaders = {
   _clearMixin: function (sourceVariable) {
     for (var mixinFunction in sourceVariable) {
       if (sourceVariable.hasOwnProperty(mixinFunction)) {
-        Graph.prototype[mixinFunction] = undefined;
+        Network.prototype[mixinFunction] = undefined;
       }
     }
   },
@@ -19465,18 +19466,18 @@ var graphMixinLoaders = {
 };
 
 /**
- * @constructor Graph
+ * @constructor Network
  * Create a graph visualization, displaying nodes and edges.
  *
- * @param {Element} container   The DOM element in which the Graph will
+ * @param {Element} container   The DOM element in which the Network will
  *                                  be created. Normally a div element.
  * @param {Object} data         An object containing parameters
  *                              {Array} nodes
  *                              {Array} edges
  * @param {Object} options      Options
  */
-function Graph (container, data, options) {
-  if (!(this instanceof Graph)) {
+function Network (container, data, options) {
+  if (!(this instanceof Network)) {
     throw new SyntaxError('Constructor must be called with the new operator');
   }
 
@@ -19685,13 +19686,13 @@ function Graph (container, data, options) {
   this._loadPhysicsSystem();
   // create a frame and canvas
   this._create();
-  // load the sector system.    (mandatory, fully integrated with Graph)
+  // load the sector system.    (mandatory, fully integrated with Network)
   this._loadSectorSystem();
   // load the cluster system.   (mandatory, even when not using the cluster system, there are function calls to it)
   this._loadClusterSystem();
-  // load the selection system. (mandatory, required by Graph)
+  // load the selection system. (mandatory, required by Network)
   this._loadSelectionSystem();
-  // load the selection system. (mandatory, required by Graph)
+  // load the selection system. (mandatory, required by Network)
   this._loadHierarchySystem();
 
   // apply options
@@ -19777,8 +19778,8 @@ function Graph (container, data, options) {
   }
 }
 
-// Extend Graph with an Emitter mixin
-Emitter(Graph.prototype);
+// Extend Network with an Emitter mixin
+Emitter(Network.prototype);
 
 /**
  * Get the script path where the vis.js library is located
@@ -19787,7 +19788,7 @@ Emitter(Graph.prototype);
  *                                 end with a slash.
  * @private
  */
-Graph.prototype._getScriptPath = function() {
+Network.prototype._getScriptPath = function() {
   var scripts = document.getElementsByTagName( 'script' );
 
   // find script named vis.js or vis.min.js
@@ -19808,7 +19809,7 @@ Graph.prototype._getScriptPath = function() {
  * Find the center position of the graph
  * @private
  */
-Graph.prototype._getRange = function() {
+Network.prototype._getRange = function() {
   var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
   for (var nodeId in this.nodes) {
     if (this.nodes.hasOwnProperty(nodeId)) {
@@ -19831,7 +19832,7 @@ Graph.prototype._getRange = function() {
  * @returns {{x: number, y: number}}
  * @private
  */
-Graph.prototype._findCenter = function(range) {
+Network.prototype._findCenter = function(range) {
   return {x: (0.5 * (range.maxX + range.minX)),
           y: (0.5 * (range.maxY + range.minY))};
 };
@@ -19842,7 +19843,7 @@ Graph.prototype._findCenter = function(range) {
  *
  * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
  */
-Graph.prototype._centerGraph = function(range) {
+Network.prototype._centerGraph = function(range) {
   var center = this._findCenter(range);
 
   center.x *= this.scale;
@@ -19860,7 +19861,7 @@ Graph.prototype._centerGraph = function(range) {
  * @param {Boolean} [initialZoom]  | zoom based on fitted formula or range, true = fitted, default = false;
  * @param {Boolean} [disableStart] | If true, start is not called.
  */
-Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
+Network.prototype.zoomExtent = function(initialZoom, disableStart) {
   if (initialZoom === undefined) {
     initialZoom = false;
   }
@@ -19924,7 +19925,7 @@ Graph.prototype.zoomExtent = function(initialZoom, disableStart) {
  * Update the this.nodeIndices with the most recent node index list
  * @private
  */
-Graph.prototype._updateNodeIndexList = function() {
+Network.prototype._updateNodeIndexList = function() {
   this._clearNodeIndexList();
   for (var idx in this.nodes) {
     if (this.nodes.hasOwnProperty(idx)) {
@@ -19944,7 +19945,7 @@ Graph.prototype._updateNodeIndexList = function() {
  *                                   {Options} [options] Object with options
  * @param {Boolean} [disableStart]   | optional: disable the calling of the start function.
  */
-Graph.prototype.setData = function(data, disableStart) {
+Network.prototype.setData = function(data, disableStart) {
   if (disableStart === undefined) {
     disableStart = false;
   }
@@ -19990,7 +19991,7 @@ Graph.prototype.setData = function(data, disableStart) {
  * @param {Object} options
  * @param {Boolean} [initializeView] | set zoom and translation to default.
  */
-Graph.prototype.setOptions = function (options) {
+Network.prototype.setOptions = function (options) {
   if (options) {
     var prop;
     // retrieve parameter values
@@ -20233,13 +20234,13 @@ Graph.prototype.setOptions = function (options) {
 };
 
 /**
- * Create the main frame for the Graph.
- * This function is executed once when a Graph object is created. The frame
+ * Create the main frame for the Network.
+ * This function is executed once when a Network object is created. The frame
  * contains a canvas, and this canvas contains all objects like the axis and
  * nodes.
  * @private
  */
-Graph.prototype._create = function () {
+Network.prototype._create = function () {
   // remove all elements from the container element.
   while (this.containerElement.hasChildNodes()) {
     this.containerElement.removeChild(this.containerElement.firstChild);
@@ -20292,7 +20293,7 @@ Graph.prototype._create = function () {
  * Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
  * @private
  */
-Graph.prototype._createKeyBinds = function() {
+Network.prototype._createKeyBinds = function() {
   var me = this;
   this.mousetrap = mousetrap;
 
@@ -20333,7 +20334,7 @@ Graph.prototype._createKeyBinds = function() {
  * @return {{x: Number, y: Number}} pointer
  * @private
  */
-Graph.prototype._getPointer = function (touch) {
+Network.prototype._getPointer = function (touch) {
   return {
     x: touch.pageX - vis.util.getAbsoluteLeft(this.frame.canvas),
     y: touch.pageY - vis.util.getAbsoluteTop(this.frame.canvas)
@@ -20345,7 +20346,7 @@ Graph.prototype._getPointer = function (touch) {
  * @param event
  * @private
  */
-Graph.prototype._onTouch = function (event) {
+Network.prototype._onTouch = function (event) {
   this.drag.pointer = this._getPointer(event.gesture.center);
   this.drag.pinched = false;
   this.pinch.scale = this._getScale();
@@ -20357,7 +20358,7 @@ Graph.prototype._onTouch = function (event) {
  * handle drag start event
  * @private
  */
-Graph.prototype._onDragStart = function () {
+Network.prototype._onDragStart = function () {
   this._handleDragStart();
 };
 
@@ -20368,7 +20369,7 @@ Graph.prototype._onDragStart = function () {
  *
  * @private
  */
-Graph.prototype._handleDragStart = function() {
+Network.prototype._handleDragStart = function() {
   var drag = this.drag;
   var node = this._getNodeAt(drag.pointer);
   // note: drag.pointer is set in _onTouch to get the initial touch location
@@ -20414,7 +20415,7 @@ Graph.prototype._handleDragStart = function() {
  * handle drag event
  * @private
  */
-Graph.prototype._onDrag = function (event) {
+Network.prototype._onDrag = function (event) {
   this._handleOnDrag(event)
 };
 
@@ -20425,7 +20426,7 @@ Graph.prototype._onDrag = function (event) {
  *
  * @private
  */
-Graph.prototype._handleOnDrag = function(event) {
+Network.prototype._handleOnDrag = function(event) {
   if (this.drag.pinched) {
     return;
   }
@@ -20479,7 +20480,7 @@ Graph.prototype._handleOnDrag = function(event) {
  * handle drag start event
  * @private
  */
-Graph.prototype._onDragEnd = function () {
+Network.prototype._onDragEnd = function () {
   this.drag.dragging = false;
   var selection = this.drag.selection;
   if (selection) {
@@ -20495,7 +20496,7 @@ Graph.prototype._onDragEnd = function () {
  * handle tap/click event: select/unselect a node
  * @private
  */
-Graph.prototype._onTap = function (event) {
+Network.prototype._onTap = function (event) {
   var pointer = this._getPointer(event.gesture.center);
   this.pointerPosition = pointer;
   this._handleTap(pointer);
@@ -20507,7 +20508,7 @@ Graph.prototype._onTap = function (event) {
  * handle doubletap event
  * @private
  */
-Graph.prototype._onDoubleTap = function (event) {
+Network.prototype._onDoubleTap = function (event) {
   var pointer = this._getPointer(event.gesture.center);
   this._handleDoubleTap(pointer);
 };
@@ -20517,7 +20518,7 @@ Graph.prototype._onDoubleTap = function (event) {
  * handle long tap event: multi select nodes
  * @private
  */
-Graph.prototype._onHold = function (event) {
+Network.prototype._onHold = function (event) {
   var pointer = this._getPointer(event.gesture.center);
   this.pointerPosition = pointer;
   this._handleOnHold(pointer);
@@ -20528,7 +20529,7 @@ Graph.prototype._onHold = function (event) {
  *
  * @private
  */
-Graph.prototype._onRelease = function (event) {
+Network.prototype._onRelease = function (event) {
   var pointer = this._getPointer(event.gesture.center);
   this._handleOnRelease(pointer);
 };
@@ -20538,7 +20539,7 @@ Graph.prototype._onRelease = function (event) {
  * @param event
  * @private
  */
-Graph.prototype._onPinch = function (event) {
+Network.prototype._onPinch = function (event) {
   var pointer = this._getPointer(event.gesture.center);
 
   this.drag.pinched = true;
@@ -20558,7 +20559,7 @@ Graph.prototype._onPinch = function (event) {
  * @return {Number} appliedScale    scale is limited within the boundaries
  * @private
  */
-Graph.prototype._zoom = function(scale, pointer) {
+Network.prototype._zoom = function(scale, pointer) {
   if (this.constants.zoomable == true) {
     var scaleOld = this._getScale();
     if (scale < 0.00001) {
@@ -20601,7 +20602,7 @@ Graph.prototype._zoom = function(scale, pointer) {
  * @param {MouseEvent}  event
  * @private
  */
-Graph.prototype._onMouseWheel = function(event) {
+Network.prototype._onMouseWheel = function(event) {
   // retrieve delta
   var delta = 0;
   if (event.wheelDelta) { /* IE/Opera. */
@@ -20643,7 +20644,7 @@ Graph.prototype._onMouseWheel = function(event) {
  * @param  {Event} event
  * @private
  */
-Graph.prototype._onMouseMoveTitle = function (event) {
+Network.prototype._onMouseMoveTitle = function (event) {
   var gesture = util.fakeGesture(this, event);
   var pointer = this._getPointer(gesture.center);
 
@@ -20708,7 +20709,7 @@ Graph.prototype._onMouseMoveTitle = function (event) {
  * @param {{x:Number, y:Number}} pointer
  * @private
  */
-Graph.prototype._checkShowPopup = function (pointer) {
+Network.prototype._checkShowPopup = function (pointer) {
   var obj = {
     left:   this._XconvertDOMtoCanvas(pointer.x),
     top:    this._YconvertDOMtoCanvas(pointer.y),
@@ -20778,7 +20779,7 @@ Graph.prototype._checkShowPopup = function (pointer) {
  * @param {{x:Number, y:Number}} pointer
  * @private
  */
-Graph.prototype._checkHidePopup = function (pointer) {
+Network.prototype._checkHidePopup = function (pointer) {
   if (!this.popupObj || !this._getNodeAt(pointer) ) {
     this.popupObj = undefined;
     if (this.popup) {
@@ -20795,7 +20796,7 @@ Graph.prototype._checkHidePopup = function (pointer) {
  * @param {string} height  Height in pixels or percentage  (for example '400px'
  *                         or '30%')
  */
-Graph.prototype.setSize = function(width, height) {
+Network.prototype.setSize = function(width, height) {
   this.frame.style.width = width;
   this.frame.style.height = height;
 
@@ -20823,7 +20824,7 @@ Graph.prototype.setSize = function(width, height) {
  * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
  * @private
  */
-Graph.prototype._setNodes = function(nodes) {
+Network.prototype._setNodes = function(nodes) {
   var oldNodesData = this.nodesData;
 
   if (nodes instanceof DataSet || nodes instanceof DataView) {
@@ -20869,7 +20870,7 @@ Graph.prototype._setNodes = function(nodes) {
  * @param {Number[] | String[]} ids
  * @private
  */
-Graph.prototype._addNodes = function(ids) {
+Network.prototype._addNodes = function(ids) {
   var id;
   for (var i = 0, len = ids.length; i < len; i++) {
     id = ids[i];
@@ -20901,7 +20902,7 @@ Graph.prototype._addNodes = function(ids) {
  * @param {Number[] | String[]} ids
  * @private
  */
-Graph.prototype._updateNodes = function(ids) {
+Network.prototype._updateNodes = function(ids) {
   var nodes = this.nodes,
       nodesData = this.nodesData;
   for (var i = 0, len = ids.length; i < len; i++) {
@@ -20933,7 +20934,7 @@ Graph.prototype._updateNodes = function(ids) {
  * @param {Number[] | String[]} ids
  * @private
  */
-Graph.prototype._removeNodes = function(ids) {
+Network.prototype._removeNodes = function(ids) {
   var nodes = this.nodes;
   for (var i = 0, len = ids.length; i < len; i++) {
     var id = ids[i];
@@ -20956,7 +20957,7 @@ Graph.prototype._removeNodes = function(ids) {
  * @private
  * @private
  */
-Graph.prototype._setEdges = function(edges) {
+Network.prototype._setEdges = function(edges) {
   var oldEdgesData = this.edgesData;
 
   if (edges instanceof DataSet || edges instanceof DataView) {
@@ -21003,7 +21004,7 @@ Graph.prototype._setEdges = function(edges) {
  * @param {Number[] | String[]} ids
  * @private
  */
-Graph.prototype._addEdges = function (ids) {
+Network.prototype._addEdges = function (ids) {
   var edges = this.edges,
       edgesData = this.edgesData;
 
@@ -21034,7 +21035,7 @@ Graph.prototype._addEdges = function (ids) {
  * @param {Number[] | String[]} ids
  * @private
  */
-Graph.prototype._updateEdges = function (ids) {
+Network.prototype._updateEdges = function (ids) {
   var edges = this.edges,
       edgesData = this.edgesData;
   for (var i = 0, len = ids.length; i < len; i++) {
@@ -21069,7 +21070,7 @@ Graph.prototype._updateEdges = function (ids) {
  * @param {Number[] | String[]} ids
  * @private
  */
-Graph.prototype._removeEdges = function (ids) {
+Network.prototype._removeEdges = function (ids) {
   var edges = this.edges;
   for (var i = 0, len = ids.length; i < len; i++) {
     var id = ids[i];
@@ -21096,7 +21097,7 @@ Graph.prototype._removeEdges = function (ids) {
  * Reconnect all edges
  * @private
  */
-Graph.prototype._reconnectEdges = function() {
+Network.prototype._reconnectEdges = function() {
   var id,
       nodes = this.nodes,
       edges = this.edges;
@@ -21124,7 +21125,7 @@ Graph.prototype._reconnectEdges = function() {
  *                        setValueRange(min, max).
  * @private
  */
-Graph.prototype._updateValueRange = function(obj) {
+Network.prototype._updateValueRange = function(obj) {
   var id;
 
   // determine the range of the objects
@@ -21154,7 +21155,7 @@ Graph.prototype._updateValueRange = function(obj) {
  * Redraw the graph with the current data
  * chart will be resized too.
  */
-Graph.prototype.redraw = function() {
+Network.prototype.redraw = function() {
   this.setSize(this.width, this.height);
   this._redraw();
 };
@@ -21163,7 +21164,7 @@ Graph.prototype.redraw = function() {
  * Redraw the graph with the current data
  * @private
  */
-Graph.prototype._redraw = function() {
+Network.prototype._redraw = function() {
   var ctx = this.frame.canvas.getContext('2d');
   // clear the canvas
   var w = this.frame.canvas.width;
@@ -21202,7 +21203,7 @@ Graph.prototype._redraw = function() {
  * @param {Number} offsetY    Vertical offset
  * @private
  */
-Graph.prototype._setTranslation = function(offsetX, offsetY) {
+Network.prototype._setTranslation = function(offsetX, offsetY) {
   if (this.translation === undefined) {
     this.translation = {
       x: 0,
@@ -21225,7 +21226,7 @@ Graph.prototype._setTranslation = function(offsetX, offsetY) {
  * @return {Object} translation    An object with parameters x and y, both a number
  * @private
  */
-Graph.prototype._getTranslation = function() {
+Network.prototype._getTranslation = function() {
   return {
     x: this.translation.x,
     y: this.translation.y
@@ -21237,7 +21238,7 @@ Graph.prototype._getTranslation = function() {
  * @param {Number} scale   Scaling factor 1.0 is unscaled
  * @private
  */
-Graph.prototype._setScale = function(scale) {
+Network.prototype._setScale = function(scale) {
   this.scale = scale;
 };
 
@@ -21246,7 +21247,7 @@ Graph.prototype._setScale = function(scale) {
  * @return {Number} scale   Scaling factor 1.0 is unscaled
  * @private
  */
-Graph.prototype._getScale = function() {
+Network.prototype._getScale = function() {
   return this.scale;
 };
 
@@ -21257,7 +21258,7 @@ Graph.prototype._getScale = function() {
  * @returns {number}
  * @private
  */
-Graph.prototype._XconvertDOMtoCanvas = function(x) {
+Network.prototype._XconvertDOMtoCanvas = function(x) {
   return (x - this.translation.x) / this.scale;
 };
 
@@ -21268,7 +21269,7 @@ Graph.prototype._XconvertDOMtoCanvas = function(x) {
  * @returns {number}
  * @private
  */
-Graph.prototype._XconvertCanvasToDOM = function(x) {
+Network.prototype._XconvertCanvasToDOM = function(x) {
   return x * this.scale + this.translation.x;
 };
 
@@ -21279,7 +21280,7 @@ Graph.prototype._XconvertCanvasToDOM = function(x) {
  * @returns {number}
  * @private
  */
-Graph.prototype._YconvertDOMtoCanvas = function(y) {
+Network.prototype._YconvertDOMtoCanvas = function(y) {
   return (y - this.translation.y) / this.scale;
 };
 
@@ -21290,7 +21291,7 @@ Graph.prototype._YconvertDOMtoCanvas = function(y) {
  * @returns {number}
  * @private
  */
-Graph.prototype._YconvertCanvasToDOM = function(y) {
+Network.prototype._YconvertCanvasToDOM = function(y) {
   return y * this.scale + this.translation.y ;
 };
 
@@ -21301,7 +21302,7 @@ Graph.prototype._YconvertCanvasToDOM = function(y) {
  * @returns {{x: number, y: number}}
  * @constructor
  */
-Graph.prototype.canvasToDOM = function(pos) {
+Network.prototype.canvasToDOM = function(pos) {
   return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
 }
 
@@ -21311,7 +21312,7 @@ Graph.prototype.canvasToDOM = function(pos) {
  * @returns {{x: number, y: number}}
  * @constructor
  */
-Graph.prototype.DOMtoCanvas = function(pos) {
+Network.prototype.DOMtoCanvas = function(pos) {
   return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
 }
 
@@ -21322,7 +21323,7 @@ Graph.prototype.DOMtoCanvas = function(pos) {
  * @param {Boolean} [alwaysShow]
  * @private
  */
-Graph.prototype._drawNodes = function(ctx,alwaysShow) {
+Network.prototype._drawNodes = function(ctx,alwaysShow) {
   if (alwaysShow === undefined) {
     alwaysShow = false;
   }
@@ -21359,7 +21360,7 @@ Graph.prototype._drawNodes = function(ctx,alwaysShow) {
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
-Graph.prototype._drawEdges = function(ctx) {
+Network.prototype._drawEdges = function(ctx) {
   var edges = this.edges;
   for (var id in edges) {
     if (edges.hasOwnProperty(id)) {
@@ -21378,7 +21379,7 @@ Graph.prototype._drawEdges = function(ctx) {
  * @param {CanvasRenderingContext2D}   ctx
  * @private
  */
-Graph.prototype._drawControlNodes = function(ctx) {
+Network.prototype._drawControlNodes = function(ctx) {
   var edges = this.edges;
   for (var id in edges) {
     if (edges.hasOwnProperty(id)) {
@@ -21391,7 +21392,7 @@ Graph.prototype._drawControlNodes = function(ctx) {
  * Find a stable position for all nodes
  * @private
  */
-Graph.prototype._stabilize = function() {
+Network.prototype._stabilize = function() {
   if (this.constants.freezeForStabilization == true) {
     this._freezeDefinedNodes();
   }
@@ -21415,7 +21416,7 @@ Graph.prototype._stabilize = function() {
  *
  * @private
  */
-Graph.prototype._freezeDefinedNodes = function() {
+Network.prototype._freezeDefinedNodes = function() {
   var nodes = this.nodes;
   for (var id in nodes) {
     if (nodes.hasOwnProperty(id)) {
@@ -21434,7 +21435,7 @@ Graph.prototype._freezeDefinedNodes = function() {
  *
  * @private
  */
-Graph.prototype._restoreFrozenNodes = function() {
+Network.prototype._restoreFrozenNodes = function() {
   var nodes = this.nodes;
   for (var id in nodes) {
     if (nodes.hasOwnProperty(id)) {
@@ -21453,7 +21454,7 @@ Graph.prototype._restoreFrozenNodes = function() {
  * @return {boolean}      true if moving, false if non of the nodes is moving
  * @private
  */
-Graph.prototype._isMoving = function(vmin) {
+Network.prototype._isMoving = function(vmin) {
   var nodes = this.nodes;
   for (var id in nodes) {
     if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
@@ -21470,7 +21471,7 @@ Graph.prototype._isMoving = function(vmin) {
  *
  * @private
  */
-Graph.prototype._discreteStepNodes = function() {
+Network.prototype._discreteStepNodes = function() {
   var interval = this.physicsDiscreteStepsize;
   var nodes = this.nodes;
   var nodeId;
@@ -21509,7 +21510,7 @@ Graph.prototype._discreteStepNodes = function() {
  *
  * @private
  */
-Graph.prototype._physicsTick = function() {
+Network.prototype._physicsTick = function() {
   if (!this.freezeSimulation) {
     if (this.moving) {
       this._doInAllActiveSectors("_initializeForceCalculation");
@@ -21529,7 +21530,7 @@ Graph.prototype._physicsTick = function() {
  *
  * @private
  */
-Graph.prototype._animationStep = function() {
+Network.prototype._animationStep = function() {
   // reset the timer so a new scheduled animation step can be set
   this.timer = undefined;
   // handle the keyboad movement
@@ -21543,13 +21544,11 @@ Graph.prototype._animationStep = function() {
   var maxSteps = 1;
   this._physicsTick();
   var timeRequired = Date.now() - calculationTime;
-  while (timeRequired < (this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
+  while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
     this._physicsTick();
     timeRequired = Date.now() - calculationTime;
     maxSteps++;
-
   }
-
   // start the rendering process
   var renderTime = Date.now();
   this._redraw();
@@ -21564,7 +21563,7 @@ if (typeof window !== 'undefined') {
 /**
  * Schedule a animation step with the refreshrate interval.
  */
-Graph.prototype.start = function() {
+Network.prototype.start = function() {
   if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
     if (!this.timer) {
       var ua = navigator.userAgent.toLowerCase();
@@ -21598,7 +21597,7 @@ Graph.prototype.start = function() {
  *
  * @private
  */
-Graph.prototype._handleNavigation = function() {
+Network.prototype._handleNavigation = function() {
   if (this.xIncrement != 0 || this.yIncrement != 0) {
     var translation = this._getTranslation();
     this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
@@ -21616,7 +21615,7 @@ Graph.prototype._handleNavigation = function() {
 /**
  *  Freeze the _animationStep
  */
-Graph.prototype.toggleFreeze = function() {
+Network.prototype.toggleFreeze = function() {
   if (this.freezeSimulation == false) {
     this.freezeSimulation = true;
   }
@@ -21633,7 +21632,7 @@ Graph.prototype.toggleFreeze = function() {
  * @param {boolean} [disableStart]
  * @private
  */
-Graph.prototype._configureSmoothCurves = function(disableStart) {
+Network.prototype._configureSmoothCurves = function(disableStart) {
   if (disableStart === undefined) {
     disableStart = true;
   }
@@ -21665,7 +21664,7 @@ Graph.prototype._configureSmoothCurves = function(disableStart) {
  *
  * @private
  */
-Graph.prototype._createBezierNodes = function() {
+Network.prototype._createBezierNodes = function() {
   if (this.constants.smoothCurves == true) {
     for (var edgeId in this.edges) {
       if (this.edges.hasOwnProperty(edgeId)) {
@@ -21694,10 +21693,10 @@ Graph.prototype._createBezierNodes = function() {
  *
  * @private
  */
-Graph.prototype._initializeMixinLoaders = function () {
+Network.prototype._initializeMixinLoaders = function () {
   for (var mixinFunction in graphMixinLoaders) {
     if (graphMixinLoaders.hasOwnProperty(mixinFunction)) {
-      Graph.prototype[mixinFunction] = graphMixinLoaders[mixinFunction];
+      Network.prototype[mixinFunction] = graphMixinLoaders[mixinFunction];
     }
   }
 };
@@ -21705,7 +21704,7 @@ Graph.prototype._initializeMixinLoaders = function () {
 /**
  * Load the XY positions of the nodes into the dataset.
  */
-Graph.prototype.storePosition = function() {
+Network.prototype.storePosition = function() {
   var dataArray = [];
   for (var nodeId in this.nodes) {
     if (this.nodes.hasOwnProperty(nodeId)) {
@@ -21727,7 +21726,7 @@ Graph.prototype.storePosition = function() {
  * @param {Number} nodeId
  * @param {Number} [zoomLevel]
  */
-Graph.prototype.focusOnNode = function (nodeId, zoomLevel) {
+Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
   if (this.nodes.hasOwnProperty(nodeId)) {
     if (zoomLevel === undefined) {
       zoomLevel = this._getScale();
@@ -24318,7 +24317,7 @@ Point2d = function (x, y) {
  *
  * @param {DataSet} data The google data table
  * @param {Number}  column             The index of the column to be filtered
- * @param {Graph} graph           The graph
+ * @param {Network} graph           The graph
  */
 function Filter (data, column, graph) {
   this.data = data;
@@ -25107,7 +25106,7 @@ var vis = {
   },
 
   Timeline: Timeline,
-  Graph: Graph,
+  Network: Network,
   Graph3d: Graph3d,
   Graph2d: Graph2d
 };

docs/index.html

@@ -53,8 +53,8 @@
       A filtered and/or formatted view on a DataSet.
     </li>
     <li>
-      <a href="graph.html"><b>Graph</b></a>.
-      Display a graph or network with nodes and edges.
+      <a href="network.html"><b>Network</b></a>.
+      Display a network (force directed graph) with nodes and edges (previously called Graph).
     </li>
     <li>
       <a href="graph2d.html"><b>Graph2d</b></a>.

docs/graph.html → docs/network.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>vis.js | graph documentation</title>
+  <title>vis.js | network documentation</title>
 
   <link href="css/prettify.css" type="text/css" rel="stylesheet" />
   <link href='css/style.css' type='text/css' rel='stylesheet'>
@@ -17,21 +17,21 @@
 
 <h2 id="Overview">Overview</h2>
 <p>
-  Graph is a visualization to display graphs and networks consisting of nodes
+  Graph is a visualization to display networks and networks consisting of nodes
   and edges. The visualization is easy to use and supports custom shapes,
   styles, colors, sizes, images, and more.
 </p>
 
 <p>
-  The graph visualization works smooth on any modern browser for up to a
+  The network visualization works smooth on any modern browser for up to a
   few thousand nodes and edges. To handle a larger amount of nodes, Graph
   has <a href="#Clustering">clustering</a> support.
 </p>
 
 <p>
-    Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option
+    Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
     that the user can use to explore which settings may be good for you. Use configurePhysics as described in the <u><a href="#PhysicsConfiguration">Physics</a></u> section or by
-    <u><a href="../examples/graph/25_physics_configuration.html">example 25</a></u>.
+    <u><a href="../examples/Network/25_physics_configuration.html">example 25</a></u>.
 </p>
 
 <p>
@@ -77,7 +77,7 @@
 
 <h2 id="Example">Example</h2>
 <p>
-  Here a basic graph example. Note that unlike the
+  Here a basic network example. Note that unlike the
   <a href="timeline.html">Timeline</a>, the Graph does not need the vis.css
   file.
 </p>
@@ -97,7 +97,7 @@
 
 &lt;body&gt;
 
-&lt;div id="mygraph"&gt;&lt;/div&gt;
+&lt;div id="mynetwork"&gt;&lt;/div&gt;
 
 &lt;script type="text/javascript"&gt;
   // create an array with nodes
@@ -117,8 +117,8 @@
     {from: 2, to: 5}
   ];
 
-  // create a graph
-  var container = document.getElementById('mygraph');
+  // create a network
+  var container = document.getElementById('mynetwork');
   var data= {
     nodes: nodes,
     edges: edges,
@@ -127,7 +127,7 @@
     width: '400px',
     height: '400px'
   };
-  var graph = new vis.Graph(container, data, options);
+  var network = new vis.Graph(container, data, options);
 &lt;/script&gt;
 
 &lt;/body&gt;
@@ -147,12 +147,12 @@
 
 
 The constructor of the Graph is <code>vis.Graph</code>.
-<pre class="prettyprint lang-js">var graph = new vis.Graph(container, data, options);</pre>
+<pre class="prettyprint lang-js">var network = new vis.Graph(container, data, options);</pre>
 
 The constructor accepts three parameters:
 <ul>
   <li>
-    <code>container</code> is the DOM element in which to create the graph.
+    <code>container</code> is the DOM element in which to create the network.
   </li>
   <li>
     <code>data</code> is an Object containing properties <code>nodes</code> and
@@ -207,7 +207,7 @@ var data = {
   <li>
     <span style="font-weight: bold;">A property <code>options</code></span>,
     containing an object with global options.
-    Options can be provided as third parameter in the graph constructor
+    Options can be provided as third parameter in the network constructor
     as well. Section <a href="#Configuration_Options">Configuration Options</a>
     describes the available options.
 
@@ -246,7 +246,7 @@ nodes.add([
     // ... more nodes
 ]);
 </pre>
-When using a DataSet, the graph is automatically updating to changes in the DataSet.
+When using a DataSet, the network is automatically updating to changes in the DataSet.
 
 <p>
   Nodes support the following properties:
@@ -514,7 +514,7 @@ edges.add([
     // ... more edges
 ]);
 </pre>
-When using a DataSet, the graph is automatically updating to changes in the DataSet.
+When using a DataSet, the network is automatically updating to changes in the DataSet.
 
 <p>
   Edges support the following properties:
@@ -727,11 +727,11 @@ When using a DataSet, the graph is automatically updating to changes in the Data
 <pre class="prettyprint lang-js">
 // provide data in the DOT language
 var data = {
-  dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
+  dot: 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
 };
 
-// create a graph
-var graph = new vis.Graph(container, data);
+// create a network
+var network = new vis.Graph(container, data);
 </pre>
 
 
@@ -739,7 +739,7 @@ var graph = new vis.Graph(container, data);
 <h2 id="Configuration_options">Configuration options</h2>
 
 <p>
-  Options can be used to customize the graph. Options are defined as a JSON object.
+  Options can be used to customize the network. Options are defined as a JSON object.
   All options are optional.
 </p>
 
@@ -780,7 +780,7 @@ var options = {
         <td>Boolean</td>
         <td>false</td>
         <td>
-            Enabling this setting will create a physics configuration div above the graph. You can use this to fine tune the physics system to suit your needs.
+            Enabling this setting will create a physics configuration div above the network. You can use this to fine tune the physics system to suit your needs.
             Because of the many possible configurations, there is not a one-size-fits-all setting. By using this tool, you can adapt the physics to your dataset.
         </td>
     </tr>
@@ -818,7 +818,7 @@ var options = {
         <td>false</td>
         <td>
             With the advent of the storePosition() function, the positions of the nodes can be saved after they are stabilized. The smoothCurves require support nodes and those positions are not stored. In order
-            to speed up the initialization of the graph by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
+            to speed up the initialization of the network by using storePosition() and loading the nodes with the stored positions, the freezeForStabilization option freezes all nodes that have been supplied with
             an x and y position in place during the stabilization. That way only the support nodes for the smooth curves have to stabilize, greatly speeding up the stabilization process with cached positions.
         </td>
     </tr>
@@ -838,7 +838,7 @@ var options = {
     <td>height</td>
     <td>String</td>
     <td>"400px"</td>
-    <td>The height of the graph in pixels or as a percentage.</td>
+    <td>The height of the network in pixels or as a percentage.</td>
   </tr>
 
     <tr>
@@ -861,7 +861,7 @@ var options = {
         <td>Boolean</td>
         <td>true</td>
         <td>
-            Toggle if the graph can be dragged. This will not affect the dragging of nodes.
+            Toggle if the network can be dragged. This will not affect the dragging of nodes.
         </td>
     </tr>
     <tr>
@@ -869,7 +869,7 @@ var options = {
         <td>Boolean</td>
         <td>true</td>
         <td>
-            Toggle if the nodes can be dragged. This will not affect the dragging of the graph.
+            Toggle if the nodes can be dragged. This will not affect the dragging of the network.
         </td>
     </tr>
 
@@ -902,7 +902,7 @@ var options = {
     <td>selectable</td>
     <td>Boolean</td>
     <td>true</td>
-    <td>If true, nodes in the graph can be selected by clicking them.
+    <td>If true, nodes in the network can be selected by clicking them.
       Long press can be used to select multiple nodes.</td>
   </tr>
 
@@ -910,7 +910,7 @@ var options = {
     <td>stabilize</td>
     <td>Boolean</td>
     <td>true</td>
-    <td>If true, the graph is stabilized before displaying it. If false,
+    <td>If true, the network is stabilized before displaying it. If false,
       the nodes move to a stabe position visibly in an animated way.</td>
   </tr>
 
@@ -919,21 +919,21 @@ var options = {
     <td>Number</td>
     <td>1000</td>
     <td>If stabilize is set to true, this number is the (maximum) amount of physics steps the stabilization process takes
-        before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your graph is not stabilized after loading, this number can be increased.</td>
+        before showing the result. If your simulation takes too long to stabilize, this number can be reduced. On the other hand, if your network is not stabilized after loading, this number can be increased.</td>
 </tr>
 
   <tr>
     <td>width</td>
     <td>String</td>
     <td>"400px"</td>
-    <td>The width of the graph in pixels or as a percentage.</td>
+    <td>The width of the network in pixels or as a percentage.</td>
   </tr>
     <tr>
         <td>zoomable</td>
         <td>Boolean</td>
         <td>true</td>
         <td>
-            Toggle if the graph can be zoomed.
+            Toggle if the network can be zoomed.
         </td>
     </tr>
 
@@ -969,7 +969,7 @@ var options = {
 
 <p>
   The following options are available for nodes. These options must be created
-  inside an object <code>nodes</code> in the graphs options object.</p>
+  inside an object <code>nodes</code> in the networks options object.</p>
 <table>
 
   <tr>
@@ -1139,7 +1139,7 @@ var options = {
 
 <p>
   The following options are available for edges. These options must be created
-  inside an object <code>edges</code> in the graphs options object.
+  inside an object <code>edges</code> in the networks options object.
 </p>
 
 <table>
@@ -1387,7 +1387,7 @@ var nodes = [
     If no options for the physics system are supplied, the Barnes-Hut method will be used with the default parameters. If you want to customize the physics system easily, you can use the configurePhysics option. <br/>
     When using the hierarchical display option, hierarchicalRepulsion is automatically used as the physics solver. Similarly, if you use the hierarchicalRepulsion physics option, hierarchical display is automatically turned on with default settings.
 
-<p class="important_note">Note: if the behaviour of your graph is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/graph/25_physics_configuration.html">example 25</a></u>.</p>
+<p class="important_note">Note: if the behaviour of your network is not the way you want it, use configurePhysics as described <u><a href="#PhysicsConfiguration">below</a></u> or by <u><a href="../examples/Network/25_physics_configuration.html">example 25</a></u>.</p>
 </p>
 <pre class="prettyprint">
 // These variables must be defined in an options object named physics.
@@ -1551,9 +1551,9 @@ var options = {
     </tr>
 </table>
 <h4 id="PhysicsConfiguration">Configuration:</h4>
-Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option
+Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
 that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
-settings you are happy with, you can supply them to graph using the physics options as described above.
+settings you are happy with, you can supply them to network using the physics options as described above.
 
 On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards.
 <pre class="prettyprint">
@@ -1563,9 +1563,9 @@ var options = {
 </pre>
 <h3 id="Data_manipulation">Data manipulation</h3>
 <p>
-    By using the data manipulation feature of the graph you can dynamically create nodes, connect nodes with edges, edit nodes or delete nodes and edges.
+    By using the data manipulation feature of the network you can dynamically create nodes, connect nodes with edges, edit nodes or delete nodes and edges.
     The toolbar is fully HTML and CSS so the user can style this to their preference. To control the behaviour of the data manipulation, users can insert custom functions
-    into the data manipulation process. For example, an injected function can show an detailed pop-up when a user wants to add a node. In <a href="../examples/graph/21_data_manipulation.html">example 21</a>,
+    into the data manipulation process. For example, an injected function can show an detailed pop-up when a user wants to add a node. In <a href="../examples/Network/21_data_manipulation.html">example 21</a>,
     two functions have been injected into the add and edit functionality. This is described in more detail in the next subsection. To correctly display the manipulation icons, the <b>vis.css</b> file must be included.
     The user is free to alter or overload the CSS classes but without them the navigation icons are not visible.
 </p>
@@ -1608,7 +1608,7 @@ var options: {
 <h4 id="Data_manipulation_custom">Data manipulation: custom functionality</h4>
 <p>
     Users can insert custom functions into the add node, edit node, connect nodes, and delete selected operations. This is done by supplying them in the options.
-    If the callback is NOT called, nothing happens. <a href="../examples/graph/21_data_manipulation.html">Example 21</a> has two working examples
+    If the callback is NOT called, nothing happens. <a href="../examples/Network/21_data_manipulation.html">Example 21</a> has two working examples
     for the add and edit functions. The data the user is supplied with in these functions has been described in the code below.
     For the add data, you can add any and all options that are accepted for node creation as described above. The same goes for edit, however only the fields described
     in the code below contain information on the selected node. The callback for connect accepts any options that are used for edge creation. Only the callback for delete selected
@@ -1680,12 +1680,12 @@ var options: {
     An code snippet from example 21 is shown below.
 </p>
 <pre class="prettyprint">
-graph.on("resize", function(params) {console.log(params.width,params.height)});
+network.on("resize", function(params) {console.log(params.width,params.height)});
 </pre>
 
 <h3 id="Clustering">Clustering</h3>
 <p>
-  The graph now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
+  The network now supports dynamic clustering of nodes. This allows a user to view a very large dataset (> 50.000 nodes) without
   sacrificing performance. When loading a large dataset, the nodes are clustered initially (this may take a small while) to have a
   responsive visualization to work with. The clustering is both outside-in and inside-out. Outside-in means that nodes with only one
   connection will be contained, or clustered, in the node it is connected to. Inside-out clustering first determines which nodes are hubs.
@@ -1863,7 +1863,7 @@ var options: {
     <td>At every clustering session, Graph will check if the difference between cluster levels is
         acceptable. When a cluster is formed when zooming out, that is one cluster level.
         If you zoom out further and it encompasses more nodes, that is another level. For example:
-        If the highest level of your graph at any given time is 3, nodes that have not clustered or
+        If the highest level of your network at any given time is 3, nodes that have not clustered or
         have clustered only once will join their neighbour with the lowest cluster level.</td>
   </tr>
 </table>
@@ -1885,8 +1885,8 @@ var options: {
 
 <h3 id="Keyboard_navigation">Keyboard navigation</h3>
 <p>
-  The graph can be navigated using shortcut keys.
-  The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/graph/20_navigation.html">20_navigation.html</a>.
+  The network can be navigated using shortcut keys.
+  The default state for the keyboard navigation is <b>off</b>. The predefined keys can be found in the example <a href="../examples/Network/20_navigation.html">20_navigation.html</a>.
 </p>
 
 <pre class="prettyprint">
@@ -1939,9 +1939,9 @@ var options: {
 
 <h3 id="Hierarchical_layout">Hierarchical layout</h3>
 <p>
-    The graph can be used to display nodes in a hierarchical way. This can be determined automatically, based on the amount of edges connected to each node, or defined by the user.
+    The network can be used to display nodes in a hierarchical way. This can be determined automatically, based on the amount of edges connected to each node, or defined by the user.
     If the user wants to manually determine the hierarchy, each node has to be supplied with a level (from 0 being heighest to n). The automatic method
-    is shown in <a href="../examples/graph/23_hierarchical_layout.html">example 23</a> and the user-defined method is shown in <a href="../examples/graph/24_hierarchical_layout_userdefined.html">example 24</a>.
+    is shown in <a href="../examples/Network/23_hierarchical_layout.html">example 23</a> and the user-defined method is shown in <a href="../examples/Network/24_hierarchical_layout_userdefined.html">example 24</a>.
     This layout method does not support smooth curves or clustering. It automatically turns these features off.
 </p>
 
@@ -2001,7 +2001,7 @@ var options: {
         <td>direction</td>
         <td>String</td>
         <td>UD</td>
-        <td>This defines the direction the graph is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL).
+        <td>This defines the direction the network is drawn in. The supported directions are: Up-Down (UD), Down-Up (DU), Left-Right (LR) and Right-Left (RL).
             These need to be supplied by the acronyms in parentheses.</td>
     </tr>
 </table>
@@ -2155,19 +2155,19 @@ var options: {
         <td>storePosition()</td>
         <td>none</td>
         <td>This will put the X and Y positions of all nodes in the dataset. It will also include allowedToMoveX and allowedToMoveY with the correct values.
-            You can use this to stablize your graph once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
+            You can use this to stablize your network once, then save the positions in a database so the next time you load the nodes, stabilization will be near instantaneous.
         </td>
     </tr>
     <tr>
         <td>DOMtoCanvas(pos)</td>
         <td>object</td>
-        <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
+        <td>This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the network container.
         </td>
     </tr>
     <tr>
         <td>canvasToDOM(pos)</td>
         <td>object</td>
-        <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the graph container.
+        <td>This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:xpos,y:ypos}. The DOM values are relative to the network container.
         </td>
     </tr>
   <tr>
@@ -2185,7 +2185,7 @@ var options: {
   <tr>
     <td>redraw()</td>
     <td>none</td>
-    <td>Redraw the graph. Useful when the layout of the webpage changed.</td>
+    <td>Redraw the network. Useful when the layout of the webpage changed.</td>
   </tr>
 
   <tr>
@@ -2202,7 +2202,7 @@ var options: {
   <tr>
     <td>setOptions(options)</td>
     <td>none</td>
-    <td>Set options for the graph. The available options are described in
+    <td>Set options for the network. The available options are described in
       the section <a href="#Configuration_options">Configuration Options</a>.
     </td>
   </tr>
@@ -2213,7 +2213,7 @@ var options: {
         <td>Select nodes.
             <code>selection</code> is an array with ids of nodes to be selected.
             The array <code>selection</code> can contain zero or multiple ids.
-            Example usage: <code>graph.selectNodes([3, 5]);</code> will select
+            Example usage: <code>network.selectNodes([3, 5]);</code> will select
             nodes with id 3 and 5. The highlisghEdges boolean can be used to automatically select the edges connected to the node.
         </td>
     </tr>
@@ -2223,7 +2223,7 @@ var options: {
         <td>Select Edges.
             <code>selection</code> is an array with ids of edges to be selected.
             The array <code>selection</code> can contain zero or multiple ids.
-            Example usage: <code>graph.selectEdges([3, 5]);</code> will select
+            Example usage: <code>network.selectEdges([3, 5]);</code> will select
             edges with id 3 and 5.
         </td>
     </tr>
@@ -2233,7 +2233,7 @@ var options: {
     <td>Select nodes [deprecated].
         <code>selection</code> is an array with ids of nodes to be selected.
         The array <code>selection</code> can contain zero or multiple ids.
-        Example usage: <code>graph.setSelection([3, 5]);</code> will select
+        Example usage: <code>network.setSelection([3, 5]);</code> will select
         nodes with id 3 and 5.
     </td>
 </tr>
@@ -2249,7 +2249,7 @@ var options: {
     <tr>
         <td>zoomExtent()</td>
         <td>none</td>
-        <td>Scales the graph so all the nodes are in center view.</td>
+        <td>Scales the network so all the nodes are in center view.</td>
     </tr>
 
 </table>
@@ -2265,7 +2265,7 @@ var options: {
 </p>
 
 <pre class="prettyprint lang-js">
-graph.on('select', function (properties) {
+network.on('select', function (properties) {
   alert('selected nodes: ' + properties.nodes);
 });
 </pre>
@@ -2280,12 +2280,12 @@ function onSelect (properties) {
 }
 
 // add event listener
-graph.on('select', onSelect);
+network.on('select', onSelect);
 
 // do stuff...
 
 // remove event listener
-graph.off('select', onSelect);
+network.off('select', onSelect);
 </pre>
 
 
@@ -2364,7 +2364,7 @@ graph.off('select', onSelect);
     </tr>
     <tr>
         <td>stabilized</td>
-        <td>Fired when the graph 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 after initialization. This event can be used to trigger the .storePosition() function after stabilization.</td>
         <td>
             <ul>
                 <li><code>iterations</code>: number of iterations used to stabilize</li>
@@ -2373,14 +2373,14 @@ graph.off('select', onSelect);
     </tr>
     <tr>
         <td>viewChanged</td>
-        <td>Fired when the view has changed. This is when the graph has moved or zoomed.</td>
+        <td>Fired when the view has changed. This is when the network has moved or zoomed.</td>
         <td>
             none
         </td>
     </tr>
     <tr>
         <td>zoom</td>
-        <td>Fired when the graph has zoomed.  This event can be used to trigger the .storePosition() function after stabilization.</td>
+        <td>Fired when the network has zoomed.  This event can be used to trigger the .storePosition() function after stabilization.</td>
         <td>
             <ul>
                 <li><code>direction: </code> "+" or "-" </li>

examples/graph/01_basic_usage.html → examples/Network/01_basic_usage.html

@@ -1,12 +1,12 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Basic usage</title>
+  <title>Network | Basic usage</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
 
   <style type="text/css">
-    #mygraph {
+    #mynetwork {
       width: 400px;
       height: 400px;
       border: 1px solid lightgray;
@@ -16,7 +16,7 @@
 
 <body>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <script type="text/javascript">
   // create an array with nodes
@@ -36,14 +36,14 @@
     {from: 2, to: 5}
   ];
 
-  // create a graph
-  var container = document.getElementById('mygraph');
+  // create a network
+  var container = document.getElementById('mynetwork');
   var data = {
     nodes: nodes,
     edges: edges
   };
   var options = {};
-  var graph = new vis.Graph(container, data, options);
+  var network = new vis.Network(container, data, options);
 </script>
 
 </body>

examples/graph/02_random_nodes.html → examples/Network/02_random_nodes.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Random nodes</title>
+  <title>Network | Random nodes</title>
 
   <style type="text/css">
     body {
       font: 10pt sans;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -19,7 +19,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     function draw() {
       nodes = [];
@@ -36,7 +36,7 @@
 
         connectionCount[i] = 0;
 
-        // create edges in a scale-free-graph way
+        // create edges in a scale-free-network way
         if (i == 1) {
           var from = i;
           var to = 0;
@@ -69,8 +69,8 @@
         }
       }
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -81,10 +81,10 @@
     },
     stabilize: false
     };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
 
       // add event listeners
-      graph.on('select', function(params) {
+      network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
@@ -100,7 +100,7 @@
 
 <br>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <p id="selection"></p>
 </body>

examples/graph/03_images.html → examples/Network/03_images.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Images</title>
+  <title>Network | Images</title>
 
   <style type="text/css">
     body {
       font: 10pt arial;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -19,7 +19,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     var DIR = 'img/refresh-cl/';
     var LENGTH_MAIN = 150;
@@ -50,7 +50,7 @@
       nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
       edges.push({from: 3, to: 102, length: LENGTH_SUB});
 
-      nodes.push({id: 103, label: 'graph drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
+      nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
       edges.push({from: 1, to: 103, length: LENGTH_SUB});
 
       nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
@@ -61,8 +61,8 @@
         edges.push({from: 3, to: i, length: LENGTH_SUB});
       }
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -70,14 +70,14 @@
       var options = {
         stabilize: false   // stabilize positions before displaying
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
 <body onload="draw()">
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 </body>
 </html>

examples/graph/04_shapes.html → examples/Network/04_shapes.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Shapes</title>
+  <title>Network | Shapes</title>
 
   <style type="text/css">
     body {
       font: 10pt arial;
     }
-    #mygraph {
+    #mynetwork {
       width: 100%;
       height: 600px;
       border: 1px solid lightgray;
@@ -19,7 +19,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     function draw() {
       nodes = [
@@ -54,8 +54,8 @@
         }
       }
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -63,13 +63,13 @@
       var options = {
         stabilize: false
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
 <body onload="draw()">
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <div id="info"></div>
 </body>

examples/graph/05_social_network.html → examples/Network/05_social_network.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Social Network</title>
+  <title>Network | Social Network</title>
 
   <style>
     body {
       font: 10pt arial;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -22,7 +22,7 @@
 
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     function draw() {
       // create people
@@ -55,20 +55,20 @@
         {from: 2,   to: 7,  value: 4,   label: 4,   color: color}
       ];
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
       };
       var options = {};
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
 <body onload="draw()">
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 <p>
   Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
 </p>

examples/graph/06_groups.html → examples/Network/06_groups.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Groups</title>
+  <title>Network | Groups</title>
 
   <style>
     body {
       font: 10pt arial;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -20,7 +20,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     google.load('visualization', '1');
 
@@ -57,7 +57,7 @@
           });
           connectionCount[i] = 0;
 
-          // create links in a scale-free-graph way
+          // create links in a scale-free-network way
           if (i == 1) {
             from = i;
             to = 0;
@@ -124,8 +124,8 @@
         group++;
       }
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -139,7 +139,7 @@
           length: 50
         }
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
@@ -154,7 +154,7 @@
 </form>
 <br>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 </body>
 </html>

examples/graph/07_selections.html → examples/Network/07_selections.html

@@ -1,12 +1,12 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Selections</title>
+  <title>Network | Selections</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
 
   <style type="text/css">
-    #mygraph {
+    #mynetwork {
       width: 400px;
       height: 400px;
       border: 1px solid lightgray;
@@ -16,7 +16,7 @@
 
 <body>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 <div id="info"></div>
 
 <script type="text/javascript">
@@ -37,8 +37,8 @@
     {from: 2, to: 5}
   ];
 
-  // create a graph
-  var container = document.getElementById('mygraph');
+  // create a network
+  var container = document.getElementById('mynetwork');
   var data = {
     nodes: nodes,
     edges: edges
@@ -48,15 +48,15 @@
       shape: 'box'
     }
   };
-  graph = new vis.Graph(container, data, options);
+  network = new vis.Network(container, data, options);
 
   // add event listener
-  graph.on('select', function(properties) {
+  network.on('select', function(properties) {
     document.getElementById('info').innerHTML += 'selection: ' + JSON.stringify(properties) + '<br>';
   });
 
   // set initial selection (id's of some nodes)
-  graph.setSelection([3, 4, 5]);
+  network.setSelection([3, 4, 5]);
 </script>
 
 </body>

examples/graph/08_mobile_friendly.html → examples/Network/08_mobile_friendly.html

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Graph | Mobile friendly</title>
+  <title>Network | Mobile friendly</title>
 
   <style type="text/css">
     html, body {
@@ -12,7 +12,7 @@
       height: 100%;
     }
 
-    #mygraph {
+    #mynetwork {
       width: 100%;
       height: 100%;
     }
@@ -26,7 +26,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     // Called when the Visualization API is loaded.
     function draw() {
@@ -80,8 +80,8 @@
         }
       }
 
-      // Create a graph
-      var container = document.getElementById('mygraph');
+      // Create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -97,12 +97,12 @@
           width: 2
         }
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
-<body onload="draw()" onresize="graph.redraw();">
-<div id="mygraph"></div>
+<body onload="draw()" onresize="network.redraw();">
+<div id="mynetwork"></div>
 </body>
 </html>

examples/graph/09_sizing.html → examples/Network/09_sizing.html

@@ -1,13 +1,13 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-  <title>Graph | Sizing</title>
+  <title>Network | Sizing</title>
 
   <style type="text/css">
     html, body {
       font: 10pt arial;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -19,7 +19,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     var DIR = 'img/soft-scraps-icons/';
 
@@ -55,8 +55,8 @@
         {from: 2, to: 7, value: 4, title: '4 emails per week'}
       ];
 
-      // Instantiate our graph object.
-      var container = document.getElementById('mygraph');
+      // Instantiate our network object.
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -69,12 +69,12 @@
           color: '#97C2FC'
         }
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
 <body onload="draw()">
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 </body>
 </html>

examples/graph/10_multiline_text.html → examples/Network/10_multiline_text.html

@@ -1,10 +1,10 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-  <title>Graph | Multiline text</title>
+  <title>Network | Multiline text</title>
 
   <style type="text/css">
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -32,19 +32,19 @@
         {from: 1, to: 5, style: 'arrow', width: 3, length: 200}
       ];
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
       };
       var options = {};
-      var graph = new vis.Graph(container, data, options);
+      var network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
 <body onload="draw()">
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 </body>
 </html>

examples/graph/11_custom_style.html → examples/Network/11_custom_style.html

@@ -1,13 +1,13 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-  <title>Graph | Custom style</title>
+  <title>Network | Custom style</title>
 
   <style type="text/css">
     body {
       font: 10pt arial;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -20,7 +20,7 @@
     var nodes = null;
     var edges = null;
     var options = null;
-    var graph = null;
+    var network = null;
 
     // Called when the Visualization API is loaded.
     function draw() {
@@ -114,18 +114,18 @@
         }
       };
 
-      // create the graph
-      var container = document.getElementById('mygraph');
+      // create the network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
 <body onload="draw()">
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 </body>
 </html>

examples/graph/12_scalable_images.html → examples/Network/12_scalable_images.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Scalable images</title>
+  <title>Network | Scalable images</title>
 
   <style type="text/css">
     body {
       font: 10pt arial;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -21,7 +21,7 @@
 
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     // Called when the Visualization API is loaded.
     function draw() {
@@ -57,8 +57,8 @@
         {from: 2, to: 7, value: 4, title: '4 emails per week'}
       ];
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -72,13 +72,13 @@
           color: 'lightgray'
         }
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
 <body onload="draw()">
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <div id="info"></div>
 </body>

examples/graph/13_dashed_lines.html → examples/Network/13_dashed_lines.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Dashed lines</title>
+  <title>Network | Dashed lines</title>
 
   <style type="text/css">
     body {
       font: 10pt sans;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -35,8 +35,8 @@
         {from: 1, to: 6, style: 'dash-line', dash: {length: 20, gap: 5, altLength: 5}}
       ];
 
-      // create the graph
-      var container = document.getElementById('mygraph');
+      // create the network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -50,7 +50,7 @@
         },
         stabilize: false
       };
-      var graph = new vis.Graph(container, data, options);
+      var network = new vis.Network(container, data, options);
     }
   </script>
 </head>
@@ -60,6 +60,6 @@
   This example shows the different options for dashed lines.
 </p>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 </body>
 </html>

examples/Network/14_dot_language.html

@@ -0,0 +1,18 @@
+<html>
+<head>
+  <title>Network | DOT Language</title>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+</head>
+<body>
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('mynetwork');
+  var data = {
+    dot: 'dinetwork {node[shape=circle]; 1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
+  };
+  var network = new vis.Network(container, data);
+</script>
+</body>
+</html>

examples/graph/15_dot_language_playground.html → examples/Network/15_dot_language_playground.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | DOT language playground</title>
+  <title>Network | DOT language playground</title>
 
   <script type="text/javascript" src="../../dist/vis.js"></script>
 
@@ -33,7 +33,7 @@
       border: 1px solid #d3d3d3;
     }
 
-    #mygraph {
+    #mynetwork {
       float: left;
       width: 100%;
       height: 100%;
@@ -73,22 +73,22 @@
       <textarea id="data"></textarea>
     </td>
     <td>
-      <div id="mygraph"></div>
+      <div id="mynetwork"></div>
     </td>
   </tr>
 </table>
 
 <script type="text/javascript">
-  var graph, data;
+  var network, data;
 
   var btnDraw = document.getElementById('draw');
   var txtData = document.getElementById('data');
   var txtError = document.getElementById('error');
   btnDraw.onclick = draw;
 
-  // resize the graph when window resizes
+  // resize the network when window resizes
   window.onresize = function () {
-    graph.redraw()
+    network.redraw()
   };
 
   // parse and draw the data
@@ -101,10 +101,10 @@
         dot: txtData.value
       };
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var options = {};
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
     catch (err) {
       // set the cursor at the position where the error occurred
@@ -133,7 +133,7 @@
 </script>
 
 <textarea id="example1" class="example">
-  digraph {
+  dinetwork {
   node [shape=circle fontSize=16]
   edge [length=100, color=gray, fontColor=black]
 
@@ -151,7 +151,7 @@
 </textarea>
 
 <textarea id="example2" class="example">
-  digraph topology
+  dinetwork topology
   {
   node[shape=circle fontSize=12]
   edge[length=170 fontSize=12]
@@ -173,7 +173,7 @@
 </textarea>
 
 <textarea id="example3" class="example">
-  digraph G  {
+  dinetwork G  {
   // note: not all attributes are recognized and supported by Network
   //       unrecognized attributes are ignored
 

examples/graph/16_dynamic_data.html → examples/Network/16_dynamic_data.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | DataSet</title>
+  <title>Network | DataSet</title>
 
   <style type="text/css">
     html, body {
@@ -45,7 +45,7 @@
       font-size: 10pt;
     }
 
-    #graph {
+    #network {
       width: 100%;
       height: 400px;
       border: 1px solid lightgray;
@@ -56,7 +56,7 @@
   <script type="text/javascript" src="../../dist/vis.js"></script>
 
   <script type="text/javascript">
-    var nodes, edges, graph;
+    var nodes, edges, network;
 
     // convenience method to stringify a JSON object
     function toJSON (obj) {
@@ -157,14 +157,14 @@
         {id: '4', from: '2', to: '5'}
       ]);
 
-      // create a graph
-      var container = $('#graph').get(0);
+      // create a network
+      var container = $('#network').get(0);
       var data = {
         nodes: nodes,
         edges: edges
       };
       var options = {};
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     });
   </script>
 </head>
@@ -255,8 +255,8 @@
     </td>
 
     <td>
-      <h2>Graph</h2>
-      <div id="graph"></div>
+      <h2>Network</h2>
+      <div id="network"></div>
     </td>
   </tr>
 </table>

examples/graph/17_network_info.html → examples/Network/17_network_info.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<!-- saved from url=(0046)http://visjs.org/examples/graph/03_images.html -->
+<!-- saved from url=(0046)http://visjs.org/examples/network/03_images.html -->
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-  <title>Graph | Images</title>
+  <title>Network | Images</title>
 
   <style type="text/css">
     body {
@@ -10,7 +10,7 @@
       margin: 0;
       overflow: hidden;
     }
-    #mygraph {
+    #mynetwork {
       width: 100%;
       height: 100%;
       box-sizing: border-box;
@@ -22,7 +22,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     var LENGTH_MAIN = 350,
         LENGTH_SERVER = 150,
@@ -92,9 +92,9 @@
 
 
       // legend
-      var mygraph = document.getElementById('mygraph');
-      var x = - mygraph.clientWidth / 2 + 50;
-      var y = - mygraph.clientHeight / 2 + 50;
+      var mynetwork = document.getElementById('mynetwork');
+      var x = - mynetwork.clientWidth / 2 + 50;
+      var y = - mynetwork.clientHeight / 2 + 50;
       var step = 70;
       nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
       nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
@@ -102,8 +102,8 @@
       nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
       nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -141,14 +141,14 @@
           }
         }
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
     }
   </script>
 </head>
 
 <body onload="draw()">
 
-<div id="mygraph"><div class="graph-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
+<div id="mynetwork"><div class="network-frame" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><canvas style="position: relative; width: 100%; height: 100%;"></canvas></div></div>
 
 
 

examples/graph/18_fully_random_nodes_clustering.html → examples/Network/18_fully_random_nodes_clustering.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-    <title>Graph | Fully random nodes clustering</title>
+    <title>Network | Fully random nodes clustering</title>
 
     <style type="text/css">
         body {
             font: 10pt sans;
         }
-        #mygraph {
+        #mynetwork {
             width: 600px;
             height: 600px;
             border: 1px solid lightgray;
@@ -19,7 +19,7 @@
     <script type="text/javascript">
         var nodes = null;
         var edges = null;
-        var graph = null;
+        var network = null;
 
         function draw() {
             nodes = [];
@@ -45,9 +45,9 @@
                     to: to
                 });
             }
-            // create a graph
+            // create a network
             var clusteringOn = document.getElementById('clustering').checked;
-            var container = document.getElementById('mygraph');
+            var container = document.getElementById('mynetwork');
             var data = {
                 nodes: nodes,
                 edges: edges
@@ -61,10 +61,10 @@
                 },
                 stabilize: false
             };
-            graph = new vis.Graph(container, data, options);
+            network = new vis.Network(container, data, options);
 
             // add event listeners
-            graph.on('select', function(params) {
+            network.on('select', function(params) {
                 document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
             });
         }
@@ -72,7 +72,7 @@
 </head>
 
 <body onload="draw();">
-<h2>Clustering - Fully random graph</h2>
+<h2>Clustering - Fully random network</h2>
 <div style="width:700px; font-size:14px;">
     This example shows a fully randomly generated set of nodes and connected edges.
     By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
@@ -95,7 +95,7 @@
 </form>
 <br>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <p id="selection"></p>
 </body>

examples/graph/19_scale_free_graph_clustering.html → examples/Network/19_scale_free_graph_clustering.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Scale free graph clustering</title>
+  <title>Network | Scale free network clustering</title>
 
   <style type="text/css">
     body {
       font: 10pt sans;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -19,7 +19,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     function draw() {
       nodes = [];
@@ -36,7 +36,7 @@
 
         connectionCount[i] = 0;
 
-        // create edges in a scale-free-graph way
+        // create edges in a scale-free-network way
         if (i == 1) {
           var from = i;
           var to = 0;
@@ -68,10 +68,10 @@
         }
       }
 
-      // create a graph
+      // create a network
       var clusteringOn = document.getElementById('clustering').checked;
       var clusterEdgeThreshold = parseInt(document.getElementById('clusterEdgeThreshold').value);
-      var container = document.getElementById('mygraph');
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -94,10 +94,10 @@
     },
     stabilize: false
     };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
 
       // add event listeners
-      graph.on('select', function(params) {
+      network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
@@ -105,9 +105,9 @@
 </head>
 
 <body onload="draw();">
-<h2>Clustering - Scale-Free-Graph</h2>
+<h2>Clustering - Scale-Free-Network</h2>
 <div style="width:700px; font-size:14px;">
-    This example shows the randomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2.
+    This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
     By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
     a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
     <br />
@@ -131,7 +131,7 @@
 </form>
 <br>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <p id="selection"></p>
 </body>

examples/graph/20_navigation.html → examples/Network/20_navigation.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Navigation</title>
+  <title>Network | Navigation</title>
 
   <style type="text/css">
     body {
       font: 10pt sans;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -39,7 +39,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     function draw() {
       nodes = [];
@@ -56,7 +56,7 @@
 
         connectionCount[i] = 0;
 
-        // create edges in a scale-free-graph way
+        // create edges in a scale-free-network way
         if (i == 1) {
           var from = i;
           var to = 0;
@@ -88,8 +88,8 @@
         }
       }
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -113,10 +113,10 @@
         navigation: true,
         keyboard: true
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
 
       // add event listeners
-      graph.on('select', function(params) {
+      network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
@@ -130,13 +130,13 @@
   <table class="legend_table">
     <tr>
       <td>Icons: </td>
-      <td><div class="table_content"><img src="../../dist/img/graph/upArrow.png" />     </div></td>
-      <td><div class="table_content"><img src="../../dist/img/graph/downArrow.png" />   </div></td>
-      <td><div class="table_content"><img src="../../dist/img/graph/leftArrow.png" />   </div></td>
-      <td><div class="table_content"><img src="../../dist/img/graph/rightArrow.png" />  </div></td>
-      <td><div class="table_content"><img src="../../dist/img/graph/plus.png" />        </div></td>
-      <td><div class="table_content"><img src="../../dist/img/graph/minus.png" />       </div></td>
-      <td><div class="table_content"><img src="../../dist/img/graph/zoomExtends.png" /> </div></td>
+      <td><div class="table_content"><img src="../../dist/img/network/upArrow.png" />     </div></td>
+      <td><div class="table_content"><img src="../../dist/img/network/downArrow.png" />   </div></td>
+      <td><div class="table_content"><img src="../../dist/img/network/leftArrow.png" />   </div></td>
+      <td><div class="table_content"><img src="../../dist/img/network/rightArrow.png" />  </div></td>
+      <td><div class="table_content"><img src="../../dist/img/network/plus.png" />        </div></td>
+      <td><div class="table_content"><img src="../../dist/img/network/minus.png" />       </div></td>
+      <td><div class="table_content"><img src="../../dist/img/network/zoomExtends.png" /> </div></td>
     </tr>
     <tr>
       <td><div class="table_description">Keyboard shortcuts:</div></td>
@@ -175,7 +175,7 @@
 </form>
 <br>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <p id="selection"></p>
 </body>

examples/graph/21_data_manipulation.html → examples/Network/21_data_manipulation.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Navigation</title>
+  <title>Network | Navigation</title>
 
   <style type="text/css">
     body {
       font: 10pt sans;
     }
-    #mygraph {
+    #mynetwork {
       position:relative;
       width: 600px;
       height: 600px;
@@ -36,7 +36,7 @@
     #operation {
       font-size:28px;
     }
-    #graph-popUp {
+    #network-popUp {
       display:none;
       position:absolute;
       top:350px;
@@ -58,7 +58,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     function draw() {
       nodes = [];
@@ -75,7 +75,7 @@
 
         connectionCount[i] = 0;
 
-        // create edges in a scale-free-graph way
+        // create edges in a scale-free-network way
         if (i == 1) {
           var from = i;
           var to = 0;
@@ -107,8 +107,8 @@
         }
       }
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -125,7 +125,7 @@
           var labelInput = document.getElementById('node-label');
           var saveButton = document.getElementById('saveButton');
           var cancelButton = document.getElementById('cancelButton');
-          var div = document.getElementById('graph-popUp');
+          var div = document.getElementById('network-popUp');
           span.innerHTML = "Add Node";
           idInput.value = data.id;
           labelInput.value = data.label;
@@ -139,7 +139,7 @@
           var labelInput = document.getElementById('node-label');
           var saveButton = document.getElementById('saveButton');
           var cancelButton = document.getElementById('cancelButton');
-          var div = document.getElementById('graph-popUp');
+          var div = document.getElementById('network-popUp');
           span.innerHTML = "Edit Node";
           idInput.value = data.id;
           labelInput.value = data.label;
@@ -159,21 +159,21 @@
           }
         }
       };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
 
       // add event listeners
-      graph.on('select', function(params) {
+      network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
 
-      graph.on("resize", function(params) {console.log(params.width,params.height)});
+      network.on("resize", function(params) {console.log(params.width,params.height)});
 
       function clearPopUp() {
         var saveButton = document.getElementById('saveButton');
         var cancelButton = document.getElementById('cancelButton');
         saveButton.onclick = null;
         cancelButton.onclick = null;
-        var div = document.getElementById('graph-popUp');
+        var div = document.getElementById('network-popUp');
         div.style.display = 'none';
 
       }
@@ -181,7 +181,7 @@
       function saveData(data,callback) {
         var idInput = document.getElementById('node-id');
         var labelInput = document.getElementById('node-label');
-        var div = document.getElementById('graph-popUp');
+        var div = document.getElementById('network-popUp');
         data.id = idInput.value;
         data.label = labelInput.value;
         clearPopUp();
@@ -204,7 +204,7 @@
 </div>
 <br />
 
-<div id="graph-popUp">
+<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>
@@ -216,7 +216,7 @@
   <input type="button" value="cancel" id="cancelButton"></button>
 </div>
 <br />
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <p id="selection"></p>
 </body>

examples/graph/22_les_miserables.html → examples/Network/22_les_miserables.html

@@ -1,10 +1,10 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
-    <title>Graph | Multiline text</title>
+    <title>Network | Multiline text</title>
 
     <style type="text/css">
-        #mygraph {
+        #mynetwork {
             width: 900px;
             height: 900px;
             border: 1px solid lightgray;
@@ -354,20 +354,20 @@
                 {"from":76,"to":58}
             ];
 
-            // create a graph
-            var container = document.getElementById('mygraph');
+            // create a network
+            var container = document.getElementById('mynetwork');
             var data = {
                 nodes: nodes,
                 edges: edges
             };
             var options = {nodes: {shape:'circle'},stabilize: false};
-            var graph = new vis.Graph(container, data, options);
+            var network = new vis.Network(container, data, options);
 
         }
     </script>
 </head>
 
 <body onload="draw()">
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 </body>
 </html>

examples/graph/23_hierarchical_layout.html → examples/Network/23_hierarchical_layout.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Random nodes</title>
+  <title>Network | Random nodes</title>
 
   <style type="text/css">
     body {
       font: 10pt sans;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -19,7 +19,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
 
 
@@ -38,7 +38,7 @@
 
         connectionCount[i] = 0;
 
-        // create edges in a scale-free-graph way
+        // create edges in a scale-free-network way
         if (i == 1) {
           var from = i;
           var to = 0;
@@ -71,8 +71,8 @@
         }
       }
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -86,10 +86,10 @@
             direction: directionInput.value
         }
     };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
 
       // add event listeners
-      graph.on('select', function(params) {
+      network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
@@ -98,9 +98,9 @@
 </head>
 
 <body onload="draw();">
-<h2>Hierarchical Layout - Scale-Free-Graph</h2>
+<h2>Hierarchical Layout - Scale-Free-Network</h2>
 <div style="width:700px; font-size:14px;">
-    This example shows the randomly generated <b>scale-free-graph</b> set of nodes and connected edges from example 2.
+    This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
     In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
 </div>
 <br />
@@ -140,7 +140,7 @@
 </script>
 <br>
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <p id="selection"></p>
 </body>

examples/graph/24_hierarchical_layout_userdefined.html → examples/Network/24_hierarchical_layout_userdefined.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Random nodes</title>
+  <title>Network | Random nodes</title>
 
   <style type="text/css">
     body {
       font: 10pt sans;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -19,7 +19,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     function draw() {
       nodes = [];
@@ -105,8 +105,8 @@
         nodes[14]["level"] = 5;
 
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -115,10 +115,10 @@
     var options = {
         hierarchicalLayout:true
     };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
 
       // add event listeners
-      graph.on('select', function(params) {
+      network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
@@ -132,7 +132,7 @@
 </div>
 <br />
 
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <p id="selection"></p>
 </body>

examples/graph/25_physics_configuration.html → examples/Network/25_physics_configuration.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html>
 <head>
-  <title>Graph | Playing with Physics</title>
+  <title>Network | Playing with Physics</title>
 
   <style type="text/css">
     body {
       font: 10pt sans;
     }
-    #mygraph {
+    #mynetwork {
       width: 600px;
       height: 600px;
       border: 1px solid lightgray;
@@ -19,7 +19,7 @@
   <script type="text/javascript">
     var nodes = null;
     var edges = null;
-    var graph = null;
+    var network = null;
 
     function draw() {
       nodes = [];
@@ -36,7 +36,7 @@
 
         connectionCount[i] = 0;
 
-        // create edges in a scale-free-graph way
+        // create edges in a scale-free-network way
         if (i == 1) {
           var from = i;
           var to = 0;
@@ -69,8 +69,8 @@
         }
       }
 
-      // create a graph
-      var container = document.getElementById('mygraph');
+      // create a network
+      var container = document.getElementById('mynetwork');
       var data = {
         nodes: nodes,
         edges: edges
@@ -82,10 +82,10 @@
     stabilize: false,
     configurePhysics:true
     };
-      graph = new vis.Graph(container, data, options);
+      network = new vis.Network(container, data, options);
 
       // add event listeners
-      graph.on('select', function(params) {
+      network.on('select', function(params) {
         document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
       });
     }
@@ -96,14 +96,14 @@
 
 <h2>Playing with Physics</h2>
 <div style="width: 700px; font-size:14px;">
-    Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, graph has a special option
+    Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
     that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
-    settings you are happy with, you can supply them to graph using the documented physics options.
+    settings you are happy with, you can supply them to network using the documented physics options.
 
     On start, the default settings will be loaded. Keep in mind that selecting the hierarchical simulation mode <b>disables</b> smooth curves. These will not be enabled again afterwards.
 </div>
 <br />
-<div id="mygraph"></div>
+<div id="mynetwork"></div>
 
 <p id="selection"></p>
 </body>

examples/graph/graphviz/graphviz_gallery.html → examples/Network/graphviz/graphviz_gallery.html

@@ -65,7 +65,7 @@
 <script type="text/javascript">
   var container = document.getElementById('mygraph');
   var url = document.getElementById('url');
-  var graph = new vis.Graph(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
+  var graph = new vis.Network(container,{},{physics:{barnesHut:{springLength:75,springConstant:0.015}}});
 
   function loadData () {
     $.ajax({

examples/graph/index.html → examples/Network/index.html

@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>vis.js | graph examples</title>
+  <title>vis.js | Network examples</title>
 
   <link href='../../docs/css/style.css' type='text/css' rel='stylesheet'>
 </head>
@@ -10,7 +10,7 @@
 <body>
 <div id="container">
 
-  <h1>vis.js graph examples</h1>
+  <h1>vis.js Network examples</h1>
 
   <p><a href="01_basic_usage.html">01_basic_usage.html</a></p>
   <p><a href="02_random_nodes.html">02_random_nodes.html</a></p>