From c131c084cc2e3f2a254926b1bb36e321759c3141 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 20 May 2015 11:35:15 +0200 Subject: [PATCH] Refactored table columns "mid" --- docs/css/newdocs.css | 228 ------ docs/css/old_style.css | 83 ++ docs/css/style.css | 219 ++++-- docs/dataset.html | 2 +- docs/dataview.html | 2 +- docs/graph2d/index.html | 421 +++++----- docs/graph3d/index.html | 732 ++++++++++++++++++ docs/index.html | 4 +- docs/network/configure.html | 24 +- docs/network/edges.html | 216 +++--- docs/network/groups.html | 20 +- docs/network/index.html | 162 ++-- docs/network/interaction.html | 38 +- docs/network/layout.html | 18 +- docs/network/manipulation.html | 24 +- docs/network/nodes.html | 236 +++--- docs/network/physics.html | 94 ++- docs/{ => old}/graph3d.html | 8 +- .../old => old/old_network}/canvas.html | 6 +- .../old => old/old_network}/clustering.html | 4 +- .../old => old/old_network}/rendering.html | 6 +- .../old => old/old_network}/selection.html | 4 +- .../old => old/old_network}/view.html | 4 +- docs/timeline/index.html | 408 +++++----- examples/index.html | 2 +- examples/timeline/index.html | 2 +- 26 files changed, 1827 insertions(+), 1140 deletions(-) delete mode 100644 docs/css/newdocs.css create mode 100644 docs/css/old_style.css create mode 100644 docs/graph3d/index.html rename docs/{ => old}/graph3d.html (98%) rename docs/{network/old => old/old_network}/canvas.html (98%) rename docs/{network/old => old/old_network}/clustering.html (98%) rename docs/{network/old => old/old_network}/rendering.html (97%) rename docs/{network/old => old/old_network}/selection.html (98%) rename docs/{network/old => old/old_network}/view.html (99%) diff --git a/docs/css/newdocs.css b/docs/css/newdocs.css deleted file mode 100644 index f1989d99..00000000 --- a/docs/css/newdocs.css +++ /dev/null @@ -1,228 +0,0 @@ - -html { - height:100%; -} -body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; - /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/ - font-size:16px; - line-height: 1.5em; - background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */ -} - - -h1, h2, h3, h4, h5, h6 { - margin: 40px 0 20px 0; -} - -ul { - margin-top: 0.7em; - margin-bottom: 0.7em; -} - -p { - margin: 20px 0; -} - -img.icon { - position:relative; - top:-2px; -} - - -div.navbar-wrapper { - background-color:#07508E; - border-bottom: 3px solid #ffffff; - font-size:16px; -} - -div.blogHeader { - margin-left:auto; - margin-right:auto; - text-align:center; - width:910px; - padding: 0px 30px 0px 30px; - margin-top:-150px; - color:#ffffff; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); - margin-bottom:60px; - -} - -div.full { - min-height:100%; - box-shadow:0 2px 10px rgba(0,0,0,0.4); - padding: 20px 10px 40px 10px; - background-color:#ffffff; -} - -@media (min-width: 768px) { - div.full { - padding: 40px 40px 80px 40px; - } -} - -@media (min-width: 992px) { - div.full { - padding: 80px 80px 160px 80px; - } -} - -table.moduleTable { -} - -table.moduleTable th, -table.moduleTable td { - padding: 5px 15px; - border: 1px solid #dddddd; -} - - -table.moduleTable th { - background-color: #f5f5f5; -} - -table.moduleTable td { - vertical-align: top; -} - - -/* TODO: cleanup */ -/*tr.header {*/ - /*color: #1f3350;*/ - /*background-color: #cccccc;*/ - /*border-bottom:1px solid #999999 !important;*/ - /*font-size:16px;*/ - /*font-style:italic;*/ -/*}*/ - -td.mid { - background-color: #f5f5f5; - - font-style:italic; -} - -/*td.properties {*/ - /*width:150px;*/ -/*}*/ - -/*p {*/ - /*max-width:1000px;*/ -/*}*/ - - -/*pre.code {*/ - /*padding:2px 4px;*/ - /*font-size:90%;*/ - /*color: #444444;*/ - /*background-color:#f9f2f4;*/ - /*border-radius:4px;*/ - /*border:0;*/ -/*}*/ - -pre { - margin: 20px 0; -} - -/*pre.top {*/ - /*margin-left:20px;*/ -/*}*/ - -tr.hidden { - max-height:0; - /*max-height: 0;*/ - overflow: hidden; -} - -tr.visible { - /* Set our transitions up. */ - -webkit-animation: - fadeIn 250ms ease-in; -} - - -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - - -span.caret { - opacity: 0.5; -} - -span.right-caret { - border-bottom: 4px solid transparent; - border-top: 4px solid transparent; - border-left: 4px solid #000000; - display: inline-block; - height: 0; - opacity: 0.5; - vertical-align: top; - width: 0; - margin-left:5px; - margin-top:6px; -} - -tr.toggle { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor:pointer; -} - - - -tr.toggle.collapsible { - background-color: #f5f5f5; - border-left: 3px solid #89b3ff; -} - -td.indent { - padding-left:25px !important; -} - - -td.indent2 { - padding-left:50px !important; -} - -/* TODO: cleanup */ -/*td.name {*/ - /*width:230px;*/ -/*}*/ - -/*td.nameSmall {*/ - /*width:150px;*/ -/*}*/ - -/*td.type {*/ - /*width: 110px;*/ -/*}*/ - -/*td.default {*/ - /*width:60px;*/ -/*}*/ - -/*td.eventProperties {*/ - /*width:150px;*/ -/*}*/ - -/*td.methodName {*/ - /*width:250px;*/ -/*}*/ - -pre.options { - max-width:600px; -} - -pre.hidden { - display:none; -} \ No newline at end of file diff --git a/docs/css/old_style.css b/docs/css/old_style.css new file mode 100644 index 00000000..d9382b0d --- /dev/null +++ b/docs/css/old_style.css @@ -0,0 +1,83 @@ +html, body { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +body, td, th { + font-family: arial, sans-serif; + font-size: 11pt; + color: #4D4D4D; + line-height: 1.7em; +} + +#container { + position: relative; + margin: 0 auto; + padding: 10px 10px 50px 10px; + width: 970px; + max-width: 100%; + box-sizing: border-box; +} + +h1 { + font-size: 180%; + font-weight: bold; + padding: 0; + margin: 1em 0 1em 0; +} + +h2 { + padding-top: 20px; + padding-bottom: 10px; + border-bottom: 1px solid #e0e0e0; + color: #064880; +} + +h3 { + font-size: 140%; +} + +a > img { + border: none; +} + +a { + color: #064880; + text-decoration: none; +} + +a:visited { + color: #064880; + text-decoration: none; +} + +a:hover { + color: red; + text-decoration: underline; +} + +table { + border-collapse: collapse; +} + +th { + font-weight: bold; + border: 1px solid lightgray; + background-color: #E5E5E5; + text-align: left; + vertical-align: top; + padding: 5px; +} + +td { + border: 1px solid lightgray; + padding: 5px; + vertical-align: top; +} + +p.important_note { + color: #3a6baa; + font-weight:bold; +} \ No newline at end of file diff --git a/docs/css/style.css b/docs/css/style.css index d9382b0d..45a7fd10 100644 --- a/docs/css/style.css +++ b/docs/css/style.css @@ -1,83 +1,192 @@ -html, body { - width: 100%; - height: 100%; - padding: 0; - margin: 0; + +html { + height:100%; +} +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; + /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/ + font-size:16px; + line-height: 1.5em; + background: url('../img/crosswordStrong.png') /* Background pattern from subtlepatterns.com */ } -body, td, th { - font-family: arial, sans-serif; - font-size: 11pt; - color: #4D4D4D; - line-height: 1.7em; + +h1, h2, h3, h4, h5, h6 { + margin: 40px 0 20px 0; } -#container { - position: relative; - margin: 0 auto; - padding: 10px 10px 50px 10px; - width: 970px; - max-width: 100%; - box-sizing: border-box; +ul { + margin-top: 0.7em; + margin-bottom: 0.7em; } -h1 { - font-size: 180%; - font-weight: bold; - padding: 0; - margin: 1em 0 1em 0; +p { + margin: 20px 0; } -h2 { - padding-top: 20px; - padding-bottom: 10px; - border-bottom: 1px solid #e0e0e0; - color: #064880; +img.icon { + position:relative; + top:-2px; } -h3 { - font-size: 140%; + +div.navbar-wrapper { + background-color:#07508E; + border-bottom: 3px solid #ffffff; + font-size:16px; } -a > img { - border: none; +div.blogHeader { + margin-left:auto; + margin-right:auto; + text-align:center; + width:910px; + padding: 0px 30px 0px 30px; + margin-top:-150px; + color:#ffffff; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); + margin-bottom:60px; + } -a { - color: #064880; - text-decoration: none; +div.full { + min-height:100%; + box-shadow:0 2px 10px rgba(0,0,0,0.4); + padding: 20px 10px 40px 10px; + background-color:#ffffff; } -a:visited { - color: #064880; - text-decoration: none; +@media (min-width: 768px) { + div.full { + padding: 40px 40px 80px 40px; + } } -a:hover { - color: red; - text-decoration: underline; +@media (min-width: 992px) { + div.full { + padding: 80px 80px 160px 80px; + } } table { - border-collapse: collapse; } -th { - font-weight: bold; - border: 1px solid lightgray; - background-color: #E5E5E5; - text-align: left; - vertical-align: top; - padding: 5px; +table th, +table td { + padding: 5px 15px; + border: 1px solid #dddddd; +} + + +table th { + background-color: #f5f5f5; +} + +table td { + vertical-align: top; +} + +/* +The following tables are used: +- A table 'properties' with data properties. Columns: Name, Type, Required, Description +- A table 'options' with configuration options. Columns: Name, Type, Default, Description +- A table 'methods' with methods. Columns: Method, Return Type, Description +- A table 'events' with events. Columns: Name, Properties, Description +- A table 'styles' with styles. Columns: Description, Values +*/ +table.properties td:nth-child(2), +table.properties td:nth-child(3), +table.options td:nth-child(2), +table.options td:nth-child(3), +table.methods td:nth-child(2), +table.methods td:nth-child(2), +table.events td:nth-child(2) { + background-color: #f5f5f5; + font-style: italic; +} + +pre { + margin: 20px 0; +} + +a code { + text-decoration: underline; +} + +/*pre.top {*/ + /*margin-left:20px;*/ +/*}*/ + +tr.hidden { + max-height:0; + /*max-height: 0;*/ + overflow: hidden; +} + +tr.visible { + /* Set our transitions up. */ + -webkit-animation: + fadeIn 250ms ease-in; +} + + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + + +span.caret { + opacity: 0.5; +} + +span.right-caret { + border-bottom: 4px solid transparent; + border-top: 4px solid transparent; + border-left: 4px solid #000000; + display: inline-block; + height: 0; + opacity: 0.5; + vertical-align: top; + width: 0; + margin-left:5px; + margin-top:6px; +} + +tr.toggle { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor:pointer; +} + + + +tr.toggle.collapsible { + background-color: #f5f5f5; + border-left: 3px solid #89b3ff; +} + +td.indent { + padding-left:25px !important; +} + + +td.indent2 { + padding-left:50px !important; } -td { - border: 1px solid lightgray; - padding: 5px; - vertical-align: top; +pre.options { + max-width:600px; } -p.important_note { - color: #3a6baa; - font-weight:bold; +pre.hidden { + display:none; } \ No newline at end of file diff --git a/docs/dataset.html b/docs/dataset.html index 94a1ab9e..48007fad 100644 --- a/docs/dataset.html +++ b/docs/dataset.html @@ -5,7 +5,7 @@ vis.js | DataSet documentation - + diff --git a/docs/dataview.html b/docs/dataview.html index b8c8c7d7..c6046d64 100644 --- a/docs/dataview.html +++ b/docs/dataview.html @@ -5,7 +5,7 @@ vis.js | DataView documentation - + diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html index 84ecdb09..f36663c2 100644 --- a/docs/graph2d/index.html +++ b/docs/graph2d/index.html @@ -11,7 +11,7 @@ - + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + +
+

Graph3d

+ +

Overview

+

+ Graph3d is an interactive visualization chart to draw data in a three dimensional + graph. You can freely move and zoom in the graph by dragging and scrolling in the + window. Graph3d also supports animation of a graph. +

+

+ Graph3d uses HTML canvas + to render graphs, and can render up to a few thousands of data points smoothly. +

+ +

Contents

+ + +

Example

+

+ The following code shows how to create a Graph3d and provide it with data. + More examples can be found in the examples directory. +

+ +
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph 3D demo</title>
+
+  <style>
+    body {font: 10pt arial;}
+  </style>
+
+  <script type="text/javascript" src="../../dist/vis.js"></script>
+
+  <script type="text/javascript">
+  var data = null;
+  var graph = null;
+
+  function custom(x, y) {
+    return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+  }
+
+  // Called when the Visualization API is loaded.
+  function drawVisualization() {
+    // Create and populate a data table.
+    var data = new vis.DataSet();
+    // create some nice looking data with sin/cos
+    var steps = 50;  // number of datapoints will be steps*steps
+    var axisMax = 314;
+    var axisStep = axisMax / steps;
+    for (var x = 0; x < axisMax; x+=axisStep) {
+      for (var y = 0; y < axisMax; y+=axisStep) {
+        var value = custom(x, y);
+        data.add({
+          x: x,
+          y: y,
+          z: value,
+          style: value
+        });
+      }
+    }
+
+    // specify options
+    var options = {
+      width:  '600px',
+      height: '600px',
+      style: 'surface',
+      showPerspective: true,
+      showGrid: true,
+      showShadow: false,
+      keepAspectRatio: true,
+      verticalRatio: 0.5
+    };
+
+    // create a graph3d
+    var container = document.getElementById('mygraph');
+    graph3d = new vis.Graph3d(container, data, options);
+  }
+  </script>
+</head>
+
+<body onload="drawVisualization();">
+  <div id="mygraph"></div>
+</body>
+</html>
+
+
+ + +

Loading

+ +

+ The class name of the Graph3d is vis.Graph3d. + When constructing a Graph3d, an HTML DOM container must be provided to attach + the graph to. Optionally, data an options can be provided. + Data is a vis DataSet or an Array, described in + section Data Format. + Options is a name-value map in the JSON format. The available options + are described in section Configuration Options. +

+ 
var graph = new vis.Graph3d(container [, data] [, options]);
+ +

+ Data and options can be set or changed later on using the functions + Graph3d.setData(data) and Graph3d.setOptions(options). +

+ +

Data Format

+

+ Graph3d can load data from an Array, a DataSet or a DataView. + JSON objects are added to this DataSet by using the add() function. + Data points must have properties x, y, and z, + and can optionally have a property style and filter. + +

Definition

+

+ The DataSet JSON objects are defined as: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
xnumberyesLocation on the x-axis.
ynumberyesLocation on the y-axis.
znumberyesLocation on the z-axis.
stylenumbernoThe data value, required for graph styles dot-color and + dot-size. +
filter*noFilter values used for the animation. + This column may have any type, such as a number, string, or Date.
+ + + +

Configuration Options

+ +

+ Options can be used to customize the graph. Options are defined as a JSON object. + All options are optional. +

+ +
+var options = {
+    width:  '100%',
+    height: '400px',
+    style: 'surface'
+};
+
+ +

+ The following options are available. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDefaultDescription
animationIntervalnumber1000The animation interval in milliseconds. This determines how fast + the animation runs.
animationPreloadbooleanfalseIf false, the animation frames are loaded as soon as they are requested. + if animationPreload is true, the graph will automatically load + all frames in the background, resulting in a smoother animation as soon as + all frames are loaded. The load progress is shown on screen.
animationAutoStartbooleanfalseIf true, the animation starts playing automatically after the graph + is created.
backgroundColorstring or Object'white'The background color for the main area of the chart. + Can be either a simple HTML color string, for example: 'red' or '#00cc00', + or an object with the following properties.
backgroundColor.strokestring'gray'The color of the chart border, as an HTML color string.
backgroundColor.strokeWidthnumber1The border width, in pixels.
backgroundColor.fillstring'white'The chart fill color, as an HTML color string.
cameraPositionObject{horizontal: 1.0, vertical: 0.5, distance: 1.7}Set the initial rotation and position of the camera. + The object cameraPosition contains three parameters: + horizontal, vertical, and distance. + Parameter horizontal is a value in radians and can have any + value (but normally in the range of 0 and 2*Pi). + Parameter vertical is a value in radians between 0 and 0.5*Pi. + Parameter distance is the (normalized) distance from the + camera to the center of the graph, in the range of 0.71 to 5.0. A + larger distance puts the graph further away, making it smaller. + All parameters are optional. +
heightstring'400px'The height of the graph in pixels or as a percentage.
keepAspectRatiobooleantrueIf keepAspectRatio is true, the x-axis and the y-axis + keep their aspect ratio. If false, the axes are scaled such that they + both have the same, maximum with.
showAnimationControlsbooleantrueIf true, animation controls are created at the bottom of the Graph. + The animation controls consists of buttons previous, start/stop, next, + and a slider showing the current frame. + Only applicable when the provided data contains an animation.
showGridbooleantrueIf true, grid lines are draw in the x-y surface (the bottom of the 3d + graph).
showPerspectivebooleantrueIf true, the graph is drawn in perspective: points and lines which + are further away are drawn smaller. + Note that the graph currently does not support a gray colored bottom side + when drawn in perspective. +
showShadowbooleanfalseShow shadow on the graph.
stylestring'dot'The style of the 3d graph. Available styles: + bar, + bar-color, + bar-size, + dot, + dot-line, + dot-color, + dot-size, + line, + grid, + or surface
tooltipboolean | functionfalseShow a tooltip showing the values of the hovered data point. + The contents of the tooltip can be customized by providing a callback + function as tooltip. In this case the function is called + with an object containing parameters x, + y, and z argument, + and must return a string which may contain HTML. +
valueMaxnumbernoneThe maximum value for the value-axis. Only available in combination + with the styles dot-color and dot-size.
valueMinnumbernoneThe minimum value for the value-axis. Only available in combination + with the styles dot-color and dot-size.
verticalRationumber0.5A value between 0.1 and 1.0. This scales the vertical size of the graph + When keepAspectRatio is set to false, and verticalRatio is set to 1.0, + the graph will be a cube.
widthstring'400px'The width of the graph in pixels or as a percentage.
xBarWidthnumbernoneThe width of bars in x direction. By default, the width is equal to the distance + between the data points, such that bars adjoin each other. + Only applicable for styles 'bar' and 'bar-color'.
xCenterstring'55%'The horizontal center position of the graph, as a percentage or in + pixels.
xMaxnumbernoneThe maximum value for the x-axis.
xMinnumbernoneThe minimum value for the x-axis.
xStepnumbernoneStep size for the grid on the x-axis.
xValueLabelfunctionnoneA function for custom formatting of the labels along the x-axis, + for example function (x) {return (x * 100) + '%'}. +
yBarWidthnumbernoneThe width of bars in y direction. By default, the width is equal to the distance + between the data points, such that bars adjoin each other. + Only applicable for styles 'bar' and 'bar-color'.
yCenterstring'45%'The vertical center position of the graph, as a percentage or in + pixels.
yMaxnumbernoneThe maximum value for the y-axis.
yMinnumbernoneThe minimum value for the y-axis.
yStepnumbernoneStep size for the grid on the y-axis.
yValueLabelfunctionnoneA function for custom formatting of the labels along the y-axis, + for example function (y) {return (y * 100) + '%'}. +
zMinnumbernoneThe minimum value for the z-axis.
zMaxnumbernoneThe maximum value for the z-axis.
zStepnumbernoneStep size for the grid on the z-axis.
zValueLabelfunctionnoneA function for custom formatting of the labels along the z-axis, + for example function (z) {return (z * 100) + '%'}. +
xLabelStringxLabel on the X axis.
yLabelStringyLabel on the Y axis.
zLabelStringzLabel on the Z axis.
filterLabelStringtimeLabel for the filter column.
legendLabelStringvalueLabel for the style description.
+ + +

Methods

+

+ Graph3d supports the following methods. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturn TypeDescription
animationStart()noneStart playing the animation. + Only applicable when animation data is available.
animationStop()noneStop playing the animation. + Only applicable when animation data is available.
getCameraPosition()An object with parameters horizontal, + vertical and distanceReturns an object with parameters horizontal, + vertical and distance, + which each one of them is a number, representing the rotation and position + of the camera.
redraw()noneRedraw the graph. Useful after the camera position is changed externally, + when data is changed, or when the layout of the webpage changed.
setData(data)noneReplace the data in the Graph3d.
setOptions(options)noneUpdate options of Graph3d. + The provided options will be merged with current options.
setSize(width, height)noneParameters width and height are strings, + containing a new size for the graph. Size can be provided in pixels + or in percentages.
setCameraPosition (pos){horizontal: 1.0, vertical: 0.5, distance: 1.7}Set the rotation and position of the camera. Parameter pos + is an object which contains three parameters: horizontal, + vertical, and distance. + Parameter horizontal is a value in radians and can have any + value (but normally in the range of 0 and 2*Pi). + Parameter vertical is a value in radians between 0 and 0.5*Pi. + Parameter distance is the (normalized) distance from the + camera to the center of the graph, in the range of 0.71 to 5.0. A + larger distance puts the graph further away, making it smaller. + All parameters are optional. +
+ +

Events

+

+ Graph3d fires events after the camera position has been changed. + The event can be catched by creating a listener. + Here an example on how to catch a cameraPositionChange event. +

+ +
+function onCameraPositionChange(event) {
+  alert('The camera position changed to:\n' +
+        'Horizontal: ' + event.horizontal + '\n' +
+        'Vertical: ' + event.vertical + '\n' +
+        'Distance: ' + event.distance);
+}
+// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
+graph3d.on('cameraPositionChange', onCameraPositionChange);
+
+ +

+ The following events are available. +

+ + + + + + + + + + + + + +
namePropertiesDescription
cameraPositionChange +
    +
  • horizontal: Number. The horizontal angle of the camera.
    • +
  • vertical: Number. The vertical angle of the camera.
    • +
  • distance: Number. The distance of the camera to the center of the graph.
    • +
+ 		The camera position changed. Fired after the user modified the camera position + by moving (dragging) the graph, or by zooming (scrolling), + but not after a call to setCameraPosition method. + The new camera position can be retrieved by calling the method + getCameraPosition.
+ +

Data Policy

+

+ All code and data are processed and rendered in the browser. No data is sent to any server. +

+ +
+ + + + + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 66e6275e..349712f5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,7 +5,7 @@ vis.js | documentation - + @@ -61,7 +61,7 @@ Plot data on a timeline with lines or barcharts.
  • - Graph3d. + Graph3d. Display data in a three dimensional graph.
  • diff --git a/docs/network/configure.html b/docs/network/configure.html index 0d51580f..09284e5d 100644 --- a/docs/network/configure.html +++ b/docs/network/configure.html @@ -13,7 +13,7 @@ - + @@ -118,24 +118,24 @@ network.setOptions(options);

    As shown above, alternative to supplying an object, you can supply a String, Array, Function or Boolean. These will do the same as the filter option described below.

    - +
    - - - - + + + + - - + + - - + + - - + +
    nametypedefaultdescriptionNameTypeDefaultDescription
    enabledBooleantrueBooleantrue Toggle the configuration interface on or off. This is an optional parameter. If left undefined and any of the other properties of this object are defined, this will be set to true.
    filterString, Array, Boolean, FunctiontrueString, Array, Boolean, Functiontrue When a boolean, true gives you all options, false will not show any. If a string is supplied, any combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics, selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an @@ -150,8 +150,8 @@ function (option, path) {
    containerDOM elementundefinedDOM elementundefined This allows you to put the configure list in another HTML container than below the network.
    diff --git a/docs/network/edges.html b/docs/network/edges.html index 95ca37ce..f9961fcc 100644 --- a/docs/network/edges.html +++ b/docs/network/edges.html @@ -11,7 +11,7 @@ - + @@ -191,17 +191,17 @@ network.setOptions(options);

    These options can also be set per individual edge.

    - +
    - - - - + + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + +
    nametypedefaultdescriptionNameTypeDefaultDescription
    arrowsObject or StringundefinedObject or Stringundefined To draw an arrow with default settings a string can be supplied. For example: arrows:'to, from, middle' or 'to;from', any combination with any seperating symbol is fine. If you want to control the size of the arrowheads, you can supply an object. @@ -209,42 +209,42 @@ network.setOptions(options);
    colorObject or StringObjectObject or StringObject The color object contains the color information of the edge in every situation. When the edge only needs a single color, a color value like 'rgb(120,32,14)', '#ffffff' or 'red' can be supplied instead of an object. @@ -252,30 +252,30 @@ network.setOptions(options);
    dashesArray or BooleanfalseArray or Booleanfalse When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an Array. Array formart: Array of numbers, gap length, dash length, gap length, dash length, ... etc. The array is repeated until the distance is filled. @@ -308,56 +308,56 @@ network.setOptions(options);
    fontObject or StringfalseObject or Stringfalse This object defines the details of the label. A shorthand is also supported in the form 'size face color' for example: '14px arial red'.
    hiddenBooleanfalseBooleanfalse When true, the edge is not drawn. It is part still part of the physics simulation however!
    hoverWidthNumber or Function0.5Number or Function0.5 Assuming the hover behaviour is enabled in the interaction module, the hoverWidth determines the width of the edge when the user hovers over it with the mouse. If a number is supplied, this number will be added to the width. @@ -394,34 +394,34 @@ var options: {
    idStringundefinedStringundefined The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge.
    labelStringundefinedStringundefined The label of the edge. HTML does not work in here because the network uses HTML5 Canvas.
    lengthNumberundefinedNumberundefined The physics simulation gives edges a spring length. This value can override the length of the spring in rest.
    physicsBooleantrueBooleantrue When true, the edge is part of the physics simulation. When false, it will not act as a spring.
    scalingObjectObjectObjectObject If the value option is specified, the width of the edges will be scaled according to the properties in this object. Keep in mind that when using scaling, the width option is neglected. @@ -429,58 +429,58 @@ var options: {
    selectionWidthNumber or Function1Number or Function1 The selectionWidth determines the width of the edge when the edge is selected. If a number is supplied, this number will be added to the width. Because the width can be altered by the value and the scaling functions, a constant multiplier or added @@ -535,48 +535,48 @@ var options: {
    selfReferenceSizeNumberfalseNumberfalse When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.
    shadowObject or BooleanObjectObject or BooleanObject When true, the edge casts a shadow using the default settings. This can be further refined by supplying an object.
    smoothObject or BooleanObjectObject or BooleanObject When true, the edge is drawn as a dynamic quadratic bezier curve. The drawing of these curves takes longer than that of straight curves but it looks better. There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves @@ -586,16 +586,16 @@ var options: {
    titleStringundefinedStringundefined The title is shown in a pop-up when the mouse moves over the edge.
    valueNumberundefinedNumberundefined When a value is set, the edges' width will be scaled using the options in the scaling object defined above.
    widthNumber1Number1 The width of the edge. If value is set, this is not used.
    diff --git a/docs/network/groups.html b/docs/network/groups.html index 506afc4a..e737a6f3 100644 --- a/docs/network/groups.html +++ b/docs/network/groups.html @@ -11,7 +11,7 @@ - + @@ -105,17 +105,17 @@ var options = { network.setOptions(options);

    All of the individual options are explained here:

    - +
    - - - - + + + + - - + + - - + +
    nametypedefaultdescriptionNameTypeDefaultDescription
    useDefaultGroupsBooleantrueBooleantrue If your nodes have groups defined that are not in the Groups module, the module loops over the groups it does have, allocating one for each unknown group. When all are used, it goes back to the first group. By setting this to false, the default groups will not be used in this cycle. @@ -123,8 +123,8 @@ network.setOptions(options);
    group*ObjectObject You can add multiple groups containing styling information that applies to a certain subset of groups. All options described in the nodes module that make sense can be used here diff --git a/docs/network/index.html b/docs/network/index.html index a9212308..fc55fa87 100644 --- a/docs/network/index.html +++ b/docs/network/index.html @@ -11,7 +11,7 @@ - + - + - + B so B is a level lower than A.
    diff --git a/docs/network/manipulation.html b/docs/network/manipulation.html index dc6992a0..f88f9420 100644 --- a/docs/network/manipulation.html +++ b/docs/network/manipulation.html @@ -10,7 +10,7 @@ - + - + - + @@ -91,7 +91,7 @@ var options = { springLength: 95, springConstant: 0.04, damping: 0.09, - avoidOverlap: false + avoidOverlap: 0 }, forceAtlas2Based: { theta: 0.5, @@ -100,15 +100,14 @@ var options = { springConstant: 0.08, springLength: 100, damping: 0.4, - avoidOverlap: false + avoidOverlap: 0 }, repulsion: { centralGravity: 0.2, springLength: 200, springConstant: 0.05, nodeDistance: 100, - damping: 0.09, - avoidOverlap: false + damping: 0.09 }, hierarchicalRepulsion: { centralGravity: 0.0, @@ -144,52 +143,51 @@ var options = { network.setOptions(options);

    All of the individual options are explained here:

    - - - - - - - - - - -
    nametypedefaultdescription
    barnesHut Object Object BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.
    forceAtlas2Based Object Object Force Atlas 2 has been developed by Jacomi et al (2014) for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDefaultDescription
    barnesHut Object Object BarnesHut is a quadtree based gravity model. This is the fastest, default and recommended solver for non-hierarchical layouts.
    forceAtlas2Based Object Object Force Atlas 2 has been developed by Jacomi et al (2014) for use with Gephi. The forceAtlas2Based solver makes use of some of the equations provided by them and makes use of the barnesHut implementation in vis. The main differences are the central gravity model, which is here distance independent, and the repulsion being linear instead of quadratic. Finally, all node masses have a multiplier based on the amount of connected edges plus one.
    repulsion Object Object The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).
    hierarchicalRepulsion Object Object This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.
    maxVelocity Number 50 The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.
    minVelocity Number 0.1 Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.
    solver String 'barnesHut'You can select your own solver. Possible options: 'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.
    stabilization Object | BooleanObject When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.
    timestep Number 0.5 The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.
    repulsion Object Object The repulsion model assumes nodes have a simplified repulsion field around them. It's force linearly decreases from 1 (at 0.5*nodeDistance and smaller) to 0 (at 2*nodeDistance).
    hierarchicalRepulsion Object Object This model is based on the repulsion solver but the levels are taken into account and the forces are normalized.
    maxVelocity Number 50 The physics module limits the maximum velocity of the nodes to increase the time to stabilization. This is the maximium value.
    minVelocity Number 0.1 Once the minimum velocity is reached for all nodes, we assume the network has been stabilized and the simulation stops.
    solver String 'barnesHut'You can select your own solver. Possible options: 'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'. When setting the hierarchical layout, the hierarchical repulsion solver is automaticaly selected, regardless of what you fill in here.
    stabilization Object | BooleanObject When true, the network is stabilized on load using default settings. If false, stabilization is disabled. To further customize this, you can supply an object.
    timestep Number 0.5 The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.
    diff --git a/docs/graph3d.html b/docs/old/graph3d.html similarity index 98% rename from docs/graph3d.html rename to docs/old/graph3d.html index 9a94a1f2..54250778 100644 --- a/docs/graph3d.html +++ b/docs/old/graph3d.html @@ -3,10 +3,10 @@ vis.js | graph3d documentation - - + + - + @@ -39,7 +39,7 @@

    Example

    The following code shows how to create a Graph3d and provide it with data. - More examples can be found in the examples directory. + More examples can be found in the examples directory. 

    diff --git a/docs/network/old/canvas.html b/docs/old/old_network/canvas.html
similarity index 98%
rename from docs/network/old/canvas.html
rename to docs/old/old_network/canvas.html
index 41b9770c..8e519b05 100644
--- a/docs/network/old/canvas.html
+++ b/docs/old/old_network/canvas.html
@@ -100,7 +100,7 @@ var options = {
 network.setOptions(options);

    All of the individual options are explained here:

    - +
    @@ -133,7 +133,7 @@ network.setOptions(options);

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    -
    name type
    +
    @@ -169,7 +169,7 @@ network.setOptions(options);

    Events

    This is a list of all the events in the public API. They are collected here from all individual modules.

    -
    name returns
    +
    diff --git a/docs/network/old/clustering.html b/docs/old/old_network/clustering.html similarity index 98% rename from docs/network/old/clustering.html rename to docs/old/old_network/clustering.html index 370af2ad..97597a41 100644 --- a/docs/network/old/clustering.html +++ b/docs/old/old_network/clustering.html @@ -84,7 +84,7 @@

    Methods

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    -
    name properties
    +
    namereturnsdescription
    findNode(
      String nodeId
    )    		 Array Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of nodeIds showing where the node is. Example:
    @@ -113,7 +113,7 @@

    Cluster options object

    The options object supplied to the cluster functions can contain these properties:

    - +
    nameTypedescription
    joinCondition(
      Object nodeOptions
    )    		 Function Optional for all but the cluster method. The cluster module loops over all nodes that are selected to be in the cluster and calls this function with their data as argument. diff --git a/docs/network/old/rendering.html b/docs/old/old_network/rendering.html similarity index 97% rename from docs/network/old/rendering.html rename to docs/old/old_network/rendering.html index 22c25419..28e8b0cd 100644 --- a/docs/network/old/rendering.html +++ b/docs/old/old_network/rendering.html @@ -90,7 +90,7 @@ var options = { network.setOptions(options);

    All of the individual options are explained here:

    - +
    @@ -98,14 +98,14 @@ network.setOptions(options);

    Methods

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    -
    nametypedefaultdescription
    hideEdgesOnDragBooleanfalseWhen true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.
    hideNodesOnDragBooleanfalseWhen true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.
    +
    namereturnsdescription
    redraw()noneRedraw the network.

    Events

    These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.

    - +
    diff --git a/docs/network/old/selection.html b/docs/old/old_network/selection.html similarity index 98% rename from docs/network/old/selection.html rename to docs/old/old_network/selection.html index 6f0ed8f1..2290a209 100644 --- a/docs/network/old/selection.html +++ b/docs/old/old_network/selection.html @@ -91,7 +91,7 @@ var options = { network.setOptions(options);

    All of the individual options are explained here:

    -
    namepropertiesdescription
    initRedrawnoneFired before the redrawing begins. The simulation step has completed at this point. Can be used to move custom elements before starting drawing the new frame.
    beforeDrawingcanvas contextFired after the canvas has been cleared, scaled and translated to the viewing position but before all edges and nodes are drawn. Can be used to draw behind the network.
    +
    @@ -99,7 +99,7 @@ network.setOptions(options);

    Methods

    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

    -
    nametypedefaultdescription
    selectable BooleantrueWhen true, the nodes and edges can be selected by the user.
    selectConnectedEdges BooleantrueWhen true, on selecting a node, its connecting edges are highlighted.
    +
    namereturnsdescription
    getSelection() 
    diff --git a/docs/network/old/view.html b/docs/old/old_network/view.html
similarity index 99%
rename from docs/network/old/view.html
rename to docs/old/old_network/view.html
index 0eea7ffe..6183da66 100644
--- a/docs/network/old/view.html
+++ b/docs/old/old_network/view.html
@@ -76,7 +76,7 @@
 
     
    Methods
    
     
    This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.
    
-    
+    
    
@@ -140,7 +140,7 @@
 
     
    Events
    These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.
    
-    
    
         
    namereturnsdescription
    
         
    getScale()      NumberReturns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.
    
         
    getPosition()   NumberReturns the current central focus point of the camera.
    
     
    
+    
    
         
    namepropertiesdescription
    
         
    animationFinishednoneFired when an animation is finished.
     
    
diff --git a/docs/timeline/index.html b/docs/timeline/index.html
index 362ec432..acf22f1f 100644
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@@ -10,7 +10,7 @@
 
   
   
-  
+  
 
 
   
@@ -230,7 +230,7 @@ var items = [
     The item properties are defined as:
   
    
 
-  
+  
    
@@ -239,8 +239,8 @@ var items = [
     
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
@@ -360,7 +360,7 @@ var groups = [
     Groups can have the following properties:
   
    
 
-  
    
     
    
       Name
       Type
    
     
    
       classNameStringnoStringno
       This field is optional. A className can be used to give items
         an individual css style. For example, when an item has className
         'red', one can define a css style like:
@@ -256,22 +256,22 @@ var items = [
     
    
     
    
       contentStringyesStringyes
       The contents of the item. This can be plain text or html code.
     
    
     
    
       endDate or number or string or MomentnoDate or number or string or Momentno
       The end date of the item. The end date is optional, and can be left null.
         If end date is provided, the item is displayed as a range.
         If not, the item is displayed as a box.
     
    
     
    
       groupany typenoany typeno
       This field is optional. When the group column is provided,
         all items with the same group are placed on one line.
         A vertical axis is displayed showing the groups.
@@ -281,22 +281,22 @@ var items = [
     
    
     
    
       idString or NumbernoString or Numberno
       An id for the item. Using an id is not required but highly
         recommended. An id is needed when dynamically adding, updating,
         and removing items in a DataSet.
     
    
     
    
       startDate or number or string or MomentyesDate or number or string or Momentyes
       The start date of the item, for example new Date(2010,9,23).
     
    
     
    
       styleStringnoStringno
       
         A css text string to apply custom styling for an individual item, for
         example "color: red; background-color: pink;".
@@ -304,8 +304,8 @@ var items = [
     
    
     
    
       subgroupString or NumbernoneString or Numbernone
       The id of a subgroup.
         Groups all items within a group per subgroup, and positions them on the
         same height instead of staking them on top of each other. can be ordered
@@ -314,16 +314,16 @@ var items = [
     
    
     
    
       titleStringnoneStringnone
       Add a title for the item, displayed when holding the mouse on the item.
         The title can only contain plain text.
       
     
    
     
    
       typeStringnoStringno
       The type of the item. Can be 'box' (default), 'point', 'range', or 'background'.
         Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
       
    
+  
    
@@ -369,8 +369,8 @@ var groups = [
     
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
@@ -447,7 +447,7 @@ var options = {
     The following options are available.
   
    
 
-  
    
     
    
       Name
       Type
    
     
    
       classNameStringnoStringno
       This field is optional. A className can be used to give groups
         an individual css style. For example, when a group has className
         'red', one can define a css style
@@ -385,22 +385,22 @@ var groups = [
     
    
     
    
       contentStringyesStringyes
       The contents of the group. This can be plain text or html code.
     
    
     
    
       idString or NumberyesString or Numberyes
       An id for the group. The group will display all items having a
         property group which matches the id
         of the group.
     
    
     
    
       styleStringnoStringno
       
         A css text string to apply custom styling for an individual group label, for
         example "color: red; background-color: pink;".
@@ -408,16 +408,16 @@ var groups = [
     
    
     
    
       subgroupOrderString or FunctionnoneString or Functionnone
       Order the subgroups by a field name or custom sort function.
         By default, groups are ordered by first-come, first-show.
       
     
    
     
    
       titleStringnoneStringnone
       A title for the group, displayed when holding the mouse on the groups label.
         The title can only contain plain text.
       
    
+  
    
@@ -457,30 +457,30 @@ var options = {
 
     
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
@@ -543,8 +543,8 @@ function (option, path) {
 
     
-      
-      
+      
+      
-      
-      
+      
+      
@@ -585,8 +585,8 @@ function (option, path) {
 
     
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
@@ -662,15 +662,15 @@ function (option, path) {
 
     
-      
-      
+      
+      
-      
-      
+      
+      
@@ -678,15 +678,15 @@ function (option, path) {
 
     
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
@@ -875,23 +875,23 @@ function (option, path) {
 
     
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
-      
-      
+      
+      
@@ -925,7 +925,7 @@ function (option, path) {
     The Timeline supports the following methods.
   
    
 
-  
    
     
    
       Name
       Type
    
       alignString'center'String'center'
       Alignment of items with type 'box', 'range', and 'background'. Available values are 'auto' (default), 'center', 'left', or 'right'. For 'box' items, the 'auto' alignment is 'center'. For 'range' items, the auto alignment is dynamic: positioned left and shifted such that the contents is always visible on screen.
     
    
 
     
    
       autoResizebooleantruebooleantrue
       If true, the Timeline will automatically detect when its container is resized, and redraw itself accordingly. If false, the Timeline can be forced to repaint after its container has been resized using the function redraw().
     
    
 
     
    
       clickToUsebooleanfalsebooleanfalse
       When a Timeline is configured to be clickToUse, it will react to mouse and touch events only when active.
         When active, a blue shadow border is displayed around the Timeline. The Timeline is set active by clicking on it, and is changed to inactive again by clicking outside the Timeline or by pressing the ESC key.
     
    
 
     
    
       configureboolean or functionfalseboolean or functionfalse
       When true, a configurator is loaded where all configuration options of the Timeline can be changed live.
 
         The displayed options can be filtered by providing a filter function. This function is invoked with two arguments: the current option and the path (an Array) of the option within the options object. The option will be displayed when the filter function returns true. For example to only display format options:
@@ -493,49 +493,49 @@ function (option, path) {
 
     
    
       dataAttributesstring[] or 'all'falsestring[] or 'all'false
       An array of fields optionally defined on the timeline items that will be appended as data- attributes to the DOM element of the items.
    
         If value is 'all' then each field defined on the timeline item will become a data- attribute.    		
     
    
 
     
    
        editableboolean or Objectfalseboolean or Objectfalse
       If true, the items in the timeline can be manipulated. Only applicable when option selectable is true. See also the callbacks onAdd, onUpdate, onMove, and onRemove. When editable is an object, one can enable or disable individual manipulation actions.
         See section Editing Items for a detailed explanation.
       
     
    
     
     
     
     
 
     
    
       endDate or Number or String or MomentnoneDate or Number or String or Momentnone
       The initial end date for the axis of the timeline.
         If not provided, the latest date present in the items set is taken as
         end date.
    
       formatObjectnoneObjectnone
       
         Apply custom date formatting of the labels on the time axis. The default value of format is:
       
    {
@@ -576,8 +576,8 @@ function (option, path) {
 
     
    
       groupOrderString or FunctionnoneString or Functionnone
       Order the groups by a field name or custom sort function.
         By default, groups are not ordered.
       
    
       heightnumber or Stringnonenumber or Stringnone
       The height of the timeline in pixels or as a percentage.
         When height is undefined or null, the height of the timeline is automatically
         adjusted to fit the contents.
@@ -598,8 +598,8 @@ function (option, path) {
 
     
    
       hiddenDatesObjectnoneObjectnone
       This option allows you to hide specific timespans from the time axis. The dates can be supplied as an object:
         {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00', [repeat:'daily']} or as an Array of these objects. The repeat argument is optional.
         The possible values are (case-sensitive): daily, weekly, monthly, yearly. To hide a weekend, pick any Saturday as start and the following Monday as end
@@ -608,53 +608,53 @@ function (option, path) {
     
    
     
    
       localeStringnoneStringnone
       Select a locale for the Timeline. See section Localization for more information.
     
    
 
     
    
       localesObjectnoneObjectnone
       A map with i18n locales. See section Localization for more information.
     
    
 
     
    
        marginnumber or ObjectObjectnumber or ObjectObject
       When a number, applies the margin to margin.axis, margin.item.horizontal, and margin.item.vertical.
     
    
     
     
     
     
 
     
    
       maxDate or Number or String or MomentnoneDate or Number or String or Momentnone
       Set a maximum Date for the visible range.
         It will not be possible to move beyond this maximum.
       
    
       maxHeightnumber or Stringnonenumber or Stringnone
       Specifies the maximum height for the Timeline. Can be a number in pixels or a string like "300px".
     
    
 
     
    
       minDate or Number or String or MomentnoneDate or Number or String or Momentnone
       Set a minimum Date for the visible range.
         It will not be possible to move beyond this minimum.
       
    
       minHeightnumber or Stringnonenumber or Stringnone
       Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".
     
    
 
     
    
       moveablebooleantruebooleantrue
       
         Specifies whether the Timeline can be moved and zoomed by dragging the window.
         See also option zoomable.
@@ -695,8 +695,8 @@ function (option, path) {
 
     
    
       multiselectbooleanfalsebooleanfalse
       
         If true, multiple items can be selected using ctrl+click, shift+click, or by holding items.
         Only applicable when option selectable is true.
@@ -705,48 +705,48 @@ function (option, path) {
 
     
    
       onAddfunctionnonefunctionnone
       Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable.add are set true.
       
     
    
 
     
    
       onUpdatefunctionnonefunctionnone
       Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true.
       
     
    
 
     
    
       onMovefunctionnonefunctionnone
       Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true.
       
     
    
 
     
    
       onMovingfunctionnonefunctionnone
       Callback function triggered repeatedly when an item is being moved. See section Editing Items for more information. Only applicable when both options selectable and editable.updateTime or editable.updateGroup are set true.
       
     
    
 
     
    
       onRemovefunctionnonefunctionnone
       Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section Editing Items for more information. Only applicable when both options selectable and editable.remove are set true.
       
     
    
 
     
    
       orderfunctionnonefunctionnone
       
         
    Provide a custom sort function to order the items. The order of the
           items is determining the way they are stacked. The function
@@ -759,43 +759,43 @@ function (option, path) {
 
     
    
        orientationString or Object'bottom'String or Object'bottom'
       Orientation of the timelines axis and items. When orientation is a string, the value is applied to both items and axis. Can be 'top', 'bottom' (default), or 'both'.
     
    
     
     
 
 
     
    
       selectablebooleantruebooleantrue
       If true, the items on the timeline can be selected. Multiple items can be selected by long pressing them, or by using ctrl+click or shift+click. The event select is fired each time the selection has changed (see section Events).
     
    
 
     
    
       showCurrentTimebooleantruebooleantrue
       Show a vertical bar at the current time.
     
    
 
     
    
     
    
       showMajorLabelsbooleantruebooleantrue
       By default, the timeline shows both minor and major date labels on the
         time axis.
         For example the minor labels show minutes and the major labels show hours.
@@ -805,8 +805,8 @@ function (option, path) {
 
     
    
       showMinorLabelsbooleantruebooleantrue
       By default, the timeline shows both minor and major date labels on the
         time axis.
         For example the minor labels show minutes and the major labels show hours.
@@ -818,15 +818,15 @@ function (option, path) {
 
     
    
       stackbooleantruebooleantrue
       If true (default), items will be stacked on top of each other such that they do not overlap.
     
    
 
     
    
       snapfunction or nullfunctionfunction or nullfunction
       When moving items on the Timeline, they will be snapped to nice dates like full hours or days, depending on the current scale. The snap function can be replaced with a custom function, or can be set to null to disable snapping. The signature of the snap function is:
         
    function snap(date: Date, scale: string, step: number) : Date or number
    
         The parameter scale can be can be 'millisecond', 'second', 'minute', 'hour', 'weekday, 'day, 'month, or 'year'. The parameter step is a number like 1, 2, 4, 5.
@@ -835,29 +835,29 @@ function (option, path) {
 
     
    
       startDate or Number or String or MomentnoneDate or Number or String or Momentnone
       The initial start date for the axis of the timeline.
         If not provided, the earliest date present in the events is taken as start date.
     
    
 
     
    
       templatefunctionnonefunctionnone
       A template function used to generate the contents of the items. The function is called by the Timeline with an items data as argument, and must return HTML code as result. When the option template is specified, the items do not need to have a field content. See section Templates for a detailed explanation.
     
    
 
     
    
        timeAxisObjectObjectObjectObject
       Specify a fixed scale and step size for the time axis.
     
    
     
     
    
       typeStringnoneStringnone
       Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'background'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created. Items of type 'background' are not editable.
       
     
    
 
     
    
       widthString or Number'100%'String or Number'100%'
       The width of the timeline in pixels or as a percentage.
     
    
 
     
    
       zoomablebooleantruebooleantrue
       
         Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
         Only applicable when option moveable is set true.
@@ -900,8 +900,8 @@ function (option, path) {
 
     
    
       zoomMaxnumber315360000000000number315360000000000
       Set a maximum zoom interval for the visible range in milliseconds.
         It will not be possible to zoom out further than this maximum.
         Default value equals about 10000 years.
@@ -910,8 +910,8 @@ function (option, path) {
 
     
    
       zoomMinnumber10number10
       Set a minimum zoom interval for the visible range in milliseconds.
         It will not be possible to zoom in further than this minimum.
       
    
+  
    
@@ -934,7 +934,7 @@ function (option, path) {
 
     
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
@@ -1065,7 +1065,7 @@ function (option, path) {
 
     
-      
+      
@@ -1073,7 +1073,7 @@ function (option, path) {
 
     
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
    
     
    
       Method
       Return Type
    
       addCustomTime([time] [, id])number or Stringnumber or String
       
         Add new vertical bar representing a custom time that can be dragged by the user.
         Parameter time can be a Date, Number, or String, and is new Date() by default.
@@ -945,14 +945,14 @@ function (option, path) {
 
     
    
       destroy()nonenone
       Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up.
       
     
    
 
     
    
       fit([options])nonenone
       Adjust the visible window such that it fits all items. See also function focus(id).
         Available options:
         
      
@@ -964,7 +964,7 @@ function (option, path) {
 
     
    
       focus(id or ids [, options])nonenone
       Adjust the visible window such that the selected item (or multiple items) are centered on screen. See also function fit(). Available options:
         
      
           
    • animation: boolean or {duration: number, easingFunction: string}
      If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
      • 
@@ -974,21 +974,21 @@ function (option, path) {
 
     
    
       getCurrentTime()DateDate
       Get the current time. Only applicable when option showCurrentTime is true.
       
     
    
 
     
    
       getCustomTime([id])DateDate
       Retrieve the custom time from the custom time bar with given id. Id is undefined by default.
       
     
    
 
     
    
       getEventProperties(event)ObjectObject
       
         Returns an Object with relevant properties from an event:
         
      
@@ -1008,25 +1008,25 @@ function (option, path) {
 
     
    
       getSelection()number[]number[]
       Get an array with the ids of the currently selected items.
     
    
 
     
    
       getVisibleItems()number[]number[]
       Get an array with the ids of the currently visible items.
     
    
 
     
    
       getWindow()ObjectObject
       Get the current visible window. Returns an object with properties start: Date and end: Date.
     
    
 
     
    
       moveTo(time [, options])nonenone
       Move the window such that given time is centered on screen. Parameter time can be a Date, Number, or String. Available options:
         
      
           
    • animation: boolean or {duration: number, easingFunction: string}
      If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
      • 
@@ -1036,19 +1036,19 @@ function (option, path) {
 
     
    
       on(event, callback)nonenone
       Create an event listener. The callback function is invoked every time the event is triggered. Avialable events: rangechange, rangechanged, select. The callback function is invoked as callback(properties), where properties is an object containing event specific properties. See section Events for more information.
     
    
 
     
    
       off(event, callback)nonenone
       Remove an event listener created before via function on(event, callback). See section Events for more information.
     
    
 
     
    
       redraw()nonenone
       Force a redraw of the Timeline. The size of all items will be recalculated.
         Can be useful to manually redraw when option autoResize=false and the window
         has been resized, or when the items CSS has been changed.
@@ -1057,7 +1057,7 @@ function (option, path) {
 
     
    
       removeCustomTime(id)nonenone
       
         Remove vertical bars previously added to the timeline via addCustomTime method. Parameter id is the ID of the custom vertical bar returned by addCustomTime method.
       
    
       setCurrentTime(time)nonenone
       Set a current time. This can be used for example to ensure that a client's time is synchronized with a shared server time.
         time can be a Date object, numeric timestamp, or ISO date string.
         Only applicable when option showCurrentTime is true.
    
       setCustomTime(time [, id])nonenone
       Adjust the time of a custom time bar.
         Parameter time can be a Date object, numeric timestamp, or ISO date string.
         Parameter id is the idof the custom time bar, and is undefined by default.
@@ -1082,7 +1082,7 @@ function (option, path) {
 
     
    
       setData({
      groups: groups,
      items: items
    })    		nonenone
       Set both groups and items at once. Both properties are optional. This is a convenience method for individually calling both setItems(items) and setGroups(groups).
         Both items and groups can be an Array with Objects,
         a DataSet, or a DataView. For each of the groups, the items of the
@@ -1093,7 +1093,7 @@ function (option, path) {
 
     
    
       setGroups(groups)nonenone
       Set a data set with groups for the Timeline.
         groups can be an Array with Objects,
         a DataSet, or a DataView. For each of the groups, the items of the
@@ -1104,7 +1104,7 @@ function (option, path) {
 
     
    
       setItems(items)nonenone
       Set a data set with items for the Timeline.
         items can be an Array with Objects,
         a DataSet, or a DataView.
@@ -1113,14 +1113,14 @@ function (option, path) {
 
     
    
       setOptions(options)nonenone
       Set or update options. It is possible to change any option of the timeline at any time. You can for example switch orientation on the fly.
       
     
    
 
     
    
       setSelection(id or ids [, options])nonenone
       Select one or multiple items by their id. The currently selected items will be unselected. To unselect all selected items, call `setSelection([])`. Available options:
         
      
           
    • focus: boolean
      If true, focus will be set to the selected item(s)
      • 
@@ -1131,7 +1131,7 @@ function (option, path) {
 
     
    
       setWindow(start, end [, options])nonenone
       Set the current visible window. The parameters start and end can be a Date, Number, or String. If the parameter value of start or end is null, the parameter will be left unchanged. Available options:
         
      
           
    • animation: boolean or {duration: number, easingFunction: string}
      If true (default) or an Object, the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'. Available easing functions: "linear", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint".
      • 
@@ -1182,30 +1182,27 @@ timeline.off('select', onSelect);
     The following events are available.
   
      
 
-  
-    -      -      -      -    
-
+  
      




      
-      
-      
+      
+      
-      
+      
+      
-      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
      
     
      nameDescriptionName
       PropertiesDescription
     
      
 
     
      
       clickFired when clicked inside the Timeline.
-      
       
         Passes a properties object as returned by the method Timeline.getEventProperties(event).
       Fired when clicked inside the Timeline.
+      
     
      
 
     
      
       contextmenu
+        Passes a properties object as returned by the method Timeline.getEventProperties(event).
+      
       Fired when right-clicked inside the Timeline. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped:
 
      timeline.on('contextmenu', function (props) {
   alert('Right click!');
@@ -1213,24 +1210,19 @@ timeline.off('select', onSelect);
 });
 
      
             		
-        Passes a properties object as returned by the method Timeline.getEventProperties(event).
-      
     
      
 
     
      
       doubleClickFired when double clicked inside the Timeline.
-      
       
         Passes a properties object as returned by the method Timeline.getEventProperties(event).
       Fired when double clicked inside the Timeline.
+      
     
      
 
     
      
       rangechangeFired repeatedly when the timeline window is being changed.
-      
       
         
        
           
      • start (Number): timestamp of the current start of the window.
        • 
@@ -1238,12 +1230,12 @@ timeline.off('select', onSelect);
           
      • byUser (Boolean): change happened because of user drag/zoom.
        • 
         
      
             		Fired repeatedly when the timeline window is being changed.
+      
     
      
 
     
      
       rangechangedFired once after the timeline window has been changed.
-      
       
         
        
           
      • start (Number): timestamp of the current start of the window.
        • 
@@ -1251,45 +1243,47 @@ timeline.off('select', onSelect);
           
      • byUser (Boolean): change happened because of user drag/zoom.
        • 
         
      
             		Fired once after the timeline window has been changed.
+      
     
      
 
     
      
       selectFired after the user selects or deselects items by tapping or holding them.
-        When a use taps an already selected item, the select event is fired again.
-        Not fired when the method setSelectionis executed.
-      
       
         
        
           
      • items: an array with the ids of the selected items
        • 
         
      
             		Fired after the user selects or deselects items by tapping or holding them.
+        When a use taps an already selected item, the select event is fired again.
+        Not fired when the method setSelectionis executed.
+      
     
      
 
     
      
       timechangeFired repeatedly when the user is dragging the custom time bar.
-        Only available when the custom time bar is enabled.
-      
       
         
        
           
      • id (Number or String): custom time bar id.
        • 
           
      • time (Date): the custom time.
        • 
         
      
             		Fired repeatedly when the user is dragging the custom time bar.
+        Only available when the custom time bar is enabled.
+      
     
      
 
     
      
       timechangedFired once after the user has dragged the custom time bar.
-        Only available when the custom time bar is enabled.
-      
       
         
        
           
      • id (Number or String): custom time bar id.
        • 
           
      • time (Date): the custom time.
        • 
         
      
             		Fired once after the user has dragged the custom time bar.
+        Only available when the custom time bar is enabled.
+      
     
      
 
   
      
@@ -1476,7 +1470,7 @@ var options = {
     Timeline comes with support for the following locales:
   
      
 
-  
+  
      
@@ -1527,33 +1521,33 @@ var options = {
     The following classes are available:
   
      
 
-  
      
     
      
       Language
       Code
      
+  
      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
-      
+      
      
     
      DescriptionvaluesDescriptionValues
     
      
     
      Alternating columnsvis-even, vis-oddAlternating columnsvis-even, vis-odd
     
      
     
      Current datevis-today, vis-tomorrow, vis-yesterday, vis-current-week, vis-current-month, vis-current-yearCurrent datevis-today, vis-tomorrow, vis-yesterday, vis-current-week, vis-current-month, vis-current-year
     
      
     
      Hoursvis-h0, vis-h1, ..., vis-h23Hoursvis-h0, vis-h1, ..., vis-h23
     
      
     
      Grouped hoursvis-h0-h4 to vis-h20-h24Grouped hoursvis-h0-h4 to vis-h20-h24
     
      
     
      Weekdayvis-monday, vis-tuesday, vis-wednesday, vis-thursday, vis-friday, vis-saturday, vis-sundayWeekdayvis-monday, vis-tuesday, vis-wednesday, vis-thursday, vis-friday, vis-saturday, vis-sunday
     
      
     
      Daysvis-date1, vis-date2, ..., vis-date31Daysvis-date1, vis-date2, ..., vis-date31
     
      
     
      Monthsvis-januari, vis-februari, vis-march, vis-april, vis-may, vis-june, vis-july, vis-august, vis-september, vis-october, vis-november, vis-decemberMonthsvis-januari, vis-februari, vis-march, vis-april, vis-may, vis-june, vis-july, vis-august, vis-september, vis-october, vis-november, vis-december
     
      
     
      Yearsvis-year2014, vis-year2015, ...Yearsvis-year2014, vis-year2015, ...
     
      
   
      
 
diff --git a/examples/index.html b/examples/index.html
index 9540cefe..a16c24e4 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -4,7 +4,7 @@
 
     vis.js | examples
 
-    
+    
 
 
 
diff --git a/examples/timeline/index.html b/examples/timeline/index.html
index bfad35dd..770e3247 100644
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@@ -4,7 +4,7 @@
 
   vis.js | timeline examples
 
-  
+