Merge branch 'develop' into predefined_panels

Conflicts:
	src/timeline/Timeline.js

HISTORY.md

@@ -2,13 +2,28 @@
 http://visjs.org
 
 
-## not yet released, version 1.0.3
+## 2014-06-06, version 1.1.0
 
 ### Timeline
 
+- Select event now triggers repeatedly when selecting an already selected item.
+- Renamed `Timeline.repaint()` to `Timeline.redraw()` to be consistent with
+  the other visualisations of vis.js.
 - Fixed `Timeline.clear()` not resetting a configured `options.start` and 
   `options.end`.
 
+### Graph
+
+- Fixed error with zero nodes with hierarchical layout.
+- Added focusOnNode function.
+- Added hover option.
+- Added dragNodes option. Renamed movebale to dragGraph option.
+- Added hover events (hoverNode, blurNode).
+
+### Graph3D
+
+- Ported Graph3D from Chap Links Library.
+
 
 ## 2014-05-28, version 1.0.2
 

Jakefile.js

@@ -98,6 +98,8 @@ task('build', {async: true}, function () {
       './src/graph/graphMixins/MixinLoader.js',
       './src/graph/Graph.js',
 
+      './src/graph3d/Graph3d.js',
+
       './src/module/exports.js'
     ],
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "vis",
-  "version": "1.0.3-SNAPSHOT",
+  "version": "1.1.0",
   "description": "A dynamic, browser-based visualization library.",
   "homepage": "http://visjs.org/",
   "repository": {

docs/graph.html

@@ -235,7 +235,18 @@ var nodes = [
   // ... more nodes
 ];
 </pre>
-
+Alternatively, a vis DataSet can also be used:
+<pre class="prettyprint lang-js">
+var nodes = new vis.DataSet();
+nodes.add([
+    {id: '1', label: 'Node 1'},
+    {id: '2', label: 'Node 2'},
+    {id: '3', label: 'Node 3'},
+    {id: '4', label: 'Node 4'},
+    // ... more nodes
+]);
+</pre>
+When using a DataSet, the graph is automatically updating to changes in the DataSet.
 
 <p>
   Nodes support the following properties:
@@ -291,6 +302,20 @@ var nodes = [
     <td>Border color of the node when selected.</td>
   </tr>
 
+  <tr>
+      <td>color.hover.background</td>
+      <td>String</td>
+      <td>no</td>
+      <td>Background color of the node when the node is hovered over and the hover option is enabled.</td>
+  </tr>
+
+  <tr>
+      <td>color.hover.border</td>
+      <td>String</td>
+      <td>no</td>
+      <td>Border color of the node when the node is hovered over and the hover option is enabled.</td>
+  </tr>
+
   <tr>
     <td>group</td>
     <td>Number | String</td>
@@ -478,6 +503,18 @@ var edges = [
   // ... more edges
 ];
 </pre>
+Alternatively, a vis DataSet can also be used:
+<pre class="prettyprint lang-js">
+var edges = new vis.DataSet();
+edges.add([
+    {from: '1', to: '2'},
+    {from: '1', to: '3'},
+    {from: '2', to: '4'},
+    {from: '2', to: '5'},
+    // ... more edges
+]);
+</pre>
+When using a DataSet, the graph is automatically updating to changes in the DataSet.
 
 <p>
   Edges support the following properties:
@@ -517,6 +554,19 @@ var edges = [
         <td>Color of the edge when selected.</td>
     </tr>
 
+    <tr>
+        <td>color.hover</td>
+        <td>String</td>
+        <td>no</td>
+        <td>Color of the edge when the edge is hovered over and the hover option is enabled.</td>
+    </tr>
+    <tr>
+        <td>hoverWidth</td>
+        <td>Number</td>
+        <td>1.5</td>
+        <td>This determines the thickness of the edge if it is hovered over. This will only manifest when the hover option is enabled.</td>
+    </tr>
+
   <tr>
     <td>dash</td>
     <td>Object</td>
@@ -656,6 +706,7 @@ var edges = [
       override a specified <code>value</code>, if a <code>value</code> is
       specified too.</td>
   </tr>
+
 </table>
 
 
@@ -790,6 +841,13 @@ var options = {
     <td>The height of the graph in pixels or as a percentage.</td>
   </tr>
 
+    <tr>
+        <td>hover</td>
+        <td>Boolean</td>
+        <td>false</td>
+        <td>Enabling the change of the colors of nodes and edges when the mouse hovers over them. Enabling this may have a minor impact on performance.</td>
+    </tr>
+
   <tr>
     <td><a href="#Keyboard_navigation">keyboard</a></td>
     <td>Object</td>
@@ -799,13 +857,21 @@ var options = {
     </td>
   </tr>
     <tr>
-        <td>moveable</td>
+        <td>dragGraph</td>
         <td>Boolean</td>
         <td>true</td>
         <td>
             Toggle if the graph can be dragged. This will not affect the dragging of nodes.
         </td>
     </tr>
+    <tr>
+        <td>dragNodes</td>
+        <td>Boolean</td>
+        <td>true</td>
+        <td>
+            Toggle if the nodes can be dragged. This will not affect the dragging of the graph.
+        </td>
+    </tr>
 
   <tr>
     <td><a href="#Navigation_controls">navigation</a></td>
@@ -2008,6 +2074,13 @@ var options: {
       The selections are not ordered.
     </td>
   </tr>
+    <tr>
+        <td>focusOnNode(nodeId, [zoomLevel])</td>
+        <td>none</td>
+        <td>This function will move the view to center on the specified node. An optional zoomLevel can be passed where 1.0 is 100&#37;, between 0.0 and 1.0 is zooming out and > 1.0 is zooming in. Generally, close to 1.0 is sufficient.
+            If this argument is not passed the view will only move, not zoom.
+        </td>
+    </tr>
     <tr>
         <td>storePosition()</td>
         <td>none</td>
@@ -2169,6 +2242,26 @@ graph.off('select', onSelect);
             </ul>
         </td>
     </tr>
+    <tr>
+    <tr>
+        <td>hoverNode</td>
+        <td>Fired when the mouse is moved over a node (assuming the hover option is enabled).</td>
+        <td>
+            <ul>
+                <li><code>node</code>: an object with the id of the hovered node.</li>
+            </ul>
+        </td>
+    </tr>
+    <tr>
+    <tr>
+        <td>blurNode</td>
+        <td>Fired when the mouse is moved off a node (assuming the hover option is enabled).</td>
+        <td>
+            <ul>
+                <li><code>node</code>: an object with the id of the hovered node.</li>
+            </ul>
+        </td>
+    </tr>
     <tr>
         <td>resize</td>
         <td>Fired when the size of the canvas has been updated (not neccecarily changed) by the setSize() function or by the setOptions() function.</td>

docs/graph3d.html

@@ -0,0 +1,646 @@
+<html>
+
+<head>
+  <title>vis.js | graph3d documentation</title>
+
+  <link href='css/prettify.css' type='text/css' rel='stylesheet'>
+  <link href='css/style.css' type='text/css' rel='stylesheet'>
+
+  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
+</head>
+
+<body onload="prettyPrint();">
+<div id="container">
+
+<h1>Graph3d documentation</h1>
+
+<h2 id="Overview">Overview</h2>
+<p>
+  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.
+</p>
+
+<h2 id="Contents">Contents</h2>
+<ul>
+  <li><a href="#Overview">Overview</a></li>
+  <li><a href="#Loading">Loading</a></li>
+  <li><a href="#Data_Format">Data Format</a></li>
+  <li><a href="#Configuration_Options">Configuration Options</a></li>
+  <li><a href="#Methods">Methods</a></li>
+  <li><a href="#Events">Events</a></li>
+  <li><a href="#Data_Policy">Data Policy</a></li>
+</ul>
+
+<h2 id="Example">Example</h2>
+<p>
+  The following code shows how to create a Graph3d and provide it with data.
+  More examples can be found in the <a href="../examples">examples</a> directory.
+</p>
+
+<pre class="prettyprint lang-html">
+&lt;!DOCTYPE HTML&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Graph 3D demo&lt;/title&gt;
+
+  &lt;style&gt;
+    body {font: 10pt arial;}
+  &lt;/style&gt;
+
+  &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
+
+  &lt;script type="text/javascript"&gt;
+  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 &lt; axisMax; x+=axisStep) {
+      for (var y = 0; y &lt; 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);
+  }
+  &lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body onload="drawVisualization();"&gt;
+  &lt;div id="mygraph"&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+
+</pre>
+
+
+<h2 id="Loading">Loading</h2>
+
+<p>
+  The class name of the Graph3d is <code>vis.Graph3d</code>.
+  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 <code>DataSet</code> or an <code>Array</code>, described in
+  section <a href="#Data_Format">Data Format</a>.
+  Options is a name-value map in the JSON format. The available options
+  are described in section <a href="#Configuration_Options">Configuration Options</a>.
+</p>
+<pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>
+
+<p>
+  Data and options can be set or changed later on using the functions
+  <code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
+</p>
+
+<h2 id="Data_Format">Data Format</h2>
+<p>
+  Graph3d can load data from an <code>Array</code>, a <code>DataSet</code> or a <code>DataView</code>.
+  JSON objects are added to this DataSet by using the <code>add()</code> function.
+  Data points must have properties <code>x</code>, <code>y</code>, and <code>z</code>,
+  and can optionally have a property <code>style</code> and <code>filter</code>.
+
+<h3>Definition</h3>
+<p>
+  The DataSet JSON objects are defined as:
+</p>
+
+<table>
+  <tr>
+    <th>Name</th>
+    <th>Type</th>
+    <th>Required</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>x</td>
+    <td>number</td>
+    <td>yes</td>
+    <td>Location on the x-axis.</td>
+  </tr>
+  <tr>
+    <td>y</td>
+    <td>number</td>
+    <td>yes</td>
+    <td>Location on the y-axis.</td>
+  </tr>
+  <tr>
+    <td>z</td>
+    <td>number</td>
+    <td>yes</td>
+    <td>Location on the z-axis.</td>
+  </tr>
+  <tr>
+    <td>style</td>
+    <td>number</td>
+    <td>no</td>
+    <td>The data value, required for graph styles <code>dot-color</code> and
+      <code>dot-size</code>.
+    </td>
+  </tr>
+  <tr>
+    <td>filter</td>
+    <td>*</td>
+    <td>no</td>
+    <td>Filter values used for the animation.
+      This column may have any type, such as a number, string, or Date.</td>
+  </tr>
+</table>
+
+
+
+<h2 id="Configuration_Options">Configuration Options</h2>
+
+<p>
+  Options can be used to customize the graph. Options are defined as a JSON object.
+  All options are optional.
+</p>
+
+<pre class="prettyprint lang-js">
+var options = {
+    width:  '100%',
+    height: '400px',
+    style: 'surface'
+};
+</pre>
+
+<p>
+  The following options are available.
+</p>
+
+<table>
+<tr>
+  <th>Name</th>
+  <th>Type</th>
+  <th>Default</th>
+  <th>Description</th>
+</tr>
+
+<tr>
+  <td>animationInterval</td>
+  <td>number</td>
+  <td>1000</td>
+  <td>The animation interval in milliseconds. This determines how fast
+    the animation runs.</td>
+</tr>
+<tr>
+  <td>animationPreload</td>
+  <td>boolean</td>
+  <td>false</td>
+  <td>If false, the animation frames are loaded as soon as they are requested.
+    if <code>animationPreload</code> 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.</td>
+</tr>
+<tr>
+  <td>animationAutoStart</td>
+  <td>boolean</td>
+  <td>false</td>
+  <td>If true, the animation starts playing automatically after the graph
+    is created.</td>
+</tr>
+
+<tr>
+  <td>backgroundColor</td>
+  <td>string or Object</td>
+  <td>'white'</td>
+  <td>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.</td>
+</tr>
+<tr>
+  <td>backgroundColor.stroke</td>
+  <td>string</td>
+  <td>'gray'</td>
+  <td>The color of the chart border, as an HTML color string.</td>
+</tr>
+<tr>
+  <td>backgroundColor.strokeWidth</td>
+  <td>number</td>
+  <td>1</td>
+  <td>The border width, in pixels.</td>
+</tr>
+<tr>
+  <td>backgroundColor.fill</td>
+  <td>string</td>
+  <td>'white'</td>
+  <td>The chart fill color, as an HTML color string.</td>
+</tr>
+
+<tr>
+  <td>cameraPosition</td>
+  <td>Object</td>
+  <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
+  <td>Set the initial rotation and position of the camera.
+    The object <code>cameraPosition</code> contains three parameters:
+    <code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
+    Parameter <code>horizontal</code> is a value in radians and can have any
+    value (but normally in the range of 0 and 2*Pi).
+    Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
+    Parameter <code>distance</code> 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.
+</tr>
+
+<tr>
+  <td>height</td>
+  <td>string</td>
+  <td>'400px'</td>
+  <td>The height of the graph in pixels or as a percentage.</td>
+</tr>
+
+<tr>
+  <td>keepAspectRatio</td>
+  <td>boolean</td>
+  <td>true</td>
+  <td>If <code>keepAspectRatio</code> 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.</td>
+</tr>
+
+<tr>
+  <td>showAnimationControls</td>
+  <td>boolean</td>
+  <td>true</td>
+  <td>If 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.</td>
+</tr>
+<tr>
+  <td>showGrid</td>
+  <td>boolean</td>
+  <td>true</td>
+  <td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
+    graph).</td>
+</tr>
+<tr>
+  <td>showPerspective</td>
+  <td>boolean</td>
+  <td>true</td>
+  <td>If 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.
+  </td>
+</tr>
+<tr>
+  <td>showShadow</td>
+  <td>boolean</td>
+  <td>false</td>
+  <td>Show shadow on the graph.</td>
+</tr>
+<tr>
+  <td>style</td>
+  <td>string</td>
+  <td>'dot'</td>
+  <td>The style of the 3d graph. Available styles:
+    <code>bar</code>,
+    <code>bar-color</code>,
+    <code>bar-size</code>,
+    <code>dot</code>,
+    <code>dot-line</code>,
+    <code>dot-color</code>,
+    <code>dot-size</code>,
+    <code>line</code>,
+    <code>grid</code>,
+    or <code>surface</code></td>
+</tr>
+
+<tr>
+  <td>tooltip</td>
+  <td>boolean | function</td>
+  <td>false</td>
+  <td>Show a tooltip showing the values of the hovered data point.
+    The contents of the tooltip can be customized by providing a callback
+    function as <code>tooltip</code>. In this case the function is called
+    with an object containing parameters <code>x</code>,
+    <code>y</code>, and <code>z</code> argument,
+    and must return a string which may contain HTML.
+  </td>
+</tr>
+
+<tr>
+  <td>valueMax</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The maximum value for the value-axis. Only available in combination
+    with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
+</tr>
+<tr>
+  <td>valueMin</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The minimum value for the value-axis. Only available in combination
+    with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
+</tr>
+<tr>
+  <td>verticalRatio</td>
+  <td>number</td>
+  <td>0.5</td>
+  <td>A 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.</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>
+</tr>
+
+<tr>
+  <td>xBarWidth</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The 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 <code>'bar'</code> and <code>'bar-color'</code>.</td>
+</tr>
+
+<tr>
+  <td>xCenter</td>
+  <td>string</td>
+  <td>'55%'</td>
+  <td>The horizontal center position of the graph, as a percentage or in
+    pixels.</td>
+</tr>
+<tr>
+  <td>xMax</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The maximum value for the x-axis.</td>
+</tr>
+<tr>
+  <td>xMin</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The minimum value for the x-axis.</td>
+</tr>
+<tr>
+  <td>xStep</td>
+  <td>number</td>
+  <td>none</td>
+  <td>Step size for the grid on the x-axis.</td>
+</tr>
+
+<tr>
+  <td>yBarWidth</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The 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 <code>'bar'</code> and <code>'bar-color'</code>.</td>
+</tr>
+
+<tr>
+  <td>yCenter</td>
+  <td>string</td>
+  <td>'45%'</td>
+  <td>The vertical center position of the graph, as a percentage or in
+    pixels.</td>
+</tr>
+<tr>
+  <td>yMax</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The maximum value for the y-axis.</td>
+</tr>
+<tr>
+  <td>yMin</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The minimum value for the y-axis.</td>
+</tr>
+<tr>
+  <td>yStep</td>
+  <td>number</td>
+  <td>none</td>
+  <td>Step size for the grid on the y-axis.</td>
+</tr>
+
+<tr>
+  <td>zMin</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The minimum value for the z-axis.</td>
+</tr>
+<tr>
+  <td>zMax</td>
+  <td>number</td>
+  <td>none</td>
+  <td>The maximum value for the z-axis.</td>
+</tr>
+<tr>
+  <td>zStep</td>
+  <td>number</td>
+  <td>none</td>
+  <td>Step size for the grid on the z-axis.</td>
+</tr>
+
+<tr>
+  <td>xLabel</td>
+  <td>String</td>
+  <td>x</td>
+  <td>Label on the X axis.</td>
+</tr>
+<tr>
+  <td>yLabel</td>
+  <td>String</td>
+  <td>y</td>
+  <td>Label on the Y axis.</td>
+</tr>
+<tr>
+  <td>zLabel</td>
+  <td>String</td>
+  <td>z</td>
+  <td>Label on the Z axis.</td>
+</tr>
+<tr>
+  <td>filterLabel</td>
+  <td>String</td>
+  <td>time</td>
+  <td>Label for the filter column.</td>
+</tr>
+<tr>
+  <td>legendLabel</td>
+  <td>String</td>
+  <td>value</td>
+  <td>Label for the style description.</td>
+</tr>
+</table>
+
+
+<h2 id="Methods">Methods</h2>
+<p>
+  Graph3d supports the following methods.
+</p>
+
+<table>
+  <tr>
+    <th>Method</th>
+    <th>Return Type</th>
+    <th>Description</th>
+  </tr>
+
+  <tr>
+    <td>animationStart()</td>
+    <td>none</td>
+    <td>Start playing the animation.
+      Only applicable when animation data is available.</td>
+  </tr>
+
+  <tr>
+    <td>animationStop()</td>
+    <td>none</td>
+    <td>Stop playing the animation.
+      Only applicable when animation data is available.</td>
+  </tr>
+
+  <tr>
+    <td>getCameraPosition()</td>
+    <td>An object with parameters <code>horizontal</code>,
+      <code>vertical</code> and <code>distance</code></td>
+    <td>Returns an object with parameters <code>horizontal</code>,
+      <code>vertical</code> and <code>distance</code>,
+      which each one of them is a number, representing the rotation and position
+      of the camera.</td>
+  </tr>
+
+  <tr>
+    <td>redraw()</td>
+    <td>none</td>
+    <td>Redraw the graph. Useful after the camera position is changed externally,
+      when data is changed, or when the layout of the webpage changed.</td>
+  </tr>
+
+  <tr>
+    <td>setData(data)</td>
+    <td>none</td>
+    <td>Replace the data in the Graph3d.</td>
+  </tr>
+
+  <tr>
+    <td>setOptions(options)</td>
+    <td>none</td>
+    <td>Update options of Graph3d.
+      The provided options will be merged with current options.</td>
+  </tr>
+
+  <tr>
+    <td>setSize(width, height)</td>
+    <td>none</td>
+    <td>Parameters <code>width</code> and <code>height</code> are strings,
+      containing a new size for the graph. Size can be provided in pixels
+      or in percentages.</td>
+  </tr>
+
+  <tr>
+    <td>setCameraPosition (pos)</td>
+    <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
+    <td>Set the rotation and position of the camera. Parameter <code>pos</code>
+      is an object which contains three parameters: <code>horizontal</code>,
+      <code>vertical</code>, and <code>distance</code>.
+      Parameter <code>horizontal</code> is a value in radians and can have any
+      value (but normally in the range of 0 and 2*Pi).
+      Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
+      Parameter <code>distance</code> 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.
+    </td>
+  </tr>
+
+</table>
+
+<h2 id="Events">Events</h2>
+<p>
+  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 <code>cameraPositionChange</code> event.
+</p>
+
+<pre class="prettyprint lang-js">
+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);
+</pre>
+
+<p>
+  The following events are available.
+</p>
+
+<table>
+  <col width="10%">
+  <col width="60%">
+  <col width="30%">
+
+  <tr>
+    <th>name</th>
+    <th>Description</th>
+    <th>Properties</th>
+  </tr>
+
+  <tr>
+    <td>cameraPositionChange</td>
+    <td>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 <code>setCameraPosition</code> method.
+      The new camera position can be retrieved by calling the method
+      <code>getCameraPosition</code>.</td>
+    <td>
+      <ul>
+        <li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
+        <li><code>vertical</code>: Number. The vertical angle of the camera.</li>
+        <li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
+      </ul>
+    </td>
+  </tr>
+</table>
+
+<h2 id="Data_Policy">Data Policy</h2>
+<p>
+  All code and data are processed and rendered in the browser. No data is sent to any server.
+</p>
+
+</div>
+</body>
+</html>

docs/index.html

@@ -49,11 +49,13 @@
       <a href="graph.html"><b>Graph</b></a>.
       Display a graph or network with nodes and edges.
     </li>
+    <li>
+      <a href="graph3d.html"><b>Graph3d</b></a>.
+      Display data in a three dimensional graph.
+    </li>
     <li>
       <a href="timeline.html"><b>Timeline</b></a>.
-      Display different types of data on a timeline. The timeline and the
-      items on the timeline can be interactively moved, zoomed, and
-      manipulated.
+      Display different types of data on a timeline.
     </li>
   </ul>
 

docs/timeline.html

@@ -692,9 +692,9 @@ timeline.clear({options: true}); // clear options only
   </tr>
 
   <tr>
-    <td>repaint()</td>
+    <td>redraw()</td>
     <td>none</td>
-    <td>Force a repaint of the Timeline. Can be useful to manually repaint when option autoResize=false.
+    <td>Force a redraw of the Timeline. Can be useful to manually redraw when option autoResize=false.
     </td>
   </tr>
 
@@ -820,6 +820,7 @@ timeline.off('select', onSelect);
   <tr>
     <td>select</td>
     <td>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 <code>setSelection</code>is executed.
     </td>
     <td>

examples/graph3d/default.css

@@ -0,0 +1,87 @@
+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 {
+  margin: 0 auto;
+  padding-bottom: 50px;
+  width: 900px;
+}
+
+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 #a0c0f0;
+  color: #2B7CE9;
+}
+
+h3 {
+  font-size: 140%;
+}
+
+
+a {
+  color: #2B7CE9;
+  text-decoration: none;
+}
+a:visited {
+  color: #2E60A4;
+}
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
+
+hr {
+  border: none 0;
+  border-top: 1px solid #abc;
+  height: 1px;
+}
+
+pre {
+  display: block;
+  font-size: 10pt;
+  line-height: 1.5em;
+  font-family: monospace;
+}
+
+pre, code {
+  background-color: #f5f5f5;
+}
+
+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;
+}

examples/graph3d/example01_basis.html

@@ -0,0 +1,60 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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.
+      data = new vis.DataSet();
+      // create some nice looking data with sin/cos
+      var counter = 0;
+      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({id:counter++,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
+      };
+
+      // Instantiate our graph object.
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization();">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example02_camera.html

@@ -0,0 +1,109 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D camera position</title>
+
+  <style>
+    body {font: 10pt arial;}
+    td {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);
+    }
+
+    // callback function, called when the camera position has changed
+    function onCameraPositionChange() {
+      // adjust the values of startDate and endDate
+      var pos = graph.getCameraPosition();
+      document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
+      document.getElementById('vertical').value   = parseFloat(pos.vertical.toFixed(3));
+      document.getElementById('distance').value   = parseFloat(pos.distance.toFixed(3));
+    }
+
+    // set the camera position
+    function setCameraPosition() {
+      var horizontal = parseFloat(document.getElementById('horizontal').value);
+      var vertical = parseFloat(document.getElementById('vertical').value);
+      var distance = parseFloat(document.getElementById('distance').value);
+      var pos = {
+        horizontal: horizontal,
+        vertical: vertical,
+        distance: distance
+      };
+      graph.setCameraPosition(pos);
+
+      // retrieve the camera position again, to get the applied values
+      onCameraPositionChange();
+    }
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // Create and populate a data table.
+      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,t:0,style:value}
+          ]);
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5
+      };
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+
+      graph.on('cameraPositionChange', onCameraPositionChange);
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization()">
+<h1>Graph 3d camera position</h1>
+<table>
+  <tr>
+    <td>Horizontal angle (0 to 2*pi)</td>
+    <td><input type="text" id="horizontal" value="1.0"></td>
+  </tr>
+  <tr>
+    <td>Vertical angle (0 to 0.5*pi)</td>
+    <td><input type="text" id="vertical" value="0.5"></td>
+  </tr>
+  <tr>
+    <td>Distance (0.71 to 5.0)</td>
+    <td><input type="text" id="distance" value="1.7"></td>
+  </tr>
+  <tr>
+    <td></td>
+    <td><input type="button" value="Set" onclick="setCameraPosition();"></td>
+  </tr>
+</table>
+
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example03_filter.html

@@ -0,0 +1,63 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<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.
+      data = [];
+      // 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);
+          var valueRange = (value > 67) ? '67-100' :
+              (value < 33) ? '0-33' :
+                  '33-67';
+          data.push({x:x,y:y,z:value,filter:valueRange,style:value});
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: false,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5,
+        filterLabel: 'values'
+      };
+
+      // Create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization()">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example04_animate.html

@@ -0,0 +1,70 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D animation demo</title>
+
+  <style type="text/css">
+    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, t) {
+      return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
+    }
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // Create and populate a data table.
+      data = new vis.DataSet();
+      // create some nice looking data with sin/cos
+      var steps = 25;
+      var axisMax = 314;
+      var tMax = 31;
+      var axisStep = axisMax / steps;
+      for (var t = 0; t < tMax; t++) {
+        for (var x = 0; x < axisMax; x+=axisStep) {
+          for (var y = 0; y < axisMax; y+=axisStep) {
+            var value = custom(x, y, t);
+            data.add([
+              {x:x,y:y,z:value,filter:t,style:value}
+            ]);
+          }
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        // showAnimationControls: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5,
+        animationInterval: 100, // milliseconds
+        animationPreload: true,
+        filterValue: 'time'
+      };
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization();">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example05_line.html

@@ -0,0 +1,59 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D line 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;
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // Create and populate a data table.
+      data = new vis.DataSet();
+
+      // create some nice looking data with sin/cos
+      var steps = 500;
+      var axisMax = 314;
+      var tmax = 4 * 2 * Math.PI;
+      var axisStep = axisMax / steps;
+      for (var t = 0; t < tmax; t += tmax / steps) {
+        var r = 1;
+        var x = r * Math.sin(t);
+        var y = r * Math.cos(t);
+        var z = t / tmax;
+        data.add({x:x,y:y,z:z});
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'line',
+        showPerspective: false,
+        showGrid: true,
+        keepAspectRatio: true,
+        verticalRatio: 1.0
+      };
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+
+      graph.setCameraPosition(0.4, undefined, undefined);
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization()">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example06_moving_dots.html

@@ -0,0 +1,77 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D animation moving dots</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;
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // create the data table.
+      data = new vis.DataSet();
+
+      // create some shortcuts to math functions
+      var sin = Math.sin;
+      var cos = Math.cos;
+      var pi = Math.PI;
+
+      // create the animation data
+      var tmax = 2.0 * pi;
+      var tstep = tmax / 75;
+      var dotCount = 1;  // set this to 1, 2, 3, 4, ...
+      for (var t = 0; t < tmax; t += tstep) {
+        var tgroup = parseFloat(t.toFixed(2));
+        var value = t;
+
+        // a dot in the center
+        data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
+
+        // one or multiple dots moving around the center
+        for (var dot = 0; dot < dotCount; dot++) {
+          var tdot = t + 2*pi * dot / dotCount;
+          data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
+          data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'dot-color',
+        showPerspective: true,
+        showGrid: true,
+        keepAspectRatio: true,
+        verticalRatio: 1.0,
+        animationInterval: 35, // milliseconds
+        animationPreload: false,
+        animationAutoStart: true,
+        legendLabel: 'color value',
+        cameraPosition: {
+          horizontal: 2.7,
+          vertical: 0.0,
+          distance: 1.65
+        }
+      };
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization();">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example07_dot_cloud_colors.html

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D cloud with colored dots</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;
+
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // create the data table.
+      data = new vis.DataSet();
+
+      // create some shortcuts to math functions
+      var sqrt = Math.sqrt;
+      var pow = Math.pow;
+      var random = Math.random;
+
+      // create the animation data
+      var imax = 100;
+      for (var i = 0; i < imax; i++) {
+        var x = pow(random(), 2);
+        var y = pow(random(), 2);
+        var z = pow(random(), 2);
+        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
+
+        data.add({x:x,y:y,z:z,style:dist});
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'dot-color',
+        showPerspective: true,
+        showGrid: true,
+        keepAspectRatio: true,
+        verticalRatio: 1.0,
+        legendLabel: 'distance',
+        cameraPosition: {
+          horizontal: -0.35,
+          vertical: 0.22,
+          distance: 1.8
+        }
+      };
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization()">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example08_dot_cloud_size.html

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D cloud with sized dots</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;
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // create the data table.
+      data = new vis.DataSet();
+
+      // create some shortcuts to math functions
+      var sqrt = Math.sqrt;
+      var pow = Math.pow;
+      var random = Math.random;
+
+      // create the animation data
+      var imax = 100;
+      for (var i = 0; i < imax; i++) {
+        var x = pow(random(), 2);
+        var y = pow(random(), 2);
+        var z = pow(random(), 2);
+
+        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
+        var range = sqrt(2) - dist;
+
+        data.add({x:x,y:y,z:z,style:range});
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'dot-size',
+        showPerspective: false,
+        showGrid: true,
+        keepAspectRatio: true,
+        legendLabel:'value',
+        verticalRatio: 1.0,
+        cameraPosition: {
+          horizontal: -0.54,
+          vertical: 0.5,
+          distance: 1.6
+        }
+      };
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization()">
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example09_mobile.html

@@ -0,0 +1,78 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D demo</title>
+
+  <style>
+    html, body {
+      font: 10pt arial;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    #mygraph {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+
+  <!-- for mobile devices like android and iphone -->
+  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
+
+  <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.
+      data = new vis.DataSet();
+
+      // create some nice looking data with sin/cos
+      var steps = 10;  // 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}
+          ]);
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '100%',
+        height: '100%',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5,
+        backgroundColor: {
+          strokeWidth: 0
+        }
+      };
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+
+<body onresize="graph.redraw();" onload="drawVisualization()">
+<div id="mygraph"></div>
+</body>
+</html>

examples/graph3d/example10_styles.html

@@ -0,0 +1,120 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D styles</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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
+    }
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      var style = document.getElementById('style').value;
+      var showPerspective = document.getElementById('perspective').checked;
+      var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined;
+      var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined;
+      var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
+
+      // Create and populate a data table.
+      data = [];
+
+      // create some nice looking data with sin/cos
+      var steps = 5;  // number of datapoints will be steps*steps
+      var axisMax = 10;
+      var axisStep = axisMax / steps;
+      for (var x = 0; x <= axisMax; x+=axisStep) {
+        for (var y = 0; y <= axisMax; y+=axisStep) {
+          var z = custom(x,y);
+          if (withValue) {
+            var value = (y - x);
+            data.push({x:x, y:y, z: z, style:value});
+          }
+          else {
+            data.push({x:x, y:y, z: z});
+          }
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: style,
+        xBarWidth: xBarWidth,
+        yBarWidth: yBarWidth,
+        showPerspective: showPerspective,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5
+      };
+
+      var camera = graph ? graph.getCameraPosition() : null;
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+
+      if (camera) graph.setCameraPosition(camera); // restore camera position
+
+      document.getElementById('style').onchange = drawVisualization;
+      document.getElementById('perspective').onchange = drawVisualization;
+      document.getElementById('xBarWidth').onchange = drawVisualization;
+      document.getElementById('yBarWidth').onchange = drawVisualization;
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization()">
+
+<p>
+  <label for="style"> Style:
+    <select id="style">
+      <option value="bar">bar</option>
+      <option value="bar-color">bar-color</option>
+      <option value="bar-size">bar-size</option>
+
+      <option value="dot">dot</option>
+      <option value="dot-line">dot-line</option>
+      <option value="dot-color">dot-color</option>
+      <option value="dot-size">dot-size</option>
+
+      <option value="grid">grid</option>
+      <option value="line">line</option>
+      <option value="surface">surface</option>
+    </select>
+  </label>
+</p>
+
+<p>
+  <label for="perspective">
+    <input type="checkbox" id="perspective" checked> Show perspective
+  </label>
+</p>
+
+<p>
+  <label for="xBarWidth"> Bar width X:
+    <input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
+  </label>
+</p>
+<p>
+  <label for="yBarWidth"> Bar width Y:
+    <input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
+  </label>
+</p>
+
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/example11_tooltips.html

@@ -0,0 +1,103 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D tooltips</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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
+    }
+
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      var style = document.getElementById('style').value;
+      var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
+
+      // Create and populate a data table.
+      data = new vis.DataSet();
+
+      // create some nice looking data with sin/cos
+      var steps = 5;  // number of datapoints will be steps*steps
+      var axisMax = 10;
+      var axisStep = axisMax / steps;
+      for (var x = 0; x <= axisMax; x+=axisStep) {
+        for (var y = 0; y <= axisMax; y+=axisStep) {
+          var z = custom(x,y);
+          if (withValue) {
+            var value = (y - x);
+            data.add({x:x, y:y, z: z, style:value});
+          }
+          else {
+            data.add({x:x, y:y, z: z});
+          }
+        }
+      }
+
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: style,
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+
+        // Option tooltip can be true, false, or a function returning a string with HTML contents
+        //tooltip: true,
+        tooltip: function (point) {
+          // parameter point contains properties x, y, z
+          return 'value: <b>' + point.z + '</b>';
+        },
+
+        keepAspectRatio: true,
+        verticalRatio: 0.5
+      };
+
+      var camera = graph ? graph.getCameraPosition() : null;
+
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+
+      if (camera) graph.setCameraPosition(camera); // restore camera position
+
+      document.getElementById('style').onchange = drawVisualization;
+    }
+  </script>
+</head>
+
+<body onload="drawVisualization()">
+
+<p>
+  <label for="style"> Style:
+    <select id="style">
+      <option value="bar">bar</option>
+      <option value="bar-color">bar-color</option>
+      <option value="bar-size">bar-size</option>
+
+      <option value="dot">dot</option>
+      <option value="dot-line">dot-line</option>
+      <option value="dot-color">dot-color</option>
+      <option value="dot-size">dot-size</option>
+
+      <option value="grid">grid</option>
+      <option value="line">line</option>
+      <option value="surface">surface</option>
+    </select>
+  </label>
+</p>
+
+<div id="mygraph"></div>
+
+<div id="info"></div>
+</body>
+</html>

examples/graph3d/index.html

@@ -0,0 +1,27 @@
+<html>
+<head>
+  <link rel='stylesheet' href='default.css' type='text/css'>
+</head>
+<body>
+<div id="container">
+
+  <h1>Examples</h1>
+
+  <p><a href="example01_basis.html">example01_basis.html</a></p>
+  <p><a href="example02_camera.html">example02_camera.html</a></p>
+  <p><a href="example03_filter.html">example03_filter.html</a></p>
+  <p><a href="example04_animate.html">example04_animate.html</a></p>
+  <p><a href="example05_line.html">example05_line.html</a></p>
+  <p><a href="example06_moving_dots.html">example06_moving_dots.html</a></p>
+  <p><a href="example07_dot_cloud_colors.html">example07_dot_cloud_colors.html</a></p>
+  <p><a href="example08_dot_cloud_size.html">example08_dot_cloud_size.html</a></p>
+  <p><a href="example09_mobile.html">example09_mobile.html</a></p>
+  <p><a href="example10_styles.html">example10_styles.html</a></p>
+  <p><a href="example11_tooltips.html">example11_tooltips.html</a></p>
+
+  <h1>Playground</h1>
+  <p><a href="playground">Open the playground</a></p>
+
+</div>
+</body>
+</html>

examples/graph3d/playground/csv2array.js

@@ -0,0 +1,120 @@
+/**
+ * Convert data in CSV (comma separated value) format to a javascript array.
+ *
+ * Values are separated by a comma, or by a custom one character delimeter.
+ * Rows are separated by a new-line character.
+ *
+ * Leading and trailing spaces and tabs are ignored.
+ * Values may optionally be enclosed by double quotes.
+ * Values containing a special character (comma's, double-quotes, or new-lines)
+ *   must be enclosed by double-quotes.
+ * Embedded double-quotes must be represented by a pair of consecutive
+ * double-quotes.
+ *
+ * Example usage:
+ *   var csv = '"x", "y", "z"\n12.3, 2.3, 8.7\n4.5, 1.2, -5.6\n';
+ *   var array = csv2array(csv);
+ *
+ * Author: Jos de Jong, 2010
+ *
+ * @param {string} data      The data in CSV format.
+ * @param {string} delimeter [optional] a custom delimeter. Comma ',' by default
+ *                           The Delimeter must be a single character.
+ * @return {Array} array     A two dimensional array containing the data
+ * @throw {String} error     The method throws an error when there is an
+ *                           error in the provided data.
+ */
+function csv2array(data, delimeter) {
+    // Retrieve the delimeter
+    if (delimeter == undefined)
+        delimeter = ',';
+    if (delimeter && delimeter.length > 1)
+        delimeter = ',';
+
+    // initialize variables
+    var newline = '\n';
+    var eof = '';
+    var i = 0;
+    var c = data.charAt(i);
+    var row = 0;
+    var col = 0;
+    var array = new Array();
+
+    while (c != eof) {
+        // skip whitespaces
+        while (c == ' ' || c == '\t' || c == '\r') {
+            c = data.charAt(++i); // read next char
+        }
+
+        // get value
+        var value = "";
+        if (c == '\"') {
+            // value enclosed by double-quotes
+            c = data.charAt(++i);
+
+            do {
+                if (c != '\"') {
+                    // read a regular character and go to the next character
+                    value += c;
+                    c = data.charAt(++i);
+                }
+
+                if (c == '\"') {
+                    // check for escaped double-quote
+                    var cnext = data.charAt(i+1);
+                    if (cnext == '\"') {
+                        // this is an escaped double-quote.
+                        // Add a double-quote to the value, and move two characters ahead.
+                        value += '\"';
+                        i += 2;
+                        c = data.charAt(i);
+                    }
+                }
+            }
+            while (c != eof && c != '\"');
+
+            if (c == eof) {
+                throw "Unexpected end of data, double-quote expected";
+            }
+
+            c = data.charAt(++i);
+        }
+        else {
+            // value without quotes
+            while (c != eof && c != delimeter && c!= newline && c != ' ' && c != '\t' && c != '\r') {
+                value += c;
+                c = data.charAt(++i);
+            }
+        }
+
+        // add the value to the array
+        if (array.length <= row)
+            array.push(new Array());
+        array[row].push(value);
+
+        // skip whitespaces
+        while (c == ' ' || c == '\t' || c == '\r') {
+            c = data.charAt(++i);
+        }
+
+        // go to the next row or column
+        if (c == delimeter) {
+            // to the next column
+            col++;
+        }
+        else if (c == newline) {
+            // to the next row
+            col = 0;
+            row++;
+        }
+        else if (c != eof) {
+            // unexpected character
+            throw "Delimiter expected after character " + i;
+        }
+
+        // go to the next character
+        c = data.charAt(++i);
+    }
+
+    return array;
+}

examples/graph3d/playground/csv2datatable.html

@@ -0,0 +1,80 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Convert CSV to Google Datatable</title>
+
+    <style>
+        body {font: 10pt arial;}
+    </style>
+
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript" src="csv2array.js"></script>
+
+    <script type="text/javascript">
+        var data = null;
+        var graph = null;
+
+        function loaded() {
+
+        }
+
+        google.load("visualization", "1");
+
+        // Set callback to run when API is loaded
+        google.setOnLoadCallback(loaded);
+
+        // Called when the Visualization API is loaded.
+        function convert() {
+            var csv = document.getElementById("csv").value;
+
+            var datatable = "";
+
+            // parse the csv content
+            var csvArray = csv2array(csv);
+
+            // Create and populate a data table.
+            datatable += "data = new google.visualization.DataTable();\n";
+
+            // read the header row
+            for (var col = 0; col < csvArray[0].length; col++) {
+                datatable += "data.addColumn('number', '" + csvArray[0][col] + "');\n";
+            }
+
+            // read all data
+            for (var row = 1; row < csvArray.length; row++) {
+                datatable += "data.addRow([";
+
+                for (var col = 0; col < csvArray[row].length; col++) {
+                    if (col != 0)
+                        datatable += ", ";
+                    datatable += csvArray[row][col];
+                }
+
+                datatable += "]);\n";
+            }
+
+            document.getElementById("datatable").value = datatable;
+
+            alert(csvArray.length + " rows converted");
+        }
+    </script>
+</head>
+
+<body>
+<div id="graph"></div>
+
+<div id="info"></div>
+
+<b>CSV</b><br>
+<textarea id="csv" style="width: 400px; height: 300px;"></textarea>
+<br>
+<br>
+<input type="button" value="Convert" onclick="convert();">
+<br>
+<br>
+
+<b>Google DataTable</b><br>
+<textarea id="datatable" style="width: 400px; height: 300px;"></textarea>
+
+</body>
+</html>

examples/graph3d/playground/datasource.html

@@ -0,0 +1,173 @@
+<html>
+
+<head>
+    <title>Graph3d documentation</title>
+    <link rel='stylesheet' href='default.css' type='text/css'>
+
+    <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="prettify/prettify.js"></script>
+</head>
+
+<body onload="prettyPrint();">
+
+<pre class="prettyprint lang-php">
+&lt;?php
+
+/*
+This datasource returns a response in the form of a google query response
+
+USAGE
+All parameters are optional
+datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
+
+DOCUMENTATION
+http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
+
+
+EXAMPLE OF A RESPONSE FILE
+
+Note that the reqId in the response must correspond with the reqId from the
+request.
+________________________________________________________________________________
+
+google.visualization.Query.setResponse({
+  version:'0.6',
+  reqId:'0',
+  status:'ok',
+  table:{
+    cols:[
+      {id:'x',
+       label:'x',
+       type:'number'},
+      {id:'y',
+       label:'y',
+       type:'number'},
+      {id:'value',
+       label:'value',
+       type:'number'}
+    ],
+    rows:[
+      {c:[{v:0}, {v:0}, {v:10.0}]},
+      {c:[{v:1}, {v:0}, {v:12.0}]},
+      {c:[{v:2}, {v:0}, {v:13.0}]},
+      {c:[{v:0}, {v:1}, {v:11.0}]},
+      {c:[{v:1}, {v:1}, {v:14.0}]},
+      {c:[{v:2}, {v:1}, {v:11.0}]}
+    ]
+  }
+});
+________________________________________________________________________________
+
+*/
+
+
+/**
+ * A custom function
+ */
+function custom($x, $y) {
+  $d = sqrt(pow($x/100, 2) + pow($y/100, 2));
+
+  return 50 * exp(-5 * $d / 10) * sin($d*5)
+}
+
+
+
+
+// retrieve parameters
+$default_stepnum = 25;
+
+$xmin     = isset($_REQUEST['xmin'])     ? (float)$_REQUEST['xmin']   : -100;
+$xmax     = isset($_REQUEST['xmax'])     ? (float)$_REQUEST['xmax']   : 100;
+$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
+
+$ymin     = isset($_REQUEST['ymin'])     ? (float)$_REQUEST['ymin']   : -100;
+$ymax     = isset($_REQUEST['ymax'])     ? (float)$_REQUEST['ymax']   : 100;
+$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
+
+// in the reply we must fill in the request id that came with the request
+$reqId = getReqId();
+
+// check for a maximum number of datapoints (for safety)
+if ($xstepnum * $ystepnum &gt; 10000) {
+  echo "google.visualization.Query.setResponse({
+    version:'0.6',
+    reqId:'$reqId',
+    status:'error',
+    errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
+  });";
+
+  exit;
+}
+
+
+// output the header part of the response
+echo "google.visualization.Query.setResponse({
+  version:'0.6',
+  reqId:'$reqId',
+  status:'ok',
+  table:{
+    cols:[
+      {id:'x',
+       label:'x',
+       type:'number'},
+      {id:'y',
+       label:'y',
+       type:'number'},
+      {id:'value',
+       label:'',
+       type:'number'}
+    ],
+    rows:[";
+
+// output the actual values
+$first = true;
+$xstep = ($xmax - $xmin) / $xstepnum;
+$ystep = ($ymax - $ymin) / $ystepnum;
+for ($x = $xmin; $x &lt; $xmax; $x+=$xstep) {
+  for ($y = $ymin; $y &lt; $ymax; $y+=$ystep) {
+    $value = custom($x,$y);
+
+    if (!$first) {
+      echo ",\n";
+    }
+    else {
+      echo "\n";
+    }
+    echo "      {c:[{v:$x}, {v:$y}, {v:$value}]}";
+
+    $first = false;
+  }
+}
+
+
+// output the end part of the response
+echo "
+    ]
+  }
+});
+";
+
+
+/**
+ * Retrieve the request id from the get/post data
+ * @return {number} $reqId       The request id, or 0 if not found
+ */
+function getReqId() {
+  $reqId = 0;
+
+  foreach ($_REQUEST as $req) {
+    if (substr($req, 0,6) == "reqId:") {
+      $reqId = substr($req, 6);
+    }
+  }
+
+  return $reqId;
+}
+
+
+?&gt;
+
+</pre>
+
+</body>
+</html>

examples/graph3d/playground/datasource.php

@@ -0,0 +1,155 @@
+<?php
+
+/* 
+This datasource returns a response in the form of a google query response
+
+USAGE
+All parameters are optional
+datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
+
+DOCUMENTATION
+http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
+
+
+EXAMPLE OF A RESPONSE FILE
+
+Note that the reqId in the response must correspond with the reqId from the 
+request.
+________________________________________________________________________________
+
+google.visualization.Query.setResponse({
+  version:'0.6',
+  reqId:'0',
+  status:'ok',
+  table:{
+    cols:[
+      {id:'x',
+       label:'x',
+       type:'number'},
+      {id:'y',
+       label:'y',
+       type:'number'},
+      {id:'value',
+       label:'value',
+       type:'number'}
+    ],
+    rows:[
+      {c:[{v:0}, {v:0}, {v:10.0}]},
+      {c:[{v:1}, {v:0}, {v:12.0}]},
+      {c:[{v:2}, {v:0}, {v:13.0}]},
+      {c:[{v:0}, {v:1}, {v:11.0}]},
+      {c:[{v:1}, {v:1}, {v:14.0}]},
+      {c:[{v:2}, {v:1}, {v:11.0}]}
+    ]
+  }
+});
+________________________________________________________________________________
+
+*/
+
+
+/**
+ * A custom function
+ */ 
+function custom($x, $y) {
+  $d = sqrt(pow($x/100, 2) + pow($y/100, 2));
+  
+  return 50 * exp(-5 * $d / 10) * sin($d*5);
+}
+
+
+
+
+// retrieve parameters
+$default_stepnum = 25;
+
+$xmin     = isset($_REQUEST['xmin'])     ? (float)$_REQUEST['xmin']   : -100;
+$xmax     = isset($_REQUEST['xmax'])     ? (float)$_REQUEST['xmax']   : 100;
+$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
+
+$ymin     = isset($_REQUEST['ymin'])     ? (float)$_REQUEST['ymin']   : -100;
+$ymax     = isset($_REQUEST['ymax'])     ? (float)$_REQUEST['ymax']   : 100;
+$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
+
+// in the reply we must fill in the request id that came with the request
+$reqId = getReqId();
+
+// check for a maximum number of datapoints (for safety)
+if ($xstepnum * $ystepnum > 10000) {
+  echo "google.visualization.Query.setResponse({
+    version:'0.6',
+    reqId:'$reqId',
+    status:'error',
+    errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
+  });";
+
+  exit;
+}
+
+
+// output the header part of the response
+echo "google.visualization.Query.setResponse({
+  version:'0.6',
+  reqId:'$reqId',
+  status:'ok',
+  table:{
+    cols:[
+      {id:'x',
+       label:'x',
+       type:'number'},
+      {id:'y',
+       label:'y',
+       type:'number'},
+      {id:'value',
+       label:'',
+       type:'number'}
+    ],
+    rows:[";
+
+// output the actual values
+$first = true;
+$xstep = ($xmax - $xmin) / $xstepnum;
+$ystep = ($ymax - $ymin) / $ystepnum;
+for ($x = $xmin; $x < $xmax; $x+=$xstep) {
+  for ($y = $ymin; $y < $ymax; $y+=$ystep) {
+    $value = custom($x,$y);
+    
+    if (!$first) {
+      echo ",\n";
+    } 
+    else {
+      echo "\n";
+    }
+    echo "      {c:[{v:$x}, {v:$y}, {v:$value}]}";
+    
+    $first = false;
+  }
+}
+
+
+// output the end part of the response
+echo "      
+    ]
+  }
+});
+";
+
+
+/**
+ * Retrieve the request id from the get/post data
+ * @return {number} $reqId       The request id, or 0 if not found
+ */ 
+function getReqId() {
+  $reqId = 0;
+
+  foreach ($_REQUEST as $req) {
+    if (substr($req, 0,6) == "reqId:") {
+      $reqId = substr($req, 6);
+    }
+  }
+
+  return $reqId;
+}
+
+
+?>

examples/graph3d/playground/index.html

@@ -0,0 +1,179 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+
+<head>
+    <title>Graph 3D - Playground</title>
+
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+
+
+    <script type="text/javascript" src="playground.js"></script>
+    <script type="text/javascript" src="csv2array.js"></script>
+    <link rel='stylesheet' href='playground.css' type='text/css'>
+
+    <script type="text/javascript">
+        // Called when the Visualization API is loaded.
+        function drawVisualization() {
+            // TODO
+        }
+    </script>
+</head>
+
+<body onload="load();">
+
+<h1>Graph 3D - Playground</h1>
+
+<table style="width:100%;">
+<col width="50%">
+<col width="50%">
+
+<tr>
+    <td>
+        <h2>Data</h2>
+        <p>
+            Graph 3D expects a data table with first three to five columns:
+            colums <code>x</code>, <code>y</code>, <code>z</code> (optional),
+            <code>style</code>, <code>filter</code> (optional).
+        </p>
+
+        <table>
+            <tr>
+                <td style="white-space: nowrap">
+                    <input type="radio" name="datatype" id="datatypeCsv" onclick="selectDataType();" checked value="csv">Csv
+                </td>
+                <td>
+                    <div id="csv">
+                        <textarea id="csvTextarea"></textarea>
+                        <p>
+                            <a href="javascript: loadCsvExample();" title="Load an example">Simple example</a>
+                            <a href="javascript: loadCsvLineExample();" title="Load an example">Line example</a>
+                            <a href="javascript: loadCsvAnimationExample();" title="Load an example">Animation example</a>
+                            <a href="javascript: loadCsvMovingDotsExample();" title="Load an example">Moving dots example</a>
+                            <a href="javascript: loadCsvColoredDotsExample();" title="Load an example">Colored dots example</a>
+                            <a href="javascript: loadCsvSizedDotsExample();" title="Load an example">Sized dots example</a>
+                        </p>
+                    </div>
+                </td>
+            </tr>
+          <!-- TODO: add JSON examples -->
+        </table>
+
+        <br>
+    </td>
+    <td rowspan=2>
+        <h2>Graph</h2>
+        <p>
+            <input type="button" value="Draw graph" onclick="draw();" id="draw">
+        </p>
+
+        <div id="graph"></div>
+    </td>
+</tr>
+<tr>
+    <td>
+        <h2>Options</h2>
+
+        <table>
+            <tr>
+                <th>Option</th>
+                <th>Value</th>
+            </tr>
+
+            <tr>
+                <td>width</td>
+                <td><input type="text" id="width" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
+            </tr>
+            <tr>
+                <td>height</td>
+                <td><input type="text" id="height" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
+            </tr>
+            <tr>
+                <td>style</td>
+                <td>
+                    <select id="style">
+                        <option value="bar" >bar
+                        <option value="bar-color" >bar-color
+                        <option value="bar-size" >bar-size
+                        <option value="dot" >dot
+                        <option value="dot-color" >dot-color
+                        <option value="dot-size" >dot-size
+                        <option value="dot-line" >dot-line
+                        <option value="line" >line
+                        <option value="grid" >grid
+                        <option value="surface" selected>surface
+                    </select>
+            </tr>
+
+            <tr>
+                <td>showAnimationControls</td>
+                <td><input type="checkbox" id="showAnimationControls" checked /></td>
+            </tr>
+            <tr>
+                <td>showGrid</td>
+                <td><input type="checkbox" id="showGrid" checked /></td>
+            </tr>
+            <tr>
+                <td>showPerspective</td>
+                <td><input type="checkbox" id="showPerspective" checked /></td>
+            </tr>
+            <tr>
+                <td>showShadow</td>
+                <td><input type="checkbox" id="showShadow" /></td>
+            </tr>
+
+            <tr>
+                <td>keepAspectRatio</td>
+                <td><input type="checkbox" id="keepAspectRatio" checked /></td>
+            </tr>
+            <tr>
+                <td>verticalRatio</td>
+                <td><input type="text" id="verticalRatio" value="0.5" /> <span class="info">a value between 0.1 and 1.0</span></td>
+            </tr>
+
+            <tr>
+                <td>animationInterval</td>
+                <td><input type="text" id="animationInterval" value="1000" /> <span class="info">in milliseconds</span></td>
+            </tr>
+            <tr>
+                <td>animationPreload</td>
+                <td><input type="checkbox" id="animationPreload" /></td>
+            </tr>
+            <tr>
+                <td>animationAutoStart</td>
+                <td><input type="checkbox" id="animationAutoStart" /></td>
+            </tr>
+
+            <tr><td>xCenter</td><td><input type="text" id="xCenter" value="55%" /></td></tr>
+            <tr><td>yCenter</td><td><input type="text" id="yCenter" value="45%" /></td></tr>
+
+            <tr><td>xMin</td><td><input type="text" id="xMin" /></td></tr>
+            <tr><td>xMax</td><td><input type="text" id="xMax" /></td></tr>
+            <tr><td>xStep</td><td><input type="text" id="xStep" /></td></tr>
+
+            <tr><td>yMin</td><td><input type="text" id="yMin" /></td></tr>
+            <tr><td>yMax</td><td><input type="text" id="yMax" /></td></tr>
+            <tr><td>yStep</td><td><input type="text" id="yStep" /></td></tr>
+
+            <tr><td>zMin</td><td><input type="text" id="zMin" /></td></tr>
+            <tr><td>zMax</td><td><input type="text" id="zMax" /></td></tr>
+            <tr><td>zStep</td><td><input type="text" id="zStep" /></td></tr>
+
+            <tr><td>valueMin</td><td><input type="text" id="valueMin" /></td></tr>
+            <tr><td>valueMax</td><td><input type="text" id="valueMax" /></td></tr>
+
+            <tr><td>xBarWidth</td><td><input type="text" id="xBarWidth" /></td></tr>
+            <tr><td>yBarWidth</td><td><input type="text" id="yBarWidth" /></td></tr>
+
+            <tr><td>xLabel</td><td><input type="text" id="xLabel" value="x"/></td></tr>
+            <tr><td>yLabel</td><td><input type="text" id="yLabel" value="y"/></td></tr>
+            <tr><td>zLabel</td><td><input type="text" id="zLabel" value="z"/></td></tr>
+            <tr><td>filterLabel</td><td><input type="text" id="filterLabel" value="time"/></td></tr>
+            <tr><td>legendLabel</td><td><input type="text" id="legendLabel" value="value"/></td></tr>
+
+        </table>
+
+    </td>
+</tr>
+</table>
+
+</body>

examples/graph3d/playground/playground.css

@@ -0,0 +1,91 @@
+body
+{
+  font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
+}
+
+h1
+{
+  font-size: 180%;
+  font-weight: bold;
+
+  margin: 1em 0 1em 0;
+}
+
+h2
+{
+  font-size: 140%;
+  padding: 5px;
+  border-bottom: 1px solid #a0c0f0;
+  color: #2B7CE9;
+}
+
+h3
+{
+  font-size: 100%;
+}
+
+hr
+{
+  border: none 0;
+  border-top: 1px solid #a0c0f0;
+  height: 1px;
+}
+
+pre.code
+{
+  display: block;
+  padding: 8px;
+  border: 1px dashed #ccc;
+}
+
+table
+{
+  border-collapse: collapse;
+}
+
+th, td
+{
+  font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
+  text-align: left;
+  vertical-align: top;
+  /*border: 1px solid #888;*/
+  padding: 3px;
+}
+
+th
+{
+  font-weight: bold;
+}
+
+
+textarea {
+  width: 500px;
+  height: 200px;
+  border: 1px solid #888;
+}
+
+input[type=text] {
+  border: 1px solid #888;
+}
+
+#datasourceText, #googlespreadsheetText {
+  width: 500px;
+
+}
+
+.info {
+  color: gray;
+}
+
+a {
+  color: gray;
+}
+a:hover {
+  color: red;
+}
+
+
+#graph {
+  width: 100%;
+  height: 600px;
+}

examples/graph3d/playground/playground.js

@@ -0,0 +1,544 @@
+
+var query = null;
+
+
+function load() {
+  selectDataType();
+
+  loadCsvExample();
+  loadJsonExample();
+  loadJavascriptExample();
+  loadGooglespreadsheetExample();
+  loadDatasourceExample();
+
+  draw();
+}
+
+
+
+/**
+ * Upate the UI based on the currently selected datatype
+ */
+function selectDataType() {
+}
+
+
+function round(value, decimals) {
+  return parseFloat(value.toFixed(decimals));
+}
+
+function loadCsvExample() {
+  var csv = "";
+
+  // headers
+  csv += '"x", "y", "value"\n';
+
+  // create some nice looking data with sin/cos
+  var steps = 30;
+  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 = Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
+
+      csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + '\n';
+    }
+  }
+
+  document.getElementById("csvTextarea").innerHTML = csv;
+
+  // also adjust some settings
+  document.getElementById("style").value = "surface";
+  document.getElementById("verticalRatio").value = "0.5";
+
+  document.getElementById("xLabel").value = "x";
+  document.getElementById("yLabel").value = "y";
+  document.getElementById("zLabel").value = "value";
+  document.getElementById("filterLabel").value = "";
+  document.getElementById("legendLabel").value = "";
+  drawCsv();
+}
+
+
+function loadCsvAnimationExample() {
+  var csv = "";
+
+  // headers
+  csv += '"x", "y", "value", "time"\n';
+
+  // create some nice looking data with sin/cos
+  var steps = 20;
+  var axisMax = 314;
+  var tMax = 31;
+  var axisStep = axisMax / steps;
+  for (var t = 0; t < tMax; t++) {
+    for (var x = 0; x < axisMax; x+=axisStep) {
+      for (var y = 0; y < axisMax; y+=axisStep) {
+        var value = Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
+        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + ', ' + t + '\n';
+      }
+    }
+  }
+
+  document.getElementById("csvTextarea").innerHTML = csv;
+
+  // also adjust some settings
+  document.getElementById("style").value = "surface";
+  document.getElementById("verticalRatio").value = "0.5";
+  document.getElementById("animationInterval").value = 100;
+
+  document.getElementById("xLabel").value = "x";
+  document.getElementById("yLabel").value = "y";
+  document.getElementById("zLabel").value = "value";
+  document.getElementById("filterLabel").value = "time";
+  document.getElementById("legendLabel").value = "";
+
+  drawCsv();
+}
+
+
+function loadCsvLineExample() {
+  var csv = "";
+
+  // headers
+  csv += '"sin(t)", "cos(t)", "t"\n';
+
+  // create some nice looking data with sin/cos
+  var steps = 100;
+  var axisMax = 314;
+  var tmax = 4 * 2 * Math.PI;
+  var axisStep = axisMax / steps;
+  for (t = 0; t < tmax; t += tmax / steps) {
+    var r = 1;
+    var x = r * Math.sin(t);
+    var y = r * Math.cos(t);
+    var z = t;
+    csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + '\n';
+  }
+
+  document.getElementById("csvTextarea").innerHTML = csv;
+
+  // also adjust some settings
+  document.getElementById("style").value = "line";
+  document.getElementById("verticalRatio").value = "1.0";
+  document.getElementById("showPerspective").checked = false;
+
+  document.getElementById("xLabel").value = "sin(t)";
+  document.getElementById("yLabel").value = "cos(t)";
+  document.getElementById("zLabel").value = "t";
+  document.getElementById("filterLabel").value = "";
+  document.getElementById("legendLabel").value = "";
+
+  drawCsv();
+}
+
+function loadCsvMovingDotsExample() {
+  var csv = "";
+
+  // headers
+  csv += '"x", "y", "z", "color value", "time"\n';
+
+  // create some shortcuts to math functions
+  var sin = Math.sin;
+  var cos = Math.cos;
+  var pi = Math.PI;
+
+  // create the animation data
+  var tmax = 2.0 * pi;
+  var tstep = tmax / 75;
+  var dotCount = 1;  // set this to 1, 2, 3, 4, ...
+  for (var t = 0; t < tmax; t += tstep) {
+    var tgroup = parseFloat(t.toFixed(2));
+    var value = t;
+
+    // a dot in the center
+    var x = 0;
+    var y = 0;
+    var z = 0;
+    csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
+
+    // one or multiple dots moving around the center
+    for (var dot = 0; dot < dotCount; dot++) {
+      var tdot = t + 2*pi * dot / dotCount;
+      //data.addRow([sin(tdot),  cos(tdot), sin(tdot), value, tgroup]);
+      //data.addRow([sin(tdot), -cos(tdot), sin(tdot + tmax*1/2), value, tgroup]);
+
+      var x = sin(tdot);
+      var y = cos(tdot);
+      var z = sin(tdot);
+      csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
+
+      var x = sin(tdot);
+      var y = -cos(tdot);
+      var z = sin(tdot + tmax*1/2);
+      csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';
+
+    }
+  }
+
+  document.getElementById("csvTextarea").innerHTML = csv;
+
+  // also adjust some settings
+  document.getElementById("style").value = "dot-color";
+  document.getElementById("verticalRatio").value = "1.0";
+  document.getElementById("animationInterval").value = "35";
+  document.getElementById("animationAutoStart").checked = true;
+  document.getElementById("showPerspective").checked = true;
+
+  document.getElementById("xLabel").value = "x";
+  document.getElementById("yLabel").value = "y";
+  document.getElementById("zLabel").value = "z";
+  document.getElementById("filterLabel").value = "time";
+  document.getElementById("legendLabel").value = "color value";
+
+  drawCsv();
+}
+
+function loadCsvColoredDotsExample() {
+  var csv = "";
+
+  // headers
+  csv += '"x", "y", "z", "distance"\n';
+
+  // create some shortcuts to math functions
+  var sqrt = Math.sqrt;
+  var pow = Math.pow;
+  var random = Math.random;
+
+  // create the animation data
+  var imax = 200;
+  for (var i = 0; i < imax; i++) {
+    var x = pow(random(), 2);
+    var y = pow(random(), 2);
+    var z = pow(random(), 2);
+    var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
+
+    csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2)  + ', ' + round(dist, 2)+ '\n';
+  }
+
+  document.getElementById("csvTextarea").innerHTML = csv;
+
+  // also adjust some settings
+  document.getElementById("style").value = "dot-color";
+  document.getElementById("verticalRatio").value = "1.0";
+  document.getElementById("showPerspective").checked = true;
+
+  document.getElementById("xLabel").value = "x";
+  document.getElementById("yLabel").value = "y";
+  document.getElementById("zLabel").value = "value";
+  document.getElementById("legendLabel").value = "distance"
+  document.getElementById("filterLabel").value = "";
+
+  drawCsv();
+}
+
+function loadCsvSizedDotsExample() {
+  var csv = "";
+
+  // headers
+  csv += '"x", "y", "z", "range"\n';
+
+  // create some shortcuts to math functions
+  var sqrt = Math.sqrt;
+  var pow = Math.pow;
+  var random = Math.random;
+
+  // create the animation data
+  var imax = 200;
+  for (var i = 0; i < imax; i++) {
+    var x = pow(random(), 2);
+    var y = pow(random(), 2);
+    var z = pow(random(), 2);
+    var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
+    var range = sqrt(2) - dist;
+
+    csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2)  + ', ' + round(range, 2)+ '\n';
+  }
+
+  document.getElementById("csvTextarea").innerHTML = csv;
+
+  // also adjust some settings
+  document.getElementById("style").value = "dot-size";
+  document.getElementById("verticalRatio").value = "1.0";
+  document.getElementById("showPerspective").checked = true;
+
+  document.getElementById("xLabel").value = "x";
+  document.getElementById("yLabel").value = "y";
+  document.getElementById("zLabel").value = "z";
+  document.getElementById("legendLabel").value = "range";
+  document.getElementById("filterLabel").value = "";
+
+  drawCsv();
+}
+
+
+function loadJsonExample() {
+}
+
+
+function loadJavascriptExample() {
+}
+
+function loadJavascriptFunctionExample() {
+}
+
+function loadGooglespreadsheetExample() {
+
+}
+
+
+function loadDatasourceExample() {
+}
+
+
+
+/**
+ * Retrieve teh currently selected datatype
+ * @return {string} datatype
+ */
+function getDataType() {
+  return "csv";
+}
+
+
+/**
+ * Retrieve the datatable from the entered contents of the csv text
+ * @param {boolean} [skipValue] | if true, the 4th element is a filter value
+ * @return {vis DataSet}
+ */
+function getDataCsv() {
+  var csv = document.getElementById("csvTextarea").value;
+
+  // parse the csv content
+  var csvArray = csv2array(csv);
+
+  var data = new vis.DataSet();
+
+  var skipValue = false;
+  if (document.getElementById("filterLabel").value != "" && document.getElementById("legendLabel").value == "") {
+    skipValue = true;
+  }
+
+  // read all data
+  for (var row = 1; row < csvArray.length; row++) {
+    if (csvArray[row].length == 4 && skipValue == false) {
+      data.add({x:parseFloat(csvArray[row][0]),
+        y:parseFloat(csvArray[row][1]),
+        z:parseFloat(csvArray[row][2]),
+        style:parseFloat(csvArray[row][3])});
+    }
+    else if (csvArray[row].length == 4 && skipValue == true) {
+      data.add({x:parseFloat(csvArray[row][0]),
+        y:parseFloat(csvArray[row][1]),
+        z:parseFloat(csvArray[row][2]),
+        filter:parseFloat(csvArray[row][3])});
+    }
+    else if (csvArray[row].length == 5) {
+      data.add({x:parseFloat(csvArray[row][0]),
+        y:parseFloat(csvArray[row][1]),
+        z:parseFloat(csvArray[row][2]),
+        style:parseFloat(csvArray[row][3]),
+        filter:parseFloat(csvArray[row][4])});
+    }
+    else {
+      data.add({x:parseFloat(csvArray[row][0]),
+        y:parseFloat(csvArray[row][1]),
+        z:parseFloat(csvArray[row][2]),
+        style:parseFloat(csvArray[row][2])});
+    }
+  }
+
+  return data;
+}
+
+/**
+ * remove leading and trailing spaces
+ */
+function trim(text) {
+  while (text.length && text.charAt(0) == ' ')
+    text = text.substr(1);
+
+  while (text.length && text.charAt(text.length-1) == ' ')
+    text = text.substr(0, text.length-1);
+
+  return text;
+}
+
+/**
+ * Retrieve the datatable from the entered contents of the javascript text
+ * @return {vis Dataset}
+ */
+function getDataJson() {
+  var json = document.getElementById("jsonTextarea").value;
+  var data = new google.visualization.DataTable(json);
+
+  return data;
+}
+
+
+/**
+ * Retrieve the datatable from the entered contents of the javascript text
+ * @return {vis Dataset}
+ */
+function getDataJavascript() {
+  var js = document.getElementById("javascriptTextarea").value;
+
+  eval(js);
+
+  return data;
+}
+
+
+/**
+ * Retrieve the datatable from the entered contents of the datasource text
+ * @return {vis Dataset}
+ */
+function getDataDatasource() {
+}
+
+/**
+ * Retrieve a JSON object with all options
+ */
+function getOptions() {
+  return {
+    width:              document.getElementById("width").value,
+    height:             document.getElementById("height").value,
+    style:              document.getElementById("style").value,
+    showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
+    showGrid:          (document.getElementById("showGrid").checked != false),
+    showPerspective:   (document.getElementById("showPerspective").checked != false),
+    showShadow:        (document.getElementById("showShadow").checked != false),
+    keepAspectRatio:   (document.getElementById("keepAspectRatio").checked != false),
+    verticalRatio:      document.getElementById("verticalRatio").value,
+    animationInterval:  document.getElementById("animationInterval").value,
+    xLabel:             document.getElementById("xLabel").value,
+    yLabel:             document.getElementById("yLabel").value,
+    zLabel:             document.getElementById("zLabel").value,
+    filterLabel:        document.getElementById("filterLabel").value,
+    legendLabel:        document.getElementById("legendLabel").value,
+    animationPreload:  (document.getElementById("animationPreload").checked != false),
+    animationAutoStart:(document.getElementById("animationAutoStart").checked != false),
+
+    xCenter:           Number(document.getElementById("xCenter").value) || undefined,
+    yCenter:           Number(document.getElementById("yCenter").value) || undefined,
+
+    xMin:              Number(document.getElementById("xMin").value) || undefined,
+    xMax:              Number(document.getElementById("xMax").value) || undefined,
+    xStep:             Number(document.getElementById("xStep").value) || undefined,
+    yMin:              Number(document.getElementById("yMin").value) || undefined,
+    yMax:              Number(document.getElementById("yMax").value) || undefined,
+    yStep:             Number(document.getElementById("yStep").value) || undefined,
+    zMin:              Number(document.getElementById("zMin").value) || undefined,
+    zMax:              Number(document.getElementById("zMax").value) || undefined,
+    zStep:             Number(document.getElementById("zStep").value) || undefined,
+
+    valueMin:          Number(document.getElementById("valueMin").value) || undefined,
+    valueMax:          Number(document.getElementById("valueMax").value) || undefined,
+
+    xBarWidth:         Number(document.getElementById("xBarWidth").value) || undefined,
+    yBarWidth:         Number(document.getElementById("yBarWidth").value) || undefined
+  };
+}
+
+/**
+ * Redraw the graph with the entered data and options
+ */
+function draw() {
+  return drawCsv();
+}
+
+
+function drawCsv() {
+  // retrieve data and options
+  var data = getDataCsv();
+  var options = getOptions();
+
+  // Creat a graph
+  var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
+}
+
+function drawJson() {
+  // retrieve data and options
+  var data = getDataJson();
+  var options = getOptions();
+
+  // Creat a graph
+  var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
+}
+
+function drawJavascript() {
+  // retrieve data and options
+  var data = getDataJavascript();
+  var options = getOptions();
+
+  // Creat a graph
+  var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
+}
+
+
+function drawGooglespreadsheet() {
+  // Instantiate our graph object.
+  drawGraph = function(response) {
+    document.getElementById("draw").disabled = "";
+
+    if (response.isError()) {
+      error = 'Error: ' + response.getMessage();
+      document.getElementById('graph').innerHTML =
+          "<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
+    }
+
+    // retrieve the data from the query response
+    data = response.getDataTable();
+
+    // specify options
+    options = getOptions();
+
+    // Instantiate our graph object.
+    var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
+  }
+
+  url = document.getElementById("googlespreadsheetText").value;
+  document.getElementById("draw").disabled = "disabled";
+
+  // send the request
+  query && query.abort();
+  query = new google.visualization.Query(url);
+  query.send(drawGraph);
+}
+
+
+function drawDatasource() {
+  // Instantiate our graph object.
+  drawGraph = function(response) {
+    document.getElementById("draw").disabled = "";
+
+    if (response.isError()) {
+      error = 'Error: ' + response.getMessage();
+      document.getElementById('graph').innerHTML =
+          "<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
+    }
+
+    // retrieve the data from the query response
+    data = response.getDataTable();
+
+    // specify options
+    options = getOptions();
+
+    // Instantiate our graph object.
+    var graph = new vis.Graph3d(document.getElementById('graph'), data, options);
+  };
+
+  url = document.getElementById("datasourceText").value;
+  document.getElementById("draw").disabled = "disabled";
+
+  // if the entered url is a google spreadsheet url, replace the part
+  // "/ccc?" with "/tq?" in order to retrieve a neat data query result
+  if (url.indexOf("/ccc?")) {
+    url.replace("/ccc?", "/tq?");
+  }
+
+  // send the request
+  query && query.abort();
+  query = new google.visualization.Query(url);
+  query.send(drawGraph);
+}

examples/graph3d/playground/prettify/lang-apollo.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
+null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])

examples/graph3d/playground/prettify/lang-css.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
+["com",/^(?:<!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#(?:[0-9a-f]{3}){1,2}/i],["pln",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],["pun",/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^\)\"\']+/]]),["css-str"])

examples/graph3d/playground/prettify/lang-hs.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\x0B\x0C\r ]+/,null,"\t\n\u000b\u000c\r "],["str",/^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,null,'"'],["str",/^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/,
+null],["pln",/^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],["pun",/^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]]),["hs"])

examples/graph3d/playground/prettify/lang-lisp.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(/,null,"("],["clo",/^\)/,null,")"],["com",/^;[^\r\n]*/,null,";"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,
+null],["lit",/^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["cl","el","lisp","scm"])

examples/graph3d/playground/prettify/lang-lua.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],["str",/^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
+["pln",/^[a-z_]\w*/i],["pun",/^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]]),["lua"])

examples/graph3d/playground/prettify/lang-ml.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["com",/^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
+["lit",/^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],["pun",/^[^\t\n\r \xA0\"\'\w]+/]]),["fs","ml"])

examples/graph3d/playground/prettify/lang-proto.js

@@ -0,0 +1 @@
+PR.registerLangHandler(PR.sourceDecorator({keywords:"bool bytes default double enum extend extensions false fixed32 fixed64 float group import int32 int64 max message option optional package repeated required returns rpc service sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 uint64",cStyleComments:true}),["proto"])

examples/graph3d/playground/prettify/lang-scala.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,null,'"'],["lit",/^`(?:[^\r\n\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],["lit",/^'[a-zA-Z_$][\w$]*(?!['$\w])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
+["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],["typ",/^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],["pln",/^[$a-zA-Z_][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"])

examples/graph3d/playground/prettify/lang-sql.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],["kwd",/^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i,
+null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^[a-z_][\w-]*/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]]),["sql"])

examples/graph3d/playground/prettify/lang-vb.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0\u2028\u2029]+/,null,"\t\n\r \u00a0\u2028\u2029"],["str",/^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i,null,'"\u201c\u201d'],["com",/^[\'\u2018\u2019][^\r\n\u2028\u2029]*/,null,"'\u2018\u2019"]],[["kwd",/^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i,
+null],["com",/^REM[^\r\n\u2028\u2029]*/i],["lit",/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],["pun",/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],["pun",/^(?:\[|\])/]]),["vb","vbs"])

examples/graph3d/playground/prettify/lang-vhdl.js

@@ -0,0 +1,3 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"]],[["str",/^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],["com",/^--[^\r\n]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
+null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
+["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]]),["vhdl","vhd"])

examples/graph3d/playground/prettify/lang-wiki.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t \xA0a-gi-z0-9]+/,null,"\t \u00a0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[=*~\^\[\]]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/],["lang-",/^\{\{\{([\s\S]+?)\}\}\}/],["lang-",/^`([^\r\n`]+)`/],["str",/^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]]),["wiki"]);
+PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"])

examples/graph3d/playground/prettify/lang-yaml.js

@@ -0,0 +1,2 @@
+PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:|>?]+/,null,":|>?"],["dec",/^%(?:YAML|TAG)[^#\r\n]+/,null,"%"],["typ",/^[&]\S+/,null,"&"],["typ",/^!\S*/,null,"!"],["str",/^"(?:[^\\"]|\\.)*(?:"|$)/,null,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,null,"'"],["com",/^#[^\r\n]*/,null,"#"],["pln",/^\s+/,null," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\r\n]|$)/],["pun",/^-/],["kwd",/^\w+:[ \r\n]/],["pln",/^\w+/]]),
+["yaml","yml"])

examples/graph3d/playground/prettify/prettify.css

@@ -0,0 +1 @@
+.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}

examples/graph3d/playground/prettify/prettify.js

@@ -0,0 +1,33 @@
+window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
+(function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
+for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
+8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
+continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
+a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
+g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
+""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push("                ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
+f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
+if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
+null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
+d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
+for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
+function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
+d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
+"&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
+"~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
+la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
+hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
+"htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
+["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
+hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
+hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
+cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
+u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
+multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
+["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
+0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
+" "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
+document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
+PR_TAG:"tag",PR_TYPE:S}})()

examples/index.html

@@ -13,6 +13,7 @@
     <h1>vis.js examples</h1>
 
     <p><a href="graph">graph</a></p>
+    <p><a href="graph3d">graph3d</a></p>
     <p><a href="timeline">timeline</a></p>
 
 </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vis",
-  "version": "1.0.3-SNAPSHOT",
+  "version": "1.1.0",
   "description": "A dynamic, browser-based visualization library.",
   "homepage": "http://visjs.org/",
   "repository": {

src/graph/Edge.js

@@ -30,10 +30,12 @@ function Edge (properties, graph, constants) {
   this.style  = constants.edges.style;
   this.title  = undefined;
   this.width  = constants.edges.width;
+  this.hoverWidth = constants.edges.hoverWidth;
   this.value  = undefined;
   this.length = constants.physics.springLength;
   this.customLength = false;
   this.selected = false;
+  this.hover = false;
   this.smooth = constants.smoothCurves;
   this.arrowScaleFactor = constants.edges.arrowScaleFactor;
 
@@ -54,7 +56,8 @@ function Edge (properties, graph, constants) {
   this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
 
   this.color       = {color:constants.edges.color.color,
-                      highlight:constants.edges.color.highlight};
+                      highlight:constants.edges.color.highlight,
+                      hover:constants.edges.color.hover};
   this.widthFixed  = false;
   this.lengthFixed = false;
 
@@ -92,6 +95,7 @@ Edge.prototype.setProperties = function(properties, constants) {
 
   if (properties.title !== undefined)        {this.title = properties.title;}
   if (properties.width !== undefined)        {this.width = properties.width;}
+  if (properties.hoverWidth !== undefined)   {this.hoverWidth = properties.hoverWidth;}
   if (properties.value !== undefined)        {this.value = properties.value;}
   if (properties.length !== undefined)       {this.length = properties.length;
                                               this.customLength = true;}
@@ -250,8 +254,9 @@ Edge.prototype.isOverlappingWith = function(obj) {
  */
 Edge.prototype._drawLine = function(ctx) {
   // set style
-  if (this.selected == true) {ctx.strokeStyle = this.color.highlight;}
-  else                       {ctx.strokeStyle = this.color.color;}
+  if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
+  else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
+  else                         {ctx.strokeStyle = this.color.color;}
   ctx.lineWidth = this._getLineWidth();
 
   if (this.from != this.to) {
@@ -304,7 +309,12 @@ Edge.prototype._getLineWidth = function() {
     return Math.min(this.width * 2, this.widthMax)*this.graphScaleInv;
   }
   else {
-    return this.width*this.graphScaleInv;
+    if (this.hover == true) {
+      return Math.min(this.hoverWidth, this.widthMax)*this.graphScaleInv;
+    }
+    else {
+      return this.width*this.graphScaleInv;
+    }
   }
 };
 
@@ -381,8 +391,9 @@ Edge.prototype._label = function (ctx, text, x, y) {
  */
 Edge.prototype._drawDashLine = function(ctx) {
   // set style
-  if (this.selected == true) {ctx.strokeStyle = this.color.highlight;}
-  else                       {ctx.strokeStyle = this.color.color;}
+  if (this.selected == true)   {ctx.strokeStyle = this.color.highlight;}
+  else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
+  else                         {ctx.strokeStyle = this.color.color;}
 
   ctx.lineWidth = this._getLineWidth();
 
@@ -506,8 +517,9 @@ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
 Edge.prototype._drawArrowCenter = function(ctx) {
   var point;
   // set style
-  if (this.selected == true) {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-  else                       {ctx.strokeStyle = this.color.color; ctx.fillStyle = this.color.color;}
+  if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+  else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+  else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
   ctx.lineWidth = this._getLineWidth();
 
   if (this.from != this.to) {
@@ -580,8 +592,9 @@ Edge.prototype._drawArrowCenter = function(ctx) {
  */
 Edge.prototype._drawArrow = function(ctx) {
   // set style
-  if (this.selected == true) {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
-  else                       {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
+  if (this.selected == true)   {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
+  else if (this.hover == true) {ctx.strokeStyle = this.color.hover;     ctx.fillStyle = this.color.hover;}
+  else                         {ctx.strokeStyle = this.color.color;     ctx.fillStyle = this.color.color;}
 
   ctx.lineWidth = this._getLineWidth();
 

src/graph/Graph.js

@@ -53,6 +53,10 @@ function Graph (container, data, options) {
         highlight: {
           border: '#2B7CE9',
           background: '#D2E5FF'
+        },
+        hover: {
+          border: '#2B7CE9',
+          background: '#D2E5FF'
         }
       },
       borderColor: '#2B7CE9',
@@ -64,10 +68,12 @@ function Graph (container, data, options) {
       widthMin: 1,
       widthMax: 15,
       width: 1,
+      hoverWidth: 1.5,
       style: 'line',
       color: {
         color:'#848484',
-        highlight:'#848484'
+        highlight:'#848484',
+        hover: '#848484'
       },
       fontColor: '#343434',
       fontSize: 14, // px
@@ -180,9 +186,12 @@ function Graph (container, data, options) {
         background: '#FFFFC6'
       }
     },
-    moveable: true,
-    zoomable: true
+    dragGraph: true,
+    dragNodes: true,
+    zoomable: true,
+    hover: false
   };
+  this.hoverObj = {nodes:{},edges:{}};
   this.editMode = this.constants.dataManipulation.initiallyVisible;
 
   // Node variables
@@ -521,9 +530,10 @@ Graph.prototype.setOptions = function (options) {
     if (options.freezeForStabilization !== undefined)    {this.constants.freezeForStabilization = options.freezeForStabilization;}
     if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
     if (options.stabilizationIterations !== undefined)   {this.constants.stabilizationIterations = options.stabilizationIterations;}
-    if (options.moveable !== undefined)           {this.constants.moveable = options.moveable;}
-    if (options.zoomable !== undefined)          {this.constants.zoomable = options.zoomable;}
-
+    if (options.dragGraph !== undefined)       {this.constants.dragGraph = options.dragGraph;}
+    if (options.dragNodes !== undefined)       {this.constants.dragNodes = options.dragNodes;}
+    if (options.zoomable !== undefined)        {this.constants.zoomable = options.zoomable;}
+    if (options.hover !== undefined)           {this.constants.hover = options.hover;}
 
     if (options.labels !== undefined)  {
       for (prop in options.labels) {
@@ -656,10 +666,12 @@ Graph.prototype.setOptions = function (options) {
           this.constants.edges.color = {};
           this.constants.edges.color.color = options.edges.color;
           this.constants.edges.color.highlight = options.edges.color;
+          this.constants.edges.color.hover = options.edges.color;
         }
         else {
           if (options.edges.color.color !== undefined)     {this.constants.edges.color.color = options.edges.color.color;}
           if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
+          if (options.edges.color.hover !== undefined)     {this.constants.edges.color.hover = options.edges.color.hover;}
         }
       }
 
@@ -946,7 +958,7 @@ Graph.prototype._handleOnDrag = function(event) {
   var me = this,
     drag = this.drag,
     selection = drag.selection;
-  if (selection && selection.length) {
+  if (selection && selection.length && this.constants.dragNodes == true) {
     // calculate delta's and new location
     var deltaX = pointer.x - drag.pointer.x,
       deltaY = pointer.y - drag.pointer.y;
@@ -971,7 +983,7 @@ Graph.prototype._handleOnDrag = function(event) {
     }
   }
   else {
-    if (this.constants.moveable == true) {
+    if (this.constants.dragGraph == true) {
       // move the graph
       var diffX = pointer.x - this.drag.pointer.x;
       var diffY = pointer.y - this.drag.pointer.y;
@@ -1159,7 +1171,7 @@ Graph.prototype._onMouseMoveTitle = function (event) {
   var pointer = this._getPointer(gesture.center);
 
   // check if the previously selected node is still selected
-  if (this.popupNode) {
+  if (this.popupObj) {
     this._checkHidePopup(pointer);
   }
 
@@ -1175,6 +1187,40 @@ Graph.prototype._onMouseMoveTitle = function (event) {
   if (!this.drag.dragging) {
     this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
   }
+
+
+  /**
+   * Adding hover highlights
+   */
+  if (this.constants.hover == true) {
+    // removing all hover highlights
+    for (var edgeId in this.hoverObj.edges) {
+      if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
+        this.hoverObj.edges[edgeId].hover = false;
+        delete this.hoverObj.edges[edgeId];
+      }
+    }
+
+    // adding hover highlights
+    var obj = this._getNodeAt(pointer);
+    if (obj == null) {
+      obj = this._getEdgeAt(pointer);
+    }
+    if (obj != null) {
+      this._hoverObject(obj);
+    }
+
+    // removing all node hover highlights except for the selected one.
+    for (var nodeId in this.hoverObj.nodes) {
+      if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
+        if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
+          this._blurObject(this.hoverObj.nodes[nodeId]);
+          delete this.hoverObj.nodes[nodeId];
+        }
+      }
+    }
+    this.redraw();
+  }
 };
 
 /**
@@ -1194,23 +1240,23 @@ Graph.prototype._checkShowPopup = function (pointer) {
   };
 
   var id;
-  var lastPopupNode = this.popupNode;
+  var lastPopupNode = this.popupObj;
 
-  if (this.popupNode == undefined) {
+  if (this.popupObj == undefined) {
     // search the nodes for overlap, select the top one in case of multiple nodes
     var nodes = this.nodes;
     for (id in nodes) {
       if (nodes.hasOwnProperty(id)) {
         var node = nodes[id];
         if (node.getTitle() !== undefined && node.isOverlappingWith(obj)) {
-          this.popupNode = node;
+          this.popupObj = node;
           break;
         }
       }
     }
   }
 
-  if (this.popupNode === undefined) {
+  if (this.popupObj === undefined) {
     // search the edges for overlap
     var edges = this.edges;
     for (id in edges) {
@@ -1218,16 +1264,16 @@ Graph.prototype._checkShowPopup = function (pointer) {
         var edge = edges[id];
         if (edge.connected && (edge.getTitle() !== undefined) &&
             edge.isOverlappingWith(obj)) {
-          this.popupNode = edge;
+          this.popupObj = edge;
           break;
         }
       }
     }
   }
 
-  if (this.popupNode) {
+  if (this.popupObj) {
     // show popup message window
-    if (this.popupNode != lastPopupNode) {
+    if (this.popupObj != lastPopupNode) {
       var me = this;
       if (!me.popup) {
         me.popup = new Popup(me.frame, me.constants.tooltip);
@@ -1237,7 +1283,7 @@ Graph.prototype._checkShowPopup = function (pointer) {
       // bottom left location of the popup, and you can easily move over the
       // popup area
       me.popup.setPosition(pointer.x - 3, pointer.y - 3);
-      me.popup.setText(me.popupNode.getTitle());
+      me.popup.setText(me.popupObj.getTitle());
       me.popup.show();
     }
   }
@@ -1256,8 +1302,8 @@ Graph.prototype._checkShowPopup = function (pointer) {
  * @private
  */
 Graph.prototype._checkHidePopup = function (pointer) {
-  if (!this.popupNode || !this._getNodeAt(pointer) ) {
-    this.popupNode = undefined;
+  if (!this.popupObj || !this._getNodeAt(pointer) ) {
+    this.popupObj = undefined;
     if (this.popup) {
       this.popup.hide();
     }
@@ -2183,7 +2229,36 @@ Graph.prototype.storePosition = function() {
 };
 
 
+/**
+ * Center a node in view.
+ *
+ * @param {Number} nodeId
+ * @param {Number} [zoomLevel]
+ */
+Graph.prototype.focusOnNode = function (nodeId, zoomLevel) {
+  if (this.nodes.hasOwnProperty(nodeId)) {
+    if (zoomLevel === undefined) {
+      zoomLevel = this._getScale();
+    }
+    var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
+
+    var requiredScale = zoomLevel;
+    this._setScale(requiredScale);
 
+    var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
+    var translation = this._getTranslation();
+
+    var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
+                              y:canvasCenter.y - nodePosition.y};
+
+    this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
+                         translation.y + requiredScale * distanceFromCenter.y);
+    this.redraw();
+  }
+  else {
+    console.log("This nodeId cannot be found.")
+  }
+};
 
 
 

src/graph/Node.js

@@ -25,6 +25,7 @@
  */
 function Node(properties, imagelist, grouplist, constants) {
   this.selected = false;
+  this.hover = false;
 
   this.edges = []; // all edges connected to this node
   this.dynamicEdges = [];
@@ -569,7 +570,7 @@ Node.prototype._drawBox = function (ctx) {
   var clusterLineWidth = 2.5;
   var selectionLineWidth = 2;
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -618,7 +619,7 @@ Node.prototype._drawDatabase = function (ctx) {
   var clusterLineWidth = 2.5;
   var selectionLineWidth = 2;
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -633,7 +634,7 @@ Node.prototype._drawDatabase = function (ctx) {
   ctx.lineWidth *= this.graphScaleInv;
   ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+  ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
   ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
   ctx.fill();
   ctx.stroke();
@@ -668,7 +669,7 @@ Node.prototype._drawCircle = function (ctx) {
   var clusterLineWidth = 2.5;
   var selectionLineWidth = 2;
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -683,7 +684,7 @@ Node.prototype._drawCircle = function (ctx) {
   ctx.lineWidth *= this.graphScaleInv;
   ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+  ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
   ctx.circle(this.x, this.y, this.radius);
   ctx.fill();
   ctx.stroke();
@@ -718,7 +719,7 @@ Node.prototype._drawEllipse = function (ctx) {
   var clusterLineWidth = 2.5;
   var selectionLineWidth = 2;
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -733,7 +734,7 @@ Node.prototype._drawEllipse = function (ctx) {
   ctx.lineWidth *= this.graphScaleInv;
   ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+  ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
   ctx.ellipse(this.left, this.top, this.width, this.height);
   ctx.fill();
@@ -795,7 +796,7 @@ Node.prototype._drawShape = function (ctx, shape) {
     case 'star':          radiusMultiplier = 4; break;
   }
 
-  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+  ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
 
   // draw the outer border
   if (this.clusterSize > 1) {
@@ -810,7 +811,7 @@ Node.prototype._drawShape = function (ctx, shape) {
   ctx.lineWidth *= this.graphScaleInv;
   ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
 
-  ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+  ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
 
   ctx[shape](this.x, this.y, this.radius);
   ctx.fill();
@@ -892,10 +893,10 @@ Node.prototype.getTextSize = function(ctx) {
  */
 Node.prototype.inArea = function() {
   if (this.width !== undefined) {
-  return (this.x + this.width*this.graphScaleInv  >= this.canvasTopLeft.x    &&
-          this.x - this.width*this.graphScaleInv  <  this.canvasBottomRight.x &&
-          this.y + this.height*this.graphScaleInv >= this.canvasTopLeft.y    &&
-          this.y - this.height*this.graphScaleInv <  this.canvasBottomRight.y);
+  return (this.x + this.width *this.graphScaleInv  >= this.canvasTopLeft.x     &&
+          this.x - this.width *this.graphScaleInv  <  this.canvasBottomRight.x &&
+          this.y + this.height*this.graphScaleInv  >= this.canvasTopLeft.y     &&
+          this.y - this.height*this.graphScaleInv  <  this.canvasBottomRight.y);
   }
   else {
     return true;

src/graph/graphMixins/HierarchicalLayoutMixin.js

@@ -20,7 +20,7 @@ var HierarchicalLayoutMixin = {
    * @private
    */
   _setupHierarchicalLayout : function() {
-    if (this.constants.hierarchicalLayout.enabled == true) {
+    if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
       if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
         this.constants.hierarchicalLayout.levelSeparation *= -1;
       }

src/graph/graphMixins/SelectionMixin.js

@@ -137,7 +137,21 @@ var SelectionMixin = {
     else {
       this.selectionObj.edges[obj.id] = obj;
     }
+  },
 
+  /**
+   * Add object to the selection array.
+   *
+   * @param obj
+   * @private
+   */
+  _addToHover : function(obj) {
+    if (obj instanceof Node) {
+      this.hoverObj.nodes[obj.id] = obj;
+    }
+    else {
+      this.hoverObj.edges[obj.id] = obj;
+    }
   },
 
 
@@ -156,7 +170,6 @@ var SelectionMixin = {
     }
   },
 
-
   /**
    * Unselect all. The selectionObj is useful for this.
    *
@@ -333,6 +346,20 @@ var SelectionMixin = {
     }
   },
 
+  /**
+   * select the edges connected to the node that is being selected
+   *
+   * @param {Node} node
+   * @private
+   */
+  _hoverConnectedEdges : function(node) {
+    for (var i = 0; i < node.dynamicEdges.length; i++) {
+      var edge = node.dynamicEdges[i];
+      edge.hover = true;
+      this._addToHover(edge);
+    }
+  },
+
 
   /**
    * unselect the edges connected to the node that is being selected
@@ -350,6 +377,7 @@ var SelectionMixin = {
 
 
 
+
   /**
    * This is called when someone clicks on a node. either select or deselect it.
    * If there is an existing selection and we don't want to append to it, clear the existing selection
@@ -379,12 +407,48 @@ var SelectionMixin = {
       object.unselect();
       this._removeFromSelection(object);
     }
+
     if (doNotTrigger == false) {
       this.emit('select', this.getSelection());
     }
   },
 
 
+  /**
+   * This is called when someone clicks on a node. either select or deselect it.
+   * If there is an existing selection and we don't want to append to it, clear the existing selection
+   *
+   * @param {Node || Edge} object
+   * @private
+   */
+  _blurObject : function(object) {
+    if (object.hover == true) {
+      object.hover = false;
+      this.emit("blurNode",{node:object.id});
+    }
+  },
+
+  /**
+   * This is called when someone clicks on a node. either select or deselect it.
+   * If there is an existing selection and we don't want to append to it, clear the existing selection
+   *
+   * @param {Node || Edge} object
+   * @private
+   */
+  _hoverObject : function(object) {
+    if (object.hover == false) {
+      object.hover = true;
+      this._addToHover(object);
+      if (object instanceof Node) {
+        this.emit("hoverNode",{node:object.id});
+      }
+    }
+    if (object instanceof Node) {
+      this._hoverConnectedEdges(object);
+    }
+  },
+
+
   /**
    * handles the selection part of the touch, only for navigation controls elements;
    * Touch is triggered before tap, also before hold. Hold triggers after a while.

src/module/exports.js

@@ -35,7 +35,8 @@ var vis = {
   },
 
   Timeline: Timeline,
-  Graph: Graph
+  Graph: Graph,
+  Graph3d: Graph3d
 };
 
 /**

src/timeline/Timeline.js

@@ -736,10 +736,10 @@ Timeline.prototype.getWindow = function() {
 };
 
 /**
- * Force a repaint of the Timeline. Can be useful to manually repaint when
+ * Force a redraw of the Timeline. Can be useful to manually redraw when
  * option autoResize=false
  */
-Timeline.prototype.repaint = function() {
+Timeline.prototype.redraw = function() {
   var resized = false,
       options = this.options,
       props = this.props,
@@ -845,6 +845,10 @@ Timeline.prototype.repaint = function() {
     // keep repainting until all sizes are settled
     this.repaint();
   }
+
+// TODO: deprecated since version 1.1.0, remove some day
+Timeline.prototype.repaint = function repaint() {
+    throw new Error('Function repaint is deprecated. Use redraw instead.');
 };
 
 /**
@@ -871,8 +875,9 @@ Timeline.prototype._onSelectItem = function (event) {
 
   var newSelection = this.getSelection();
 
-  // if selection is changed, emit a select event
-  if (!util.equalArray(oldSelection, newSelection)) {
+  // emit a select event,
+  // except when old selection is empty and new selection is still empty
+  if (newSelection.length > 0 || oldSelection.length > 0) {
     this.emit('select', {
       items: this.getSelection()
     });
@@ -931,7 +936,7 @@ Timeline.prototype._onAddItem = function (event) {
     this.options.onAdd(newItem, function (item) {
       if (item) {
         me.itemsData.add(newItem);
-        // TODO: need to trigger a repaint?
+        // TODO: need to trigger a redraw?
       }
     });
   }

src/util.js

@@ -785,6 +785,10 @@ util.parseColor = function(color) {
         highlight: {
           background:lighterColorHex,
           border:darkerColorHex
+        },
+        hover: {
+          background:lighterColorHex,
+          border:darkerColorHex
         }
       };
     }
@@ -795,6 +799,10 @@ util.parseColor = function(color) {
         highlight: {
           background:color,
           border:color
+        },
+        hover: {
+          background:color,
+          border:color
         }
       };
     }
@@ -815,6 +823,18 @@ util.parseColor = function(color) {
       c.highlight.background = color.highlight && color.highlight.background || c.background;
       c.highlight.border = color.highlight && color.highlight.border || c.border;
     }
+
+    if (util.isString(color.hover)) {
+      c.hover = {
+        border: color.hover,
+        background: color.hover
+      }
+    }
+    else {
+      c.hover = {};
+      c.hover.background = color.hover && color.hover.background || c.background;
+      c.hover.border = color.hover && color.hover.border || c.border;
+    }
   }
 
   return c;