3D and Contour Grapher

A graph in 3 dimensions is written in general: z = f(x, y). That is, the z-value is found by substituting in both an x-value and a y-value.

The first example we see below is the graph of z = sin(x) + sin(y). It's a function of x and y.

You can use the following applet to explore 3D graphs and even create your own, using variables x and y. You can also toggle between 3D Grapher mode and Contour mode.

Things to do

1. Choose any of the pre-set 3D graphs using the drop down box at the top.

2. You can enter your own function of x and y using simple math expressions (see below the graph for acceptable syntax).

3. Select Contour mode using the check box. In this mode, you are looking at the 3D graph from above and the colored lines represent equal heights (it's just like a contour map in geography). The blue lines are lowest and the red ones are highest.

4. You can vary the x- and y- lower and upper limits using the sliders below the graph.

5. You can vary the z-scale (changing the height of each peak) and the number of segments (which alters the sampling rate) using the sliders below the graph.

6. Zoom in and out using the mouse wheel (or 2-finger pinching, if on a mobile device). Also make use of the z-Scale slider to see main features of the graph

7. Pan the whole graph left and right using the right mouse button and dragging (or 3-finger swipe on a mobile device)

This applet should work OK on mobile devices.

Some graphs to try

The grapher will accept any of the following functions (use the notation shown). You can copy from the examples below if you wish.

• Planes: (like 3x + 2y - 4)
• Involving powers: (like x^2 + 3y^2 - 5x + 2)
• Any of the trigonometric functions: sin(x+y), cos((x-y)/2), tan(x/y), sec(x^2/4), cot(3x) (several of these will go off to infinity and are a challenge to see)
• Exponential (e^x, e^y) and logarithm (ln(x+y) for natural log and log(x+y) for log base 10)
• Absolute value: use "abs" like this: abs(x+y)
• Sign (1 if the sign is positive, −1 if the sign of the function is negative.) For example, try sign(sin(x))

In fact, you can use most of the javascript math functions, including

• ceiling: ceil(x) and round: round(x)
• square root: sqrt(y)

You can also use any combinations of the above, like ln(abs(x-y)).

If your graph doesn't work: Try using brackets! For example, "tan 2x" won't work. You have to put tan(2x).

More Information

Credit: The above 3D grapher is based on Lee Stemkoski's Three.js Examples.