added graph3d

10 years ago · 2df2298c9b
--- a/dist/vis.js
+++ b/dist/vis.js
@ -5530,16 +5530,14 @@ Linegraph.prototype.setData = function() {
        var dataset = this._extractData(datapoints);
        var data = dataset.data;

        console.log("height",data,datapoints, dataset);

        this.yAxis.setRange({start:dataset.range.low,end:dataset.range.high});
        this.yAxis.repaint();
        data = this.yAxis.convertValues(data);

        var d, d2, d3;
        d = this._catmullRom(data,0.5);
        d3 = this._catmullRom(data,0);
        d2 = this._catmullRom(data,1);
        d = this._catmullRom(data,0.5); // centripetal
        d3 = this._catmullRom(data,0);  // uniform
        d2 = this._catmullRom(data,1);  // chordial


 //        var data2 = [];
--- a/src/3dgraph/doc/.gitignore
+++ b/src/3dgraph/doc/.gitignore
@ -0,0 +1 @@
 jsdoc
--- a/src/3dgraph/doc/default.css
+++ b/src/3dgraph/doc/default.css
@ -0,0 +1,87 @@
 html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
 }

 body, td, th {
    font-family: arial, sans-serif;
    font-size: 11pt;
    color: #4D4D4D;
    line-height: 1.7em;
 }

 #container {
    margin: 0 auto;
    padding-bottom: 50px;
    width: 900px;
 }

 h1 {
    font-size: 180%;
    font-weight: bold;
    padding: 0;
    margin: 1em 0 1em 0;
 }

 h2 {
    padding-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #a0c0f0;
    color: #2B7CE9;
 }

 h3 {
    font-size: 140%;
 }


 a {
    color: #2B7CE9;
    text-decoration: none;
 }
 a:visited {
    color: #2E60A4;
 }
 a:hover {
    color: red;
    text-decoration: underline;
 }

 hr {
    border: none 0;
    border-top: 1px solid #abc;
    height: 1px;
 }

 pre {
    display: block;
    font-size: 10pt;
    line-height: 1.5em;
    font-family: monospace;
 }

 pre, code {
    background-color: #f5f5f5;
 }

 table
 {
    border-collapse: collapse;
 }

 th {
    font-weight: bold;
    border: 1px solid lightgray;
    background-color: #E5E5E5;
    text-align: left;
    vertical-align: top;
    padding: 5px;
 }

 td {
    border: 1px solid lightgray;
    padding: 5px;
    vertical-align: top;
 }
--- a/src/3dgraph/doc/example.html
+++ b/src/3dgraph/doc/example.html
@ -0,0 +1,68 @@
 <!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>
--- a/src/3dgraph/doc/graph3d.png
+++ b/src/3dgraph/doc/graph3d.png
--- a/src/3dgraph/doc/graph3d120x60.png
+++ b/src/3dgraph/doc/graph3d120x60.png
--- a/src/3dgraph/doc/index.html
+++ b/src/3dgraph/doc/index.html
@ -0,0 +1,770 @@
 <html>

 <head>
    <title>Graph3d documentation</title>
    <link rel='stylesheet' href='default.css' type='text/css'>

    <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify/prettify.js"></script>
 </head>

 <body onload="prettyPrint();">
 <div id="container">

 <h1>Graph3d documentation</h1>

 <table>
    <tr>
        <td>Author</td>
        <td>Jos de Jong, <a href="http://www.almende.com" target="_blank">Almende B.V.</a></td>
    </tr>
    <tr>
        <td>Webpage</td>
        <td><a href="http://almende.github.com/chap-links-library" target="_blank">Chap Links Library</a></td>
    </tr>
    <tr>
        <td>License</td>
        <td> <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a></td>
    </tr>

 </table>


 <h2 id="Contents">Contents</h2>
 <ul>
    <li><a href="#Overview">Overview</a></li>
    <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>
    <li><a href="#Methods">Methods</a></li>
    <li><a href="#Events">Events</a></li>
    <li><a href="#Data_Policy">Data Policy</a></li>
 </ul>

 <h2 id="Overview">Overview</h2>
 <p>
    Graph3d is an interactive visualization chart to draw data in a three dimensional
    graph. You can freely move and zoom in the graph by dragging and scrolling in the
    window.
    Graph3d also supports animation of a graph.
 </p>

 <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;html&gt;
  &lt;head&gt;
    &lt;title&gt;Graph 3D demo&lt;/title&gt;

    &lt;style&gt;
      body {font: 10pt arial;}
    &lt;/style&gt;

    &lt;script type="text/javascript" src="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"&gt;
      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 &lt; axisMax; x+=axisStep) {
          for (var y = 0; y &lt; 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);
      }
   &lt;/script&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div id="mygraph"&gt;&lt;/div&gt;
  &lt;/body&gt;
 &lt;/html&gt;
 </pre>


 <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>

 <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>

 After being loaded, the graph can be drawn via the function <code>draw()</code>,
 provided with data and options.
 <pre class="prettyprint lang-js">graph.draw(data, options);</pre>
 where data is a <code>DataTable</code>, and options is a name-value map in the JSON format.

 <h2 id="Data_Format">Data Format</h2>
 <p>
    Graph3d requires a data table with tree to five columns, depending on the chosen style
    and animation.

    The first three columns must contain the location coordinates for x-axis,
    y-axis, and z-axis.

    The forth column is optional, and can contain a data value.

    The last column (this can be the fourth or fifth column) and can contain
    filter values used for animation.
 </p>

 <p>
    Note that the column labels can be changed (for example instead of <code>'value'</code>
    one can use <code>'Temperature'</code>).
 </p>


 <h3>Definition</h3>
 <p>
    The data columns are defined as:
 </p>

 <table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Required</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>x</td>
        <td>number</td>
        <td>yes</td>
        <td>Location on the x-axis.</td>
    </tr>
    <tr>
        <td>y</td>
        <td>number</td>
        <td>yes</td>
        <td>Location on the y-axis.</td>
    </tr>
    <tr>
        <td>z</td>
        <td>number</td>
        <td>yes</td>
        <td>Location on the z-axis.</td>
    </tr>
    <tr>
        <td>value</td>
        <td>number</td>
        <td>no</td>
        <td>The data value, required for graph styles <code>dot-color</code> and
            <code>dot-size</code>.
        </td>
    </tr>
    <tr>
        <td>filtervalue</td>
        <td>anytype</td>
        <td>no</td>
        <td>Filter values used for the animation.
            This column may have any type, such as a number, string, or Date.</td>
    </tr>
 </table>

 <h3>Construction of 3D data</h3>
 <p>
    Graph3d supports the following styles to display data in three dimensions:
    <code>dot</code>, <code>dot-line</code>, <code>line</code>, <code>grid</code>,
    and <code>surface</code>.

    The data table for these styles is constructed as follows.
 </p>

 <pre class="prettyprint lang-js">
 var data = new google.visualization.DataTable();
 data.addColumn('number', 'x');
 data.addColumn('number', 'y');
 data.addColumn('number', 'z');  // the data value, visualized as a height at the z-axis
                                // and by a color.

 data.addRow([2.3, 5.2, 102.1]);
 // ...
 </pre>


 <h3>Construction of 4D data</h3>
 <p>
    Graph3d supports the following styles to display data in four dimensions:
    <code>dot-color</code>, <code>dot-size</code>.

    The data table for these styles is constructed as follows.
 </p>

 <pre class="prettyprint lang-js">
 var data = new google.visualization.DataTable();
 data.addColumn('number', 'x');
 data.addColumn('number', 'y');
 data.addColumn('number', 'z');
 data.addColumn('number', 'value');  // the data value, visualized by a color or size

 data.addRow([2.3, 5.2, 102.1, 45.2]);
 // ...
 </pre>


 <h3>Construction of animation data</h3>
 <p>
    If an extra column with filter values is provided in the data table, Graph3d
    will use these values for animation.

    The filter values are grouped and each group represents one animation frame.

    When animating, Graph3d loops through the distinct filter values,
    and draws all data points which have the current filter value.
 </p>
 <p>
    For example, to create an animation with three frames, first add all datapoints
    for the first frame with a filtervalue 1. Next, add the datapoints for the
    second frame and give them a filtervalue 2. Last, add the datapoints for the
    third frame and give them a filtervalue of 3. Now, when the Graph3d is loaded,
    a slider with buttons play/next/previous will be drawn below the graph, where one can loop through the
    three frames.
 </p>

 <p>
    To create an animation, add an extra column to the data table.
    This column may have any type (number, date, string, ...).
 </p>

 <pre class="prettyprint lang-js">
 var data = new google.visualization.DataTable();
 data.addColumn('number', 'x');
 data.addColumn('number', 'y');
 data.addColumn('number', 'value');
 data.addColumn('number', 'filtervalue'); // Optional column with filter values for animation

 data.addRow([2.3, 5.2, 102.1, 23]);
 // ...
 </pre>


 <h2 id="Configuration_Options">Configuration Options</h2>

 <p>
    Options can be used to customize the graph. Options are defined as a JSON object.
    All options are optional.
 </p>

 <pre class="prettyprint lang-js">
 options = {
    width:  "100%",
    height: "400px",
    style: "surface"
 };
 </pre>

 <p>
    The following options are available.
 </p>

 <table>
 <tr>
    <th>Name</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
 </tr>

 <tr>
    <td>animationInterval</td>
    <td>number</td>
    <td>1000</td>
    <td>The animation interval in milliseconds. This determines how fast
        the animation runs.</td>
 </tr>
 <tr>
    <td>animationPreload</td>
    <td>boolean</td>
    <td>false</td>
    <td>If false, the animation frames are loaded as soon as they are requested.
        if <code>animationPreload</code> is true, the graph will automatically load
        all frames in the background, resulting in a smoother animation as soon as
        all frames are loaded. The load progress is shown on screen.</td>
 </tr>
 <tr>
    <td>animationAutoStart</td>
    <td>boolean</td>
    <td>false</td>
    <td>If true, the animation starts playing automatically after the graph
        is created.</td>
 </tr>

 <tr>
    <td>backgroundColor</td>
    <td>string or Object</td>
    <td>"white"</td>
    <td>The background color for the main area of the chart.
        Can be either a simple HTML color string, for example: 'red' or '#00cc00',
        or an object with the following properties.</td>
 </tr>
 <tr>
    <td>backgroundColor.stroke</td>
    <td>string</td>
    <td>"gray"</td>
    <td>The color of the chart border, as an HTML color string.</td>
 </tr>
 <tr>
    <td>backgroundColor.strokeWidth</td>
    <td>number</td>
    <td>1</td>
    <td>The border width, in pixels.</td>
 </tr>
 <tr>
    <td>backgroundColor.fill</td>
    <td>string</td>
    <td>"white"</td>
    <td>The chart fill color, as an HTML color string.</td>
 </tr>

 <tr>
    <td>cameraPosition</td>
    <td>Object</td>
    <td>{"horizontal":&nbsp;1.0, "vertical":&nbsp;0.5, "distance":&nbsp;1.7}</td>
    <td>Set the initial rotation and position of the camera.
        The object <code>cameraPosition</code> contains three parameters:
        <code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
        Parameter <code>horizontal</code> is a value in radians and can have any
        value (but normally in the range of 0 and 2*Pi).
        Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
        Parameter <code>distance</code> is the (normalized) distance from the
        camera to the center of the graph, in the range of 0.71 to 5.0. A
        larger distance puts the graph further away, making it smaller.
        All parameters are optional.
 </tr>

 <tr>
    <td>height</td>
    <td>string</td>
    <td>"400px"</td>
    <td>The height of the graph in pixels or as a percentage.</td>
 </tr>

 <tr>
    <td>keepAspectRatio</td>
    <td>boolean</td>
    <td>true</td>
    <td>If <code>keepAspectRatio</code> is true, the x-axis and the y-axis
        keep their aspect ratio. If false, the axes are scaled such that they
        both have the same, maximum with.</td>
 </tr>

 <tr>
    <td>showAnimationControls</td>
    <td>boolean</td>
    <td>true</td>
    <td>If true, animation controls are created at the bottom of the Graph.
        The animation controls consists of buttons previous, start/stop, next,
        and a slider showing the current frame.
        Only applicable when the provided data contains an animation.</td>
 </tr>
 <tr>
    <td>showGrid</td>
    <td>boolean</td>
    <td>true</td>
    <td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
        graph).</td>
 </tr>
 <tr>
    <td>showPerspective</td>
    <td>boolean</td>
    <td>true</td>
    <td>If true, the graph is drawn in perspective: points and lines which
        are further away are drawn smaller.
        Note that the graph currently does not support a gray colored bottom side
        when drawn in perspective.
    </td>
 </tr>
 <tr>
    <td>showShadow</td>
    <td>boolean</td>
    <td>false</td>
    <td>Show shadow on the graph.</td>
 </tr>
 <tr>
    <td>style</td>
    <td>string</td>
    <td>"dot"</td>
    <td>The style of the 3d graph. Available styles:
        <code>bar</code>,
        <code>bar-color</code>,
        <code>bar-size</code>,
        <code>dot</code>,
        <code>dot-line</code>,
        <code>dot-color</code>,
        <code>dot-size</code>,
        <code>line</code>,
        <code>grid</code>,
        or <code>surface</code></td>
 </tr>

 <tr>
    <td>tooltip</td>
    <td>boolean | function</td>
    <td>false</td>
    <td>Show a tooltip showing the values of the hovered data point.
        The contents of the tooltip can be customized by providing a callback
        function as <code>tooltip</code>. In this case the function is called
        with an object containing parameters <code>x</code>,
        <code>y</code>, and <code>z</code> argument,
        and must return a string which may contain HTML.
    </td>
 </tr>

 <tr>
    <td>valueMax</td>
    <td>number</td>
    <td>none</td>
    <td>The maximum value for the value-axis. Only available in combination
        with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
 </tr>
 <tr>
    <td>valueMin</td>
    <td>number</td>
    <td>none</td>
    <td>The minimum value for the value-axis. Only available in combination
        with the styles <code>dot-color</code> and <code>dot-size</code>.</td>
 </tr>
 <tr>
    <td>verticalRatio</td>
    <td>number</td>
    <td>0.5</td>
    <td>A value between 0.1 and 1.0. This scales the vertical size of the graph
        When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
        the graph will be a cube.</td>
 </tr>

 <tr>
    <td>width</td>
    <td>string</td>
    <td>"400px"</td>
    <td>The width of the graph in pixels or as a percentage.</td>
 </tr>

 <tr>
    <td>xBarWidth</td>
    <td>number</td>
    <td>none</td>
    <td>The width of bars in x direction. By default, the width is equal to the distance
        between the data points, such that bars adjoin each other.
        Only applicable for styles <code>"bar"</code> and <code>"bar-color"</code>.</td>
 </tr>

 <tr>
    <td>xCenter</td>
    <td>string</td>
    <td>"55%"</td>
    <td>The horizontal center position of the graph, as a percentage or in
        pixels.</td>
 </tr>
 <tr>
    <td>xMax</td>
    <td>number</td>
    <td>none</td>
    <td>The maximum value for the x-axis.</td>
 </tr>
 <tr>
    <td>xMin</td>
    <td>number</td>
    <td>none</td>
    <td>The minimum value for the x-axis.</td>
 </tr>
 <tr>
    <td>xStep</td>
    <td>number</td>
    <td>none</td>
    <td>Step size for the grid on the x-axis.</td>
 </tr>

 <tr>
    <td>yBarWidth</td>
    <td>number</td>
    <td>none</td>
    <td>The width of bars in y direction. By default, the width is equal to the distance
        between the data points, such that bars adjoin each other.
        Only applicable for styles <code>"bar"</code> and <code>"bar-color"</code>.</td>
 </tr>

 <tr>
    <td>yCenter</td>
    <td>string</td>
    <td>"45%"</td>
    <td>The vertical center position of the graph, as a percentage or in
        pixels.</td>
 </tr>
 <tr>
    <td>yMax</td>
    <td>number</td>
    <td>none</td>
    <td>The maximum value for the y-axis.</td>
 </tr>
 <tr>
    <td>yMin</td>
    <td>number</td>
    <td>none</td>
    <td>The minimum value for the y-axis.</td>
 </tr>
 <tr>
    <td>yStep</td>
    <td>number</td>
    <td>none</td>
    <td>Step size for the grid on the y-axis.</td>
 </tr>

 <tr>
    <td>zMin</td>
    <td>number</td>
    <td>none</td>
    <td>The minimum value for the z-axis.</td>
 </tr>
 <tr>
    <td>zMax</td>
    <td>number</td>
    <td>none</td>
    <td>The maximum value for the z-axis.</td>
 </tr>
 <tr>
    <td>zStep</td>
    <td>number</td>
    <td>none</td>
    <td>Step size for the grid on the z-axis.</td>
 </tr>

 </table>


 <h2 id="Methods">Methods</h2>
 <p>
    Graph3d supports the following methods.
 </p>

 <table>
    <tr>
        <th>Method</th>
        <th>Return Type</th>
        <th>Description</th>
    </tr>

    <tr>
        <td>animationStart()</td>
        <td>none</td>
        <td>Start playing the animation.
            Only applicable when animation data is available.</td>
    </tr>

    <tr>
        <td>animationStop()</td>
        <td>none</td>
        <td>Stop playing the animation.
            Only applicable when animation data is available.</td>
    </tr>

    <tr>
        <td>draw(data, options)</td>
        <td>none</td>
        <td>Loads data, sets the provided options, and draws the 3d graph.</td>
    </tr>

    <tr>
        <td>getCameraPosition()</td>
        <td>An object with parameters <code>horizontal</code>,
            <code>vertical</code> and <code>distance</code></td>
        <td>Returns an object with parameters <code>horizontal</code>,
            <code>vertical</code> and <code>distance</code>,
            which each one of them is a number, representing the rotation and position
            of the camera.</td>
    </tr>

    <tr>
        <td>redraw()</td>
        <td>none</td>
        <td>Redraw the graph. Useful after the camera position is changed externally,
            when data is changed, or when the layout of the webpage changed.</td>
    </tr>

    <tr>
        <td>setSize(width, height)</td>
        <td>none</td>
        <td>Parameters <code>width</code> and <code>height</code> are strings,
            containing a new size for the graph. Size can be provided in pixels
            or in percentages.</td>
    </tr>

    <tr>
        <td>setCameraPosition (pos)</td>
        <td>{"horizontal":&nbsp;1.0, "vertical":&nbsp;0.5, "distance":&nbsp;1.7}</td>
        <td>Set the rotation and position of the camera. Parameter <code>pos</code>
            is an object which contains three parameters: <code>horizontal</code>,
            <code>vertical</code>, and <code>distance</code>.
            Parameter <code>horizontal</code> is a value in radians and can have any
            value (but normally in the range of 0 and 2*Pi).
            Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
            Parameter <code>distance</code> is the (normalized) distance from the
            camera to the center of the graph, in the range of 0.71 to 5.0. A
            larger distance puts the graph further away, making it smaller.
            All parameters are optional.
        </td>
    </tr>

 </table>

 <h2 id="Events">Events</h2>
 <p>
    Graph3d fires events after the camera position has been changed.
    The event can be catched by creating a listener.
    Here an example on how to catch a <code>camerapositionchange</code> event.
 </p>

 <pre class="prettyprint lang-js">
 function oncamerapositionchange(event) {
  alert("The camera position changed to:\n" +
        "Horizontal: " + event.horizontal + "\n" +
        "Vertical: " + event.vertical + "\n" +
        "Distance: " + event.distance);
 }

 google.visualization.events.addListener(mygraph, 'camerapositionchange', oncamerapositionchange);
 </pre>

 <p>
    The following events are available.
 </p>

 <table>
    <col width="10%">
    <col width="60%">
    <col width="30%">

    <tr>
        <th>name</th>
        <th>Description</th>
        <th>Properties</th>
    </tr>

    <tr>
        <td>camerapositionchange</td>
        <td>The camera position changed. Fired after the user modified the camera position
            by moving (dragging) the graph, or by zooming (scrolling),
            but not after a call to <code>setCameraPosition</code> method.
            The new camera position can be retrieved by calling the method
            <code>getCameraPosition</code>.</td>
        <td>
            <ul>
                <li><code>horizontal</code>: Number. The horizontal angle of the camera.</li>
                <li><code>vertical</code>: Number. The vertical angle of the camera.</li>
                <li><code>distance</code>: Number. The distance of the camera to the center of the graph.</li>
            </ul>
        </td>
    </tr>

    <tr>
        <td>ready</td>
        <td>The graph is ready for external method calls.
            If you want to interact with the graph, and call methods after you draw it,
            you should set up a listener for this event before you call the draw method,
            and call them only after the event was fired.</td>
        <td>none</td>
    </tr>
 </table>

 <h2 id="Data_Policy">Data Policy</h2>
 <p>
    All code and data are processed and rendered in the browser. No data is sent to any server.
 </p>

 </div>
 </body>
 </html>
--- a/src/3dgraph/doc/prettify/lang-apollo.js
+++ b/src/3dgraph/doc/prettify/lang-apollo.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
 null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])
--- a/src/3dgraph/doc/prettify/lang-css.js
+++ b/src/3dgraph/doc/prettify/lang-css.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
 ["com",/^(?:<!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#(?:[0-9a-f]{3}){1,2}/i],["pln",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],["pun",/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^\)\"\']+/]]),["css-str"])
--- a/src/3dgraph/doc/prettify/lang-hs.js
+++ b/src/3dgraph/doc/prettify/lang-hs.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\x0B\x0C\r ]+/,null,"\t\n\u000b\u000c\r "],["str",/^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,null,'"'],["str",/^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/,
 null],["pln",/^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],["pun",/^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]]),["hs"])
--- a/src/3dgraph/doc/prettify/lang-lisp.js
+++ b/src/3dgraph/doc/prettify/lang-lisp.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(/,null,"("],["clo",/^\)/,null,")"],["com",/^;[^\r\n]*/,null,";"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,
 null],["lit",/^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["cl","el","lisp","scm"])
--- a/src/3dgraph/doc/prettify/lang-lua.js
+++ b/src/3dgraph/doc/prettify/lang-lua.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],["str",/^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
 ["pln",/^[a-z_]\w*/i],["pun",/^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]]),["lua"])
--- a/src/3dgraph/doc/prettify/lang-ml.js
+++ b/src/3dgraph/doc/prettify/lang-ml.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["com",/^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
 ["lit",/^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],["pun",/^[^\t\n\r \xA0\"\'\w]+/]]),["fs","ml"])
--- a/src/3dgraph/doc/prettify/lang-proto.js
+++ b/src/3dgraph/doc/prettify/lang-proto.js
@ -0,0 +1 @@
 PR.registerLangHandler(PR.sourceDecorator({keywords:"bool bytes default double enum extend extensions false fixed32 fixed64 float group import int32 int64 max message option optional package repeated required returns rpc service sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 uint64",cStyleComments:true}),["proto"])
--- a/src/3dgraph/doc/prettify/lang-scala.js
+++ b/src/3dgraph/doc/prettify/lang-scala.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,null,'"'],["lit",/^`(?:[^\r\n\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],["lit",/^'[a-zA-Z_$][\w$]*(?!['$\w])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
 ["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],["typ",/^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],["pln",/^[$a-zA-Z_][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"])
--- a/src/3dgraph/doc/prettify/lang-sql.js
+++ b/src/3dgraph/doc/prettify/lang-sql.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],["kwd",/^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i,
 null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^[a-z_][\w-]*/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]]),["sql"])
--- a/src/3dgraph/doc/prettify/lang-vb.js
+++ b/src/3dgraph/doc/prettify/lang-vb.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0\u2028\u2029]+/,null,"\t\n\r \u00a0\u2028\u2029"],["str",/^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i,null,'"\u201c\u201d'],["com",/^[\'\u2018\u2019][^\r\n\u2028\u2029]*/,null,"'\u2018\u2019"]],[["kwd",/^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i,
 null],["com",/^REM[^\r\n\u2028\u2029]*/i],["lit",/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],["pun",/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],["pun",/^(?:\[|\])/]]),["vb","vbs"])
--- a/src/3dgraph/doc/prettify/lang-vhdl.js
+++ b/src/3dgraph/doc/prettify/lang-vhdl.js
@ -0,0 +1,3 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"]],[["str",/^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],["com",/^--[^\r\n]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
 null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
 ["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]]),["vhdl","vhd"])
--- a/src/3dgraph/doc/prettify/lang-wiki.js
+++ b/src/3dgraph/doc/prettify/lang-wiki.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t \xA0a-gi-z0-9]+/,null,"\t \u00a0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[=*~\^\[\]]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/],["lang-",/^\{\{\{([\s\S]+?)\}\}\}/],["lang-",/^`([^\r\n`]+)`/],["str",/^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]]),["wiki"]);
 PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"])
--- a/src/3dgraph/doc/prettify/lang-yaml.js
+++ b/src/3dgraph/doc/prettify/lang-yaml.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:|>?]+/,null,":|>?"],["dec",/^%(?:YAML|TAG)[^#\r\n]+/,null,"%"],["typ",/^[&]\S+/,null,"&"],["typ",/^!\S*/,null,"!"],["str",/^"(?:[^\\"]|\\.)*(?:"|$)/,null,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,null,"'"],["com",/^#[^\r\n]*/,null,"#"],["pln",/^\s+/,null," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\r\n]|$)/],["pun",/^-/],["kwd",/^\w+:[ \r\n]/],["pln",/^\w+/]]),
 ["yaml","yml"])
--- a/src/3dgraph/doc/prettify/prettify.css
+++ b/src/3dgraph/doc/prettify/prettify.css
@ -0,0 +1 @@
 .str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}
--- a/src/3dgraph/doc/prettify/prettify.js
+++ b/src/3dgraph/doc/prettify/prettify.js
@ -0,0 +1,33 @@
 window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
 (function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
 for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
 8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
 continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
 a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
 g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
 ""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push("                ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
 f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
 if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
 null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
 null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
 null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
 d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
 for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
 function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
 d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
 "&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
 "~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
 la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
 hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
 "htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
 ["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
 hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
 hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
 cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
 u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
 multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
 ["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
 0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
 " "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
 document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
 PR_TAG:"tag",PR_TYPE:S}})()
--- a/src/3dgraph/examples/ajax.js
+++ b/src/3dgraph/examples/ajax.js
@ -0,0 +1,141 @@


 /**
 * @class Ajax
 * 
 * Perform asynchronous call to the server.
 * 
 * documentation:
 * http://ajaxpatterns.org/HTTP_Streaming
 * http://ajaxpatterns.org/XMLHttpRequest_Call
 * http://www.skill-guru.com/blog/2011/02/04/adding-access-control-allow-origin-to-server-for-cross-domain-scripting/
 * 
 * @author Jos de Jong, Almende, 2011
 */ 
 var Ajax = function() { 
  this.isBusy = true; 
  this.timer = undefined;
  this.req = undefined;
  this.callback = undefined;

  // for long poll
  this.pollCallback = undefined;
  this.pollInterval = 1000; // milliseconds
  this.lastResponseLength = 0;
 }

 /**
 * Make a request
 * @param {string} method    The call method: typically "GET" or "POST"
 * @param {string} url       The url to be called, for example "mydata.php"
 * @param {method} callback  The callback method, which will be called when
 *                           the response is received. The response is passed
 *                           as a plain text (string) parameter to this method:
 *                              callback(response);
 */ 
 Ajax.prototype.request = function(method, url, callback) 
 { 
  var me = this;

  this.isBusy = true; 
  this.callback = callback; 
  this.req = (XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP"); 
  this.req.onreadystatechange = function() { me._checkReadyState(); }; 
  this.req.open(method, url, true); 
  this.req.send(null); 
 } 

 /**
 * Make a  long poll request.
 * This poll can be stopped via Ajax.abort();
 * @param {string} method    The call method: typically "GET" or "POST"
 * @param {string} url       The url to be called, for example "mydata.php"
 * @param {method} callback  The callback method, which will be called 
 *                           repeatedly, each time that new data is received.
 *                           The newly received data is passed
 *                           as a plain text (string) parameter to this method:
 *                              callback(response);
 */ 
 Ajax.prototype.requestLongPoll = function(method, url, callback) 
 { 
  this.request(method, url);

  var me = this;
  this.pollCallback = callback;
  this.lastResponseLength = 0;
  this.timer = setInterval(function() {me._checkResponse();}, this.pollInterval);
 } 

 /**
 * Cancel a current request
 */ 
 Ajax.prototype.abort = function() {
  this.isBusy = false; 
  if (this.timer) {
    clearInterval(this.timer)
    this.timer = undefined;
  }
  
  if (this.req) {
    this.req.abort();
    this.req = undefined;
  }
 }

 /**
 * The callback method which is called when a response is received.
 */ 
 Ajax.prototype._checkReadyState = function() 
 { 
  switch(this.req.readyState) 
  { 
    case 1: break; 
    case 2: break; 
    case 3: break; 
    case 4: 
      if (this.callback) {
        this.callback(this.req.responseText); 
      }

      // reset all variables
      this.abort();
  } 
 } 


 /**
 * Callback function executed repeatedly during a long poll. 
 * The currently received response data is checked, and all new data is passed
 * to the callback function.
 */
 Ajax.prototype._checkResponse = function() {
  var len = this.req.responseText.length;

  if (len > this.lastResponseLength) {
    var newData = this.req.responseText.substring(this.lastResponseLength);

    // TODO: clear the current responseText here, to prevent the response
    // from growing infinitely?

    if (this.pollCallback) {
      this.pollCallback(newData);
    }

    this.lastResponseLength = len;
  }
 }

 /**
 * Set the interval for long polling
 * @param {number} interval     Interval in milliseconds
 */ 
 Ajax.prototype.setPollInterval = function(interval) {
  this.pollInterval = interval;
 }

 /**
 * get the poll interval
 */ 
 Ajax.prototype.getPollInterval = function() {
  return this.pollInterval;
 }
--- a/src/3dgraph/examples/datasource.php
+++ b/src/3dgraph/examples/datasource.php
@ -0,0 +1,156 @@
 <?php

 /* 
 This datasource returns a response in the form of a google query response

 USAGE
 All parameters are optional
 datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25

 DOCUMENTATION
 http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html


 EXAMPLE OF A RESPONSE FILE

 Note that the reqId in the response must correspond with the reqId from the 
 request.
 ________________________________________________________________________________

 google.visualization.Query.setResponse({
  version:'0.6',
  reqId:'0',
  status:'ok',
  table:{
    cols:[
      {id:'x',
       label:'x',
       type:'number'},
      {id:'y',
       label:'y',
       type:'number'},
      {id:'value',
       label:'value',
       type:'number'}
    ],
    rows:[
      {c:[{v:0}, {v:0}, {v:10.0}]},
      {c:[{v:1}, {v:0}, {v:12.0}]},
      {c:[{v:2}, {v:0}, {v:13.0}]},
      {c:[{v:0}, {v:1}, {v:11.0}]},
      {c:[{v:1}, {v:1}, {v:14.0}]},
      {c:[{v:2}, {v:1}, {v:11.0}]}
    ]
  }
 });
 ________________________________________________________________________________

 */

 header('Content-type: text/plain');

 /**
 * A custom function
 */ 
 function custom($x, $y) {
  $d = sqrt(pow($x/100, 2) + pow($y/100, 2));
  
  return 50 * exp(-5 * $d / 10) * sin($d*5);
 }




 // retrieve parameters
 $default_stepnum = 25;

 $xmin     = isset($_REQUEST['xmin'])     ? (float)$_REQUEST['xmin']   : -100;
 $xmax     = isset($_REQUEST['xmax'])     ? (float)$_REQUEST['xmax']   : 100;
 $xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;

 $ymin     = isset($_REQUEST['ymin'])     ? (float)$_REQUEST['ymin']   : -100;
 $ymax     = isset($_REQUEST['ymax'])     ? (float)$_REQUEST['ymax']   : 100;
 $ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;

 // in the reply we must fill in the request id that came with the request
 $reqId = getReqId();

 // check for a maximum number of datapoints (for safety)
 if ($xstepnum * $ystepnum > 10000) {
  echo "google.visualization.Query.setResponse({
    version:'0.6',
    reqId:'$reqId',
    status:'error',
    errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
  });";

  exit;
 }


 // output the header part of the response
 echo "google.visualization.Query.setResponse({
  version:'0.6',
  reqId:'$reqId',
  status:'ok',
  table:{
    cols:[
      {id:'x',
       label:'x',
       type:'number'},
      {id:'y',
       label:'y',
       type:'number'},
      {id:'value',
       label:'',
       type:'number'}
    ],
    rows:[";

 // output the actual values
 $first = true;
 $xstep = ($xmax - $xmin) / $xstepnum;
 $ystep = ($ymax - $ymin) / $ystepnum;
 for ($x = $xmin; $x < $xmax; $x+=$xstep) {
  for ($y = $ymin; $y < $ymax; $y+=$ystep) {
    $value = custom($x,$y);
    
    if (!$first) {
      echo ",\n";
    } 
    else {
      echo "\n";
    }
    echo "      {c:[{v:$x}, {v:$y}, {v:$value}]}";
    
    $first = false;
  }
 }


 // output the end part of the response
 echo "      
    ]
  }
 });
 ";


 /**
 * Retrieve the request id from the get/post data
 * @return {number} $reqId       The request id, or 0 if not found
 */ 
 function getReqId() {
  $reqId = 0;

  foreach ($_REQUEST as $req) {
    if (substr($req, 0,6) == "reqId:") {
      $reqId = substr($req, 6);
    }
  }

  return $reqId;
 }


 ?>
--- a/src/3dgraph/examples/datasource_csv.php
+++ b/src/3dgraph/examples/datasource_csv.php
@ -0,0 +1,54 @@
 <?php

 header('Content-type: text/plain');

 // retrieve current time
 $time = time();
 $hour = date('h', $time) * 1;
 $min = date('i', $time) * 1;
 $sec = date('s', $time) * 1;

 $secAngle = $sec / 60.0 * 2.0*pi();
 $minAngle = ($min + $sec/60.0) / 60.0 * 2.0*pi();
 $hourAngle = ($hour + $min / 60.0 + $sec/60.0/60.0) / 12.0 * 2.0*pi();


 // create labels 
 echo '"x", "y", "z", "' . date('H:i:s', $time) . '"' . "\n";

 // create circle as clock
 for ($h = 0; $h < 12; $h += 1) {
  $r = $h / 12 * 2 * pi();
  echo 
    round(sin($r), 2) . ', ' .  
    round(cos($r), 2) . ', ' .  
    0 . ', ' . 
    0 . "\n";
 }
 echo "0, 0, 0, 0\n";


 // create hour, minute, second pointers
 for ($r = 0.1; $r < 0.4; $r += 0.1) {
  echo 
    round($r * sin($hourAngle), 2) . ', ' .  
    round($r * cos($hourAngle), 2) . ', ' .  
    0 .  ', ' . 
    2.5 . "\n";
 }
 for ($r = 0.1; $r < 0.7; $r += 0.1) {
  echo 
    round($r * sin($minAngle), 2) . ', ' .  
    round($r * cos($minAngle), 2) . ', ' .  
    0 .  ', ' . 
    1.5 . "\n";
 }
 for ($r = 0.1; $r < 0.9; $r += 0.1) {
  echo 
    round($r * sin($secAngle), 2) . ', ' .  
    round($r * cos($secAngle), 2) . ', ' .  
    0 .  ', ' . 
    3 . "\n";
 }

 ?>
--- a/src/3dgraph/examples/datasource_csv_to_json.php
+++ b/src/3dgraph/examples/datasource_csv_to_json.php
@ -0,0 +1,113 @@
 <?php

 /**
 This file can read data from an external csv source and output the same
 data in Google DataTable JSON format

 Note that it supposes that each data column contains numbers 

 */

 header('Content-type: text/plain');

 // datasource url. This can be an external source
 //$datasourceUrl = "http://demo.almende.com/links/graph3d/js/examples/datasource_csv.php";
 $path = dirname("http://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '/';
 $dataSourceUrl = $path . "datasource_csv.php";

 $reqId = getReqId();
 $data = file_get_contents($dataSourceUrl);


 $rows = split("\n", $data);

 // output the header part of the response
 echo "google.visualization.Query.setResponse({
  version:'0.6',
  reqId:'$reqId',
  status:'ok',
  table:{
    cols:[
 ";

 // output the column names
 $cols = split(",", $rows[0]);
 $colCount = count($cols);
 $colFirst = true;
 foreach($cols as $col) {
  if ($colFirst == true) 
    $colFirst = false;
  else 
    echo ",\n"; // end of previous label

  $colStr = trim(str_replace('"', '', $col)); // TODO: bad way to remove enclosing quotes

  echo "      {id:'$colStr', label:'$colStr', type:'number'}";
 }

 unset($rows[0]); // remove the first row with headers from the array

 // output the part between cols and rows
 echo "
    ],
    rows:[
 ";



 // output the data
 $firstRow = true;
 foreach ($rows as $row) {
  $cols = split(",", $row);

  if (count($cols) == $colCount) {
    if ($firstRow == true) 
      $firstRow = false;
    else
      echo ",\n"; // end of previous line

    echo "      {c:[";  // start of the row

    $firstCol = true;
    foreach ($cols as $col) {
      if ($firstCol == true)
        $firstCol = false; 
      else
        echo ", ";  // end of previous value

      echo "{v:" . $col . "}";
    }

    echo "]}";  // end of the row
  }
 }


 // output the end part of the response
 echo "      
    ]
  }
 });
 ";



 /**
 * Retrieve the request id from the get/post data
 * @return {number} $reqId       The request id, or 0 if not found
 */ 
 function getReqId() {
  $reqId = 0;

  foreach ($_REQUEST as $req) {
    if (substr($req, 0,6) == "reqId:") {
      $reqId = substr($req, 6);
    }
  }

  return $reqId;
 }



 ?>
--- a/src/3dgraph/examples/datastream_csv.php
+++ b/src/3dgraph/examples/datastream_csv.php
@ -0,0 +1,79 @@
 <?php

 header('Content-type: text/plain');

 // initialize flushing without buffer
@apache_setenv('no-gzip', 1);
@ini_set('zlib.output_compression', 0);
@ini_set('implicit_flush', 1);
 for ($i = 0; $i < ob_get_level(); $i++) { ob_end_flush(); }
 ob_implicit_flush(1);
 ob_start();

 // create labels once?
 //echo '"id", "x", "y", "z", "Color"' . "\n";

 while (true) {
  // retrieve current time
  $time = time();
  $hour = date('h', $time) * 1;
  $min = date('i', $time) * 1;
  $sec = date('s', $time) * 1;

  $secAngle = $sec / 60.0 * 2.0*pi();
  $minAngle = ($min + $sec/60.0) / 60.0 * 2.0*pi();
  $hourAngle = ($hour + $min / 60.0 + $sec/60.0/60.0) / 12.0 * 2.0*pi();

  $id = 0;

  // create circle as clock
  for ($h = 0; $h < 12; $h += 1) {
    $r = $h / 12 * 2 * pi();
    echo 
      $id . ', ' .
      round(sin($r), 2) . ', ' .  
      round(cos($r), 2) . ', ' .  
      0 . ', ' . 
      0 . "\n";
    $id++;
  }
  echo "$id, 0, 0, 0, 0\n";
  $id++;

  // create hour, minute, second pointers
  for ($r = 0.1; $r < 0.4; $r += 0.1) {
    echo 
      $id . ', ' .
      round($r * sin($hourAngle), 2) . ', ' .  
      round($r * cos($hourAngle), 2) . ', ' .  
      0 .  ', ' . 
      2.5 . "\n";
    $id++;
  }
  for ($r = 0.1; $r < 0.7; $r += 0.1) {
    echo 
      $id . ', ' .
      round($r * sin($minAngle), 2) . ', ' .  
      round($r * cos($minAngle), 2) . ', ' .  
      0 .  ', ' . 
      1.5 . "\n";
    $id++;
  }
  for ($r = 0.1; $r < 0.9; $r += 0.1) {
    echo 
      $id . ', ' .
      round($r * sin($secAngle), 2) . ', ' .  
      round($r * cos($secAngle), 2) . ', ' .  
      0 .  ', ' . 
      3 . "\n";
    $id++;
  }

  // flush, send the new output to the client now
  ob_flush();
  flush();

  sleep(1);
 }

 ?>
--- a/src/3dgraph/examples/default.css
+++ b/src/3dgraph/examples/default.css
@ -0,0 +1,87 @@
 html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
 }

 body, td, th {
    font-family: arial, sans-serif;
    font-size: 11pt;
    color: #4D4D4D;
    line-height: 1.7em;
 }

 #container {
    margin: 0 auto;
    padding-bottom: 50px;
    width: 900px;
 }

 h1 {
    font-size: 180%;
    font-weight: bold;
    padding: 0;
    margin: 1em 0 1em 0;
 }

 h2 {
    padding-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #a0c0f0;
    color: #2B7CE9;
 }

 h3 {
    font-size: 140%;
 }


 a {
    color: #2B7CE9;
    text-decoration: none;
 }
 a:visited {
    color: #2E60A4;
 }
 a:hover {
    color: red;
    text-decoration: underline;
 }

 hr {
    border: none 0;
    border-top: 1px solid #abc;
    height: 1px;
 }

 pre {
    display: block;
    font-size: 10pt;
    line-height: 1.5em;
    font-family: monospace;
 }

 pre, code {
    background-color: #f5f5f5;
 }

 table
 {
    border-collapse: collapse;
 }

 th {
    font-weight: bold;
    border: 1px solid lightgray;
    background-color: #E5E5E5;
    text-align: left;
    vertical-align: top;
    padding: 5px;
 }

 td {
    border: 1px solid lightgray;
    padding: 5px;
    vertical-align: top;
 }
--- a/src/3dgraph/examples/example01_basis.html
+++ b/src/3dgraph/examples/example01_basis.html
@ -0,0 +1,71 @@
 <!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;
            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:  "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);
        }
    </script>
 </head>

 <body>
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/src/3dgraph/examples/example02_camera.html
+++ b/src/3dgraph/examples/example02_camera.html
@ -0,0 +1,131 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D camera position</title>

    <style>
        body {font: 10pt arial;}
        td {font: 10pt arial}
    </style>

    <script type="text/javascript" src="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);
        }

        // callback function, called when the camera position has changed
        function oncamerapositionchange() {
            // adjust the values of startDate and endDate
            var pos = graph.getCameraPosition();
            document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
            document.getElementById('vertical').value   = parseFloat(pos.vertical.toFixed(3));
            document.getElementById('distance').value   = parseFloat(pos.distance.toFixed(3));
        }

        // set the camera position
        function setcameraposition() {
            var horizontal = parseFloat(document.getElementById('horizontal').value);
            var vertical = parseFloat(document.getElementById('vertical').value);
            var distance = parseFloat(document.getElementById('distance').value);
            var pos = {
                "horizontal": horizontal,
                "vertical":vertical,
                "distance":distance};
            graph.setCameraPosition(pos);

            // retrieve the camera position again, to get the applied values
            oncamerapositionchange();
        }

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create and populate a data table.
            data = new google.visualization.DataTable();
            data.addColumn('number', 'x');
            data.addColumn('number', 'y');
            data.addColumn('number', 'value');

            var JSONdata = [];

            // 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) {
                JSONdata.push([]);
                for (var y = 0; y < axisMax; y+=axisStep) {
                    var value = custom(x,y);
                    JSONdata[x].push(value);
                }
            }

            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:  "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'));

            // Add event listeners
            google.visualization.events.addListener(graph, 'camerapositionchange',
                    oncamerapositionchange);

            // Draw our graph with the created data and options
            graph.draw(data, options);
            //graph.redraw();
        }
    </script>
 </head>

 <body>
 <h1>Graph 3d camera position</h1>
 <table>
    <tr>
        <td>Horizontal angle (0 to 2*pi)</td>
        <td><input type="text" id="horizontal" value="1.0"></td>
    </tr>
    <tr>
        <td>Vertical angle (0 to 0.5*pi)</td>
        <td><input type="text" id="vertical" value="0.5"></td>
    </tr>
    <tr>
        <td>Distance (0.71 to 5.0)</td>
        <td><input type="text" id="distance" value="1.7"></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="Set" onclick="setcameraposition();"></td>
    </tr>
 </table>

 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/src/3dgraph/examples/example03_filter.html
+++ b/src/3dgraph/examples/example03_filter.html
@ -0,0 +1,75 @@
 <!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');
            data.addColumn('string', 'Value range');

            // create some nice looking data with sin/cos
            var steps = 50;  // number of datapoints will be steps^2
            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);
                    var valueRange = (value > 67) ? "67-100" :
                            (value < 33) ? "0-33" :
                                    "33-67";
                    data.addRow([x, y, value, valueRange]);
                }
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: "surface",
                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>
--- a/src/3dgraph/examples/example04_animate.html
+++ b/src/3dgraph/examples/example04_animate.html
@ -0,0 +1,81 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D animation demo</title>

    <style type="text/css">
        body {
            font: 10pt arial;
        }
    </style>

    <script type="text/javascript" src="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;
            var axisStep = axisMax / steps;
            for (var t = 0; t < tMax; t++) {
                for (var x = 0; x < axisMax; x+=axisStep) {
                    for (var y = 0; y < axisMax; y+=axisStep) {
                        var value = custom(x, y, t);
                        data.addRow([x, y, value, t]);
                    }
                }
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: "surface",
                showPerspective: true,
                showGrid: true,
                showShadow: false,
                // showAnimationControls: false,
                keepAspectRatio: true,
                verticalRatio: 0.5,
                animationInterval: 100, // milliseconds
                animationPreload: true
            };

            // 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>
--- a/src/3dgraph/examples/example05_datasource.html
+++ b/src/3dgraph/examples/example05_datasource.html
@ -0,0 +1,101 @@
 <!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>
--- a/src/3dgraph/examples/example06_line.html
+++ b/src/3dgraph/examples/example06_line.html
@ -0,0 +1,70 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D line 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);

        // 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 = 500;
            var axisMax = 314;
            var tmax = 4 * 2 * Math.PI;
            var axisStep = axisMax / steps;
            for (var t = 0; t < tmax; t += tmax / steps) {
                var r = 1;
                var x = r * Math.sin(t);
                var y = r * Math.cos(t);
                var z = t / tmax;
                data.addRow([x, y, z]);
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: "line",
                showPerspective: false,
                showGrid: true,
                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);

            graph.setCameraPosition(0.4, undefined, undefined);
        }
    </script>
 </head>

 <body>
 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/src/3dgraph/examples/example07_internet_explorer_9.html
+++ b/src/3dgraph/examples/example07_internet_explorer_9.html
@ -0,0 +1,90 @@
 <!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>
--- a/src/3dgraph/examples/example08_moving_dots.html
+++ b/src/3dgraph/examples/example08_moving_dots.html
@ -0,0 +1,90 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D animation moving dots</title>

    <style>
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="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);

        // 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');

            // create some shortcuts to math functions
            var sin = Math.sin;
            var cos = Math.cos;
            var pi = Math.PI;

            // create the animation data
            var tmax = 2.0 * pi;
            var tstep = tmax / 75;
            var dotCount = 1;  // set this to 1, 2, 3, 4, ...
            for (var t = 0; t < tmax; t += tstep) {
                var tgroup = parseFloat(t.toFixed(2));
                var value = t;

                // a dot in the center
                data.addRow([0, 0, 0, value, tgroup]);

                // 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]);
                }
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: "dot-color",
                showPerspective: true,
                showGrid: true,
                keepAspectRatio: true,
                verticalRatio: 1.0,
                animationInterval: 35, // milliseconds
                animationPreload: false,
                animationAutoStart: true,
                cameraPosition:
                {
                    horizontal: 2.7,
                    vertical: 0.0,
                    distance: 1.65
                }
            };

            // 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>
--- a/src/3dgraph/examples/example09_dot_cloud_colors.html
+++ b/src/3dgraph/examples/example09_dot_cloud_colors.html
@ -0,0 +1,77 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D cloud with colored dots</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);

        // 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');

            // create some shortcuts to math functions
            var sqrt = Math.sqrt;
            var pow = Math.pow;
            var random = Math.random;

            // create the animation data
            var imax = 100;
            for (var i = 0; i < imax; i++) {
                var x = pow(random(), 2);
                var y = pow(random(), 2);
                var z = pow(random(), 2);
                var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));

                data.addRow([x, y, z, dist]);
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: "dot-color",
                showPerspective: true,
                showGrid: true,
                keepAspectRatio: true,
                verticalRatio: 1.0,
                cameraPosition: {
                    horizontal: -0.35,
                    vertical: 0.22,
                    distance: 1.8
                }
            };

            // 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>
--- a/src/3dgraph/examples/example10_dot_cloud_size.html
+++ b/src/3dgraph/examples/example10_dot_cloud_size.html
@ -0,0 +1,79 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D cloud with sized dots</title>

    <style>
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="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);

        // 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');

            // create some shortcuts to math functions
            var sqrt = Math.sqrt;
            var pow = Math.pow;
            var random = Math.random;

            // create the animation data
            var imax = 100;
            for (var i = 0; i < imax; i++) {
                var x = pow(random(), 2);
                var y = pow(random(), 2);
                var z = pow(random(), 2);

                var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
                var range = sqrt(2) - dist;

                data.addRow([x, y, z, range]);
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: "dot-size",
                showPerspective: false,
                showGrid: true,
                keepAspectRatio: true,
                verticalRatio: 1.0,
                cameraPosition: {
                    horizontal: -0.54,
                    vertical: 0.5,
                    distance: 1.6
                }
            };

            // 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>
--- a/src/3dgraph/examples/example11_datasource_refresh.html
+++ b/src/3dgraph/examples/example11_datasource_refresh.html
@ -0,0 +1,92 @@
 <!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>
--- a/src/3dgraph/examples/example12_datastream.html
+++ b/src/3dgraph/examples/example12_datastream.html
@ -0,0 +1,185 @@
 <!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>
--- a/src/3dgraph/examples/example13_mobile.html
+++ b/src/3dgraph/examples/example13_mobile.html
@ -0,0 +1,87 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D demo</title>

    <style>
        html, body {
            font: 10pt arial;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mygraph {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>

    <!-- for mobile devices like android and iphone -->
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

    <script type="text/javascript" src="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 = 10;  // number of datapoints will be steps*steps
            var axisMax = 314;
            var axisStep = axisMax / steps;
            for (var x = 0; x < axisMax; x+=axisStep) {
                for (var y = 0; y < axisMax; y+=axisStep) {
                    var value = custom(x,y);
                    data.addRow([x, y, value]);
                }
            }

            // specify options
            var options = {
                width:  "100%",
                height: "100%",
                style: "surface",
                showPerspective: true,
                showGrid: true,
                showShadow: false,
                keepAspectRatio: true,
                verticalRatio: 0.5,
                backgroundColor: {
                    strokeWidth: 0
                }
            };

            // 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>
 </body>
 </html>
--- a/src/3dgraph/examples/example14_styles.html
+++ b/src/3dgraph/examples/example14_styles.html
@ -0,0 +1,131 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D styles</title>

    <style>
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
        }

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            var style = document.getElementById("style").value;
            var showPerspective = document.getElementById("perspective").checked;
            var xBarWidth = parseFloat(document.getElementById("xBarWidth").value) || undefined;
            var yBarWidth = parseFloat(document.getElementById("yBarWidth").value) || undefined;
            var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;

            // Create and populate a data table.
            data = new google.visualization.DataTable();
            data.addColumn('number', 'x');
            data.addColumn('number', 'y');
            data.addColumn('number', 'z');
            if (withValue) data.addColumn('number', 'value');

            // create some nice looking data with sin/cos
            var steps = 5;  // number of datapoints will be steps*steps
            var axisMax = 10;
            var axisStep = axisMax / steps;
            for (var x = 0; x <= axisMax; x+=axisStep) {
                for (var y = 0; y <= axisMax; y+=axisStep) {
                    var z = custom(x,y);
                    var values = [x, y, z];
                    if (withValue) {
                        var value = (y - x);
                        values.push(value);
                    }
                    data.addRow(values);
                }
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: style,
                xBarWidth: xBarWidth,
                yBarWidth: yBarWidth,
                showPerspective: showPerspective,
                showGrid: true,
                showShadow: false,
                keepAspectRatio: true,
                verticalRatio: 0.5
            };

            var camera = graph ? graph.getCameraPosition() : null;

            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw(data, options);

            if (camera) graph.setCameraPosition(camera); // restore camera position

            document.getElementById("style").onchange = drawVisualization;
            document.getElementById("perspective").onchange = drawVisualization;
            document.getElementById("xBarWidth").onchange = drawVisualization;
            document.getElementById("yBarWidth").onchange = drawVisualization;
        }
    </script>
 </head>

 <body>

 <p>
    <label for="style"> Style:
    <select id="style">
        <option value="bar">bar</option>
        <option value="bar-color">bar-color</option>
        <option value="bar-size">bar-size</option>

        <option value="dot">dot</option>
        <option value="dot-line">dot-line</option>
        <option value="dot-color">dot-color</option>
        <option value="dot-size">dot-size</option>

        <option value="grid">grid</option>
        <option value="line">line</option>
        <option value="surface">surface</option>
    </select>
    </label>
 </p>

 <p>
    <label for="perspective">
        <input type="checkbox" id="perspective" checked> Show perspective
    </label>
 </p>

 <p>
    <label for="xBarWidth"> Bar width X:
        <input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
    </label>
 </p>
 <p>
    <label for="yBarWidth"> Bar width Y:
        <input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
    </label>
 </p>

 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/src/3dgraph/examples/example15_tooltips.html
+++ b/src/3dgraph/examples/example15_tooltips.html
@ -0,0 +1,114 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Graph 3D tooltips</title>

    <style>
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
        }

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            var style = document.getElementById("style").value;
            var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;

            // Create and populate a data table.
            data = new google.visualization.DataTable();
            data.addColumn('number', 'x');
            data.addColumn('number', 'y');
            data.addColumn('number', 'z');
            if (withValue) data.addColumn('number', 'value');

            // create some nice looking data with sin/cos
            var steps = 5;  // number of datapoints will be steps*steps
            var axisMax = 10;
            var axisStep = axisMax / steps;
            for (var x = 0; x <= axisMax; x+=axisStep) {
                for (var y = 0; y <= axisMax; y+=axisStep) {
                    var z = custom(x,y);
                    var values = [x, y, z];
                    if (withValue) {
                        var value = (y - x);
                        values.push(value);
                    }
                    data.addRow(values);
                }
            }

            // specify options
            var options = {
                width:  "600px",
                height: "600px",
                style: style,
                showPerspective: true,
                showGrid: true,
                showShadow: false,

                // Option tooltip can be true, false, or a function returning a string with HTML contents
                //tooltip: true,
                tooltip: function (point) {
                    // parameter point contains properties x, y, z
                    return 'value: <b>' + point.z + '</b>';
                },

                keepAspectRatio: true,
                verticalRatio: 0.5
            };

            var camera = graph ? graph.getCameraPosition() : null;

            // Instantiate our graph object.
            graph = new links.Graph3d(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw(data, options);

            if (camera) graph.setCameraPosition(camera); // restore camera position

            document.getElementById("style").onchange = drawVisualization;
        }
    </script>
 </head>

 <body>

 <p>
    <label for="style"> Style:
    <select id="style">
        <option value="bar">bar</option>
        <option value="bar-color">bar-color</option>
        <option value="bar-size">bar-size</option>

        <option value="dot">dot</option>
        <option value="dot-line">dot-line</option>
        <option value="dot-color">dot-color</option>
        <option value="dot-size">dot-size</option>

        <option value="grid">grid</option>
        <option value="line">line</option>
        <option value="surface">surface</option>
    </select>
    </label>
 </p>

 <div id="mygraph"></div>

 <div id="info"></div>
 </body>
 </html>
--- a/src/3dgraph/examples/index.html
+++ b/src/3dgraph/examples/index.html
@ -0,0 +1,28 @@
 <html>
 <head>
    <link rel='stylesheet' href='default.css' type='text/css'>
 </head>
 <body>
 <div id="container">

    <h1>Examples</h1>

    <p><a href="example01_basis.html">example01_basis.html</a></p>
    <p><a href="example02_camera.html">example02_camera.html</a></p>
    <p><a href="example03_filter.html">example03_filter.html</a></p>
    <p><a href="example04_animate.html">example04_animate.html</a></p>
    <p><a href="example05_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>

 </div>
 </body>
 </html>
--- a/src/3dgraph/graph3d.js
+++ b/src/3dgraph/graph3d.js
--- a/src/3dgraph/playground/csv2array.js
+++ b/src/3dgraph/playground/csv2array.js
@ -0,0 +1,120 @@
 /**
 * Convert data in CSV (comma separated value) format to a javascript array.
 *
 * Values are separated by a comma, or by a custom one character delimeter.
 * Rows are separated by a new-line character.
 *
 * Leading and trailing spaces and tabs are ignored.
 * Values may optionally be enclosed by double quotes.
 * Values containing a special character (comma's, double-quotes, or new-lines)
 *   must be enclosed by double-quotes.
 * Embedded double-quotes must be represented by a pair of consecutive
 * double-quotes.
 *
 * Example usage:
 *   var csv = '"x", "y", "z"\n12.3, 2.3, 8.7\n4.5, 1.2, -5.6\n';
 *   var array = csv2array(csv);
 *
 * Author: Jos de Jong, 2010
 *
 * @param {string} data      The data in CSV format.
 * @param {string} delimeter [optional] a custom delimeter. Comma ',' by default
 *                           The Delimeter must be a single character.
 * @return {Array} array     A two dimensional array containing the data
 * @throw {String} error     The method throws an error when there is an
 *                           error in the provided data.
 */
 function csv2array(data, delimeter) {
    // Retrieve the delimeter
    if (delimeter == undefined)
        delimeter = ',';
    if (delimeter && delimeter.length > 1)
        delimeter = ',';

    // initialize variables
    var newline = '\n';
    var eof = '';
    var i = 0;
    var c = data.charAt(i);
    var row = 0;
    var col = 0;
    var array = new Array();

    while (c != eof) {
        // skip whitespaces
        while (c == ' ' || c == '\t' || c == '\r') {
            c = data.charAt(++i); // read next char
        }

        // get value
        var value = "";
        if (c == '\"') {
            // value enclosed by double-quotes
            c = data.charAt(++i);

            do {
                if (c != '\"') {
                    // read a regular character and go to the next character
                    value += c;
                    c = data.charAt(++i);
                }

                if (c == '\"') {
                    // check for escaped double-quote
                    var cnext = data.charAt(i+1);
                    if (cnext == '\"') {
                        // this is an escaped double-quote.
                        // Add a double-quote to the value, and move two characters ahead.
                        value += '\"';
                        i += 2;
                        c = data.charAt(i);
                    }
                }
            }
            while (c != eof && c != '\"');

            if (c == eof) {
                throw "Unexpected end of data, double-quote expected";
            }

            c = data.charAt(++i);
        }
        else {
            // value without quotes
            while (c != eof && c != delimeter && c!= newline && c != ' ' && c != '\t' && c != '\r') {
                value += c;
                c = data.charAt(++i);
            }
        }

        // add the value to the array
        if (array.length <= row)
            array.push(new Array());
        array[row].push(value);

        // skip whitespaces
        while (c == ' ' || c == '\t' || c == '\r') {
            c = data.charAt(++i);
        }

        // go to the next row or column
        if (c == delimeter) {
            // to the next column
            col++;
        }
        else if (c == newline) {
            // to the next row
            col = 0;
            row++;
        }
        else if (c != eof) {
            // unexpected character
            throw "Delimiter expected after character " + i;
        }

        // go to the next character
        c = data.charAt(++i);
    }

    return array;
 }
--- a/src/3dgraph/playground/csv2datatable.html
+++ b/src/3dgraph/playground/csv2datatable.html
@ -0,0 +1,80 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Convert CSV to Google Datatable</title>

    <style>
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="csv2array.js"></script>

    <script type="text/javascript">
        var data = null;
        var graph = null;

        function loaded() {

        }

        google.load("visualization", "1");

        // Set callback to run when API is loaded
        google.setOnLoadCallback(loaded);

        // Called when the Visualization API is loaded.
        function convert() {
            var csv = document.getElementById("csv").value;

            var datatable = "";

            // parse the csv content
            var csvArray = csv2array(csv);

            // Create and populate a data table.
            datatable += "data = new google.visualization.DataTable();\n";

            // read the header row
            for (var col = 0; col < csvArray[0].length; col++) {
                datatable += "data.addColumn('number', '" + csvArray[0][col] + "');\n";
            }

            // read all data
            for (var row = 1; row < csvArray.length; row++) {
                datatable += "data.addRow([";

                for (var col = 0; col < csvArray[row].length; col++) {
                    if (col != 0)
                        datatable += ", ";
                    datatable += csvArray[row][col];
                }

                datatable += "]);\n";
            }

            document.getElementById("datatable").value = datatable;

            alert(csvArray.length + " rows converted");
        }
    </script>
 </head>

 <body>
 <div id="graph"></div>

 <div id="info"></div>

 <b>CSV</b><br>
 <textarea id="csv" style="width: 400px; height: 300px;"></textarea>
 <br>
 <br>
 <input type="button" value="Convert" onclick="convert();">
 <br>
 <br>

 <b>Google DataTable</b><br>
 <textarea id="datatable" style="width: 400px; height: 300px;"></textarea>

 </body>
 </html>
--- a/src/3dgraph/playground/datasource.html
+++ b/src/3dgraph/playground/datasource.html
@ -0,0 +1,173 @@
 <html>

 <head>
    <title>Graph3d documentation</title>
    <link rel='stylesheet' href='default.css' type='text/css'>

    <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify/prettify.js"></script>
 </head>

 <body onload="prettyPrint();">

 <pre class="prettyprint lang-php">
 &lt;?php

 /*
 This datasource returns a response in the form of a google query response

 USAGE
 All parameters are optional
 datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25

 DOCUMENTATION
 http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html


 EXAMPLE OF A RESPONSE FILE

 Note that the reqId in the response must correspond with the reqId from the
 request.
 ________________________________________________________________________________

 google.visualization.Query.setResponse({
  version:'0.6',
  reqId:'0',
  status:'ok',
  table:{
    cols:[
      {id:'x',
       label:'x',
       type:'number'},
      {id:'y',
       label:'y',
       type:'number'},
      {id:'value',
       label:'value',
       type:'number'}
    ],
    rows:[
      {c:[{v:0}, {v:0}, {v:10.0}]},
      {c:[{v:1}, {v:0}, {v:12.0}]},
      {c:[{v:2}, {v:0}, {v:13.0}]},
      {c:[{v:0}, {v:1}, {v:11.0}]},
      {c:[{v:1}, {v:1}, {v:14.0}]},
      {c:[{v:2}, {v:1}, {v:11.0}]}
    ]
  }
 });
 ________________________________________________________________________________

 */


 /**
 * A custom function
 */
 function custom($x, $y) {
  $d = sqrt(pow($x/100, 2) + pow($y/100, 2));

  return 50 * exp(-5 * $d / 10) * sin($d*5)
 }




 // retrieve parameters
 $default_stepnum = 25;

 $xmin     = isset($_REQUEST['xmin'])     ? (float)$_REQUEST['xmin']   : -100;
 $xmax     = isset($_REQUEST['xmax'])     ? (float)$_REQUEST['xmax']   : 100;
 $xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;

 $ymin     = isset($_REQUEST['ymin'])     ? (float)$_REQUEST['ymin']   : -100;
 $ymax     = isset($_REQUEST['ymax'])     ? (float)$_REQUEST['ymax']   : 100;
 $ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;

 // in the reply we must fill in the request id that came with the request
 $reqId = getReqId();

 // check for a maximum number of datapoints (for safety)
 if ($xstepnum * $ystepnum &gt; 10000) {
  echo "google.visualization.Query.setResponse({
    version:'0.6',
    reqId:'$reqId',
    status:'error',
    errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
  });";

  exit;
 }


 // output the header part of the response
 echo "google.visualization.Query.setResponse({
  version:'0.6',
  reqId:'$reqId',
  status:'ok',
  table:{
    cols:[
      {id:'x',
       label:'x',
       type:'number'},
      {id:'y',
       label:'y',
       type:'number'},
      {id:'value',
       label:'',
       type:'number'}
    ],
    rows:[";

 // output the actual values
 $first = true;
 $xstep = ($xmax - $xmin) / $xstepnum;
 $ystep = ($ymax - $ymin) / $ystepnum;
 for ($x = $xmin; $x &lt; $xmax; $x+=$xstep) {
  for ($y = $ymin; $y &lt; $ymax; $y+=$ystep) {
    $value = custom($x,$y);

    if (!$first) {
      echo ",\n";
    }
    else {
      echo "\n";
    }
    echo "      {c:[{v:$x}, {v:$y}, {v:$value}]}";

    $first = false;
  }
 }


 // output the end part of the response
 echo "
    ]
  }
 });
 ";


 /**
 * Retrieve the request id from the get/post data
 * @return {number} $reqId       The request id, or 0 if not found
 */
 function getReqId() {
  $reqId = 0;

  foreach ($_REQUEST as $req) {
    if (substr($req, 0,6) == "reqId:") {
      $reqId = substr($req, 6);
    }
  }

  return $reqId;
 }


 ?&gt;

 </pre>

 </body>
 </html>
--- a/src/3dgraph/playground/datasource.php
+++ b/src/3dgraph/playground/datasource.php
@ -0,0 +1,155 @@
 <?php

 /* 
 This datasource returns a response in the form of a google query response

 USAGE
 All parameters are optional
 datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25

 DOCUMENTATION
 http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html


 EXAMPLE OF A RESPONSE FILE

 Note that the reqId in the response must correspond with the reqId from the 
 request.
 ________________________________________________________________________________

 google.visualization.Query.setResponse({
  version:'0.6',
  reqId:'0',
  status:'ok',
  table:{
    cols:[
      {id:'x',
       label:'x',
       type:'number'},
      {id:'y',
       label:'y',
       type:'number'},
      {id:'value',
       label:'value',
       type:'number'}
    ],
    rows:[
      {c:[{v:0}, {v:0}, {v:10.0}]},
      {c:[{v:1}, {v:0}, {v:12.0}]},
      {c:[{v:2}, {v:0}, {v:13.0}]},
      {c:[{v:0}, {v:1}, {v:11.0}]},
      {c:[{v:1}, {v:1}, {v:14.0}]},
      {c:[{v:2}, {v:1}, {v:11.0}]}
    ]
  }
 });
 ________________________________________________________________________________

 */


 /**
 * A custom function
 */ 
 function custom($x, $y) {
  $d = sqrt(pow($x/100, 2) + pow($y/100, 2));
  
  return 50 * exp(-5 * $d / 10) * sin($d*5);
 }




 // retrieve parameters
 $default_stepnum = 25;

 $xmin     = isset($_REQUEST['xmin'])     ? (float)$_REQUEST['xmin']   : -100;
 $xmax     = isset($_REQUEST['xmax'])     ? (float)$_REQUEST['xmax']   : 100;
 $xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;

 $ymin     = isset($_REQUEST['ymin'])     ? (float)$_REQUEST['ymin']   : -100;
 $ymax     = isset($_REQUEST['ymax'])     ? (float)$_REQUEST['ymax']   : 100;
 $ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;

 // in the reply we must fill in the request id that came with the request
 $reqId = getReqId();

 // check for a maximum number of datapoints (for safety)
 if ($xstepnum * $ystepnum > 10000) {
  echo "google.visualization.Query.setResponse({
    version:'0.6',
    reqId:'$reqId',
    status:'error',
    errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
  });";

  exit;
 }


 // output the header part of the response
 echo "google.visualization.Query.setResponse({
  version:'0.6',
  reqId:'$reqId',
  status:'ok',
  table:{
    cols:[
      {id:'x',
       label:'x',
       type:'number'},
      {id:'y',
       label:'y',
       type:'number'},
      {id:'value',
       label:'',
       type:'number'}
    ],
    rows:[";

 // output the actual values
 $first = true;
 $xstep = ($xmax - $xmin) / $xstepnum;
 $ystep = ($ymax - $ymin) / $ystepnum;
 for ($x = $xmin; $x < $xmax; $x+=$xstep) {
  for ($y = $ymin; $y < $ymax; $y+=$ystep) {
    $value = custom($x,$y);
    
    if (!$first) {
      echo ",\n";
    } 
    else {
      echo "\n";
    }
    echo "      {c:[{v:$x}, {v:$y}, {v:$value}]}";
    
    $first = false;
  }
 }


 // output the end part of the response
 echo "      
    ]
  }
 });
 ";


 /**
 * Retrieve the request id from the get/post data
 * @return {number} $reqId       The request id, or 0 if not found
 */ 
 function getReqId() {
  $reqId = 0;

  foreach ($_REQUEST as $req) {
    if (substr($req, 0,6) == "reqId:") {
      $reqId = substr($req, 6);
    }
  }

  return $reqId;
 }


 ?>
--- a/src/3dgraph/playground/index.html
+++ b/src/3dgraph/playground/index.html
@ -0,0 +1,247 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>

 <head>
    <title>Graph 3D - Playground</title>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../graph3d.js"></script>


    <script type="text/javascript" src="playground.js"></script>
    <script type="text/javascript" src="csv2array.js"></script>
    <link rel='stylesheet' href='playground.css' type='text/css'>

    <script type="text/javascript">
        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
        }
    </script>
 </head>

 <body onload="load();">

 <h1>Graph 3D - Playground</h1>

 <table style="width:100%;">
 <col width="50%">
 <col width="50%">

 <tr>
    <td>
        <h2>Data</h2>
        <p>
            Graph 3D expects a data table with first three to five columns:
            colums <code>x</code>, <code>y</code>, <code>z</code> (optional),
            <code>value</code>, <code>filtervalue</code> (optional).
        </p>

        <table>
            <tr>
                <td style="white-space: nowrap">
                    <input type="radio" name="datatype" id="datatypeCsv" onclick="selectDataType();" checked value="csv">Csv
                </td>
                <td>
                    <div id="csv">
                        <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>
                            <a href="javascript: loadCsvLineExample();" title="Load an example">Line example</a>
                            <a href="javascript: loadCsvAnimationExample();" title="Load an example">Animation example</a>
                            <a href="javascript: loadCsvMovingDotsExample();" title="Load an example">Moving dots example</a>
                            <a href="javascript: loadCsvColoredDotsExample();" title="Load an example">Colored dots example</a>
                            <a href="javascript: loadCsvSizedDotsExample();" title="Load an example">Sized dots example</a>
                        </p>
                    </div>
                </td>
            </tr>

            <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>
    </td>
    <td rowspan=2>
        <h2>Graph</h2>
        <p>
            <input type="button" value="Draw graph" onclick="draw();" id="draw">
        </p>

        <div id="graph"></div>
    </td>
 </tr>
 <tr>
    <td>
        <h2>Options</h2>

        <table>
            <tr>
                <th>Option</th>
                <th>Value</th>
            </tr>

            <tr>
                <td>width</td>
                <td><input type="text" id="width" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
            </tr>
            <tr>
                <td>height</td>
                <td><input type="text" id="height" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
            </tr>
            <tr>
                <td>style</td>
                <td>
                    <select id="style">
                        <option value="bar" >bar
                        <option value="bar-color" >bar-color
                        <option value="bar-size" >bar-size
                        <option value="dot" >dot
                        <option value="dot-color" >dot-color
                        <option value="dot-size" >dot-size
                        <option value="dot-line" >dot-line
                        <option value="line" >line
                        <option value="grid" >grid
                        <option value="surface" selected>surface
                    </select>
            </tr>

            <tr>
                <td>showAnimationControls</td>
                <td><input type="checkbox" id="showAnimationControls" checked /></td>
            </tr>
            <tr>
                <td>showGrid</td>
                <td><input type="checkbox" id="showGrid" checked /></td>
            </tr>
            <tr>
                <td>showPerspective</td>
                <td><input type="checkbox" id="showPerspective" checked /></td>
            </tr>
            <tr>
                <td>showShadow</td>
                <td><input type="checkbox" id="showShadow" /></td>
            </tr>

            <tr>
                <td>keepAspectRatio</td>
                <td><input type="checkbox" id="keepAspectRatio" checked /></td>
            </tr>
            <tr>
                <td>verticalRatio</td>
                <td><input type="text" id="verticalRatio" value="0.5" /> <span class="info">a value between 0.1 and 1.0</span></td>
            </tr>

            <tr>
                <td>animationInterval</td>
                <td><input type="text" id="animationInterval" value="1000" /> <span class="info">in milliseconds</span></td>
            </tr>
            <tr>
                <td>animationPreload</td>
                <td><input type="checkbox" id="animationPreload" /></td>
            </tr>
            <tr>
                <td>animationAutoStart</td>
                <td><input type="checkbox" id="animationAutoStart" /></td>
            </tr>

            <tr><td>xCenter</td><td><input type="text" id="xCenter" value="55%" /></td></tr>
            <tr><td>yCenter</td><td><input type="text" id="yCenter" value="45%" /></td></tr>

            <tr><td>xMin</td><td><input type="text" id="xMin" /></td></tr>
            <tr><td>xMax</td><td><input type="text" id="xMax" /></td></tr>
            <tr><td>xStep</td><td><input type="text" id="xStep" /></td></tr>

            <tr><td>yMin</td><td><input type="text" id="yMin" /></td></tr>
            <tr><td>yMax</td><td><input type="text" id="yMax" /></td></tr>
            <tr><td>yStep</td><td><input type="text" id="yStep" /></td></tr>

            <tr><td>zMin</td><td><input type="text" id="zMin" /></td></tr>
            <tr><td>zMax</td><td><input type="text" id="zMax" /></td></tr>
            <tr><td>zStep</td><td><input type="text" id="zStep" /></td></tr>

            <tr><td>valueMin</td><td><input type="text" id="valueMin" /></td></tr>
            <tr><td>valueMax</td><td><input type="text" id="valueMax" /></td></tr>

            <tr><td>xBarWidth</td><td><input type="text" id="xBarWidth" /></td></tr>
            <tr><td>yBarWidth</td><td><input type="text" id="yBarWidth" /></td></tr>

        </table>

    </td>
 </tr>
 </table>

 </body>
--- a/src/3dgraph/playground/playground.css
+++ b/src/3dgraph/playground/playground.css
@ -0,0 +1,91 @@
 body
 {
 	font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
 }
 
 h1
 {
 	font-size: 180%;
 	font-weight: bold;

 	margin: 1em 0 1em 0;
 }

 h2 
 { 
  font-size: 140%; 
  color: white;
  background-color: #7F8FB1;
  padding: 5px;
 }

 h3
 { 
  font-size: 100%; 
 }

 hr
 {
 	border: none 0;
 	border-top: 1px solid #7F8FB1;
 	height: 1px;
 }
 
 pre.code
 {
 	display: block;
 	padding: 8px;
 	border: 1px dashed #ccc;
 }

 table
 {
  border-collapse: collapse;
 }

 th, td
 {
  font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
  text-align: left;
  vertical-align: top;
  /*border: 1px solid #888;*/
  padding: 3px;
 }

 th 
 {
  font-weight: bold;
 }


 textarea {
  width: 500px;
  height: 200px;
  border: 1px solid #888;
 }

 input[type=text] {
  border: 1px solid #888;
 }

 #datasourceText, #googlespreadsheetText {
  width: 500px; 
  
 }

 .info {
  color: gray;
 }

 a {
  color: gray;
 }
 a:hover {
  color: red;
 }


 #graph {
  width: 100%;
  height: 600px;
 }
--- a/src/3dgraph/playground/playground.js
+++ b/src/3dgraph/playground/playground.js
@ -0,0 +1,657 @@

 var query = null;


 function load() {
    selectDataType();

    loadCsvExample();
    loadJsonExample();
    loadJavascriptExample();
    loadGooglespreadsheetExample();
    loadDatasourceExample();

    draw();
 }



 /**
 * Upate the UI based on the currently selected datatype
 */
 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";
 }


 function round(value, decimals) {
    return parseFloat(value.toFixed(decimals));
 }

 function loadCsvExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "value"\n';

    // create some nice looking data with sin/cos
    var steps = 30;
    var axisMax = 314;
    var axisStep = axisMax / steps;
    for (var x = 0; x < axisMax; x+=axisStep) {
        for (var y = 0; y < axisMax; y+=axisStep) {
            var value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50;

            csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + '\n';
        }
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "surface";
    document.getElementById("verticalRatio").value = "0.5";
 }


 function loadCsvAnimationExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "value", "time"\n';

    // create some nice looking data with sin/cos
    var steps = 20;
    var axisMax = 314;
    var tMax = 31;
    var axisStep = axisMax / steps;
    for (var t = 0; t < tMax; t++) {
        for (var x = 0; x < axisMax; x+=axisStep) {
            for (var y = 0; y < axisMax; y+=axisStep) {
                var value = Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
                csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + ', ' + t + '\n';
            }
        }
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "surface";
    document.getElementById("verticalRatio").value = "0.5";
    document.getElementById("animationInterval").value = 100;

 }


 function loadCsvLineExample() {
    var csv = "";

    // headers
    csv += '"sin(t)", "cos(t)", "t"\n';

    // create some nice looking data with sin/cos
    var steps = 100;
    var axisMax = 314;
    var tmax = 4 * 2 * Math.PI;
    var axisStep = axisMax / steps;
    for (t = 0; t < tmax; t += tmax / steps) {
        var r = 1;
        var x = r * Math.sin(t);
        var y = r * Math.cos(t);
        var z = t;
        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + '\n';
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "line";
    document.getElementById("verticalRatio").value = "1.0";
    document.getElementById("showPerspective").checked = false;
 }

 function loadCsvMovingDotsExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "z", "color value", "time"\n';

    // create some shortcuts to math functions
    var sin = Math.sin;
    var cos = Math.cos;
    var pi = Math.PI;

    // create the animation data
    var tmax = 2.0 * pi;
    var tstep = tmax / 75;
    var dotCount = 1;  // set this to 1, 2, 3, 4, ...
    for (var t = 0; t < tmax; t += tstep) {
        var tgroup = parseFloat(t.toFixed(2));
        var value = t;

        // a dot in the center
        var x = 0;
        var y = 0;
        var z = 0;
        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';

        // one or multiple dots moving around the center
        for (var dot = 0; dot < dotCount; dot++) {
            var tdot = t + 2*pi * dot / dotCount;
            //data.addRow([sin(tdot),  cos(tdot), sin(tdot), value, tgroup]);
            //data.addRow([sin(tdot), -cos(tdot), sin(tdot + tmax*1/2), value, tgroup]);

            var x = sin(tdot);
            var y = cos(tdot);
            var z = sin(tdot);
            csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';

            var x = sin(tdot);
            var y = -cos(tdot);
            var z = sin(tdot + tmax*1/2);
            csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n';

        }
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "dot-color";
    document.getElementById("verticalRatio").value = "1.0";
    document.getElementById("animationInterval").value = "35";
    document.getElementById("animationAutoStart").checked = true;
    document.getElementById("showPerspective").checked = true;
 }

 function loadCsvColoredDotsExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "z", "distance"\n';

    // create some shortcuts to math functions
    var sqrt = Math.sqrt;
    var pow = Math.pow;
    var random = Math.random;

    // create the animation data
    var imax = 200;
    for (var i = 0; i < imax; i++) {
        var x = pow(random(), 2);
        var y = pow(random(), 2);
        var z = pow(random(), 2);
        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));

        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2)  + ', ' + round(dist, 2)+ '\n';
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "dot-color";
    document.getElementById("verticalRatio").value = "1.0";
    document.getElementById("showPerspective").checked = true;
 }

 function loadCsvSizedDotsExample() {
    var csv = "";

    // headers
    csv += '"x", "y", "z", "range"\n';

    // create some shortcuts to math functions
    var sqrt = Math.sqrt;
    var pow = Math.pow;
    var random = Math.random;

    // create the animation data
    var imax = 200;
    for (var i = 0; i < imax; i++) {
        var x = pow(random(), 2);
        var y = pow(random(), 2);
        var z = pow(random(), 2);
        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
        var range = sqrt(2) - dist;

        csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2)  + ', ' + round(range, 2)+ '\n';
    }

    document.getElementById("csvTextarea").innerHTML = csv;

    // also adjust some settings
    document.getElementById("style").value = "dot-size";
    document.getElementById("verticalRatio").value = "1.0";
    document.getElementById("showPerspective").checked = true;
 }


 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";
 }



 /**
 * Retrieve teh currently selected datatype
 * @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";
 }


 /**
 * Retrieve the datatable from the entered contents of the csv text
 * @return {Google DataTable}
 */
 function getDataCsv() {
    var csv = document.getElementById("csvTextarea").value;

    // 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);
    }

    // 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);
            }
        }
    }

    return data;
 }

 /**
 * remove leading and trailing spaces
 */
 function trim(text) {
    while (text.length && text.charAt(0) == ' ')
        text = text.substr(1);

    while (text.length && text.charAt(text.length-1) == ' ')
        text = text.substr(0, text.length-1);

    return text;
 }

 /**
 * Retrieve the datatable from the entered contents of the javascript text
 * @return {Google DataTable}
 */
 function getDataJson() {
    var json = document.getElementById("jsonTextarea").value;
    var data = new google.visualization.DataTable(json);

    return data;
 }


 /**
 * Retrieve the datatable from the entered contents of the javascript text
 * @return {Google DataTable}
 */
 function getDataJavascript() {
    var js = document.getElementById("javascriptTextarea").value;

    eval(js);

    return data;
 }


 /**
 * Retrieve the datatable from the entered contents of the datasource text
 * @return {Google DataTable}
 */
 function getDataDatasource() {
    // TODO

    throw "Sorry, datasource is not yet implemented...";
 }

 /**
 * Retrieve a JSON object with all options
 */
 function getOptions() {
    return {
        width:              document.getElementById("width").value,
        height:             document.getElementById("height").value,
        style:              document.getElementById("style").value,
        showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
        showGrid:          (document.getElementById("showGrid").checked != false),
        showPerspective:   (document.getElementById("showPerspective").checked != false),
        showShadow:        (document.getElementById("showShadow").checked != false),
        keepAspectRatio:   (document.getElementById("keepAspectRatio").checked != false),
        verticalRatio:      document.getElementById("verticalRatio").value,
        animationInterval:  document.getElementById("animationInterval").value,
        animationPreload:  (document.getElementById("animationPreload").checked != false),
        animationAutoStart:(document.getElementById("animationAutoStart").checked != false),

        xCenter:           Number(document.getElementById("xCenter").value) || undefined,
        yCenter:           Number(document.getElementById("yCenter").value) || undefined,

        xMin:              Number(document.getElementById("xMin").value) || undefined,
        xMax:              Number(document.getElementById("xMax").value) || undefined,
        xStep:             Number(document.getElementById("xStep").value) || undefined,
        yMin:              Number(document.getElementById("yMin").value) || undefined,
        yMax:              Number(document.getElementById("yMax").value) || undefined,
        yStep:             Number(document.getElementById("yStep").value) || undefined,
        zMin:              Number(document.getElementById("zMin").value) || undefined,
        zMax:              Number(document.getElementById("zMax").value) || undefined,
        zStep:             Number(document.getElementById("zStep").value) || undefined,

        valueMin:          Number(document.getElementById("valueMin").value) || undefined,
        valueMax:          Number(document.getElementById("valueMax").value) || undefined,

        xBarWidth:         Number(document.getElementById("xBarWidth").value) || undefined,
        yBarWidth:         Number(document.getElementById("yBarWidth").value) || undefined
    };
 }

 /**
 * Redraw the graph with the entered data and options
 */
 function draw() {
    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>";
    }
 }

 function drawCsv() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));

    // retrieve data and options
    var data = getDataCsv();
    var options = getOptions();

    // Draw our graph with the created data and options
    graph.draw(data, options);
 }

 function drawJson() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));

    // retrieve data and options
    var data = getDataJson();
    var options = getOptions();

    // Draw our graph with the created data and options
    graph.draw(data, options);
 }

 function drawJavascript() {
    // Instantiate our graph object.
    var graph = new links.Graph3d(document.getElementById('graph'));

    // retrieve data and options
    var data = getDataJavascript();
    var options = getOptions();

    // Draw our graph with the created data and options
    graph.draw(data, options);
 }


 function drawGooglespreadsheet() {
    // Instantiate our graph object.
    drawGraph = function(response) {
        document.getElementById("draw").disabled = "";

        if (response.isError()) {
            error = 'Error: ' + response.getMessage();
            document.getElementById('graph').innerHTML =
                "<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
        }

        // retrieve the data from the query response
        data = response.getDataTable();

        // specify options
        options = getOptions();

        // Instantiate our graph object.
        var graph = new links.Graph3d(document.getElementById('graph'));

        // Draw our graph with the created data and options
        graph.draw(data, options);
    }

    url = document.getElementById("googlespreadsheetText").value;
    document.getElementById("draw").disabled = "disabled";

    // send the request
    query && query.abort();
    query = new google.visualization.Query(url);
    query.send(drawGraph);
 }


 function drawDatasource() {
    // Instantiate our graph object.
    drawGraph = function(response) {
        document.getElementById("draw").disabled = "";

        if (response.isError()) {
            error = 'Error: ' + response.getMessage();
            document.getElementById('graph').innerHTML =
                "<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
        }

        // retrieve the data from the query response
        data = response.getDataTable();

        // specify options
        options = getOptions();

        // Instantiate our graph object.
        var graph = new links.Graph3d(document.getElementById('graph'));

        // Draw our graph with the created data and options
        graph.draw(data, options);
    };

    url = document.getElementById("datasourceText").value;
    document.getElementById("draw").disabled = "disabled";

    // if the entered url is a google spreadsheet url, replace the part
    // "/ccc?" with "/tq?" in order to retrieve a neat data query result
    if (url.indexOf("/ccc?")) {
        url.replace("/ccc?", "/tq?");
    }

    // send the request
    query && query.abort();
    query = new google.visualization.Query(url);
    query.send(drawGraph);
 }
--- a/src/3dgraph/playground/prettify/lang-apollo.js
+++ b/src/3dgraph/playground/prettify/lang-apollo.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/,
 null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"])
--- a/src/3dgraph/playground/prettify/lang-css.js
+++ b/src/3dgraph/playground/prettify/lang-css.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//],
 ["com",/^(?:<!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#(?:[0-9a-f]{3}){1,2}/i],["pln",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i],["pun",/^[^\s\w\'\"]+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|(?:\\[\da-f]+ ?))(?:[_a-z\d\-]|\\(?:\\[\da-f]+ ?))*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^\)\"\']+/]]),["css-str"])
--- a/src/3dgraph/playground/prettify/lang-hs.js
+++ b/src/3dgraph/playground/prettify/lang-hs.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\x0B\x0C\r ]+/,null,"\t\n\u000b\u000c\r "],["str",/^\"(?:[^\"\\\n\x0C\r]|\\[\s\S])*(?:\"|$)/,null,'"'],["str",/^\'(?:[^\'\\\n\x0C\r]|\\[^&])\'?/,null,"'"],["lit",/^(?:0o[0-7]+|0x[\da-f]+|\d+(?:\.\d+)?(?:e[+\-]?\d+)?)/i,null,"0123456789"]],[["com",/^(?:(?:--+(?:[^\r\n\x0C]*)?)|(?:\{-(?:[^-]|-+[^-\}])*-\}))/],["kwd",/^(?:case|class|data|default|deriving|do|else|if|import|in|infix|infixl|infixr|instance|let|module|newtype|of|then|type|where|_)(?=[^a-zA-Z0-9\']|$)/,
 null],["pln",/^(?:[A-Z][\w\']*\.)*[a-zA-Z][\w\']*/],["pun",/^[^\t\n\x0B\x0C\r a-zA-Z0-9\'\"]+/]]),["hs"])
--- a/src/3dgraph/playground/prettify/lang-lisp.js
+++ b/src/3dgraph/playground/prettify/lang-lisp.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["opn",/^\(/,null,"("],["clo",/^\)/,null,")"],["com",/^;[^\r\n]*/,null,";"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:block|c[ad]+r|catch|con[ds]|def(?:ine|un)|do|eq|eql|equal|equalp|eval-when|flet|format|go|if|labels|lambda|let|load-time-value|locally|macrolet|multiple-value-call|nil|progn|progv|quote|require|return-from|setq|symbol-macrolet|t|tagbody|the|throw|unwind)\b/,
 null],["lit",/^[+\-]?(?:0x[0-9a-f]+|\d+\/\d+|(?:\.\d+|\d+(?:\.\d*)?)(?:[ed][+\-]?\d+)?)/i],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[a-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["cl","el","lisp","scm"])
--- a/src/3dgraph/playground/prettify/lang-lua.js
+++ b/src/3dgraph/playground/prettify/lang-lua.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^--(?:\[(=*)\[[\s\S]*?(?:\]\1\]|$)|[^\r\n]*)/],["str",/^\[(=*)\[[\s\S]*?(?:\]\1\]|$)/],["kwd",/^(?:and|break|do|else|elseif|end|false|for|function|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/,null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],
 ["pln",/^[a-z_]\w*/i],["pun",/^[^\w\t\n\r \xA0][^\w\t\n\r \xA0\"\'\-\+=]*/]]),["lua"])
--- a/src/3dgraph/playground/prettify/lang-ml.js
+++ b/src/3dgraph/playground/prettify/lang-ml.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["com",/^#(?:if[\t\n\r \xA0]+(?:[a-z_$][\w\']*|``[^\r\n\t`]*(?:``|$))|else|endif|light)/i,null,"#"],["str",/^(?:\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)|\'(?:[^\'\\]|\\[\s\S])*(?:\'|$))/,null,"\"'"]],[["com",/^(?:\/\/[^\r\n]*|\(\*[\s\S]*?\*\))/],["kwd",/^(?:abstract|and|as|assert|begin|class|default|delegate|do|done|downcast|downto|elif|else|end|exception|extern|false|finally|for|fun|function|if|in|inherit|inline|interface|internal|lazy|let|match|member|module|mutable|namespace|new|null|of|open|or|override|private|public|rec|return|static|struct|then|to|true|try|type|upcast|use|val|void|when|while|with|yield|asr|land|lor|lsl|lsr|lxor|mod|sig|atomic|break|checked|component|const|constraint|constructor|continue|eager|event|external|fixed|functor|global|include|method|mixin|object|parallel|process|protected|pure|sealed|trait|virtual|volatile)\b/],
 ["lit",/^[+\-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^(?:[a-z_]\w*[!?#]?|``[^\r\n\t`]*(?:``|$))/i],["pun",/^[^\t\n\r \xA0\"\'\w]+/]]),["fs","ml"])
--- a/src/3dgraph/playground/prettify/lang-proto.js
+++ b/src/3dgraph/playground/prettify/lang-proto.js
@ -0,0 +1 @@
 PR.registerLangHandler(PR.sourceDecorator({keywords:"bool bytes default double enum extend extensions false fixed32 fixed64 float group import int32 int64 max message option optional package repeated required returns rpc service sfixed32 sfixed64 sint32 sint64 string syntax to true uint32 uint64",cStyleComments:true}),["proto"])
--- a/src/3dgraph/playground/prettify/lang-scala.js
+++ b/src/3dgraph/playground/prettify/lang-scala.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:(?:""(?:""?(?!")|[^\\"]|\\.)*"{0,3})|(?:[^"\r\n\\]|\\.)*"?))/,null,'"'],["lit",/^`(?:[^\r\n\\`]|\\.)*`?/,null,"`"],["pun",/^[!#%&()*+,\-:;<=>?@\[\\\]^{|}~]+/,null,"!#%&()*+,-:;<=>?@[\\]^{|}~"]],[["str",/^'(?:[^\r\n\\']|\\(?:'|[^\r\n']+))'/],["lit",/^'[a-zA-Z_$][\w$]*(?!['$\w])/],["kwd",/^(?:abstract|case|catch|class|def|do|else|extends|final|finally|for|forSome|if|implicit|import|lazy|match|new|object|override|package|private|protected|requires|return|sealed|super|throw|trait|try|type|val|var|while|with|yield)\b/],
 ["lit",/^(?:true|false|null|this)\b/],["lit",/^(?:(?:0(?:[0-7]+|X[0-9A-F]+))L?|(?:(?:0|[1-9][0-9]*)(?:(?:\.[0-9]+)?(?:E[+\-]?[0-9]+)?F?|L?))|\\.[0-9]+(?:E[+\-]?[0-9]+)?F?)/i],["typ",/^[$_]*[A-Z][_$A-Z0-9]*[a-z][\w$]*/],["pln",/^[$a-zA-Z_][\w$]*/],["com",/^\/(?:\/.*|\*(?:\/|\**[^*/])*(?:\*+\/?)?)/],["pun",/^(?:\.+|\/)/]]),["scala"])
--- a/src/3dgraph/playground/prettify/lang-sql.js
+++ b/src/3dgraph/playground/prettify/lang-sql.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^(?:"(?:[^\"\\]|\\.)*"|'(?:[^\'\\]|\\.)*')/,null,"\"'"]],[["com",/^(?:--[^\r\n]*|\/\*[\s\S]*?(?:\*\/|$))/],["kwd",/^(?:ADD|ALL|ALTER|AND|ANY|AS|ASC|AUTHORIZATION|BACKUP|BEGIN|BETWEEN|BREAK|BROWSE|BULK|BY|CASCADE|CASE|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COMMIT|COMPUTE|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT|CURRENT_DATE|CURRENT_TIME|CURRENT_TIMESTAMP|CURRENT_USER|CURSOR|DATABASE|DBCC|DEALLOCATE|DECLARE|DEFAULT|DELETE|DENY|DESC|DISK|DISTINCT|DISTRIBUTED|DOUBLE|DROP|DUMMY|DUMP|ELSE|END|ERRLVL|ESCAPE|EXCEPT|EXEC|EXECUTE|EXISTS|EXIT|FETCH|FILE|FILLFACTOR|FOR|FOREIGN|FREETEXT|FREETEXTTABLE|FROM|FULL|FUNCTION|GOTO|GRANT|GROUP|HAVING|HOLDLOCK|IDENTITY|IDENTITYCOL|IDENTITY_INSERT|IF|IN|INDEX|INNER|INSERT|INTERSECT|INTO|IS|JOIN|KEY|KILL|LEFT|LIKE|LINENO|LOAD|NATIONAL|NOCHECK|NONCLUSTERED|NOT|NULL|NULLIF|OF|OFF|OFFSETS|ON|OPEN|OPENDATASOURCE|OPENQUERY|OPENROWSET|OPENXML|OPTION|OR|ORDER|OUTER|OVER|PERCENT|PLAN|PRECISION|PRIMARY|PRINT|PROC|PROCEDURE|PUBLIC|RAISERROR|READ|READTEXT|RECONFIGURE|REFERENCES|REPLICATION|RESTORE|RESTRICT|RETURN|REVOKE|RIGHT|ROLLBACK|ROWCOUNT|ROWGUIDCOL|RULE|SAVE|SCHEMA|SELECT|SESSION_USER|SET|SETUSER|SHUTDOWN|SOME|STATISTICS|SYSTEM_USER|TABLE|TEXTSIZE|THEN|TO|TOP|TRAN|TRANSACTION|TRIGGER|TRUNCATE|TSEQUAL|UNION|UNIQUE|UPDATE|UPDATETEXT|USE|USER|VALUES|VARYING|VIEW|WAITFOR|WHEN|WHERE|WHILE|WITH|WRITETEXT)(?=[^\w-]|$)/i,
 null],["lit",/^[+-]?(?:0x[\da-f]+|(?:(?:\.\d+|\d+(?:\.\d*)?)(?:e[+\-]?\d+)?))/i],["pln",/^[a-z_][\w-]*/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0+\-\"\']*/]]),["sql"])
--- a/src/3dgraph/playground/prettify/lang-vb.js
+++ b/src/3dgraph/playground/prettify/lang-vb.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0\u2028\u2029]+/,null,"\t\n\r \u00a0\u2028\u2029"],["str",/^(?:[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})(?:[\"\u201C\u201D]c|$)|[\"\u201C\u201D](?:[^\"\u201C\u201D]|[\"\u201C\u201D]{2})*(?:[\"\u201C\u201D]|$))/i,null,'"\u201c\u201d'],["com",/^[\'\u2018\u2019][^\r\n\u2028\u2029]*/,null,"'\u2018\u2019"]],[["kwd",/^(?:AddHandler|AddressOf|Alias|And|AndAlso|Ansi|As|Assembly|Auto|Boolean|ByRef|Byte|ByVal|Call|Case|Catch|CBool|CByte|CChar|CDate|CDbl|CDec|Char|CInt|Class|CLng|CObj|Const|CShort|CSng|CStr|CType|Date|Decimal|Declare|Default|Delegate|Dim|DirectCast|Do|Double|Each|Else|ElseIf|End|EndIf|Enum|Erase|Error|Event|Exit|Finally|For|Friend|Function|Get|GetType|GoSub|GoTo|Handles|If|Implements|Imports|In|Inherits|Integer|Interface|Is|Let|Lib|Like|Long|Loop|Me|Mod|Module|MustInherit|MustOverride|MyBase|MyClass|Namespace|New|Next|Not|NotInheritable|NotOverridable|Object|On|Option|Optional|Or|OrElse|Overloads|Overridable|Overrides|ParamArray|Preserve|Private|Property|Protected|Public|RaiseEvent|ReadOnly|ReDim|RemoveHandler|Resume|Return|Select|Set|Shadows|Shared|Short|Single|Static|Step|Stop|String|Structure|Sub|SyncLock|Then|Throw|To|Try|TypeOf|Unicode|Until|Variant|Wend|When|While|With|WithEvents|WriteOnly|Xor|EndIf|GoSub|Let|Variant|Wend)\b/i,
 null],["com",/^REM[^\r\n\u2028\u2029]*/i],["lit",/^(?:True\b|False\b|Nothing\b|\d+(?:E[+\-]?\d+[FRD]?|[FRDSIL])?|(?:&H[0-9A-F]+|&O[0-7]+)[SIL]?|\d*\.\d+(?:E[+\-]?\d+)?[FRD]?|#\s+(?:\d+[\-\/]\d+[\-\/]\d+(?:\s+\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)?|\d+:\d+(?::\d+)?(\s*(?:AM|PM))?)\s+#)/i],["pln",/^(?:(?:[a-z]|_\w)\w*|\[(?:[a-z]|_\w)\w*\])/i],["pun",/^[^\w\t\n\r \"\'\[\]\xA0\u2018\u2019\u201C\u201D\u2028\u2029]+/],["pun",/^(?:\[|\])/]]),["vb","vbs"])
--- a/src/3dgraph/playground/prettify/lang-vhdl.js
+++ b/src/3dgraph/playground/prettify/lang-vhdl.js
@ -0,0 +1,3 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"]],[["str",/^(?:[BOX]?"(?:[^\"]|"")*"|'.')/i],["com",/^--[^\r\n]*/],["kwd",/^(?:abs|access|after|alias|all|and|architecture|array|assert|attribute|begin|block|body|buffer|bus|case|component|configuration|constant|disconnect|downto|else|elsif|end|entity|exit|file|for|function|generate|generic|group|guarded|if|impure|in|inertial|inout|is|label|library|linkage|literal|loop|map|mod|nand|new|next|nor|not|null|of|on|open|or|others|out|package|port|postponed|procedure|process|pure|range|record|register|reject|rem|report|return|rol|ror|select|severity|shared|signal|sla|sll|sra|srl|subtype|then|to|transport|type|unaffected|units|until|use|variable|wait|when|while|with|xnor|xor)(?=[^\w-]|$)/i,
 null],["typ",/^(?:bit|bit_vector|character|boolean|integer|real|time|string|severity_level|positive|natural|signed|unsigned|line|text|std_u?logic(?:_vector)?)(?=[^\w-]|$)/i,null],["typ",/^\'(?:ACTIVE|ASCENDING|BASE|DELAYED|DRIVING|DRIVING_VALUE|EVENT|HIGH|IMAGE|INSTANCE_NAME|LAST_ACTIVE|LAST_EVENT|LAST_VALUE|LEFT|LEFTOF|LENGTH|LOW|PATH_NAME|POS|PRED|QUIET|RANGE|REVERSE_RANGE|RIGHT|RIGHTOF|SIMPLE_NAME|STABLE|SUCC|TRANSACTION|VAL|VALUE)(?=[^\w-]|$)/i,null],["lit",/^\d+(?:_\d+)*(?:#[\w\\.]+#(?:[+\-]?\d+(?:_\d+)*)?|(?:\.\d+(?:_\d+)*)?(?:E[+\-]?\d+(?:_\d+)*)?)/i],
 ["pln",/^(?:[a-z]\w*|\\[^\\]*\\)/i],["pun",/^[^\w\t\n\r \xA0\"\'][^\w\t\n\r \xA0\-\"\']*/]]),["vhdl","vhd"])
--- a/src/3dgraph/playground/prettify/lang-wiki.js
+++ b/src/3dgraph/playground/prettify/lang-wiki.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t \xA0a-gi-z0-9]+/,null,"\t \u00a0abcdefgijklmnopqrstuvwxyz0123456789"],["pun",/^[=*~\^\[\]]+/,null,"=*~^[]"]],[["lang-wiki.meta",/(?:^^|\r\n?|\n)(#[a-z]+)\b/],["lit",/^(?:[A-Z][a-z][a-z0-9]+[A-Z][a-z][a-zA-Z0-9]+)\b/],["lang-",/^\{\{\{([\s\S]+?)\}\}\}/],["lang-",/^`([^\r\n`]+)`/],["str",/^https?:\/\/[^\/?#\s]*(?:\/[^?#\s]*)?(?:\?[^#\s]*)?(?:#\S*)?/i],["pln",/^(?:\r\n|[\s\S])[^#=*~^A-Zh\{`\[\r\n]*/]]),["wiki"]);
 PR.registerLangHandler(PR.createSimpleLexer([["kwd",/^#[a-z]+/i,null,"#"]],[]),["wiki.meta"])
--- a/src/3dgraph/playground/prettify/lang-yaml.js
+++ b/src/3dgraph/playground/prettify/lang-yaml.js
@ -0,0 +1,2 @@
 PR.registerLangHandler(PR.createSimpleLexer([["pun",/^[:|>?]+/,null,":|>?"],["dec",/^%(?:YAML|TAG)[^#\r\n]+/,null,"%"],["typ",/^[&]\S+/,null,"&"],["typ",/^!\S*/,null,"!"],["str",/^"(?:[^\\"]|\\.)*(?:"|$)/,null,'"'],["str",/^'(?:[^']|'')*(?:'|$)/,null,"'"],["com",/^#[^\r\n]*/,null,"#"],["pln",/^\s+/,null," \t\r\n"]],[["dec",/^(?:---|\.\.\.)(?:[\r\n]|$)/],["pun",/^-/],["kwd",/^\w+:[ \r\n]/],["pln",/^\w+/]]),
 ["yaml","yml"])
--- a/src/3dgraph/playground/prettify/prettify.css
+++ b/src/3dgraph/playground/prettify/prettify.css
@ -0,0 +1 @@
 .str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun{color:#660}.pln{color:#000}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec{color:#606}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media print{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}
--- a/src/3dgraph/playground/prettify/prettify.js
+++ b/src/3dgraph/playground/prettify/prettify.js
@ -0,0 +1,33 @@
 window.PR_SHOULD_USE_CONTINUATION=true;window.PR_TAB_WIDTH=8;window.PR_normalizedHtml=window.PR=window.prettyPrintOne=window.prettyPrint=void 0;window._pr_isIE6=function(){var y=navigator&&navigator.userAgent&&navigator.userAgent.match(/\bMSIE ([678])\./);y=y?+y[1]:false;window._pr_isIE6=function(){return y};return y};
 (function(){function y(b){return b.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;")}function H(b,f,i){switch(b.nodeType){case 1:var o=b.tagName.toLowerCase();f.push("<",o);var l=b.attributes,n=l.length;if(n){if(i){for(var r=[],j=n;--j>=0;)r[j]=l[j];r.sort(function(q,m){return q.name<m.name?-1:q.name===m.name?0:1});l=r}for(j=0;j<n;++j){r=l[j];r.specified&&f.push(" ",r.name.toLowerCase(),'="',r.value.replace(L,"&amp;").replace(M,"&lt;").replace(N,"&gt;").replace(X,"&quot;"),'"')}}f.push(">");
 for(l=b.firstChild;l;l=l.nextSibling)H(l,f,i);if(b.firstChild||!/^(?:br|link|img)$/.test(o))f.push("</",o,">");break;case 3:case 4:f.push(y(b.nodeValue));break}}function O(b){function f(c){if(c.charAt(0)!=="\\")return c.charCodeAt(0);switch(c.charAt(1)){case "b":return 8;case "t":return 9;case "n":return 10;case "v":return 11;case "f":return 12;case "r":return 13;case "u":case "x":return parseInt(c.substring(2),16)||c.charCodeAt(1);case "0":case "1":case "2":case "3":case "4":case "5":case "6":case "7":return parseInt(c.substring(1),
 8);default:return c.charCodeAt(1)}}function i(c){if(c<32)return(c<16?"\\x0":"\\x")+c.toString(16);c=String.fromCharCode(c);if(c==="\\"||c==="-"||c==="["||c==="]")c="\\"+c;return c}function o(c){var d=c.substring(1,c.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));c=[];for(var a=[],k=d[0]==="^",e=k?1:0,h=d.length;e<h;++e){var g=d[e];switch(g){case "\\B":case "\\b":case "\\D":case "\\d":case "\\S":case "\\s":case "\\W":case "\\w":c.push(g);
 continue}g=f(g);var s;if(e+2<h&&"-"===d[e+1]){s=f(d[e+2]);e+=2}else s=g;a.push([g,s]);if(!(s<65||g>122)){s<65||g>90||a.push([Math.max(65,g)|32,Math.min(s,90)|32]);s<97||g>122||a.push([Math.max(97,g)&-33,Math.min(s,122)&-33])}}a.sort(function(v,w){return v[0]-w[0]||w[1]-v[1]});d=[];g=[NaN,NaN];for(e=0;e<a.length;++e){h=a[e];if(h[0]<=g[1]+1)g[1]=Math.max(g[1],h[1]);else d.push(g=h)}a=["["];k&&a.push("^");a.push.apply(a,c);for(e=0;e<d.length;++e){h=d[e];a.push(i(h[0]));if(h[1]>h[0]){h[1]+1>h[0]&&a.push("-");
 a.push(i(h[1]))}}a.push("]");return a.join("")}function l(c){for(var d=c.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),a=d.length,k=[],e=0,h=0;e<a;++e){var g=d[e];if(g==="(")++h;else if("\\"===g.charAt(0))if((g=+g.substring(1))&&g<=h)k[g]=-1}for(e=1;e<k.length;++e)if(-1===k[e])k[e]=++n;for(h=e=0;e<a;++e){g=d[e];if(g==="("){++h;if(k[h]===undefined)d[e]="(?:"}else if("\\"===
 g.charAt(0))if((g=+g.substring(1))&&g<=h)d[e]="\\"+k[h]}for(h=e=0;e<a;++e)if("^"===d[e]&&"^"!==d[e+1])d[e]="";if(c.ignoreCase&&r)for(e=0;e<a;++e){g=d[e];c=g.charAt(0);if(g.length>=2&&c==="[")d[e]=o(g);else if(c!=="\\")d[e]=g.replace(/[a-zA-Z]/g,function(s){s=s.charCodeAt(0);return"["+String.fromCharCode(s&-33,s|32)+"]"})}return d.join("")}for(var n=0,r=false,j=false,q=0,m=b.length;q<m;++q){var t=b[q];if(t.ignoreCase)j=true;else if(/[a-z]/i.test(t.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
 ""))){r=true;j=false;break}}var p=[];q=0;for(m=b.length;q<m;++q){t=b[q];if(t.global||t.multiline)throw Error(""+t);p.push("(?:"+l(t)+")")}return RegExp(p.join("|"),j?"gi":"g")}function Y(b){var f=0;return function(i){for(var o=null,l=0,n=0,r=i.length;n<r;++n)switch(i.charAt(n)){case "\t":o||(o=[]);o.push(i.substring(l,n));l=b-f%b;for(f+=l;l>=0;l-=16)o.push("                ".substring(0,l));l=n+1;break;case "\n":f=0;break;default:++f}if(!o)return i;o.push(i.substring(l));return o.join("")}}function I(b,
 f,i,o){if(f){b={source:f,c:b};i(b);o.push.apply(o,b.d)}}function B(b,f){var i={},o;(function(){for(var r=b.concat(f),j=[],q={},m=0,t=r.length;m<t;++m){var p=r[m],c=p[3];if(c)for(var d=c.length;--d>=0;)i[c.charAt(d)]=p;p=p[1];c=""+p;if(!q.hasOwnProperty(c)){j.push(p);q[c]=null}}j.push(/[\0-\uffff]/);o=O(j)})();var l=f.length;function n(r){for(var j=r.c,q=[j,z],m=0,t=r.source.match(o)||[],p={},c=0,d=t.length;c<d;++c){var a=t[c],k=p[a],e=void 0,h;if(typeof k==="string")h=false;else{var g=i[a.charAt(0)];
 if(g){e=a.match(g[1]);k=g[0]}else{for(h=0;h<l;++h){g=f[h];if(e=a.match(g[1])){k=g[0];break}}e||(k=z)}if((h=k.length>=5&&"lang-"===k.substring(0,5))&&!(e&&typeof e[1]==="string")){h=false;k=P}h||(p[a]=k)}g=m;m+=a.length;if(h){h=e[1];var s=a.indexOf(h),v=s+h.length;if(e[2]){v=a.length-e[2].length;s=v-h.length}k=k.substring(5);I(j+g,a.substring(0,s),n,q);I(j+g+s,h,Q(k,h),q);I(j+g+v,a.substring(v),n,q)}else q.push(j+g,k)}r.d=q}return n}function x(b){var f=[],i=[];if(b.tripleQuotedStrings)f.push([A,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
 null,"'\""]);else b.multiLineStrings?f.push([A,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):f.push([A,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);b.verbatimStrings&&i.push([A,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);if(b.hashComments)if(b.cStyleComments){f.push([C,/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"]);i.push([A,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
 null])}else f.push([C,/^#[^\r\n]*/,null,"#"]);if(b.cStyleComments){i.push([C,/^\/\/[^\r\n]*/,null]);i.push([C,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}b.regexLiterals&&i.push(["lang-regex",RegExp("^"+Z+"(/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/)")]);b=b.keywords.replace(/^\s+|\s+$/g,"");b.length&&i.push([R,RegExp("^(?:"+b.replace(/\s+/g,"|")+")\\b"),null]);f.push([z,/^\s+/,null," \r\n\t\u00a0"]);i.push([J,/^@[a-z_$][a-z_$@0-9]*/i,null],[S,/^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/,
 null],[z,/^[a-z_$][a-z_$@0-9]*/i,null],[J,/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],[E,/^.[^\s\w\.$@\'\"\`\/\#]*/,null]);return B(f,i)}function $(b){function f(D){if(D>r){if(j&&j!==q){n.push("</span>");j=null}if(!j&&q){j=q;n.push('<span class="',j,'">')}var T=y(p(i.substring(r,D))).replace(e?d:c,"$1&#160;");e=k.test(T);n.push(T.replace(a,s));r=D}}var i=b.source,o=b.g,l=b.d,n=[],r=0,j=null,q=null,m=0,t=0,p=Y(window.PR_TAB_WIDTH),c=/([\r\n ]) /g,
 d=/(^| ) /gm,a=/\r\n?|\n/g,k=/[ \r\n]$/,e=true,h=window._pr_isIE6();h=h?b.b.tagName==="PRE"?h===6?"&#160;\r\n":h===7?"&#160;<br>\r":"&#160;\r":"&#160;<br />":"<br />";var g=b.b.className.match(/\blinenums\b(?::(\d+))?/),s;if(g){for(var v=[],w=0;w<10;++w)v[w]=h+'</li><li class="L'+w+'">';var F=g[1]&&g[1].length?g[1]-1:0;n.push('<ol class="linenums"><li class="L',F%10,'"');F&&n.push(' value="',F+1,'"');n.push(">");s=function(){var D=v[++F%10];return j?"</span>"+D+'<span class="'+j+'">':D}}else s=h;
 for(;;)if(m<o.length?t<l.length?o[m]<=l[t]:true:false){f(o[m]);if(j){n.push("</span>");j=null}n.push(o[m+1]);m+=2}else if(t<l.length){f(l[t]);q=l[t+1];t+=2}else break;f(i.length);j&&n.push("</span>");g&&n.push("</li></ol>");b.a=n.join("")}function u(b,f){for(var i=f.length;--i>=0;){var o=f[i];if(G.hasOwnProperty(o))"console"in window&&console.warn("cannot override language handler %s",o);else G[o]=b}}function Q(b,f){b&&G.hasOwnProperty(b)||(b=/^\s*</.test(f)?"default-markup":"default-code");return G[b]}
 function U(b){var f=b.f,i=b.e;b.a=f;try{var o,l=f.match(aa);f=[];var n=0,r=[];if(l)for(var j=0,q=l.length;j<q;++j){var m=l[j];if(m.length>1&&m.charAt(0)==="<"){if(!ba.test(m))if(ca.test(m)){f.push(m.substring(9,m.length-3));n+=m.length-12}else if(da.test(m)){f.push("\n");++n}else if(m.indexOf(V)>=0&&m.replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,' $1="$2$3$4"').match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/)){var t=m.match(W)[2],p=1,c;c=j+1;a:for(;c<q;++c){var d=l[c].match(W);if(d&&
 d[2]===t)if(d[1]==="/"){if(--p===0)break a}else++p}if(c<q){r.push(n,l.slice(j,c+1).join(""));j=c}else r.push(n,m)}else r.push(n,m)}else{var a;p=m;var k=p.indexOf("&");if(k<0)a=p;else{for(--k;(k=p.indexOf("&#",k+1))>=0;){var e=p.indexOf(";",k);if(e>=0){var h=p.substring(k+3,e),g=10;if(h&&h.charAt(0)==="x"){h=h.substring(1);g=16}var s=parseInt(h,g);isNaN(s)||(p=p.substring(0,k)+String.fromCharCode(s)+p.substring(e+1))}}a=p.replace(ea,"<").replace(fa,">").replace(ga,"'").replace(ha,'"').replace(ia," ").replace(ja,
 "&")}f.push(a);n+=a.length}}o={source:f.join(""),h:r};var v=o.source;b.source=v;b.c=0;b.g=o.h;Q(i,v)(b);$(b)}catch(w){if("console"in window)console.log(w&&w.stack?w.stack:w)}}var A="str",R="kwd",C="com",S="typ",J="lit",E="pun",z="pln",P="src",V="nocode",Z=function(){for(var b=["!","!=","!==","#","%","%=","&","&&","&&=","&=","(","*","*=","+=",",","-=","->","/","/=",":","::",";","<","<<","<<=","<=","=","==","===",">",">=",">>",">>=",">>>",">>>=","?","@","[","^","^=","^^","^^=","{","|","|=","||","||=",
 "~","break","case","continue","delete","do","else","finally","instanceof","return","throw","try","typeof"],f="(?:^^|[+-]",i=0;i<b.length;++i)f+="|"+b[i].replace(/([^=<>:&a-z])/g,"\\$1");f+=")\\s*";return f}(),L=/&/g,M=/</g,N=/>/g,X=/\"/g,ea=/&lt;/g,fa=/&gt;/g,ga=/&apos;/g,ha=/&quot;/g,ja=/&amp;/g,ia=/&nbsp;/g,ka=/[\r\n]/g,K=null,aa=RegExp("[^<]+|<!--[\\s\\S]*?--\>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>|</?[a-zA-Z](?:[^>\"']|'[^']*'|\"[^\"]*\")*>|<","g"),ba=/^<\!--/,ca=/^<!\[CDATA\[/,da=/^<br\b/i,W=/^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/,
 la=x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END break continue do else for if return while case done elif esac eval fi function in local set then until ",
 hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true}),G={};u(la,["default-code"]);u(B([],[[z,/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],[C,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[E,/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),["default-markup",
 "htm","html","mxml","xhtml","xml","xsl"]);u(B([[z,/^[\s]+/,null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],[E,/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],
 ["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);u(B([],[["atv",/^[\s\S]+/]]),["uq.val"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof alignof align_union asm axiom bool concept concept_map const_cast constexpr decltype dynamic_cast explicit export friend inline late_check mutable namespace nullptr reinterpret_cast static_assert static_cast template typeid typename using virtual wchar_t where ",
 hashComments:true,cStyleComments:true}),["c","cc","cpp","cxx","cyc","m"]);u(x({keywords:"null true false"}),["json"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient as base by checked decimal delegate descending event fixed foreach from group implicit in interface internal into is lock object out override orderby params partial readonly ref sbyte sealed stackalloc string select uint ulong unchecked unsafe ushort var ",
 hashComments:true,cStyleComments:true,verbatimStrings:true}),["cs"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof abstract boolean byte extends final finally implements import instanceof null native package strictfp super synchronized throws transient ",
 cStyleComments:true}),["java"]);u(x({keywords:"break continue do else for if return while case done elif esac eval fi function in local set then until ",hashComments:true,multiLineStrings:true}),["bsh","csh","sh"]);u(x({keywords:"break continue do else for if return while and as assert class def del elif except exec finally from global import in is lambda nonlocal not or pass print raise try with yield False True None ",hashComments:true,multiLineStrings:true,tripleQuotedStrings:true}),["cv","py"]);
 u(x({keywords:"caller delete die do dump elsif eval exit foreach for goto if import last local my next no our print package redo require sub undef unless until use wantarray while BEGIN END ",hashComments:true,multiLineStrings:true,regexLiterals:true}),["perl","pl","pm"]);u(x({keywords:"break continue do else for if return while alias and begin case class def defined elsif end ensure false in module next nil not or redo rescue retry self super then true undef unless until when yield BEGIN END ",hashComments:true,
 multiLineStrings:true,regexLiterals:true}),["rb"]);u(x({keywords:"break continue do else for if return while auto case char const default double enum extern float goto int long register short signed sizeof static struct switch typedef union unsigned void volatile catch class delete false import new operator private protected public this throw true try typeof debugger eval export function get null set undefined var with Infinity NaN ",cStyleComments:true,regexLiterals:true}),["js"]);u(B([],[[A,/^[\s\S]+/]]),
 ["regex"]);window.PR_normalizedHtml=H;window.prettyPrintOne=function(b,f){var i={f:b,e:f};U(i);return i.a};window.prettyPrint=function(b){function f(){for(var t=window.PR_SHOULD_USE_CONTINUATION?j.now()+250:Infinity;q<o.length&&j.now()<t;q++){var p=o[q];if(p.className&&p.className.indexOf("prettyprint")>=0){var c=p.className.match(/\blang-(\w+)\b/);if(c)c=c[1];for(var d=false,a=p.parentNode;a;a=a.parentNode)if((a.tagName==="pre"||a.tagName==="code"||a.tagName==="xmp")&&a.className&&a.className.indexOf("prettyprint")>=
 0){d=true;break}if(!d){a=p;if(null===K){d=document.createElement("PRE");d.appendChild(document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));K=!/</.test(d.innerHTML)}if(K){d=a.innerHTML;if("XMP"===a.tagName)d=y(d);else{a=a;if("PRE"===a.tagName)a=true;else if(ka.test(d)){var k="";if(a.currentStyle)k=a.currentStyle.whiteSpace;else if(window.getComputedStyle)k=window.getComputedStyle(a,null).whiteSpace;a=!k||k==="pre"}else a=true;a||(d=d.replace(/(<br\s*\/?>)[\r\n]+/g,"$1").replace(/(?:[\r\n]+[ \t]*)+/g,
 " "))}d=d}else{d=[];for(a=a.firstChild;a;a=a.nextSibling)H(a,d);d=d.join("")}d=d.replace(/(?:\r\n?|\n)$/,"");m={f:d,e:c,b:p};U(m);if(p=m.a){c=m.b;if("XMP"===c.tagName){d=document.createElement("PRE");for(a=0;a<c.attributes.length;++a){k=c.attributes[a];if(k.specified)if(k.name.toLowerCase()==="class")d.className=k.value;else d.setAttribute(k.name,k.value)}d.innerHTML=p;c.parentNode.replaceChild(d,c)}else c.innerHTML=p}}}}if(q<o.length)setTimeout(f,250);else b&&b()}for(var i=[document.getElementsByTagName("pre"),
 document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],o=[],l=0;l<i.length;++l)for(var n=0,r=i[l].length;n<r;++n)o.push(i[l][n]);i=null;var j=Date;j.now||(j={now:function(){return(new Date).getTime()}});var q=0,m;f()};window.PR={combinePrefixPatterns:O,createSimpleLexer:B,registerLangHandler:u,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:C,PR_DECLARATION:"dec",PR_KEYWORD:R,PR_LITERAL:J,PR_NOCODE:V,PR_PLAIN:z,PR_PUNCTUATION:E,PR_SOURCE:P,PR_STRING:A,
 PR_TAG:"tag",PR_TYPE:S}})()
--- a/src/3dgraph/tests/example01_basis.html
+++ b/src/3dgraph/tests/example01_basis.html
@ -0,0 +1,75 @@
 <!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>
--- a/src/3dgraph/tests/example04_animate.html
+++ b/src/3dgraph/tests/example04_animate.html
@ -0,0 +1,77 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
  <head>
    <title>Graph 3D animation 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>
--- a/src/3dgraph/tests/sebleedelisle/canvas3d2.html
+++ b/src/3dgraph/tests/sebleedelisle/canvas3d2.html
@ -0,0 +1,99 @@
 <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>
--- a/src/3dgraph/tests/sebleedelisle/canvas3d3.html
+++ b/src/3dgraph/tests/sebleedelisle/canvas3d3.html
@ -0,0 +1,111 @@
 <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>
--- a/src/3dgraph/tests/sebleedelisle/canvas3d4.html
+++ b/src/3dgraph/tests/sebleedelisle/canvas3d4.html
@ -0,0 +1,130 @@

 <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>
--- a/src/3dgraph/tests/sebleedelisle/url.txt
+++ b/src/3dgraph/tests/sebleedelisle/url.txt
@ -0,0 +1 @@
 http://sebleedelisle.com/2009/09/simple-3d-in-html5-canvas/
--- a/src/3dgraph/tests/test.html
+++ b/src/3dgraph/tests/test.html
@ -0,0 +1,83 @@
 <!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>
--- a/src/3dgraph/tests/test_extreme_data.html
+++ b/src/3dgraph/tests/test_extreme_data.html
@ -0,0 +1,78 @@
 <!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>
--- a/src/3dgraph/tests/test_slider.html
+++ b/src/3dgraph/tests/test_slider.html
@ -0,0 +1,43 @@
 <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>