graph3d functional

10 years ago · 2f903e08c2
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
--- a/docs/graph.html
+++ b/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:
@ -478,6 +489,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:
--- a/docs/graph3d.html
+++ b/docs/graph3d.html
@ -13,23 +13,6 @@
 <h1>Graph3d documentation</h1>
 <table>
    <tr>
        <td>Author</td>
        <td>Jos de Jong, <a href="http://www.almende.com" target="_blank">Almende B.V.</a></td>
    </tr>
    <tr>
        <td>Webpage</td>
        <td><a href="http://almende.github.com/chap-links-library" target="_blank">Chap Links Library</a></td>
    </tr>
    <tr>
        <td>License</td>
        <td> <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a></td>
    </tr>
 </table>
 <h2 id="Contents">Contents</h2>
 <ul>
    <li><a href="#Overview">Overview</a></li>
@ -99,10 +82,13 @@
        };
        // Instantiate our graph object.
        graph = new links.Graph3d(document.getElementById('mygraph'));
        graph3d = new vis.Graph3d(document.getElementById('mygraph'));
        // Draw our graph with the created data and options
        graph.draw(data, options);
        graph3d.draw(data, options);
        // subscribe to event
        graph3d.on("camerapositionchange", function(event) {console.log(event);});
    }
    &lt;/script&gt;
    &lt;/head&gt;
@ -117,37 +103,22 @@
 </pre>
 The class name of the Graph3d is <code>links.Graph3d</code>
 <pre class="prettyprint lang-js">var graph = new links.Graph3d(container);</pre>
 The class name of the Graph3d is <code>vis.Graph3d</code>
 <pre class="prettyprint lang-js">var graph = new vis.Graph3d(container);</pre>
 After being loaded, the graph can be drawn via the function <code>draw()</code>,
 provided with data and options.
 <pre class="prettyprint lang-js">graph.draw(data, options);</pre>
 where data is a <code>DataTable</code>, and options is a name-value map in the JSON format.
 where data is a vis <code>DataSet</code>, and options is a name-value map in the JSON format.
 <h2 id="Data_Format">Data Format</h2>
 <p>
    Graph3d requires a data table with tree to five columns, depending on the chosen style
    and animation.
    The first three columns must contain the location coordinates for x-axis,
    y-axis, and z-axis.
    The forth column is optional, and can contain a data value.
    The last column (this can be the fourth or fifth column) and can contain
    filter values used for animation.
 </p>
 <p>
    Note that the column labels can be changed (for example instead of <code>'value'</code>
    one can use <code>'Temperature'</code>).
 </p>
    Graph3d requires a vis DataSet. JSON objects are added to this DataSet by using the <code>add()</code> function.
    These JSON objects have 5 fields, of which 2 are optional. These are described below.
 <h3>Definition</h3>
 <p>
    The data columns are defined as:
    The DataSet JSON objects are defined as:
 </p>
 <table>
@ -176,7 +147,7 @@ where data is a DataTable, and options is a name-value map in the J
        <td>Location on the z-axis.</td>
    </tr>
    <tr>
        <td>value</td>
        <td>style</td>
        <td>number</td>
        <td>no</td>
        <td>The data value, required for graph styles <code>dot-color</code> and
@ -184,7 +155,7 @@ where data is a DataTable, and options is a name-value map in the J
        </td>
    </tr>
    <tr>
        <td>filtervalue</td>
        <td>filter</td>
        <td>anytype</td>
        <td>no</td>
        <td>Filter values used for the animation.
@ -192,81 +163,6 @@ where data is a DataTable, and options is a name-value map in the J
    </tr>
 </table>
 <h3>Construction of 3D data</h3>
 <p>
    Graph3d supports the following styles to display data in three dimensions:
    <code>dot</code>, <code>dot-line</code>, <code>line</code>, <code>grid</code>,
    and <code>surface</code>.
    The data table for these styles is constructed as follows.
 </p>
 <pre class="prettyprint lang-js">
 var data = new google.visualization.DataTable();
 data.addColumn('number', 'x');
 data.addColumn('number', 'y');
 data.addColumn('number', 'z');  // the data value, visualized as a height at the z-axis
                                // and by a color.
 data.addRow([2.3, 5.2, 102.1]);
 // ...
 </pre>
 <h3>Construction of 4D data</h3>
 <p>
    Graph3d supports the following styles to display data in four dimensions:
    <code>dot-color</code>, <code>dot-size</code>.
    The data table for these styles is constructed as follows.
 </p>
 <pre class="prettyprint lang-js">
 var data = new google.visualization.DataTable();
 data.addColumn('number', 'x');
 data.addColumn('number', 'y');
 data.addColumn('number', 'z');
 data.addColumn('number', 'value');  // the data value, visualized by a color or size
 data.addRow([2.3, 5.2, 102.1, 45.2]);
 // ...
 </pre>
 <h3>Construction of animation data</h3>
 <p>
    If an extra column with filter values is provided in the data table, Graph3d
    will use these values for animation.
    The filter values are grouped and each group represents one animation frame.
    When animating, Graph3d loops through the distinct filter values,
    and draws all data points which have the current filter value.
 </p>
 <p>
    For example, to create an animation with three frames, first add all datapoints
    for the first frame with a filtervalue 1. Next, add the datapoints for the
    second frame and give them a filtervalue 2. Last, add the datapoints for the
    third frame and give them a filtervalue of 3. Now, when the Graph3d is loaded,
    a slider with buttons play/next/previous will be drawn below the graph, where one can loop through the
    three frames.
 </p>
 <p>
    To create an animation, add an extra column to the data table.
    This column may have any type (number, date, string, ...).
 </p>
 <pre class="prettyprint lang-js">
 var data = new google.visualization.DataTable();
 data.addColumn('number', 'x');
 data.addColumn('number', 'y');
 data.addColumn('number', 'value');
 data.addColumn('number', 'filtervalue'); // Optional column with filter values for animation
 data.addRow([2.3, 5.2, 102.1, 23]);
 // ...
 </pre>
 <h2 id="Configuration_Options">Configuration Options</h2>
@ -560,6 +456,36 @@ options = {
    <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>
@ -652,8 +578,8 @@ function oncamerapositionchange(event) {
        "Vertical: " + event.vertical + "\n" +
        "Distance: " + event.distance);
 }
 google.visualization.events.addListener(mygraph, 'camerapositionchange', oncamerapositionchange);
 // assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
 graph3d.on("camerapositionchange",oncamerapositionchange);
 </pre>
 <p>
@ -686,15 +612,6 @@ google.visualization.events.addListener(mygraph, 'camerapositionchange', oncamer
            </ul>
        </td>
    </tr>
    <tr>
        <td>ready</td>
        <td>The graph is ready for external method calls.
            If you want to interact with the graph, and call methods after you draw it,
            you should set up a listener for this event before you call the draw method,
            and call them only after the event was fired.</td>
        <td>none</td>
    </tr>
 </table>
 <h2 id="Data_Policy">Data Policy</h2>
--- a/examples/graph/16_dynamic_data.html
+++ b/examples/graph/16_dynamic_data.html
@ -134,9 +134,6 @@
      // create an array with nodes
      nodes = new vis.DataSet();
      nodes.subscribe('*', function () {
        $('#nodes').html(toJSON(nodes.get()));
      });
      nodes.add([
        {id: '1', label: 'Node 1'},
        {id: '2', label: 'Node 2'},
@ -147,9 +144,6 @@
      // create an array with edges
      edges = new vis.DataSet();
      edges.subscribe('*', function () {
        $('#edges').html(toJSON(edges.get()));
      });
      edges.add([
        {id: '1', from: '1', to: '2'},
        {id: '2', from: '1', to: '3'},
@ -157,7 +151,17 @@
        {id: '4', from: '2', to: '5'}
      ]);
      // create a graph
    // subscribe to any changes of the dataset
    nodes.on('*', function () {
        $('#nodes').html(toJSON(nodes.get()));
    });
    edges.on('*', function () {
        $('#edges').html(toJSON(edges.get()));
    });
        // create a graph
      var container = $('#graph').get(0);
      var data = {
        nodes: nodes,
--- a/examples/graph3d/ajax.js
+++ b/examples/graph3d/ajax.js
@ -1,141 +0,0 @@
 /**
 * @class Ajax
 * 
 * Perform asynchronous call to the server.
 * 
 * documentation:
 * http://ajaxpatterns.org/HTTP_Streaming
 * http://ajaxpatterns.org/XMLHttpRequest_Call
 * http://www.skill-guru.com/blog/2011/02/04/adding-access-control-allow-origin-to-server-for-cross-domain-scripting/
 * 
 * @author Jos de Jong, Almende, 2011
 */ 
 var Ajax = function() { 
  this.isBusy = true; 
  this.timer = undefined;
  this.req = undefined;
  this.callback = undefined;
  // for long poll
  this.pollCallback = undefined;
  this.pollInterval = 1000; // milliseconds
  this.lastResponseLength = 0;
 }
 /**
 * Make a request
 * @param {string} method    The call method: typically "GET" or "POST"
 * @param {string} url       The url to be called, for example "mydata.php"
 * @param {method} callback  The callback method, which will be called when
 *                           the response is received. The response is passed
 *                           as a plain text (string) parameter to this method:
 *                              callback(response);
 */ 
 Ajax.prototype.request = function(method, url, callback) 
 { 
  var me = this;
  this.isBusy = true; 
  this.callback = callback; 
  this.req = (XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP"); 
  this.req.onreadystatechange = function() { me._checkReadyState(); }; 
  this.req.open(method, url, true); 
  this.req.send(null); 
 } 
 /**
 * Make a  long poll request.
 * This poll can be stopped via Ajax.abort();
 * @param {string} method    The call method: typically "GET" or "POST"
 * @param {string} url       The url to be called, for example "mydata.php"
 * @param {method} callback  The callback method, which will be called 
 *                           repeatedly, each time that new data is received.
 *                           The newly received data is passed
 *                           as a plain text (string) parameter to this method:
 *                              callback(response);
 */ 
 Ajax.prototype.requestLongPoll = function(method, url, callback) 
 { 
  this.request(method, url);
  var me = this;
  this.pollCallback = callback;
  this.lastResponseLength = 0;
  this.timer = setInterval(function() {me._checkResponse();}, this.pollInterval);
 } 
 /**
 * Cancel a current request
 */ 
 Ajax.prototype.abort = function() {
  this.isBusy = false; 
  if (this.timer) {
    clearInterval(this.timer)
    this.timer = undefined;
  }
  if (this.req) {
    this.req.abort();
    this.req = undefined;
  }
 }
 /**
 * The callback method which is called when a response is received.
 */ 
 Ajax.prototype._checkReadyState = function() 
 { 
  switch(this.req.readyState) 
  { 
    case 1: break; 
    case 2: break; 
    case 3: break; 
    case 4: 
      if (this.callback) {
        this.callback(this.req.responseText); 
      }
      // reset all variables
      this.abort();
  } 
 } 
 /**
 * Callback function executed repeatedly during a long poll. 
 * The currently received response data is checked, and all new data is passed
 * to the callback function.
 */
 Ajax.prototype._checkResponse = function() {
  var len = this.req.responseText.length;
  if (len > this.lastResponseLength) {
    var newData = this.req.responseText.substring(this.lastResponseLength);
    // TODO: clear the current responseText here, to prevent the response
    // from growing infinitely?
    if (this.pollCallback) {
      this.pollCallback(newData);
    }
    this.lastResponseLength = len;
  }
 }
 /**
 * Set the interval for long polling
 * @param {number} interval     Interval in milliseconds
 */ 
 Ajax.prototype.setPollInterval = function(interval) {
  this.pollInterval = interval;
 }
 /**
 * get the poll interval
 */ 
 Ajax.prototype.getPollInterval = function() {
  return this.pollInterval;
 }
--- a/examples/graph3d/datasource.php
+++ b/examples/graph3d/datasource.php
@ -1,156 +0,0 @@
 <?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}]}
    ]
  }
 });
 ________________________________________________________________________________
 */
 header('Content-type: text/plain');
 /**
 * 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;
 }
 ?>
--- a/examples/graph3d/datasource_csv.php
+++ b/examples/graph3d/datasource_csv.php
@ -1,54 +0,0 @@
 <?php
 header('Content-type: text/plain');
 // retrieve current time
 $time = time();
 $hour = date('h', $time) * 1;
 $min = date('i', $time) * 1;
 $sec = date('s', $time) * 1;
 $secAngle = $sec / 60.0 * 2.0*pi();
 $minAngle = ($min + $sec/60.0) / 60.0 * 2.0*pi();
 $hourAngle = ($hour + $min / 60.0 + $sec/60.0/60.0) / 12.0 * 2.0*pi();
 // create labels 
 echo '"x", "y", "z", "' . date('H:i:s', $time) . '"' . "\n";
 // create circle as clock
 for ($h = 0; $h < 12; $h += 1) {
  $r = $h / 12 * 2 * pi();
  echo 
    round(sin($r), 2) . ', ' .  
    round(cos($r), 2) . ', ' .  
    0 . ', ' . 
    0 . "\n";
 }
 echo "0, 0, 0, 0\n";
 // create hour, minute, second pointers
 for ($r = 0.1; $r < 0.4; $r += 0.1) {
  echo 
    round($r * sin($hourAngle), 2) . ', ' .  
    round($r * cos($hourAngle), 2) . ', ' .  
    0 .  ', ' . 
    2.5 . "\n";
 }
 for ($r = 0.1; $r < 0.7; $r += 0.1) {
  echo 
    round($r * sin($minAngle), 2) . ', ' .  
    round($r * cos($minAngle), 2) . ', ' .  
    0 .  ', ' . 
    1.5 . "\n";
 }
 for ($r = 0.1; $r < 0.9; $r += 0.1) {
  echo 
    round($r * sin($secAngle), 2) . ', ' .  
    round($r * cos($secAngle), 2) . ', ' .  
    0 .  ', ' . 
    3 . "\n";
 }
 ?>
--- a/examples/graph3d/datasource_csv_to_json.php
+++ b/examples/graph3d/datasource_csv_to_json.php
@ -1,113 +0,0 @@
 <?php
 /**
 This file can read data from an external csv source and output the same
 data in Google DataTable JSON format
 Note that it supposes that each data column contains numbers 
 */
 header('Content-type: text/plain');
 // datasource url. This can be an external source
 //$datasourceUrl = "http://demo.almende.com/links/graph3d/js/examples/datasource_csv.php";
 $path = dirname("http://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '/';
 $dataSourceUrl = $path . "datasource_csv.php";
 $reqId = getReqId();
 $data = file_get_contents($dataSourceUrl);
 $rows = split("\n", $data);
 // output the header part of the response
 echo "google.visualization.Query.setResponse({
  version:'0.6',
  reqId:'$reqId',
  status:'ok',
  table:{
    cols:[
 ";
 // output the column names
 $cols = split(",", $rows[0]);
 $colCount = count($cols);
 $colFirst = true;
 foreach($cols as $col) {
  if ($colFirst == true) 
    $colFirst = false;
  else 
    echo ",\n"; // end of previous label
  $colStr = trim(str_replace('"', '', $col)); // TODO: bad way to remove enclosing quotes
  echo "      {id:'$colStr', label:'$colStr', type:'number'}";
 }
 unset($rows[0]); // remove the first row with headers from the array
 // output the part between cols and rows
 echo "
    ],
    rows:[
 ";
 // output the data
 $firstRow = true;
 foreach ($rows as $row) {
  $cols = split(",", $row);
  if (count($cols) == $colCount) {
    if ($firstRow == true) 
      $firstRow = false;
    else
      echo ",\n"; // end of previous line
    echo "      {c:[";  // start of the row
    $firstCol = true;
    foreach ($cols as $col) {
      if ($firstCol == true)
        $firstCol = false; 
      else
        echo ", ";  // end of previous value
      echo "{v:" . $col . "}";
    }
    echo "]}";  // end of the row
  }
 }
 // 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;
 }
 ?>
--- a/examples/graph3d/datastream_csv.php
+++ b/examples/graph3d/datastream_csv.php
@ -1,79 +0,0 @@
 <?php
 header('Content-type: text/plain');
 // initialize flushing without buffer
@apache_setenv('no-gzip', 1);
@ini_set('zlib.output_compression', 0);
@ini_set('implicit_flush', 1);
 for ($i = 0; $i < ob_get_level(); $i++) { ob_end_flush(); }
 ob_implicit_flush(1);
 ob_start();
 // create labels once?
 //echo '"id", "x", "y", "z", "Color"' . "\n";
 while (true) {
  // retrieve current time
  $time = time();
  $hour = date('h', $time) * 1;
  $min = date('i', $time) * 1;
  $sec = date('s', $time) * 1;
  $secAngle = $sec / 60.0 * 2.0*pi();
  $minAngle = ($min + $sec/60.0) / 60.0 * 2.0*pi();
  $hourAngle = ($hour + $min / 60.0 + $sec/60.0/60.0) / 12.0 * 2.0*pi();
  $id = 0;
  // create circle as clock
  for ($h = 0; $h < 12; $h += 1) {
    $r = $h / 12 * 2 * pi();
    echo 
      $id . ', ' .
      round(sin($r), 2) . ', ' .  
      round(cos($r), 2) . ', ' .  
      0 . ', ' . 
      0 . "\n";
    $id++;
  }
  echo "$id, 0, 0, 0, 0\n";
  $id++;
  // create hour, minute, second pointers
  for ($r = 0.1; $r < 0.4; $r += 0.1) {
    echo 
      $id . ', ' .
      round($r * sin($hourAngle), 2) . ', ' .  
      round($r * cos($hourAngle), 2) . ', ' .  
      0 .  ', ' . 
      2.5 . "\n";
    $id++;
  }
  for ($r = 0.1; $r < 0.7; $r += 0.1) {
    echo 
      $id . ', ' .
      round($r * sin($minAngle), 2) . ', ' .  
      round($r * cos($minAngle), 2) . ', ' .  
      0 .  ', ' . 
      1.5 . "\n";
    $id++;
  }
  for ($r = 0.1; $r < 0.9; $r += 0.1) {
    echo 
      $id . ', ' .
      round($r * sin($secAngle), 2) . ', ' .  
      round($r * cos($secAngle), 2) . ', ' .  
      0 .  ', ' . 
      3 . "\n";
    $id++;
  }
  // flush, send the new output to the client now
  ob_flush();
  flush();
  sleep(1);
 }
 ?>
--- a/examples/graph3d/example01_basis.html
+++ b/examples/graph3d/example01_basis.html
@ -47,7 +47,7 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example02_camera.html
+++ b/examples/graph3d/example02_camera.html
@ -73,10 +73,11 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
            graph.on("camerapositionchange", oncamerapositionchange);
            //graph.redraw();
        }
    </script>
--- a/examples/graph3d/example03_filter.html
+++ b/examples/graph3d/example03_filter.html
@ -51,7 +51,7 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example04_animate.html
+++ b/examples/graph3d/example04_animate.html
@ -57,7 +57,7 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example05_line.html
+++ b/examples/graph3d/example05_line.html
@ -43,7 +43,7 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example06_moving_dots.html
+++ b/examples/graph3d/example06_moving_dots.html
@ -64,7 +64,7 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example07_dot_cloud_colors.html
+++ b/examples/graph3d/example07_dot_cloud_colors.html
@ -52,7 +52,7 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example08_dot_cloud_size.html
+++ b/examples/graph3d/example08_dot_cloud_size.html
@ -53,7 +53,7 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example09_mobile.html
+++ b/examples/graph3d/example09_mobile.html
@ -66,7 +66,7 @@
            };
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example10_styles.html
+++ b/examples/graph3d/example10_styles.html
@ -63,7 +63,7 @@
            var camera = graph ? graph.getCameraPosition() : null;
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/example11_tooltips.html
+++ b/examples/graph3d/example11_tooltips.html
@ -65,7 +65,7 @@
            var camera = graph ? graph.getCameraPosition() : null;
            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));
            graph = new vis.Graph3d(document.getElementById('mygraph'));
            // Draw our graph with the created data and options
            graph.draw(data, options);
--- a/examples/graph3d/playground/index.html
+++ b/examples/graph3d/playground/index.html
@ -33,7 +33,7 @@
        <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>value</code>, <code>filtervalue</code> (optional).
            <code>style</code>, <code>filter</code> (optional).
        </p>
        <table>
--- a/examples/graph3d/playground/playground.js
+++ b/examples/graph3d/playground/playground.js
@ -20,13 +20,6 @@ function load() {
 * Upate the UI based on the currently selected datatype
 */
 function selectDataType() {
    var datatype = getDataType();
    document.getElementById("csv").style.overflow = "hidden";
    document.getElementById("csv").style.visibility               = (datatype == "csv") ? "" : "hidden";
    document.getElementById("csv").style.height               = (datatype == "csv") ? "auto" : "0px";
 }
@ -61,6 +54,9 @@ function loadCsvExample() {
  document.getElementById("xLabel").value = "x";
  document.getElementById("yLabel").value = "y";
  document.getElementById("zLabel").value = "value";
  document.getElementById("filterLabel").value = "";
  document.getElementById("legendLabel").value = "";
  drawCsv();
 }
@ -95,8 +91,9 @@ function loadCsvAnimationExample() {
    document.getElementById("yLabel").value = "y";
    document.getElementById("zLabel").value = "value";
    document.getElementById("filterLabel").value = "time";
    document.getElementById("legendLabel").value = "value";
    document.getElementById("legendLabel").value = "";
  drawCsv();
 }
@ -129,6 +126,10 @@ function loadCsvLineExample() {
  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() {
@ -189,6 +190,8 @@ function loadCsvMovingDotsExample() {
  document.getElementById("zLabel").value = "z";
  document.getElementById("filterLabel").value = "time";
  document.getElementById("legendLabel").value = "color value";
  drawCsv();
 }
 function loadCsvColoredDotsExample() {
@ -223,7 +226,10 @@ function loadCsvColoredDotsExample() {
  document.getElementById("xLabel").value = "x";
  document.getElementById("yLabel").value = "y";
  document.getElementById("zLabel").value = "value";
  document.getElementById("legendLabel").value = "distance";
  document.getElementById("legendLabel").value = "distance"
  document.getElementById("filterLabel").value = "";
  drawCsv();
 }
 function loadCsvSizedDotsExample() {
@ -260,6 +266,9 @@ function loadCsvSizedDotsExample() {
  document.getElementById("yLabel").value = "y";
  document.getElementById("zLabel").value = "z";
  document.getElementById("legendLabel").value = "range";
  document.getElementById("filterLabel").value = "";
  drawCsv();
 }
@ -294,7 +303,8 @@ function getDataType() {
 /**
 * Retrieve the datatable from the entered contents of the csv text
 * @return {Google DataTable}
 * @param {boolean} [skipValue] | if true, the 4th element is a filter value
 * @return {vis DataSet}
 */
 function getDataCsv() {
    var csv = document.getElementById("csvTextarea").value;
@ -304,14 +314,25 @@ function getDataCsv() {
    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) {
      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]),
@ -345,7 +366,7 @@ function trim(text) {
 /**
 * Retrieve the datatable from the entered contents of the javascript text
 * @return {Google DataTable}
 * @return {vis Dataset}
 */
 function getDataJson() {
    var json = document.getElementById("jsonTextarea").value;
@ -357,7 +378,7 @@ function getDataJson() {
 /**
 * Retrieve the datatable from the entered contents of the javascript text
 * @return {Google DataTable}
 * @return {vis Dataset}
 */
 function getDataJavascript() {
    var js = document.getElementById("javascriptTextarea").value;
@ -370,7 +391,7 @@ function getDataJavascript() {
 /**
 * Retrieve the datatable from the entered contents of the datasource text
 * @return {Google DataTable}
 * @return {vis Dataset}
 */
 function getDataDatasource() {
 }
@ -426,9 +447,10 @@ function draw() {
    return drawCsv();
 }
 function drawCsv() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));
    var graph = new vis.Graph3d(document.getElementById('graph'));
    // retrieve data and options
    var data = getDataCsv();
@ -440,7 +462,7 @@ function drawCsv() {
 function drawJson() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));
    var graph = new vis.Graph3d(document.getElementById('graph'));
    // retrieve data and options
    var data = getDataJson();
@ -452,7 +474,7 @@ function drawJson() {
 function drawJavascript() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));
    var graph = new vis.Graph3d(document.getElementById('graph'));
    // retrieve data and options
    var data = getDataJavascript();
@ -481,7 +503,7 @@ function drawGooglespreadsheet() {
        options = getOptions();
        // Instantiate our graph object.
        var graph = new links.Graph3d(document.getElementById('graph'));
        var graph = new vis.Graph3d(document.getElementById('graph'));
        // Draw our graph with the created data and options
        graph.draw(data, options);
@ -515,7 +537,7 @@ function drawDatasource() {
        options = getOptions();
        // Instantiate our graph object.
        var graph = new links.Graph3d(document.getElementById('graph'));
        var graph = new vis.Graph3d(document.getElementById('graph'));
        // Draw our graph with the created data and options
        graph.draw(data, options);
--- a/src/graph3d/graph3d.js
+++ b/src/graph3d/graph3d.js
--- a/src/module/exports.js
+++ b/src/module/exports.js
@ -35,7 +35,8 @@ var vis = {
  },
  Timeline: Timeline,
  Graph: Graph
  Graph: Graph,
  Graph3d: Graph3d
 };
 /**