The plot below shows the surface of z = sinc(r), where r = √(x² + y²). Below the plot are some controls, which show basic manipulation of the surface and mesh. There are also mouseover and click/tap events on the surface/mesh nodes, which may be slow in Internet Explorer.

Mouse controls: Left-click and drag to rotate; alt (Mac)- or ctrl (Windows)-click-drag or middle-click-drag to pan; scroll or shift-click-drag to zoom. Touch screen controls: one finger to rotate; two-finger scroll to pan; pinch to zoom. Click/tap on the cube icons to snap to a side-on view.

Mesh:	Show Hide Only x Only y
Surface:	Show Hide
Mesh colours:	Constant Variable 0x update
Colour scale:	Viridis Inferno Magma Plasma Greyscale Custom

The uniform mesh colour in the textbox above will be parsed as a hex number when you click 'update'. When the mesh colour is set to a uniform constant, there is no way to change particular node colours.

You can see how the plot is constructed in the HTML source (where you can also see the custom colour scale defined, along with some other possibilities there, commented out):

• The params.data.x and .y arrays are defined in loops, pushing successively larger values onto the end of each. For aesthetic purposes, I've set the number of nodes in each direction (and the axis extents) to be equal, but it works if you vary either or both independently.
• The params.data.z object is in array of length equal to the number of x-values; each entry in the array is itself an array, of length equal to the number of y-values.
• The mouseover, mouseout, and click functions each take arguments i_plot (a requirement because there might be multiple plots on the page), i and j (the indices of the grid node), and d, an object from which you can access any stored data associated with the (i, j) node via d.input_data.
• The various control toggles take the form three_d.show_mesh(0), three_d.hide_mesh(0), etc., where the argument of 0 refers to the index of the plot on the page (since there is only one, it has index 0).
• The mouse/touch events automatically re-draw the scene once the function has finished, but for other manipulation of the plot, you need to call three_d.update_render(0) (the 0 again being the plot index) once the manipulations are finished. The reason here is that re-drawing the scene takes a little time, and you may want to make changes to thousands of elements within the scene.
• You can access the stored data for an arbitrary grid node (i, j) from three_d.plots[i_plot].mesh_points[i][j].input_data.

Posted 2016-12-22.