Examples of the JavaScript 3D surface plot implementation. Examples of the JavaScript 3D surface plot implementation. Examples of the JavaScript 3D surface plot implementation. Examples of the JavaScript 3D surface plot implementation. Examples of the JavaScript 3D surface plot implementation. Examples of the JavaScript 3D surface plot implementation. Examples of the JavaScript 3D surface plot implementation.

JavaScript 3D Surface Plot

This is a pure JavaScript implementation of a 3D surface plot.




The above example demonstrates the JavaScript 3D surface plot. This is generated by the code shown here. The code creates a plot representing the trigonometric function z = cos(x) * cos(y). Click and drag the above to rotate. Hold the shift key and drag to scale.

Tested in Chrome, Firefox, Opera, Safari and Internet Explorer 6. Works in IE via use of excanvas.

Performs best in Safari and Chrome.

For implementation details and how to use it on your own web page, see here.

Since VML renders very slowly in IE it is advised that the fillPolygons option is set to false when the script is run in IE, especially when there are a substantial number of points in the diagram.

Features

  • pure JavaScript implementation. No need for Flash.
  • rotation - left-click and drag the mouse to rotate the surface
  • scaling - hold down the shift key and drag the mouse to scale
  • hover the mouse over the surface to see values
  • custom axis titles
  • customisable colour gradients
  • works in all popular browsers

Applications

  • visualise correlation surfaces
  • plot trigonometric functions
  • chart financial volatilities in 3D

Implementation

In all browsers with the exception of IE, everything is rendered on the HTML-5 Canvas element. In IE, excanvas is used for VML rendering.

Each segment on the graph is a polygon and its geometric centroid is used in measuring distance from the 'camera' so that we can determine the order in which to render all segments. This is a simple implementation of Painter's algorithm.

Rotation and scaling are achieved by simple matrix manipulation.

Colour gradients are defined by the ColourGradient class. This is a utility I wrote a while ago to create gradients through any path in RGB space using any number of colours. Each colour defines a point in the space and when traveling from the start colour to the end colour we obtain a path. The start and end colours are mapped to given min and max numerical bounds. When provided with a number within those bounds, a new colour is obtained by linearly interpolating along the path in RGB space. Simples!

WebGL version

A new WebGL version of the surface plot is now available here.



This version utilises WebGL to take advantage of hardware acceleration. This provides nice visuals such as shading and lighting.

For browsers that do not support WebGL, the implementation automatically reverts to the pure canvas version of the plot.

For a great tutorial on WebGL, see Learning WebGL.