Visualization: JavaScript Surface Plot

  1. Overview
  2. Example
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. Data Policy

Overview

This JavaScript code allows one to plot 3D surfaces.

Tested in Chrome, Firefox, Opera, Safari and Internet Explorer 6. Works in IE via use of excanvas. (See test.html in the download.)

Performs best in Safari and Chrome.

Features

  1. pure JavaScript implementation. No need for Flash.
  2. rotation - left-click and drag the mouse to rotate the surface
  3. scaling - hold down the shift key and drag the mouse to scale
  4. hover the mouse over the surface to see values
  5. custom axis titles (not availabe in IE)
  6. customisable colour gradients
  7. works in all popular browsers

Applications

  1. visualise correlation surfaces
  2. plot trigonometric functions
  3. chart financial volatilities in 3D



This project is hosted by Google-code. Click here to go to the homepage and see additional examples and documentation.

By: Greg Ross

Download

Download the library from the project home page.

Example




The above example demonstrates the JavaScript 3D surface plot. This is generated by the code shown below. The code creates a plot representing the trigonometric function z = cos(x) * cos(y)

The following code demonstrates basic usage of the API. To see more possibilities, click here. 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--[if IE]><script type="text/javascript" src="javascript/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src='javascript/SurfacePlot.js'></script>
    <script type="text/javascript" src='javascript/ColourGradient.js'></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <title>SurfacePlot test stub</title>
        
  </head>
  <body>
        
    <script type='text/javascript'>
            
      google.load("visualization", "1");
      google.setOnLoadCallback(setUp);
            
        function setUp()
        {
          var numRows = 45.0;
          var numCols = 45;
                
          var tooltipStrings = new Array();
          var data = new google.visualization.DataTable();
                
          for (var i = 0; i < numCols; i++)
          {
            data.addColumn('number', 'col'+i);
          }
                
          data.addRows(numRows);
          var d = 360 / numRows;
          var idx = 0;
                
          for (var i = 0; i < numRows; i++) 
          {
            for (var j = 0; j < numCols; j++)
            {
              var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0));
              data.setValue(i, j, value / 4.0);
        
              tooltipStrings[idx] = "x:" + i + ", y:" + j + " = " + value;
              idx++;
            }
          }

         var surfacePlot = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv"));

         // Don't fill polygons in IE. It's too slow.
         var fillPly = true;

         // Define a colour gradient.
         var colour1 = {red:0, green:0, blue:255};
         var colour2 = {red:0, green:255, blue:255};
         var colour3 = {red:0, green:255, blue:0};
         var colour4 = {red:255, green:255, blue:0};
         var colour5 = {red:255, green:0, blue:0};
         var colours = [colour1, colour2, colour3, colour4, colour5];

         // Axis labels.
         var xAxisHeader = "X";
         var yAxisHeader = "Y";
         var zAxisHeader = "Z";

         var options = {xPos: 300, yPos: 50, width: 500, height: 500, colourGradient: colours,
           fillPolygons: fillPly, tooltips: tooltipStrings, xTitle: xAxisHeader,
           yTitle: yAxisHeader, zTitle: zAxisHeader, restrictXRotation: false};
                
        surfacePlot.draw(data, options);
      }
            
      </script>
        
      <div id='surfacePlotDiv'>
        <!-- SurfacePlot goes here... -->
            
      </div>
        
    </body>
</html>

Loading

A google.load package name is not required. 

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

The visualization's class name is greg.ross.visualisation.SurfacePlot 

var surfacePlot = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv"));

Data Format


At least two rows and two columns must be created. All row and column values must be numeric. A tooltip for each point must be specified in a separate array. See the section on options, below, for details.

Configuration Options


Name Type Default Description
xPos number 0 The x-position of the view, relative to the containing element.
yPos number 0 The y-position of the view, relative to the containing element.
width number none The width of the view.
height number none The height of the view.
colourGradient Colour array none Can contain any number of colours. These determine the colours applied from the max to min values on the surface plot.
fillPolygons boolean true Determines whether the surface is rendered with the colours specified above. Setting this option to false produces a wire frame effect.
tooltips String array none This is an array of strings corresponding to the points in the view. The tooltip for a particular point is displayed when the mouse is moved closest to that point.
xTitle String none This is the x-axis title text.
yTitle String none This is the y-axis title text.
zTitle String none This is the z-axis title text.
restrictXRotation Boolean False When set to true, this option prevents the plot from being rotated around the x-axis to the extent of revealing the underside of the surface.

Methods


Method Return Type Description
draw(data, options) none Draws the view.

Events

No triggered events.

Data Policy

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