graph3d functional, examples and playground working. Docs need to be done.

dist/vis.js

@@ -5,7 +5,7 @@
  * A dynamic, browser-based visualization library.
  *
  * @version 1.0.2-SNAPSHOT
- * @date    2014-06-02
+ * @date    2014-06-04
  *
  * @license
  * Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -19036,6 +19036,12 @@ links.Graph3d = function (container) {
   this.defaultXCenter = "55%";
   this.defaultYCenter = "50%";
 
+  this.xLabel = "x";
+  this.yLabel = "y";
+  this.zLabel = "z";
+  this.filterLabel = "time";
+  this.legendLabel = "value";
+
   this.style = links.Graph3d.STYLE.DOT;
   this.showPerspective = true;
   this.showGrid = true;
@@ -19114,9 +19120,9 @@ links.Graph3d.Camera = function () {
 
 /**
  * Set the location (origin) of the arm
- * @param {number} x  Normalized value of x
- * @param {number} y  Normalized value of y
- * @param {number} z  Normalized value of z
+ * @param {Number} x  Normalized value of x
+ * @param {Number} y  Normalized value of y
+ * @param {Number} z  Normalized value of z
  */
 links.Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
   this.armLocation.x = x;
@@ -19128,9 +19134,9 @@ links.Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
 
 /**
  * Set the rotation of the camera arm
- * @param {number} horizontal   The horizontal rotation, between 0 and 2*PI.
+ * @param {Number} horizontal   The horizontal rotation, between 0 and 2*PI.
  *                Optional, can be left undefined.
- * @param {number} vertical   The vertical rotation, between 0 and 0.5*PI
+ * @param {Number} vertical   The vertical rotation, between 0 and 0.5*PI
  *                if vertical=0.5*PI, the graph is shown from the
  *                top. Optional, can be left undefined.
  */
@@ -19164,7 +19170,7 @@ links.Graph3d.Camera.prototype.getArmRotation = function() {
 
 /**
  * Set the (normalized) length of the camera arm.
- * @param {number} length A length between 0.71 and 5.0
+ * @param {Number} length A length between 0.71 and 5.0
  */
 links.Graph3d.Camera.prototype.setArmLength = function(length) {
   if (length === undefined)
@@ -19183,7 +19189,7 @@ links.Graph3d.Camera.prototype.setArmLength = function(length) {
 
 /**
  * Retrieve the arm length
- * @return {number} length
+ * @return {Number} length
  */
 links.Graph3d.Camera.prototype.getArmLength = function() {
   return this.armLength;
@@ -19354,6 +19360,12 @@ links.Graph3d.prototype.draw = function(data, options) {
     if (options.xCenter !== undefined)     this.defaultXCenter = options.xCenter;
     if (options.yCenter !== undefined)     this.defaultYCenter = options.yCenter;
 
+    if (options.filterLabel !== undefined)     this.filterLabel = options.filterLabel;
+    if (options.legendLabel !== undefined)     this.legendLabel = options.legendLabel;
+    if (options.xLabel !== undefined)     this.xLabel = options.xLabel;
+    if (options.yLabel !== undefined)     this.yLabel = options.yLabel;
+    if (options.zLabel !== undefined)     this.zLabel = options.zLabel;
+
     if (options.style !== undefined) {
       var styleNumber = this._getStyleNumber(options.style);
       if (styleNumber !== -1) {
@@ -19466,7 +19478,7 @@ links.Graph3d.STYLE = {
 /**
  * Retrieve the style index from given styleName
  * @param {string} styleName  Style name such as "dot", "grid", "dot-line"
- * @return {number} styleNumber Enumeration value representing the style, or -1
+ * @return {Number} styleNumber Enumeration value representing the style, or -1
  *                when not found
  */
 links.Graph3d.prototype._getStyleNumber = function(styleName) {
@@ -19488,8 +19500,8 @@ links.Graph3d.prototype._getStyleNumber = function(styleName) {
 
 /**
  * Determine the indexes of the data columns, based on the given style and data
- * @param {google.visualization.DataTable} data
- * @param {number}  style
+ * @param {DataSet} data
+ * @param {Number}  style
  */
 links.Graph3d.prototype._determineColumnIndexes = function(data, style) {
   if (this.style === links.Graph3d.STYLE.DOT ||
@@ -19566,9 +19578,9 @@ links.Graph3d.prototype.getColumnRange = function(data,column) {
 /**
  * Initialize the data from the data table. Calculate minimum and maximum values
  * and column index values
- * @param {google.visualization.DataTable} data   The data containing the events
+ * @param {DataSet} data   The data containing the events
  *                        for the Graph.
- * @param {number}     style   Style number
+ * @param {Number}     style   Style Number
  */
 links.Graph3d.prototype._dataInitialize = function (rawData, style) {
 
@@ -19597,15 +19609,13 @@ links.Graph3d.prototype._dataInitialize = function (rawData, style) {
   this.colZ = 'z';
   this.colValue = 'style';
   this.colFilter = 'filter';
-//
+
+
+
   // check if a filter column is provided
   if (data[0].hasOwnProperty("filter")) {
     if (this.dataFilter === undefined) {
-      this.dataFilter = new links.Filter(data, this.colFilter, this);
-//      this.dataFilter = new DataView(rawData, {filter: function (item) {return (item.value);}})
-//
-
-
+      this.dataFilter = new links.Filter(rawData, this.colFilter, this);
       var me = this;
       this.dataFilter.setOnLoadCallback(function() {me.redraw();});
     }
@@ -19677,7 +19687,7 @@ links.Graph3d.prototype._dataInitialize = function (rawData, style) {
 
 /**
  * Filter the data based on the current filter
- * @param {google.visualization.DataTable} data
+ * @param {DataSet} data
  * @return {Array} dataPoints   Array with point objects which can be drawn on screen
  */
 links.Graph3d.prototype._getDataPoints = function (data) {
@@ -19932,14 +19942,14 @@ links.Graph3d.prototype._resizeCenter = function() {
  * Set the rotation and distance of the camera
  * @param {Object} pos   An object with the camera position. The object
  *             contains three parameters:
- *             - horizontal {number}
+ *             - horizontal {Number}
  *             The horizontal rotation, between 0 and 2*PI.
  *             Optional, can be left undefined.
- *             - vertical {number}
+ *             - vertical {Number}
  *             The vertical rotation, between 0 and 0.5*PI
  *             if vertical=0.5*PI, the graph is shown from the
  *             top. Optional, can be left undefined.
- *             - distance {number}
+ *             - distance {Number}
  *             The (normalized) distance of the camera to the
  *             center of the graph, a value between 0.71 and 5.0.
  *             Optional, can be left undefined.
@@ -19997,7 +20007,7 @@ links.Graph3d.prototype._readData = function(data) {
 /**
  * Redraw the Graph. This needs to be executed after the start and/or
  * end time are changed, or when data is added or removed dynamically.
- * @param {google.visualization.DataTable} data  Optional, new data table
+ * @param {DataSet} data  Optional, new data table
  */
 links.Graph3d.prototype.redraw = function(data) {
   // load the data if needed
@@ -20143,7 +20153,7 @@ links.Graph3d.prototype._redrawLegend = function() {
 
     ctx.textAlign = "right";
     ctx.textBaseline = "top";
-    var label = this.dataTable.getColumnLabel(this.colValue);
+    var label = this.legendLabel;
     ctx.fillText(label, right, bottom + this.margin);
   }
 };
@@ -20427,7 +20437,7 @@ links.Graph3d.prototype._redrawAxis = function() {
   ctx.stroke();
 
   // draw x-label
-  var xLabel = this.colX;
+  var xLabel = this.xLabel;
   if (xLabel.length > 0) {
     yOffset = 0.1 / this.scale.y;
     xText = (this.xMin + this.xMax) / 2;
@@ -20450,7 +20460,7 @@ links.Graph3d.prototype._redrawAxis = function() {
   }
 
   // draw y-label
-  var yLabel = this.colY;
+  var yLabel = this.yLabel;
   if (yLabel.length > 0) {
     xOffset = 0.1 / this.scale.x;
     xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
@@ -20473,7 +20483,7 @@ links.Graph3d.prototype._redrawAxis = function() {
   }
 
   // draw z-label
-  var zLabel = this.colZ;
+  var zLabel = this.zLabel;
   if (zLabel.length > 0) {
     offset = 30;  // pixels.  // TODO: relate to the max width of the values on the z axis?
     xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
@@ -20489,9 +20499,9 @@ links.Graph3d.prototype._redrawAxis = function() {
 
 /**
  * Calculate the color based on the given value.
- * @param {number} H   Hue, a value be between 0 and 360
- * @param {number} S   Saturation, a value between 0 and 1
- * @param {number} V   Value, a value between 0 and 1
+ * @param {Number} H   Hue, a value be between 0 and 360
+ * @param {Number} S   Saturation, a value between 0 and 1
+ * @param {Number} V   Value, a value between 0 and 1
  */
 links.Graph3d.prototype._hsv2rgb = function(H, S, V) {
   var R, G, B, C, Hi, X;
@@ -21194,8 +21204,8 @@ links.Graph3d.prototype._insideTriangle = function (point, triangle) {
 
 /**
  * Find a data point close to given screen position (x, y)
- * @param {number} x
- * @param {number} y
+ * @param {Number} x
+ * @param {Number} y
  * @return {Object | null} The closest data point or null if not close to any data point
  * @private
  */
@@ -21451,8 +21461,8 @@ links.Point2d = function (x, y) {
 /**
  * @class Filter
  *
- * @param {google.visualization.DataTable} data The google data table
- * @param {number} column             The index of the column to be filtered
+ * @param {DataSet} data The google data table
+ * @param {Number}  column             The index of the column to be filtered
  * @param {links.Graph} graph           The graph
  */
 links.Filter = function (data, column, graph) {
@@ -21464,8 +21474,9 @@ links.Filter = function (data, column, graph) {
   this.value = undefined;
 
   // read all distinct values and select the first one
-  this.values = graph.getDistinctValues(data, this.column);
-  if (this.values.length) {
+  this.values = graph.getDistinctValues(data.get(), this.column);
+
+  if (this.values.length > 0) {
     this.selectValue(0);
   }
 
@@ -21496,7 +21507,7 @@ links.Filter.prototype.isLoaded = function() {
 
 /**
  * Return the loaded progress
- * @return {number} percentage between 0 and 100
+ * @return {Number} percentage between 0 and 100
  */
 links.Filter.prototype.getLoadedProgress = function() {
   var len = this.values.length;
@@ -21515,13 +21526,13 @@ links.Filter.prototype.getLoadedProgress = function() {
  * @return {string} label
  */
 links.Filter.prototype.getLabel = function() {
-  return this.data.getColumnLabel(this.column);
+  return this.graph.filterLabel;
 };
 
 
 /**
  * Return the columnIndex of the filter
- * @return {number} columnIndex
+ * @return {Number} columnIndex
  */
 links.Filter.prototype.getColumn = function() {
   return this.column;
@@ -21548,7 +21559,7 @@ links.Filter.prototype.getValues = function() {
 
 /**
  * Retrieve one value of the filter
- * @param {number}  index
+ * @param {Number}  index
  * @return {*} value
  */
 links.Filter.prototype.getValue = function(index) {
@@ -21561,7 +21572,7 @@ links.Filter.prototype.getValue = function(index) {
 
 /**
  * Retrieve the (filtered) dataPoints for the currently selected filter index
- * @param {number} index (optional)
+ * @param {Number} index (optional)
  * @return {Array} dataPoints
  */
 links.Filter.prototype._getDataPoints = function(index) {
@@ -21576,14 +21587,11 @@ links.Filter.prototype._getDataPoints = function(index) {
     dataPoints = this.dataPoints[index];
   }
   else {
-    var dataView = new google.visualization.DataView(this.data);
-
     var f = {};
     f.column = this.column;
     f.value = this.values[index];
-    var filteredRows = this.data.getFilteredRows([f]);
-    dataView.setRows(filteredRows);
 
+    var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
     dataPoints = this.graph._getDataPoints(dataView);
 
     this.dataPoints[index] = dataPoints;
@@ -21605,7 +21613,7 @@ links.Filter.prototype.setOnLoadCallback = function(callback) {
 /**
  * Add a value to the list with available values for this filter
  * No double entries will be created.
- * @param {number} index
+ * @param {Number} index
  */
 links.Filter.prototype.selectValue = function(index) {
   if (index >= this.values.length)
@@ -21664,7 +21672,7 @@ links.Filter.prototype.loadInBackground = function(index) {
 
 /**
  * @prototype links.StepNumber
- * The class StepNumber is an iterator for numbers. You provide a start and end
+ * The class StepNumber is an iterator for Numbers. You provide a start and end
  * value, and a best step size. StepNumber itself rounds to fixed values and
  * a finds the step that best fits the provided step.
  *
@@ -21681,9 +21689,9 @@ links.Filter.prototype.loadInBackground = function(index) {
  *
  * Version: 1.0
  *
- * @param {number} start     The start value
- * @param {number} end     The end value
- * @param {number} step    Optional. Step size. Must be a positive value.
+ * @param {Number} start     The start value
+ * @param {Number} end     The end value
+ * @param {Number} step    Optional. Step size. Must be a positive value.
  * @param {boolean} prettyStep Optional. If true, the step size is rounded
  *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
  */
@@ -21702,9 +21710,9 @@ links.StepNumber = function (start, end, step, prettyStep) {
 /**
  * Set a new range: start, end and step.
  *
- * @param {number} start     The start value
- * @param {number} end     The end value
- * @param {number} step    Optional. Step size. Must be a positive value.
+ * @param {Number} start     The start value
+ * @param {Number} end     The end value
+ * @param {Number} step    Optional. Step size. Must be a positive value.
  * @param {boolean} prettyStep Optional. If true, the step size is rounded
  *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
  */
@@ -21717,7 +21725,7 @@ links.StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
 
 /**
  * Set a new step size
- * @param {number} step    New step size. Must be a positive value
+ * @param {Number} step    New step size. Must be a positive value
  * @param {boolean} prettyStep Optional. If true, the provided step is rounded
  *               to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
  */
@@ -21737,9 +21745,9 @@ links.StepNumber.prototype.setStep = function(step, prettyStep) {
 /**
  * Calculate a nice step size, closest to the desired step size.
  * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
- * integer number. For example 1, 2, 5, 10, 20, 50, etc...
- * @param {number}  step  Desired step size
- * @return {number}     Nice step size
+ * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
+ * @param {Number}  step  Desired step size
+ * @return {Number}     Nice step size
  */
 links.StepNumber.calculatePrettyStep = function (step) {
   var log10 = function (x) {return Math.log(x) / Math.LN10;};
@@ -21764,7 +21772,7 @@ links.StepNumber.calculatePrettyStep = function (step) {
 
 /**
  * returns the current value of the step
- * @return {number} current value
+ * @return {Number} current value
  */
 links.StepNumber.prototype.getCurrent = function () {
   return parseFloat(this._current.toPrecision(this.precision));
@@ -21772,7 +21780,7 @@ links.StepNumber.prototype.getCurrent = function () {
 
 /**
  * returns the current step size
- * @return {number} current step size
+ * @return {Number} current step size
  */
 links.StepNumber.prototype.getStep = function () {
   return this._step;
@@ -21973,7 +21981,7 @@ links.Slider.prototype.setOnChangeCallback = function(callback) {
 
 /**
  * Set the interval for playing the list
- * @param {number} interval   The interval in milliseconds
+ * @param {Number} interval   The interval in milliseconds
  */
 links.Slider.prototype.setPlayInterval = function(interval) {
   this.playInterval = interval;
@@ -21981,7 +21989,7 @@ links.Slider.prototype.setPlayInterval = function(interval) {
 
 /**
  * Retrieve the current play interval
- * @return {number} interval   The interval in milliseconds
+ * @return {Number} interval   The interval in milliseconds
  */
 links.Slider.prototype.getPlayInterval = function(interval) {
   return this.playInterval;
@@ -22042,7 +22050,7 @@ links.Slider.prototype.setValues = function(values) {
 
 /**
  * Select a value by its index
- * @param {number} index
+ * @param {Number} index
  */
 links.Slider.prototype.setIndex = function(index) {
   if (index < this.values.length) {
@@ -22058,7 +22066,7 @@ links.Slider.prototype.setIndex = function(index) {
 
 /**
  * retrieve the index of the currently selected vaue
- * @return {number} index
+ * @return {Number} index
  */
 links.Slider.prototype.getIndex = function() {
   return this.index;
@@ -22229,7 +22237,7 @@ links.preventDefault = function (event) {
 /**
  * Retrieve the absolute left value of a DOM element
  * @param {Element} elem  A dom element, for example a div
- * @return {number} left    The absolute left position of this element
+ * @return {Number} left    The absolute left position of this element
  *                in the browser page.
  */
 links.getAbsoluteLeft = function(elem) {
@@ -22245,7 +22253,7 @@ links.getAbsoluteLeft = function(elem) {
 /**
  * Retrieve the absolute top value of a DOM element
  * @param {Element} elem  A dom element, for example a div
- * @return {number} top     The absolute top position of this element
+ * @return {Number} top     The absolute top position of this element
  *                in the browser page.
  */
 links.getAbsoluteTop = function(elem) {
@@ -22261,7 +22269,7 @@ links.getAbsoluteTop = function(elem) {
 /**
  * Get the horizontal mouse position from a mouse event
  * @param {Event} event
- * @return {number} mouse x
+ * @return {Number} mouse x
  */
 links.getMouseX = function(event) {
   if ('clientX' in event) return event.clientX;
@@ -22271,7 +22279,7 @@ links.getMouseX = function(event) {
 /**
  * Get the vertical mouse position from a mouse event
  * @param {Event} event
- * @return {number} mouse y
+ * @return {Number} mouse y
  */
 links.getMouseY = function(event) {
   if ('clientY' in event) return event.clientY;

src/graph3d/doc/index.html → docs/graph3d.html

@@ -2,10 +2,10 @@
 
 <head>
     <title>Graph3d documentation</title>
-    <link rel='stylesheet' href='default.css' type='text/css'>
+    <link rel='stylesheet' href='css/default.css' type='text/css'>
 
-    <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="prettify/prettify.js"></script>
+    <link href="lib/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="lib/prettify/prettify.js"></script>
 </head>
 
 <body onload="prettyPrint();">
@@ -33,7 +33,6 @@
 <h2 id="Contents">Contents</h2>
 <ul>
     <li><a href="#Overview">Overview</a></li>
-    <li><a href="#Example">Example</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>
@@ -50,136 +49,74 @@
     Graph3d also supports animation of a graph.
 </p>
 
-<p>
-    The graph works smooth on any modern browser for data up to 10.000 points.
-</p>
-
-<p>
-    The Graph is developed as a Google Visualization Chart in javascript.
-    <!--
-    There is a GWT wrapper available to use the Graph in GWT (Google Web Toolkit).
-    -->
-    It runs on all modern browsers without additional requirements.
-    Graph is tested on Firefox 3.6+, Safari 5.0+, Chrome 6.0+, Opera 10.6+,
-    Internet Explorer 9+.
-</p>
-
-<p>
-    To get started with Graph3d, download
-    <a href="http://almende.github.com/chap-links-library/downloads.html">graph3d.zip</a>,
-    and unzip the contents in a subfolder graph3d on your site.
-
-    Examples can be found in the
-    <a href="../examples" target="_blank">examples</a> directory.
-
-    The possiblities of Graph3d can be tested on the
-    <a href="../playground" target="_blank">playground</a>.
-</p>
-
-<h2 id="Example">Example</h2>
-<p>
-    Here a graph example. Click and drag to move the graph, scroll to zoom the graph.
-</p>
-
-<p style="width:100%; text-align:center;">
-    <iframe src="example.html" style="border:none; width:420px; height:420px;"></iframe>
-</p>
 <pre class="prettyprint lang-html">
-&lt;!DOCTYPE HTML PUBLIC
-     "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
+&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
-  &lt;head&gt;
+&lt;head&gt;
     &lt;title&gt;Graph 3D demo&lt;/title&gt;
 
     &lt;style&gt;
-      body {font: 10pt arial;}
+        body {font: 10pt arial;}
     &lt;/style&gt;
 
-    &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
-    &lt;script type="text/javascript" src="../graph3d.js"&gt;&lt;/script&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;
+    var data = null;
+    var graph = null;
 
-      google.load("visualization", "1");
+    function custom(x, y) {
+        return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+    }
 
-      // Set callback to run when API is loaded
-      google.setOnLoadCallback(drawVisualization);
-
-      function custom(x, y) {
-        return Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
-      }
-
-      // Called when the Visualization API is loaded.
-      function drawVisualization() {
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
         // Create and populate a data table.
-        data = new google.visualization.DataTable();
-        data.addColumn('number', 'x');
-        data.addColumn('number', 'y');
-        data.addColumn('number', 'value');
-
+        var data = new vis.DataSet({});
         // create some nice looking data with sin/cos
-        var steps = 25;  // number of datapoints will be steps*steps
+        var steps = 50;  // number of datapoints will be steps*steps
         var axisMax = 314;
-        axisStep = axisMax / steps;
+        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.addRow([x, y, value]);
-          }
+            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
-        options = {width:  "400px",
-                   height: "400px",
-                   style: "surface",
-                   showPerspective: true,
-                   showGrid: true,
-                   showShadow: false,
-                   keepAspectRatio: true,
-                   verticalRatio: 0.5
-                   };
+        var options = {
+            width:  "600px",
+            height: "600px",
+            style: "surface",
+            showPerspective: true,
+            showGrid: true,
+            showShadow: false,
+            keepAspectRatio: true,
+            verticalRatio: 0.5
+        };
 
         // Instantiate our graph object.
         graph = new links.Graph3d(document.getElementById('mygraph'));
 
         // Draw our graph with the created data and options
         graph.draw(data, options);
-      }
-   &lt;/script&gt;
-  &lt;/head&gt;
-
-  &lt;body&gt;
-    &lt;div id="mygraph"&gt;&lt;/div&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+    }
+    &lt;/script&gt;
+    &lt;/head&gt;
 
+&lt;body onload="drawVisualization();"&gt;
+&lt;div id="mygraph"&gt;&lt;/div&gt;
 
-<h2 id="Loading">Loading</h2>
-<p>
-    Graph3d is no built-in visualization of Google.
-
-    To load Graph3d, download the file
-    <a href="http://almende.github.com/chap-links-library/downloads.html"><code>graph3d.zip</code></a>,
-    and unzip it in your html page such that the files are located in a subfolder graph3d.
-    Include the google API and the following files in the head of your html code:
-</p>
-
-<pre class="prettyprint lang-html">&lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
-&lt;script type="text/javascript" src="graph/graph3d.js"&gt;&lt;/script&gt;</pre>
+        &lt;div id="info"&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
 
-<p>
-    The google visualization needs to be loaded in order to use DataTable.
-</p>
-<pre class="prettyprint lang-js">google.load("visualization", "1");
-google.setOnLoadCallback(drawVisualization);
-function drawVisualization() {
-  // load data and create the graph here
-}
 </pre>
 
+
 The class name of the Graph3d is <code>links.Graph3d</code>
 <pre class="prettyprint lang-js">var graph = new links.Graph3d(container);</pre>
 

examples/graph3d/example01_basis.html

@@ -29,7 +29,7 @@
                 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}
+                        {x:x,y:y,z:value,style:value}
                     ]);
                 }
             }
@@ -55,7 +55,7 @@
     </script>
 </head>
 
-<body>
+<body onload="drawVisualization();">
 <div id="mygraph"></div>
 
 <div id="info"></div>

examples/graph3d/example03_filter.html

@@ -46,7 +46,8 @@
                 showGrid: true,
                 showShadow: false,
                 keepAspectRatio: true,
-                verticalRatio: 0.5
+                verticalRatio: 0.5,
+                filterLabel: "values"
             };
 
             // Instantiate our graph object.

examples/graph3d/example04_animate.html

@@ -9,18 +9,12 @@
         }
     </style>
 
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
 
     <script type="text/javascript">
         var data = null;
         var graph = null;
 
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
         function custom(x, y, t) {
             return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
         }
@@ -28,14 +22,8 @@
         // Called when the Visualization API is loaded.
         function drawVisualization() {
             // Create and populate a data table.
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'value');
-            data.addColumn('number', 'Time');
-
+            data = new vis.DataSet({});
             // create some nice looking data with sin/cos
-            // number of datapoints will be steps*steps*tMax
             var steps = 25;
             var axisMax = 314;
             var tMax = 31;
@@ -44,11 +32,14 @@
                 for (var x = 0; x < axisMax; x+=axisStep) {
                     for (var y = 0; y < axisMax; y+=axisStep) {
                         var value = custom(x, y, t);
-                        data.addRow([x, y, value, t]);
+                        data.add([
+                            {x:x,y:y,z:value,filter:t,style:value}
+                        ]);
                     }
                 }
             }
 
+
             // specify options
             var options = {
                 width:  "600px",
@@ -61,7 +52,8 @@
                 keepAspectRatio: true,
                 verticalRatio: 0.5,
                 animationInterval: 100, // milliseconds
-                animationPreload: true
+                animationPreload: true,
+                filterValue: "time"
             };
 
             // Instantiate our graph object.
@@ -73,7 +65,7 @@
     </script>
 </head>
 
-<body>
+<body onload="drawVisualization();">
 <div id="mygraph"></div>
 
 <div id="info"></div>

examples/graph3d/example05_datasource.html

@@ -1,101 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>Data from datasource</title>
-
-    <style>
-        body {font: 10pt arial;}
-    </style>
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-
-    <script type="text/javascript">
-        var dataSourceUrl = "datasource.php";
-        var data = null;
-        var graph = null;
-        var query = null;
-
-        function sendRequest () {
-            drawVisualization = function(response) {
-                document.getElementById("info").innerHTML = "";
-                document.getElementById("getdata").disabled = "";
-
-                if (response.isError()) {
-                    alert('Error: ' + response.getMessage());
-                    return;
-                }
-
-                // retrieve the data from the query response
-                data = response.getDataTable();
-
-                // 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.
-                graph = new links.Graph3d(document.getElementById('mygraph'));
-
-                // Draw our graph with the created data and options
-                graph.draw(data, options);
-            };
-
-            // built up the url with parameters
-            var url = dataSourceUrl + "?" +
-                    "xmin=" + document.getElementById("xmin").value + "&" +
-                    "xmax=" + document.getElementById("xmax").value + "&" +
-                    "xstepnum=" + document.getElementById("xstepnum").value + "&" +
-                    "ymin=" + document.getElementById("ymin").value+ "&" +
-                    "ymax=" + document.getElementById("ymax").value + "&" +
-                    "ystepnum=" + document.getElementById("ystepnum").value;
-
-            document.getElementById("info").innerHTML = "Loading...";
-            document.getElementById("getdata").disabled = "disabled";
-
-            // send the request
-            query && query.abort();
-            query = new google.visualization.Query(url);
-            query.send(drawVisualization);
-        }
-
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(sendRequest);
-    </script>
-</head>
-
-<body>
-<h1>Data from datasource</h1>
-<p style="font-style:italic;">
-    Note: this example works only when running it on a PHP server,
-    as the datasource is a php file.
-</p>
-
-<p>
-    xmin: <input type="text" value="-100" id="xmin" style="width:50px;">
-    xmax: <input type="text" value="300" id="xmax" style="width:50px;">
-    steps: <input type="text" value="50" id="xstepnum" style="width:50px;">
-</p>
-<p>
-    ymin: <input type="text" value="-100" id="ymin" style="width:50px;">
-    ymax: <input type="text" value="100" id="ymax" style="width:50px;">
-    steps: <input type="text" value="25" id="ystepnum" style="width:50px;">
-</p>
-<p>
-    <input type="button" value="Get Data" id="getdata" onclick="sendRequest();">
-    <span id="info"></span>
-</p>
-
-<div id="mygraph"></div>
-
-<div id="info"></div>
-</body>
-</html>

examples/graph3d/example06_line.html → examples/graph3d/example05_line.html

@@ -7,25 +7,16 @@
         body {font: 10pt arial;}
     </style>
 
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
 
     <script type="text/javascript">
         var data = null;
         var graph = null;
 
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
         // Called when the Visualization API is loaded.
         function drawVisualization() {
             // Create and populate a data table.
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'value');
+            var data = new vis.DataSet({});
 
             // create some nice looking data with sin/cos
             var steps = 500;
@@ -37,7 +28,7 @@
                 var x = r * Math.sin(t);
                 var y = r * Math.cos(t);
                 var z = t / tmax;
-                data.addRow([x, y, z]);
+                data.add({x:x,y:y,z:z});
             }
 
             // specify options
@@ -62,7 +53,7 @@
     </script>
 </head>
 
-<body>
+<body onload="drawVisualization()">
 <div id="mygraph"></div>
 
 <div id="info"></div>

examples/graph3d/example08_moving_dots.html → examples/graph3d/example06_moving_dots.html

@@ -7,27 +7,16 @@
         body {font: 10pt arial;}
     </style>
 
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
 
     <script type="text/javascript">
         var data = null;
         var graph = null;
 
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
         // Called when the Visualization API is loaded.
         function drawVisualization() {
             // create the data table.
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'z');
-            data.addColumn('number', 'color value');
-            data.addColumn('number', 'time');
+            var data = new vis.DataSet({});
 
             // create some shortcuts to math functions
             var sin = Math.sin;
@@ -43,13 +32,13 @@
                 var value = t;
 
                 // a dot in the center
-                data.addRow([0, 0, 0, value, tgroup]);
+                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.addRow([sin(tdot),  cos(tdot), sin(tdot), value, tgroup]);
-                    data.addRow([sin(tdot), -cos(tdot), sin(tdot + tmax*1/2), value, tgroup]);
+                    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});
                 }
             }
 
@@ -65,6 +54,7 @@
                 animationInterval: 35, // milliseconds
                 animationPreload: false,
                 animationAutoStart: true,
+                legendLabel: "color value",
                 cameraPosition:
                 {
                     horizontal: 2.7,
@@ -82,7 +72,7 @@
     </script>
 </head>
 
-<body>
+<body onload="drawVisualization();">
 <div id="mygraph"></div>
 
 <div id="info"></div>

examples/graph3d/example09_dot_cloud_colors.html → examples/graph3d/example07_dot_cloud_colors.html

@@ -7,27 +7,17 @@
         body {font: 10pt arial;}
     </style>
 
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
 
     <script type="text/javascript">
         var data = null;
         var graph = null;
 
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
 
         // Called when the Visualization API is loaded.
         function drawVisualization() {
             // create the data table.
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'z');
-            data.addColumn('number', 'distance');
-
+            var data = new vis.DataSet({});
             // create some shortcuts to math functions
             var sqrt = Math.sqrt;
             var pow = Math.pow;
@@ -41,7 +31,7 @@
                 var z = pow(random(), 2);
                 var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
 
-                data.addRow([x, y, z, dist]);
+                data.add({x:x,y:y,z:z,style:dist});
             }
 
             // specify options
@@ -53,6 +43,7 @@
                 showGrid: true,
                 keepAspectRatio: true,
                 verticalRatio: 1.0,
+                legendLabel: "distance",
                 cameraPosition: {
                     horizontal: -0.35,
                     vertical: 0.22,
@@ -69,7 +60,7 @@
     </script>
 </head>
 
-<body>
+<body onload="drawVisualization()">
 <div id="mygraph"></div>
 
 <div id="info"></div>

examples/graph3d/example07_internet_explorer_9.html

@@ -1,90 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>Graph 3D Internet Explorer 9 support</title>
-
-    <style>
-        body {font: 10pt arial; width: 600px; }
-    </style>
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-
-    <script type="text/javascript">
-        var data = null;
-        var graph = null;
-
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
-        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 google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'value');
-
-            // 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.addRow([x, y, value]);
-                }
-            }
-
-            // specify options
-            var options = {
-                width:  "100%",
-                height: "600px",
-                style: "surface",
-                showPerspective: true,
-                showGrid: true,
-                showShadow: false,
-                keepAspectRatio: true,
-                verticalRatio: 0.5
-            };
-
-            // Instantiate our graph object.
-            graph = new links.Graph3d(document.getElementById('mygraph'));
-
-            // Draw our graph with the created data and options
-            graph.draw(data, options);
-        }
-    </script>
-</head>
-
-<body>
-<p>
-    Graph3D uses the HTML Canvas element. This element is supported by all
-    major browsers. The Canvas element is also supported in Internet Explorer
-    9 and newer. However, for Internet Explorer it is necessary to specify
-    the doctype of the html page:
-</p>
-
-    <pre style= "margin-left:40px;" ><code >
-        <b style= "color:red;" >&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</b>
-        &lt;html&gt;
-        &lt;head&gt;
-        &lt;!-- ... --&gt;
-        &lt;/head&gt;
-        &lt;body&gt;
-        &lt;!-- ... --&gt;
-        &lt;/body&gt;
-        &lt;/html&gt;
-    </code></pre>
-
-<div id="mygraph"></div>
-
-<div id="info"></div>
-</body>
-</html>

examples/graph3d/example10_dot_cloud_size.html → examples/graph3d/example08_dot_cloud_size.html

@@ -6,27 +6,16 @@
     <style>
         body {font: 10pt arial;}
     </style>
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
 
     <script type="text/javascript">
         var data = null;
         var graph = null;
 
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
         // Called when the Visualization API is loaded.
         function drawVisualization() {
             // create the data table.
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'z');
-            data.addColumn('number', 'value');
+            var data = new vis.DataSet({});
 
             // create some shortcuts to math functions
             var sqrt = Math.sqrt;
@@ -43,7 +32,7 @@
                 var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
                 var range = sqrt(2) - dist;
 
-                data.addRow([x, y, z, range]);
+                data.add({x:x,y:y,z:z,style:range});
             }
 
             // specify options
@@ -54,6 +43,7 @@
                 showPerspective: false,
                 showGrid: true,
                 keepAspectRatio: true,
+                legendLabel:"value",
                 verticalRatio: 1.0,
                 cameraPosition: {
                     horizontal: -0.54,
@@ -71,7 +61,7 @@
     </script>
 </head>
 
-<body>
+<body onload="drawVisualization()">
 <div id="mygraph"></div>
 
 <div id="info"></div>

examples/graph3d/example13_mobile.html → examples/graph3d/example09_mobile.html

@@ -22,18 +22,12 @@
     <!-- for mobile devices like android and iphone -->
     <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
 
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
 
     <script type="text/javascript">
         var data = null;
         var graph = null;
 
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
         function custom(x, y) {
             return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
         }
@@ -41,10 +35,7 @@
         // Called when the Visualization API is loaded.
         function drawVisualization() {
             // Create and populate a data table.
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'z');
+            var data = new vis.DataSet({});
 
             // create some nice looking data with sin/cos
             var steps = 10;  // number of datapoints will be steps*steps
@@ -53,7 +44,9 @@
             for (var x = 0; x < axisMax; x+=axisStep) {
                 for (var y = 0; y < axisMax; y+=axisStep) {
                     var value = custom(x,y);
-                    data.addRow([x, y, value]);
+                    data.add([
+                        {x:x,y:y,z:value}
+                    ]);
                 }
             }
 
@@ -81,7 +74,7 @@
     </script>
 </head>
 
-<body onresize="graph.redraw();">
+<body onresize="graph.redraw();" onload="drawVisualization()">
 <div id="mygraph"></div>
 </body>
 </html>

examples/graph3d/example14_styles.html → examples/graph3d/example10_styles.html

@@ -7,18 +7,12 @@
         body {font: 10pt arial;}
     </style>
 
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
 
     <script type="text/javascript">
         var data = null;
         var graph = null;
 
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
         function custom(x, y) {
             return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
         }
@@ -32,11 +26,7 @@
             var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
 
             // Create and populate a data table.
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'z');
-            if (withValue) data.addColumn('number', 'value');
+            var data = new vis.DataSet({});
 
             // create some nice looking data with sin/cos
             var steps = 5;  // number of datapoints will be steps*steps
@@ -45,12 +35,14 @@
             for (var x = 0; x <= axisMax; x+=axisStep) {
                 for (var y = 0; y <= axisMax; y+=axisStep) {
                     var z = custom(x,y);
-                    var values = [x, y, z];
                     if (withValue) {
                         var value = (y - x);
-                        values.push(value);
+                        data.add({x:x, y:y, z: z, style:value});
                     }
-                    data.addRow(values);
+                    else {
+                        data.add({x:x, y:y, z: z});
+                    }
+
                 }
             }
 
@@ -86,7 +78,7 @@
     </script>
 </head>
 
-<body>
+<body onload="drawVisualization()">
 
 <p>
     <label for="style"> Style:

examples/graph3d/example11_datasource_refresh.html

@@ -1,92 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>Data from datasource</title>
-
-    <style>
-        body {font: 10pt arial;}
-    </style>
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-
-    <script type="text/javascript">
-        var DATASOURCE_URL = "datasource_csv_to_json.php";
-        var REFRESH_INTERVAL = 1000;  // milliseconds
-
-        var data = null;
-        var graph = null;
-        var query = null;
-
-        var draw = function() {
-            // create an empty table to initialized the graph
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'z');
-            data.addColumn('number', 'color');
-
-            // specify options
-            var options = {
-                width:  "600px",
-                height: "600px",
-                style: "dot-color",
-                showPerspective: true,
-                showGrid: true,
-                showShadow: false,
-                keepAspectRatio: true,
-                verticalRatio: 0.5,
-                cameraPosition: {
-                    distance: 1.4,
-                    horizontal: 0.0,
-                    vertical: 1.0
-                }
-            };
-
-            // Instantiate our graph object.
-            graph = new links.Graph3d(document.getElementById('graph'));
-
-            // Draw our graph with the created data and options
-            graph.draw(data, options);
-
-            refresh();
-        };
-
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(draw);
-
-        // callback function, executed when the response data is received
-        var redraw = function(response) {
-            data = response.getDataTable();
-            graph.redraw(data);
-            document.getElementById("info").innerHTML = "Updated " + new Date();
-        };
-
-        var refresh = function() {
-            // send the datasource request
-            query && query.abort();
-            query = new google.visualization.Query(DATASOURCE_URL);
-            query.send(redraw);
-
-            window.setTimeout(refresh, REFRESH_INTERVAL);
-        }
-    </script>
-</head>
-
-<body>
-<h1>Refresh data from external datasource</h1>
-<p>
-    This example refreshes once per second the data from an external datasource.
-</p>
-<p style="font-style:italic;">
-    Note: this example works only when running it on a PHP server,
-    as the datasource is a php file.
-</p>
-
-<div id="graph"></div>
-
-<div id="info"></div>
-</body>
-</html>

examples/graph3d/example15_tooltips.html → examples/graph3d/example11_tooltips.html

@@ -7,18 +7,12 @@
         body {font: 10pt arial;}
     </style>
 
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
 
     <script type="text/javascript">
         var data = null;
         var graph = null;
 
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
         function custom(x, y) {
             return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
         }
@@ -29,11 +23,7 @@
             var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
 
             // Create and populate a data table.
-            data = new google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'z');
-            if (withValue) data.addColumn('number', 'value');
+            var data = new vis.DataSet({});
 
             // create some nice looking data with sin/cos
             var steps = 5;  // number of datapoints will be steps*steps
@@ -42,12 +32,13 @@
             for (var x = 0; x <= axisMax; x+=axisStep) {
                 for (var y = 0; y <= axisMax; y+=axisStep) {
                     var z = custom(x,y);
-                    var values = [x, y, z];
                     if (withValue) {
                         var value = (y - x);
-                        values.push(value);
+                        data.add({x:x, y:y, z: z, style:value});
+                    }
+                    else {
+                        data.add({x:x, y:y, z: z});
                     }
-                    data.addRow(values);
                 }
             }
 
@@ -86,7 +77,7 @@
     </script>
 </head>
 
-<body>
+<body onload="drawVisualization()">
 
 <p>
     <label for="style"> Style:

examples/graph3d/example12_datastream.html

@@ -1,185 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>Datastream example</title>
-
-    <style>
-        body {
-            width: 600px;
-            font-size: 14px;
-        }
-    </style>
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-    <script type="text/javascript" src="ajax.js"></script>
-
-    <script>
-        var url = "datastream_csv.php";
-
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(load);
-
-        var loaded = false;
-        var ajax = new Ajax();
-        var dataBuffer = "";
-
-        var indexTable = undefined;
-        var dataTable = undefined;
-        var graph = undefined;
-        var options = undefined;
-
-        function load() {
-            // initialize data table
-            indexTable = new Array();
-            dataTable = new google.visualization.DataTable();
-            dataTable.addColumn('number', 'x');
-            dataTable.addColumn('number', 'y');
-            dataTable.addColumn('number', 'z');
-            dataTable.addColumn('number', 'color');
-
-            // specify options
-            options = {
-                width:  "500px",
-                height: "500px",
-                style: "dot-color",
-                showPerspective: true,
-                showGrid: true,
-                showShadow: false,
-                keepAspectRatio: true,
-                verticalRatio: 0.5,
-                cameraPosition: {
-                    distance: 1.4,
-                    horizontal: 0.0,
-                    vertical: 1.0
-                }
-            };
-
-            // Instantiate our graph object.
-            graph = new links.Graph3d(document.getElementById('graph'));
-
-            // Draw our graph with the created data and options
-            graph.draw(dataTable, options);
-
-            loaded = true;
-        }
-
-        /**
-         * Update the data in the datatable
-         */
-        function setData(id, x, y, z, color) {
-            if (indexTable[id] != undefined) {
-                // update data
-                var row = indexTable[id];
-                dataTable.setValue(row, 0, x);
-                dataTable.setValue(row, 1, y);
-                dataTable.setValue(row, 2, z);
-                dataTable.setValue(row, 3, color);
-            }
-            else {
-                // add data
-                var row = dataTable.addRow([x, y,z, color]);
-                indexTable[id] = row;
-            }
-        }
-
-        /**
-         * Parse data in csv format.
-         * The data is supposed to be in CSV format and has five numeric columns:
-         *   id, x, y,z, color
-         * Rows are separated by a line and, and fields by a comma. spaces are
-         * neglected.
-         * @param {string} data
-         * @param {string} delimeter  Optional delimeter. A comma "," by default
-         */
-        function parseData(data, delimeter) {
-            if (delimeter == undefined) {
-                delimeter = ",";
-            }
-
-            dataBuffer += data;
-
-            var id = undefined;
-            var x = undefined;
-            var y = undefined;
-            var z = undefined;
-            var color = undefined;
-
-            var rows = dataBuffer.split("\n");
-            for (var i = 0; i < rows.length; i++) {
-                var row = rows[i].split(delimeter);
-
-                if (row.length == 5) {
-                    var id = parseInt(row[0]);
-                    var x = parseFloat(row[1]);
-                    var y = parseFloat(row[2]);
-                    var z = parseFloat(row[3]);
-                    var color = parseFloat(row[4]);
-
-                    setData(id, x, y, z, color);
-                }
-                else {
-                    // corrupt data or empty line
-                }
-            }
-
-            // empty the buffer up to the last line
-            // TODO: handle the buffer smarter, makes not much sense right now.
-            var lastReturn = dataBuffer.lastIndexOf("\n");
-            if (lastReturn >= 0)
-                dataBuffer = dataBuffer.substring(lastReturn);
-            else
-                dataBuffer = "";
-        }
-
-        function start() {
-            if(!loaded) {
-                alert("Still loading Google API. One moment please...");
-                return;
-            }
-
-            var callback = function (newData) {
-                parseData(newData);
-                graph.redraw(dataTable);
-            }
-
-            ajax.abort();
-            ajax.requestLongPoll("GET", url, callback);
-        }
-
-        function stop () {
-            ajax.abort();
-        }
-
-    </script>
-
-</head>
-<body>
-<h1>Datastream example</h1>
-
-<p>
-    This example demonstrates reading a data stream, via a long poll.
-</p>
-
-<p>
-    Note that some browsers buffer data from a stream before sending it to the
-    screen. In that case "nothing" seems to happens until the buffer limit is
-    reached.
-</p>
-
-<p>
-    When the datasource is located on an external server,
-    the datasource must enable cross domain scripting
-    (Access-Control-Allow-Origin must be set on the server side).
-</p>
-
-<p>
-    <input type="button" id="start" value="Start" onclick="start();">
-    <input type="button" is="stop" value="Stop" onclick="stop();">
-</p>
-
-<div id="graph"></div>
-</body>
-</html>

examples/graph3d/index.html

@@ -11,17 +11,13 @@
     <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_datasource.html">example05_datasource.html</a></p>
-    <p><a href="example06_line.html">example06_line.html</a></p>
-    <p><a href="example07_internet_explorer_9.html">example07_internet_explorer_9.html</a></p>
-    <p><a href="example08_moving_dots.html">example08_moving_dots.html</a></p>
-    <p><a href="example09_dot_cloud_colors.html">example09_dot_cloud_colors.html</a></p>
-    <p><a href="example10_dot_cloud_size.html">example10_dot_cloud_size.html</a></p>
-    <p><a href="example11_datasource_refresh.html">example11_datasource_refresh.html</a></p>
-    <p><a href="example12_datastream.html">example12_datastream.html</a></p>
-    <p><a href="example13_mobile.html">example13_mobile.html</a></p>
-    <p><a href="example14_styles.html">example14_styles.html</a></p>
-    <p><a href="example15_tooltips.html">example15_tooltips.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>
 
 </div>
 </body>

src/graph3d/playground/index.html → examples/graph3d/playground/index.html

@@ -4,8 +4,7 @@
 <head>
     <title>Graph 3D - Playground</title>
 
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
 
 
     <script type="text/javascript" src="playground.js"></script>
@@ -13,11 +12,6 @@
     <link rel='stylesheet' href='playground.css' type='text/css'>
 
     <script type="text/javascript">
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
         // Called when the Visualization API is loaded.
         function drawVisualization() {
             // TODO
@@ -49,9 +43,6 @@
                 </td>
                 <td>
                     <div id="csv">
-                        <p>
-                            The csv table must contain a header line with column names.
-                        </p>
                         <textarea id="csvTextarea"></textarea>
                         <p>
                             <a href="javascript: loadCsvExample();" title="Load an example">Simple example</a>
@@ -64,72 +55,6 @@
                     </div>
                 </td>
             </tr>
-
-            <tr>
-                <td style="white-space: nowrap">
-                    <input type="radio" name="datatype" id="datatypeJson" onclick="selectDataType();" value="javascript">Json
-                </td>
-                <td>
-                    <div id="json">
-                        <p>
-
-                        </p>
-                        <textarea id="jsonTextarea"></textarea>
-                        <p>
-                            <a href="javascript: loadJsonExample();" title="Load an example">Simple example</a>
-                        </p>
-                    </div>
-                </td>
-            </tr>
-
-            <tr>
-                <td style="white-space: nowrap">
-                    <input type="radio" name="datatype" id="datatypeJavascript" onclick="selectDataType();" value="javascript">Javascript
-                </td>
-                <td>
-                    <div id="javascript">
-                        <p>
-                            The javascript source must create a global variable named <code>data</code>
-                            which contains a google visualization DataTable.
-                        </p>
-                        <textarea id="javascriptTextarea"></textarea>
-                        <p>
-                            <a href="javascript: loadJavascriptExample();" title="Load an example">Simple example</a>
-                            <a href="javascript: loadJavascriptFunctionExample();" title="Load an example">Function example</a>
-                        </p>
-                    </div>
-                </td>
-            </tr>
-
-            <tr>
-                <td style="white-space: nowrap">
-                    <input type="radio" name="datatype" id="datatypeGooglespreadsheet" onclick="selectDataType();" value="googlespreadsheet">Google Spreadsheet
-                </td>
-                <td>
-                    <div id="googlespreadsheet">
-                        <input type="text" id="googlespreadsheetText">
-                        <p>
-                            <a href="javascript: loadGooglespreadsheetExample();" title="Load an example">Google Spreadsheet example</a>
-                            (<a href="https://spreadsheets.google.com/a/almende.org/ccc?key=tJ6gaeq2Ldy82VVMr5dPQoA&hl=en#gid=0" target="_blank" title="View data">view spreadsheet</a>)
-                        </p>
-                    </div>
-                </td>
-            </tr>
-
-            <tr>
-                <td style="white-space: nowrap">
-                    <input type="radio" name="datatype" id="datatypeDatasource" onclick="selectDataType();" value="datasource">Datasource
-                </td>
-                <td>
-                    <div id="datasource">
-                        <input type="text" id="datasourceText">
-                        <p>
-                            <a href="javascript: loadDatasourceExample();" title="Load an example">Example</a>
-                            (<a href="datasource.html" target="_blank" title="View php sourcecode">view source code</a>)
-                        </p>
-                    </div>
-                </td>
-            </tr>
         </table>
 
         <br>
@@ -238,6 +163,12 @@
             <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>

src/graph3d/playground/playground.js → examples/graph3d/playground/playground.js

@@ -23,22 +23,10 @@ function selectDataType() {
     var datatype = getDataType();
 
     document.getElementById("csv").style.overflow = "hidden";
-    document.getElementById("json").style.overflow = "hidden";
-    document.getElementById("javascript").style.overflow = "hidden";
-    document.getElementById("googlespreadsheet").style.overflow = "hidden";
-    document.getElementById("datasource").style.overflow = "hidden";
 
     document.getElementById("csv").style.visibility               = (datatype == "csv") ? "" : "hidden";
-    document.getElementById("json").style.visibility              = (datatype == "json") ? "" : "hidden";
-    document.getElementById("javascript").style.visibility        = (datatype == "javascript") ? "" : "hidden";
-    document.getElementById("googlespreadsheet").style.visibility = (datatype == "googlespreadsheet") ? "" : "hidden";
-    document.getElementById("datasource").style.visibility        = (datatype == "datasource") ? "" : "hidden";
 
     document.getElementById("csv").style.height               = (datatype == "csv") ? "auto" : "0px";
-    document.getElementById("json").style.height              = (datatype == "json") ? "auto" : "0px";
-    document.getElementById("javascript").style.height        = (datatype == "javascript") ? "auto" : "0px";
-    document.getElementById("googlespreadsheet").style.height = (datatype == "googlespreadsheet") ? "auto" : "0px";
-    document.getElementById("datasource").style.height        = (datatype == "datasource") ? "auto" : "0px";
 }
 
 
@@ -69,6 +57,10 @@ function loadCsvExample() {
     // 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";
 }
 
 
@@ -99,6 +91,12 @@ function loadCsvAnimationExample() {
     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 = "value";
+
 }
 
 
@@ -127,6 +125,10 @@ function loadCsvLineExample() {
     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";
 }
 
 function loadCsvMovingDotsExample() {
@@ -181,6 +183,12 @@ function loadCsvMovingDotsExample() {
     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";
 }
 
 function loadCsvColoredDotsExample() {
@@ -211,6 +219,11 @@ function loadCsvColoredDotsExample() {
     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";
 }
 
 function loadCsvSizedDotsExample() {
@@ -242,127 +255,30 @@ function loadCsvSizedDotsExample() {
     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";
 }
 
 
 function loadJsonExample() {
-    var json = "";
-    // TODO: get json working
-
-    // headers
-    json +=
-        '{\n' +
-        '  "cols":[\n' +
-        '    {"id":"x",\n' +
-        '     "label":"x",\n' +
-        '     "type":"number"},\n' +
-        '    {"id":"y",\n' +
-        '     "label":"y",\n' +
-        '     "type":"number"},\n' +
-        '    {"id":"value",\n' +
-        '     "label":"value",\n' +
-        '     "type":"number"}\n' +
-        '  ],\n' +
-        '  "rows":[';
-
-    // create some nice looking data with sin/cos
-    var steps = 20;
-    var axisMax = 314;
-    var first = true;
-    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;
-            if (first) {
-                json += '\n';
-                first = false;
-            }
-            else {
-                json += ',\n';
-            }
-
-            json += '    {"c":[{"v":' + round(x, 2) + '}, {"v":' + round(y, 2) + '}, {"v":' + round(value, 2) + '}]}';
-        }
-    }
-
-    // end of the table
-    json +=
-        '\n' +
-        '  ]\n' +
-        '}\n';
-
-    document.getElementById("jsonTextarea").innerHTML = json;
-
-    document.getElementById("verticalRatio").value = "0.5";
 }
 
 
 function loadJavascriptExample() {
-    var js =
-        'data = new google.visualization.DataTable();\n' +
-        'data.addColumn("number", "x");\n' +
-        'data.addColumn("number", "y");\n' +
-        'data.addColumn("number", "value");\n' +
-        '\n';
-
-    js += '// insert data\n';
-
-    var axisStep = 7;
-    for (var x = -100; x < 100; x += axisStep) {
-        for (var y = -100; y < 300; y += axisStep) {
-            //var value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50;
-
-            var d = Math.sqrt(Math.pow(x/100, 2) + Math.pow(y/100, 2));
-            var value = 50 * Math.exp(-5 * d / 10) * Math.sin(d*5)
-
-            js += 'data.addRow([' + round(x, 2) + ', ' + round(y,2) + ', ' + round(value, 2) + ']);\n';
-        }
-    }
-
-    document.getElementById("javascriptTextarea").innerHTML = js;
-
-    document.getElementById("verticalRatio").value = "0.5";
 }
 
 function loadJavascriptFunctionExample() {
-    var js =
-        'data = new google.visualization.DataTable();\n' +
-        'data.addColumn("number", "x");\n' +
-        'data.addColumn("number", "y");\n' +
-        'data.addColumn("number", "value");\n' +
-        '\n' +
-        '// create some nice looking data with sin/cos\n' +
-        'var steps = 50;\n' +
-        'var axisMax = 314;\n' +
-        'axisStep = axisMax / steps;\n' +
-        'for (var x = 0; x < axisMax; x+=axisStep) {\n' +
-        '  for (var y = 0; y < axisMax; y+=axisStep) {\n' +
-        '    var value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50;\n' +
-        '    data.addRow([x, y, value]);\n' +
-        '  }\n' +
-        '}';
-
-    document.getElementById("javascriptTextarea").innerHTML = js;
-
-    document.getElementById("verticalRatio").value = "0.5";
 }
 
 function loadGooglespreadsheetExample() {
-    var url =
-        "https://spreadsheets.google.com/a/almende.org/ccc?key=tJ6gaeq2Ldy82VVMr5dPQoA&hl=en#gid=0";
 
-    document.getElementById("googlespreadsheetText").value = url;
-
-    document.getElementById("verticalRatio").value = "0.5";
 }
 
 
 function loadDatasourceExample() {
-    var url = "datasource.php";
-
-    document.getElementById("datasourceText").value = url;
-
-    document.getElementById("verticalRatio").value = "0.5";
 }
 
 
@@ -372,11 +288,7 @@ function loadDatasourceExample() {
  * @return {string} datatype
  */
 function getDataType() {
-    if (document.getElementById("datatypeCsv").checked) return "csv";
-    if (document.getElementById("datatypeJson").checked) return "json";
-    if (document.getElementById("datatypeJavascript").checked) return "javascript";
-    if (document.getElementById("datatypeDatasource").checked) return "datasource";
-    if (document.getElementById("datatypeGooglespreadsheet").checked) return "googlespreadsheet";
+   return "csv";
 }
 
 
@@ -390,48 +302,29 @@ function getDataCsv() {
     // parse the csv content
     var csvArray = csv2array(csv);
 
-    // the first line of the csv file contains the column names
-    var data = new google.visualization.DataTable();
-    var columnTypes = [];
-    var row = 0;
-    for (var col = 0; col < csvArray[row].length; col++) {
-        var label = csvArray[row][col];
-        var columnType = "number";
-
-        if (col >= 4) {
-            if (csvArray.length > 1) {
-                var value = csvArray[1][3];
-                if (value) {
-                    columnType = typeof(value);
-                }
-            }
-            else {
-                columnType = "string";
-            }
-        }
-        columnTypes[col] = columnType;
-
-        data.addColumn(columnType, label);
-    }
+    var data = new vis.DataSet({});
 
     // read all data
-    var colCount = data.getNumberOfColumns();
     for (var row = 1; row < csvArray.length; row++) {
-        var rowData = csvArray[row];
-        if (rowData.length == colCount) {
-            data.addRow();
-
-            for (var col = 0; col < csvArray[row].length; col++) {
-                if (columnTypes[col] == 'number') {
-                    var value = parseFloat(csvArray[row][col]);
-                }
-                else {
-                    var value = trim(csvArray[row][col]);
-                }
-                //alert(value)
-                data.setValue(row-1, col, value);
-            }
-        }
+      if (csvArray[row].length == 4) {
+        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 == 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;
@@ -480,9 +373,6 @@ function getDataJavascript() {
  * @return {Google DataTable}
  */
 function getDataDatasource() {
-    // TODO
-
-    throw "Sorry, datasource is not yet implemented...";
 }
 
 /**
@@ -500,6 +390,11 @@ function getOptions() {
         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),
 
@@ -528,22 +423,7 @@ function getOptions() {
  * Redraw the graph with the entered data and options
  */
 function draw() {
-    try {
-        var datatype = getDataType();
-
-        switch (datatype) {
-            case "csv":               return drawCsv();
-            case "json":              return drawJson();
-            case "javascript":        return drawJavascript();
-            case "googlespreadsheet": return drawGooglespreadsheet();
-            case "datasource":        return drawDatasource();
-            default:                  throw "Error: no data type specified";
-        }
-    }
-    catch (error) {
-        document.getElementById('graph').innerHTML =
-            "<span style='color: red; font-weight: bold;'>" + error + "</span>";
-    }
+    return drawCsv();
 }
 
 function drawCsv() {

src/graph3d/doc/.gitignore

@@ -1 +0,0 @@
-jsdoc

src/graph3d/doc/example.html

@@ -1,68 +0,0 @@
-<!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="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-
-    <script type="text/javascript">
-        var data = null;
-        var graph = null;
-
-        google.load("visualization", "1");
-
-        // Set callback to run when API is loaded
-        google.setOnLoadCallback(drawVisualization);
-
-        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 google.visualization.DataTable();
-            data.addColumn('number', 'x');
-            data.addColumn('number', 'y');
-            data.addColumn('number', 'value');
-
-            // create some nice looking data with sin/cos
-            var steps = 25;  // number of datapoints will be steps*steps
-            var axisMax = 314;
-            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.addRow([x, y, value]);
-                }
-            }
-
-            // specify options
-            options = {width:  "400px",
-                height: "400px",
-                style: "surface",
-                showPerspective: true,
-                showGrid: true,
-                showShadow: false,
-                keepAspectRatio: true,
-                verticalRatio: 0.5
-            };
-
-            // Instantiate our graph object.
-            graph = new links.Graph3d(document.getElementById('mygraph'));
-
-            // Draw our graph with the created data and options
-            graph.draw(data, options);
-        }
-    </script>
-</head>
-
-<body>
-<div id="mygraph"></div>
-</body>
-</html>

src/graph3d/graph3d.js

@@ -88,6 +88,12 @@ links.Graph3d = function (container) {
   this.defaultXCenter = "55%";
   this.defaultYCenter = "50%";
 
+  this.xLabel = "x";
+  this.yLabel = "y";
+  this.zLabel = "z";
+  this.filterLabel = "time";
+  this.legendLabel = "value";
+
   this.style = links.Graph3d.STYLE.DOT;
   this.showPerspective = true;
   this.showGrid = true;
@@ -166,9 +172,9 @@ links.Graph3d.Camera = function () {
 
 /**
  * Set the location (origin) of the arm
- * @param {number} x  Normalized value of x
- * @param {number} y  Normalized value of y
- * @param {number} z  Normalized value of z
+ * @param {Number} x  Normalized value of x
+ * @param {Number} y  Normalized value of y
+ * @param {Number} z  Normalized value of z
  */
 links.Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
   this.armLocation.x = x;
@@ -180,9 +186,9 @@ links.Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
 
 /**
  * Set the rotation of the camera arm
- * @param {number} horizontal   The horizontal rotation, between 0 and 2*PI.
+ * @param {Number} horizontal   The horizontal rotation, between 0 and 2*PI.
  *                Optional, can be left undefined.
- * @param {number} vertical   The vertical rotation, between 0 and 0.5*PI
+ * @param {Number} vertical   The vertical rotation, between 0 and 0.5*PI
  *                if vertical=0.5*PI, the graph is shown from the
  *                top. Optional, can be left undefined.
  */
@@ -216,7 +222,7 @@ links.Graph3d.Camera.prototype.getArmRotation = function() {
 
 /**
  * Set the (normalized) length of the camera arm.
- * @param {number} length A length between 0.71 and 5.0
+ * @param {Number} length A length between 0.71 and 5.0
  */
 links.Graph3d.Camera.prototype.setArmLength = function(length) {
   if (length === undefined)
@@ -235,7 +241,7 @@ links.Graph3d.Camera.prototype.setArmLength = function(length) {
 
 /**
  * Retrieve the arm length
- * @return {number} length
+ * @return {Number} length
  */
 links.Graph3d.Camera.prototype.getArmLength = function() {
   return this.armLength;
@@ -406,6 +412,12 @@ links.Graph3d.prototype.draw = function(data, options) {
     if (options.xCenter !== undefined)     this.defaultXCenter = options.xCenter;
     if (options.yCenter !== undefined)     this.defaultYCenter = options.yCenter;
 
+    if (options.filterLabel !== undefined)     this.filterLabel = options.filterLabel;
+    if (options.legendLabel !== undefined)     this.legendLabel = options.legendLabel;
+    if (options.xLabel !== undefined)     this.xLabel = options.xLabel;
+    if (options.yLabel !== undefined)     this.yLabel = options.yLabel;
+    if (options.zLabel !== undefined)     this.zLabel = options.zLabel;
+
     if (options.style !== undefined) {
       var styleNumber = this._getStyleNumber(options.style);
       if (styleNumber !== -1) {
@@ -518,7 +530,7 @@ links.Graph3d.STYLE = {
 /**
  * Retrieve the style index from given styleName
  * @param {string} styleName  Style name such as "dot", "grid", "dot-line"
- * @return {number} styleNumber Enumeration value representing the style, or -1
+ * @return {Number} styleNumber Enumeration value representing the style, or -1
  *                when not found
  */
 links.Graph3d.prototype._getStyleNumber = function(styleName) {
@@ -540,8 +552,8 @@ links.Graph3d.prototype._getStyleNumber = function(styleName) {
 
 /**
  * Determine the indexes of the data columns, based on the given style and data
- * @param {google.visualization.DataTable} data
- * @param {number}  style
+ * @param {DataSet} data
+ * @param {Number}  style
  */
 links.Graph3d.prototype._determineColumnIndexes = function(data, style) {
   if (this.style === links.Graph3d.STYLE.DOT ||
@@ -618,9 +630,9 @@ links.Graph3d.prototype.getColumnRange = function(data,column) {
 /**
  * Initialize the data from the data table. Calculate minimum and maximum values
  * and column index values
- * @param {google.visualization.DataTable} data   The data containing the events
+ * @param {DataSet} data   The data containing the events
  *                        for the Graph.
- * @param {number}     style   Style number
+ * @param {Number}     style   Style Number
  */
 links.Graph3d.prototype._dataInitialize = function (rawData, style) {
 
@@ -649,15 +661,13 @@ links.Graph3d.prototype._dataInitialize = function (rawData, style) {
   this.colZ = 'z';
   this.colValue = 'style';
   this.colFilter = 'filter';
-//
+
+
+
   // check if a filter column is provided
   if (data[0].hasOwnProperty("filter")) {
     if (this.dataFilter === undefined) {
-      this.dataFilter = new links.Filter(data, this.colFilter, this);
-//      this.dataFilter = new DataView(rawData, {filter: function (item) {return (item.value);}})
-//
-
-
+      this.dataFilter = new links.Filter(rawData, this.colFilter, this);
       var me = this;
       this.dataFilter.setOnLoadCallback(function() {me.redraw();});
     }
@@ -729,7 +739,7 @@ links.Graph3d.prototype._dataInitialize = function (rawData, style) {
 
 /**
  * Filter the data based on the current filter
- * @param {google.visualization.DataTable} data
+ * @param {DataSet} data
  * @return {Array} dataPoints   Array with point objects which can be drawn on screen
  */
 links.Graph3d.prototype._getDataPoints = function (data) {
@@ -984,14 +994,14 @@ links.Graph3d.prototype._resizeCenter = function() {
  * Set the rotation and distance of the camera
  * @param {Object} pos   An object with the camera position. The object
  *             contains three parameters:
- *             - horizontal {number}
+ *             - horizontal {Number}
  *             The horizontal rotation, between 0 and 2*PI.
  *             Optional, can be left undefined.
- *             - vertical {number}
+ *             - vertical {Number}
  *             The vertical rotation, between 0 and 0.5*PI
  *             if vertical=0.5*PI, the graph is shown from the
  *             top. Optional, can be left undefined.
- *             - distance {number}
+ *             - distance {Number}
  *             The (normalized) distance of the camera to the
  *             center of the graph, a value between 0.71 and 5.0.
  *             Optional, can be left undefined.
@@ -1049,7 +1059,7 @@ links.Graph3d.prototype._readData = function(data) {
 /**
  * Redraw the Graph. This needs to be executed after the start and/or
  * end time are changed, or when data is added or removed dynamically.
- * @param {google.visualization.DataTable} data  Optional, new data table
+ * @param {DataSet} data  Optional, new data table
  */
 links.Graph3d.prototype.redraw = function(data) {
   // load the data if needed
@@ -1195,7 +1205,7 @@ links.Graph3d.prototype._redrawLegend = function() {
 
     ctx.textAlign = "right";
     ctx.textBaseline = "top";
-    var label = this.dataTable.getColumnLabel(this.colValue);
+    var label = this.legendLabel;
     ctx.fillText(label, right, bottom + this.margin);
   }
 };
@@ -1479,7 +1489,7 @@ links.Graph3d.prototype._redrawAxis = function() {
   ctx.stroke();
 
   // draw x-label
-  var xLabel = this.colX;
+  var xLabel = this.xLabel;
   if (xLabel.length > 0) {
     yOffset = 0.1 / this.scale.y;
     xText = (this.xMin + this.xMax) / 2;
@@ -1502,7 +1512,7 @@ links.Graph3d.prototype._redrawAxis = function() {
   }
 
   // draw y-label
-  var yLabel = this.colY;
+  var yLabel = this.yLabel;
   if (yLabel.length > 0) {
     xOffset = 0.1 / this.scale.x;
     xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
@@ -1525,7 +1535,7 @@ links.Graph3d.prototype._redrawAxis = function() {
   }
 
   // draw z-label
-  var zLabel = this.colZ;
+  var zLabel = this.zLabel;
   if (zLabel.length > 0) {
     offset = 30;  // pixels.  // TODO: relate to the max width of the values on the z axis?
     xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
@@ -1541,9 +1551,9 @@ links.Graph3d.prototype._redrawAxis = function() {
 
 /**
  * Calculate the color based on the given value.
- * @param {number} H   Hue, a value be between 0 and 360
- * @param {number} S   Saturation, a value between 0 and 1
- * @param {number} V   Value, a value between 0 and 1
+ * @param {Number} H   Hue, a value be between 0 and 360
+ * @param {Number} S   Saturation, a value between 0 and 1
+ * @param {Number} V   Value, a value between 0 and 1
  */
 links.Graph3d.prototype._hsv2rgb = function(H, S, V) {
   var R, G, B, C, Hi, X;
@@ -2246,8 +2256,8 @@ links.Graph3d.prototype._insideTriangle = function (point, triangle) {
 
 /**
  * Find a data point close to given screen position (x, y)
- * @param {number} x
- * @param {number} y
+ * @param {Number} x
+ * @param {Number} y
  * @return {Object | null} The closest data point or null if not close to any data point
  * @private
  */
@@ -2503,8 +2513,8 @@ links.Point2d = function (x, y) {
 /**
  * @class Filter
  *
- * @param {google.visualization.DataTable} data The google data table
- * @param {number} column             The index of the column to be filtered
+ * @param {DataSet} data The google data table
+ * @param {Number}  column             The index of the column to be filtered
  * @param {links.Graph} graph           The graph
  */
 links.Filter = function (data, column, graph) {
@@ -2516,8 +2526,9 @@ links.Filter = function (data, column, graph) {
   this.value = undefined;
 
   // read all distinct values and select the first one
-  this.values = graph.getDistinctValues(data, this.column);
-  if (this.values.length) {
+  this.values = graph.getDistinctValues(data.get(), this.column);
+
+  if (this.values.length > 0) {
     this.selectValue(0);
   }
 
@@ -2548,7 +2559,7 @@ links.Filter.prototype.isLoaded = function() {
 
 /**
  * Return the loaded progress
- * @return {number} percentage between 0 and 100
+ * @return {Number} percentage between 0 and 100
  */
 links.Filter.prototype.getLoadedProgress = function() {
   var len = this.values.length;
@@ -2567,13 +2578,13 @@ links.Filter.prototype.getLoadedProgress = function() {
  * @return {string} label
  */
 links.Filter.prototype.getLabel = function() {
-  return this.data.getColumnLabel(this.column);
+  return this.graph.filterLabel;
 };
 
 
 /**
  * Return the columnIndex of the filter
- * @return {number} columnIndex
+ * @return {Number} columnIndex
  */
 links.Filter.prototype.getColumn = function() {
   return this.column;
@@ -2600,7 +2611,7 @@ links.Filter.prototype.getValues = function() {
 
 /**
  * Retrieve one value of the filter
- * @param {number}  index
+ * @param {Number}  index
  * @return {*} value
  */
 links.Filter.prototype.getValue = function(index) {
@@ -2613,7 +2624,7 @@ links.Filter.prototype.getValue = function(index) {
 
 /**
  * Retrieve the (filtered) dataPoints for the currently selected filter index
- * @param {number} index (optional)
+ * @param {Number} index (optional)
  * @return {Array} dataPoints
  */
 links.Filter.prototype._getDataPoints = function(index) {
@@ -2628,14 +2639,11 @@ links.Filter.prototype._getDataPoints = function(index) {
     dataPoints = this.dataPoints[index];
   }
   else {
-    var dataView = new google.visualization.DataView(this.data);
-
     var f = {};
     f.column = this.column;
     f.value = this.values[index];
-    var filteredRows = this.data.getFilteredRows([f]);
-    dataView.setRows(filteredRows);
 
+    var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
     dataPoints = this.graph._getDataPoints(dataView);
 
     this.dataPoints[index] = dataPoints;
@@ -2657,7 +2665,7 @@ links.Filter.prototype.setOnLoadCallback = function(callback) {
 /**
  * Add a value to the list with available values for this filter
  * No double entries will be created.
- * @param {number} index
+ * @param {Number} index
  */
 links.Filter.prototype.selectValue = function(index) {
   if (index >= this.values.length)
@@ -2716,7 +2724,7 @@ links.Filter.prototype.loadInBackground = function(index) {
 
 /**
  * @prototype links.StepNumber
- * The class StepNumber is an iterator for numbers. You provide a start and end
+ * The class StepNumber is an iterator for Numbers. You provide a start and end
  * value, and a best step size. StepNumber itself rounds to fixed values and
  * a finds the step that best fits the provided step.
  *
@@ -2733,9 +2741,9 @@ links.Filter.prototype.loadInBackground = function(index) {
  *
  * Version: 1.0
  *
- * @param {number} start     The start value
- * @param {number} end     The end value
- * @param {number} step    Optional. Step size. Must be a positive value.
+ * @param {Number} start     The start value
+ * @param {Number} end     The end value
+ * @param {Number} step    Optional. Step size. Must be a positive value.
  * @param {boolean} prettyStep Optional. If true, the step size is rounded
  *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
  */
@@ -2754,9 +2762,9 @@ links.StepNumber = function (start, end, step, prettyStep) {
 /**
  * Set a new range: start, end and step.
  *
- * @param {number} start     The start value
- * @param {number} end     The end value
- * @param {number} step    Optional. Step size. Must be a positive value.
+ * @param {Number} start     The start value
+ * @param {Number} end     The end value
+ * @param {Number} step    Optional. Step size. Must be a positive value.
  * @param {boolean} prettyStep Optional. If true, the step size is rounded
  *               To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
  */
@@ -2769,7 +2777,7 @@ links.StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
 
 /**
  * Set a new step size
- * @param {number} step    New step size. Must be a positive value
+ * @param {Number} step    New step size. Must be a positive value
  * @param {boolean} prettyStep Optional. If true, the provided step is rounded
  *               to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
  */
@@ -2789,9 +2797,9 @@ links.StepNumber.prototype.setStep = function(step, prettyStep) {
 /**
  * Calculate a nice step size, closest to the desired step size.
  * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
- * integer number. For example 1, 2, 5, 10, 20, 50, etc...
- * @param {number}  step  Desired step size
- * @return {number}     Nice step size
+ * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
+ * @param {Number}  step  Desired step size
+ * @return {Number}     Nice step size
  */
 links.StepNumber.calculatePrettyStep = function (step) {
   var log10 = function (x) {return Math.log(x) / Math.LN10;};
@@ -2816,7 +2824,7 @@ links.StepNumber.calculatePrettyStep = function (step) {
 
 /**
  * returns the current value of the step
- * @return {number} current value
+ * @return {Number} current value
  */
 links.StepNumber.prototype.getCurrent = function () {
   return parseFloat(this._current.toPrecision(this.precision));
@@ -2824,7 +2832,7 @@ links.StepNumber.prototype.getCurrent = function () {
 
 /**
  * returns the current step size
- * @return {number} current step size
+ * @return {Number} current step size
  */
 links.StepNumber.prototype.getStep = function () {
   return this._step;
@@ -3025,7 +3033,7 @@ links.Slider.prototype.setOnChangeCallback = function(callback) {
 
 /**
  * Set the interval for playing the list
- * @param {number} interval   The interval in milliseconds
+ * @param {Number} interval   The interval in milliseconds
  */
 links.Slider.prototype.setPlayInterval = function(interval) {
   this.playInterval = interval;
@@ -3033,7 +3041,7 @@ links.Slider.prototype.setPlayInterval = function(interval) {
 
 /**
  * Retrieve the current play interval
- * @return {number} interval   The interval in milliseconds
+ * @return {Number} interval   The interval in milliseconds
  */
 links.Slider.prototype.getPlayInterval = function(interval) {
   return this.playInterval;
@@ -3094,7 +3102,7 @@ links.Slider.prototype.setValues = function(values) {
 
 /**
  * Select a value by its index
- * @param {number} index
+ * @param {Number} index
  */
 links.Slider.prototype.setIndex = function(index) {
   if (index < this.values.length) {
@@ -3110,7 +3118,7 @@ links.Slider.prototype.setIndex = function(index) {
 
 /**
  * retrieve the index of the currently selected vaue
- * @return {number} index
+ * @return {Number} index
  */
 links.Slider.prototype.getIndex = function() {
   return this.index;
@@ -3281,7 +3289,7 @@ links.preventDefault = function (event) {
 /**
  * Retrieve the absolute left value of a DOM element
  * @param {Element} elem  A dom element, for example a div
- * @return {number} left    The absolute left position of this element
+ * @return {Number} left    The absolute left position of this element
  *                in the browser page.
  */
 links.getAbsoluteLeft = function(elem) {
@@ -3297,7 +3305,7 @@ links.getAbsoluteLeft = function(elem) {
 /**
  * Retrieve the absolute top value of a DOM element
  * @param {Element} elem  A dom element, for example a div
- * @return {number} top     The absolute top position of this element
+ * @return {Number} top     The absolute top position of this element
  *                in the browser page.
  */
 links.getAbsoluteTop = function(elem) {
@@ -3313,7 +3321,7 @@ links.getAbsoluteTop = function(elem) {
 /**
  * Get the horizontal mouse position from a mouse event
  * @param {Event} event
- * @return {number} mouse x
+ * @return {Number} mouse x
  */
 links.getMouseX = function(event) {
   if ('clientX' in event) return event.clientX;
@@ -3323,7 +3331,7 @@ links.getMouseX = function(event) {
 /**
  * Get the vertical mouse position from a mouse event
  * @param {Event} event
- * @return {number} mouse y
+ * @return {Number} mouse y
  */
 links.getMouseY = function(event) {
   if ('clientY' in event) return event.clientY;

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,3 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

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

@@ -1,2 +0,0 @@
-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"])

src/graph3d/playground/prettify/prettify.css

@@ -1 +0,0 @@
-.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}}

src/graph3d/playground/prettify/prettify.js

@@ -1,33 +0,0 @@
-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}})()

src/graph3d/tests/example01_basis.html

@@ -1,75 +0,0 @@
-<!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="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-    
-    <script type="text/javascript">
-      var data = null;
-      var graph = null;
-    
-      google.load("visualization", "1");
-      
-      // Set callback to run when API is loaded
-      google.setOnLoadCallback(drawVisualization); 
-
-      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 google.visualization.DataTable();
-        data.addColumn('number', 'x');
-        data.addColumn('number', 'y');
-        data.addColumn('number', 'z');
-
-        // create some nice looking data with sin/cos
-        var steps = 50;  // number of datapoints will be steps*steps
-        var axisMax = 314;
-        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.addRow([x, y, value]);
-          }
-        }
-
-        // specify options
-        options = {width:  "600px", 
-                   height: "600px",
-                   style: "surface",
-                   
-                   xStep: 20,
-                   yStep: 20,
-                   zStep: 10,
-                   
-                   showPerspective: false,
-                   showGrid: true,
-                   showShadow: false,
-                   keepAspectRatio: true,
-                   verticalRatio: 0.5,
-                   };
-
-        // Instantiate our graph object.
-        graph = new links.Graph3d(document.getElementById('mygraph'));
-
-        // Draw our graph with the created data and options 
-        graph.draw(data, options);
-      }
-   </script>
-  </head>
-
-  <body>
-    <div id="mygraph"></div>
-
-    <div id="info"></div>
-  </body>
-</html>

src/graph3d/tests/example04_animate.html

@@ -1,77 +0,0 @@
-<!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>
-      body {font: 10pt arial;}
-    </style>
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-    
-    <script type="text/javascript">
-      var data = null;
-      var graph = null;
-    
-      google.load("visualization", "1");
-      
-      // Set callback to run when API is loaded
-      google.setOnLoadCallback(drawVisualization); 
-
-      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 google.visualization.DataTable();
-        data.addColumn('number', 'x');
-        data.addColumn('number', 'y');
-        data.addColumn('number', 'value');
-        data.addColumn('number', 'Time');
-
-        // create some nice looking data with sin/cos
-        // number of datapoints will be steps*steps*tMax
-        var steps = 25;  
-        var axisMax = 314;
-        var tMax = 31;
-        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.addRow([x, y, value, t]);
-            }
-          }
-        }
-
-        // specify options
-        options = {width:  "600px", 
-                   height: "600px",
-                   style: "dot-line",
-                   showPerspective: true,
-                   showGrid: true,
-                   showShadow: false,
-                   keepAspectRatio: true,
-                   verticalRatio: 0.5,
-                   animationInterval: 100, // milliseconds
-                   animationPreload: true
-                   };
-
-        // Instantiate our graph object.
-        graph = new links.Graph3d(document.getElementById('mygraph'));
-
-        // Draw our graph with the created data and options 
-        graph.draw(data, options);
-      }
-   </script>
-  </head>
-
-  <body>
-    <div id="mygraph"></div>
-
-    <div id="info"></div>
-  </body>
-</html>

src/graph3d/tests/sebleedelisle/canvas3d2.html

@@ -1,99 +0,0 @@
-<html><head> 
-<title>Simple 3D on HTML5 canvas</title> 
- 
-<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
-		
-<script type="text/javascript"> 
- 
-function setup()
-{
- 
- 
-var fov = 250;
- 
-var SCREEN_WIDTH = 600; 
-var SCREEN_HEIGHT = 300; 
- 
-var HALF_WIDTH = SCREEN_WIDTH/2; 
-var HALF_HEIGHT = SCREEN_HEIGHT/2; 
- 
-var numPoints = 1000; 
-
- 
-function draw3Din2D(point3d)
-{  
-	x3d = point3d[0];
-	y3d = point3d[1]; 
-	z3d = point3d[2]; 
-	var scale = fov/(fov+z3d); 
-	var x2d = (x3d * scale) + HALF_WIDTH;	
-	var y2d = (y3d * scale)  + HALF_HEIGHT;
-	
-	
-	c.lineWidth= scale; 
-	c.strokeStyle = "rgb(255,255,255)"; 	
-	c.beginPath();
-	c.moveTo(x2d,y2d); 
-	c.lineTo(x2d+scale,y2d); 
-	c.stroke(); 
-	
-}
- 
-var canvas = document.getElementById('Canvas2D');
-var c = canvas.getContext('2d');
- 
-var points = [];
- 
-function initPoints()
-{
-	for (i=0; i<numPoints; i++)
-	{
-		point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
-		points.push(point); 
-	}
- 
-}
- 
-function render() 
-{
- 
-	c.fillStyle="rgb(0,0,0)";
-  	c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
-  	
-	for (i=0; i<numPoints; i++)
-	{
-		point3d = points[i]; 
-		
-		z3d = point3d[2]; 
-		z3d-=4; 
-		if(z3d<-fov) z3d +=400; 
-		point3d[2] = z3d; 
-		
-		
-		draw3Din2D(point3d); 
- 
-	}
-}
- 
-initPoints();
- 
-var loop = setInterval(function(){render();}, 50);
- 
-}
- 
-</script> 
-<style type="text/css">      
-  body{background:#000;color:#fff;font-family:arial;font-size:90%;}
-  .wrap{width:640px; margin:0 auto;}
-  canvas{border: 1px solid #0f0;}
-  a{color:#0f0;}
-</style> 
-</head><body onload="setup();"> 
-<div class="wrap"> 
-  <canvas id="Canvas2D" width="600" height="300">Internet Explorer Not Supported :(</canvas> 
-  <h1>Simple 3D HTML5 Canvas</h1> 
-  <p>By <a href="http://sebleedelisle.com">Seb Lee-Delisle</a></p> 
-	<p>Simple 3D on HTML5 Canvas, as demoed at BarCampBrighton4. More info at <a href="http://www.sebleedelisle.com/2009/09/simple-3d-in-html5-canvas">sebleedelisle.com</a>. </p> 
-</div> 
-
-</body></html>

src/graph3d/tests/sebleedelisle/canvas3d3.html

@@ -1,111 +0,0 @@
-<html><head> 
-<title>Simple 3D on HTML5 canvas</title> 
- 
-<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
-		
-<script type="text/javascript"> 
- 
-function setup()
-{
- 
- 
-var fov = 250;
- 
-var SCREEN_WIDTH = 600; 
-var SCREEN_HEIGHT = 300; 
- 
-var HALF_WIDTH = SCREEN_WIDTH/2; 
-var HALF_HEIGHT = SCREEN_HEIGHT/2; 
- 
-var numPoints = 200; 
- 
- 
-function draw3Din2D(point3d)
-{  
-	x3d = point3d[0];
-	y3d = point3d[1]; 
-	z3d = point3d[2]; 
-	var scale = fov/(fov+z3d); 
-	var x2d = (x3d * scale) + HALF_WIDTH;	
-	var y2d = (y3d * scale)  + HALF_HEIGHT;
-	
-	
-	c.lineWidth= scale; 
-	c.strokeStyle = "rgb(255,255,255)"; 	
-	c.beginPath();
-	c.moveTo(x2d,y2d); 
-	c.lineTo(x2d+scale,y2d); 
-	c.stroke(); 
-	
-}
- 
-var canvas = document.getElementById('Canvas2D');
-var c = canvas.getContext('2d');
- 
-var points = [];
- 
-function initPoints()
-{
-	for (i=0; i<numPoints; i++)
-	{
-		point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
-		points.push(point); 
-	}
- 
-}
- 
-function render() 
-{
- 
-	c.fillStyle="rgb(0,0,0)";
-  	c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
-  	
-	for (i=0; i<numPoints; i++)
-	{
-		point3d = points[i]; 
-		rotatePointAroundY(point3d, 0.04); 	
-		draw3Din2D(point3d); 
- 
-	}
-}
- 
-function rotatePointAroundY(point3d, angle)
-{
-	x = point3d[0]; 
-	z = point3d[2]; 
-	
-	cosRY = Math.cos(angle);
-	sinRY = Math.sin(angle);
-	tempz = z; 
-	tempx = x; 
- 
-	
-	x= (tempx*cosRY)+(tempz*sinRY);
-	z= (tempx*-sinRY)+(tempz*cosRY);
-	point3d[0] = x; 
-	point3d[2] = z; 
-}
- 
- 
-initPoints();
- 
-var loop = setInterval(function(){render();}, 50);
- 
-}
- 
-</script> 
-<style type="text/css">      
-  body{background:#000;color:#fff;font-family:arial;font-size:90%;}
-  .wrap{width:640px; margin:0 auto;}
-  canvas{border: 1px solid #0f0;}
-  a{color:#0f0;}
-</style> 
-</head><body onload="setup();"> 
-<div class="wrap"> 
-  <canvas id="Canvas2D" width="600" height="300">Internet Explorer Not Supported :(</canvas> 
-  <h1>Simple 3D HTML5 Canvas</h1> 
-  <p>By <a href="http://sebleedelisle.com">Seb Lee-Delisle</a></p> 
-	<p>Simple 3D on HTML5 Canvas, as demoed at BarCampBrighton4. More info at <a href="http://www.sebleedelisle.com/2009/09/simple-3d-in-html5-canvas">sebleedelisle.com</a>. </p> 
-</div> 
-
-</body></html>

src/graph3d/tests/sebleedelisle/canvas3d4.html

@@ -1,130 +0,0 @@
-
-<html><head> 
-<title>Simple 3D on HTML5 canvas</title> 
- 
-<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
-<script type="text/javascript" src="processing.js"></script> 
-		
-<script type="text/javascript"> 
- 
-function setup()
-{
- 
- 
-var fov = 250;
- 
-var SCREEN_WIDTH = 600; 
-var SCREEN_HEIGHT = 300; 
- 
-var HALF_WIDTH = SCREEN_WIDTH/2; 
-var HALF_HEIGHT = SCREEN_HEIGHT/2; 
- 
-var numPoints = 200; 
- 
-var mouseX = 0; 
-var mouseY = -200; 
-
-function draw3Din2D(point3d)
-{  
-	x3d = point3d[0];
-	y3d = point3d[1]; 
-	z3d = point3d[2]; 
-	var scale = fov/(fov+z3d); 
-	var x2d = (x3d * scale) + HALF_WIDTH;	
-	var y2d = (y3d * scale)  + HALF_HEIGHT;
-	
-	c.lineWidth= scale; 
-	c.strokeStyle = "rgb(255,255,255)"; 	
-	c.beginPath();
-	c.moveTo(x2d,y2d); 
-	c.lineTo(x2d+scale,y2d); 
-	c.stroke();
-}
-
-var canvas = document.getElementById('Canvas2D');
-var c = canvas.getContext('2d');
- 
-document.onmousemove = updateMouse;
-//canvas.addEventListener('mousemove', updateMouse, false);
- 
-var points = [];
- 
-function initPoints()
-{
-	for (i=0; i<numPoints; i++)
-	{
-		point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
-		points.push(point); 
-	}
- 
-}
- 
-function render() 
-{
- 
-	c.fillStyle="rgb(0,0,0)";
-  	c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);
-  	
-	for (i=0; i<numPoints; i++)
-	{
-		point3d = points[i]; 
-		rotatePointAroundY(point3d, mouseX*-0.0003); 
-		point3d[2] += (mouseY*0.08); 	
-		
-		
-		if(point3d[0]<-300) point3d[0] = 300; 
-		else if(point3d[0]>300) point3d[0] = -300; 
-		if(point3d[2]<-fov) point3d[2] = fov; 
-		else if(point3d[2]>249) point3d[2] = -249;
-		
-		draw3Din2D(point3d); 
- 
-	}
-}
- 
-function rotatePointAroundY(point3d, angle)
-{
-	x = point3d[0]; 
-	z = point3d[2]+fov; 
-	
-	cosRY = Math.cos(angle);
-	sinRY = Math.sin(angle);
-	tempz = z; 
-	tempx = x; 
- 
-	
-	x= (tempx*cosRY)+(tempz*sinRY);
-	z= (tempx*-sinRY)+(tempz*cosRY);
-	point3d[0] = x; 
-	point3d[2] = z-fov; 
-}
- 
-function updateMouse(e) 
-{
-	//alert(c+" "+c.offsetLeft); 
-	mouseX = e.pageX - canvas.offsetLeft - HALF_WIDTH; 
-	mouseY = e.pageY - canvas.offsetTop - HALF_HEIGHT; ; 
-}
- 
-initPoints();
- 
-var loop = setInterval(function(){render();}, 50);
- 
-}
- 
-</script> 
-<style type="text/css">      
-  body{background:#000;color:#fff;font-family:arial;font-size:90%;}
-  .wrap{width:640px; margin:0 auto;}
-  canvas{border: 1px solid #0f0;}
-  a{color:#0f0;}
-</style> 
-</head><body onload="setup();"> 
-<div class="wrap"> 
-  <canvas id="Canvas2D" width="600" height="300">Internet Explorer Not Supported :(</canvas> 
-  <h1>Simple 3D HTML5 Canvas</h1> 
-  <p>By <a href="http://sebleedelisle.com">Seb Lee-Delisle</a></p> 
-	<p>Simple 3D on HTML5 Canvas, as demoed at BarCampBrighton4. Move the mouse to fly around!  More info at <a href="http://www.sebleedelisle.com/2009/09/simple-3d-in-html5-canvas">sebleedelisle.com</a>. </p> 
-</div> 
- 
-</body></html>

src/graph3d/tests/sebleedelisle/url.txt

@@ -1 +0,0 @@
-http://sebleedelisle.com/2009/09/simple-3d-in-html5-canvas/

src/graph3d/tests/test.html

@@ -1,83 +0,0 @@
-<!DOCTYPE HTML PUBLIC>
-<html>
-  <head>
-    <title>Graph 3D animation demo</title>
-
-    <style>
-      body {font: 10pt arial;}
-    </style>
-
-    <!-- For running IE9 mode, define the meta X-UA-Compatible, and specify DOCTYPE -->                                 
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-    <link rel="stylesheet" type="text/css" href="../graph3d.css">
-    
-    <script type="text/javascript">
-      var data = null;
-      var graph = null;
-    
-      google.load("visualization", "1");
-      
-      // Set callback to run when API is loaded
-      google.setOnLoadCallback(drawVisualization); 
-
-      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 google.visualization.DataTable();
-        data.addColumn('number', 'x');
-        data.addColumn('number', 'y');
-        data.addColumn('number', 'value');
-        data.addColumn('number', 'Time');
-
-        // create some nice looking data with sin/cos
-        // number of datapoints will be steps*steps*tMax
-        var steps = 25;  
-        var axisMax = 314;
-        var tMax = 31;
-        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.addRow([x, y, value, t]);
-            }
-          }
-        }
-
-        // specify options
-        options = {width:  "99%", 
-                   height: "99%",
-                   style: "surface",
-                   showPerspective: true,
-                   showGrid: true,
-                   showShadow: false,
-                   keepAspectRatio: true,
-                   yCenter: "45%",
-                   xCenter: "55%",
-                   verticalRatio: 0.5,
-                   animationInterval: 100, // milliseconds
-                   animationPreload: true
-                   };
-
-        // Instantiate our graph object.
-        graph = new links.Graph3d(document.getElementById('mygraph'));
-
-        // Draw our graph with the created data and options 
-        graph.draw(data, options);
-      }
-   </script>
-  </head>
-
-  <body onresize="graph.redraw();">
-    <div id="mygraph"></div>
-
-    <div id="info"></div>
-  </body>
-</html>

src/graph3d/tests/test_extreme_data.html

@@ -1,78 +0,0 @@
-<!DOCTYPE HTML PUBLIC>
-<html>
-  <head>
-    <title>Graph 3D demo</title>
-
-    <style>
-      body {font: 10pt arial;}
-    </style>
-
-    <!-- For running IE9 mode, define the meta X-UA-Compatible, and specify DOCTYPE -->                                 
-    <meta http-equiv="X-UA-Compatible" content="IE=9" />
-                                                                        
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-    <link rel="stylesheet" type="text/css" href="../graph3d.css">
-    
-    <script type="text/javascript">
-      var data = null;
-      var graph = null;
-    
-      google.load("visualization", "1");
-      
-      // Set callback to run when API is loaded
-      google.setOnLoadCallback(drawVisualization); 
-
-      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 google.visualization.DataTable();
-        data.addColumn('number', 'x');
-        data.addColumn('number', 'y');
-        data.addColumn('number', 'value');
-
-        // create some nice looking data with sin/cos
-        var steps = 20;  // number of datapoints will be steps*steps
-        var axisMax = 314;
-        axisStep = axisMax / steps;
-        for (var x = 0; x < axisMax; x+=axisStep) {
-          for (var y = 0; y < axisMax; y+=axisStep) {
-            var value = 0;
-            if ((x+y) == axisStep * steps)
-              value = 1;
-            if (y == axisStep * steps/2) 
-              value = -1;
-            data.addRow([x, y, value]);
-          }
-        }
-        
-        // specify options
-        options = {width:  "600px", 
-                   height: "600px",
-                   style: "surface",
-                   showPerspective: true,
-                   showGrid: true,
-                   showShadow: false,
-                   keepAspectRatio: true,
-                   verticalRatio: 1.0
-                   };
-
-        // Instantiate our graph object.
-        graph = new links.Graph3d(document.getElementById('mygraph'));
-
-        // Draw our graph with the created data and options 
-        graph.draw(data, options);
-      }
-   </script>
-  </head>
-
-  <body>
-    <div id="mygraph"></div>
-
-    <div id="info"></div>
-  </body>
-</html>

src/graph3d/tests/test_slider.html

@@ -1,43 +0,0 @@
-<html>
-  <head>
-    <title>Graph 3D demo</title>
-
-    <style>
-      body {font: 10pt arial;}
-    </style>
-
-    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="../graph3d.js"></script>
-    <link rel="stylesheet" type="text/css" href="../graph3d.css">
-    <!--[if IE]><script src="../excanvas.js"></script><![endif]-->
-    
-    <script type="text/javascript">
-      var filter;
-      
-      var load = function () {
-        var filterDiv = document.getElementById("filter");
-        
-        filter = new links.Slider(filterDiv, "400px");
-        
-        var values = new Array();
-        for (var i = 0; i < 100; i+=5) {
-          values.push(i);
-        }
-        
-        filter.setValues(values);
-        
-        function onchange () {
-          document.title = filter.get();
-        }
-        filter.setOnChangeCallback(onchange);
-        filter.setPlayInterval(200);
-      }
-   </script>
-  </head>
-
-  <body onload="load();">
-    <div id="filter"></div>
-
-    <div id="info"></div>
-  </body>
-</html>