JSXGraph
JSXGraph share

Share

Surface plot
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/surface-plot" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Surface plot" 
    allowfullscreen
></iframe>
This code has to 
<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    var board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: false,
        pan: { enabled: false },
        zoom: { enabled: false },
        showNavigation: false
    });
    var box = [-2, 2],
        view = board.create('view3d', [[-3, -1], [6, 6], [box, box, box]], {
            projection: 'central',
            xPlaneRear: { visible: false },
            yPlaneRear: { visible: false }
        });
    
    // Define the 3D function graph
    var F_txt = 'cos(1 * x) * cos(2 * y)';
    var F = board.jc.snippet(F_txt, true, 'x,y');
    
    // Partial derivatives, computed symbolically
    var Fdx_txt = 'D(cos(2 * x) * cos(3 * y), x)';
    var Fdy_txt = 'D(cos(2 * x) * cos(3 * y), y)';
    var Fdx = board.jc.snippet(Fdx_txt, true, 'x,y');
    var Fdy = board.jc.snippet(Fdy_txt, true, 'x,y');
    
    // 3D function graph
    var c = view.create("functiongraph3d", [F, box, box], { strokeWidth: .5, stepU: 100, stepsV: 100 });
    
    // The two points
    var Axy = view.create("point3d", [0.75, 1.25, -2], { withLabel: false, fillColor: '#aaaaaa', showInfobox: false }),
        A = view.create("point3d", [function() { return [Axy.X(), Axy.Y(), F(Axy.X(), Axy.Y())] }], {
            withLabel: false,
            fixed: true, fillColor: '#aaaaaa', showInfobox: false
        }),
        Ax = view.create("point3d", [function() { return [Axy.X(), 0, -2 ]}], { size:1, fillColor: '#aaaaaa', withLabel: false, showInfobox: false }),
        Ay = view.create("point3d", [function() { return [0, Axy.Y(), -2 ]}], { size:1, fillColor: '#aaaaaa', withLabel: false, showInfobox: false });
    view.create("line3d", [Axy, A], { dash: 1 });
    view.create("line3d", [Axy, Ax], { dash: 1 });
    view.create("line3d", [Axy, Ay], { dash: 1 });
    
    // Determine tangent vectors
    var dFx = () => Fdx(A.X(), A.Y()),
        dFy = () => Fdy(A.X(), A.Y()),
        dFx_norm = () => Math.sqrt(1 + Fdx(A.X(), A.Y()) ** 2),
        dFy_norm = () => Math.sqrt(1 + Fdy(A.X(), A.Y()) ** 2),
        dFx1 = () => 1 / dFx_norm(),
        dFx2 = () => Fdx(A.X(), A.Y()) / dFx_norm(),
        dFy1 = () => 1 / dFy_norm(),
        dFy2 = () => Fdy(A.X(), A.Y()) / dFy_norm(),
        dFx_vec = [dFx1, 0, dFx2],
        dFy_vec = [0, dFy1, dFy2],
    
        // Tangent plane
        plane1 = view.create("plane3d", [A, dFx_vec, dFy_vec, [-.5, .5], [-.5, .5]], { fillOpacity: .8, fillColor: "#0080c0", strokeWidth: .5 }),
        // Tangent vectors of length 1
        a = view.create("line3d", [A, dFx_vec, [0, 1]]),
        b = view.create("line3d", [A, dFy_vec, [0, 1]]);
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

var board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: false,
    pan: { enabled: false },
    zoom: { enabled: false },
    showNavigation: false
});
var box = [-2, 2],
    view = board.create('view3d', [[-3, -1], [6, 6], [box, box, box]], {
        projection: 'central',
        xPlaneRear: { visible: false },
        yPlaneRear: { visible: false }
    });

// Define the 3D function graph
var F_txt = 'cos(1 * x) * cos(2 * y)';
var F = board.jc.snippet(F_txt, true, 'x,y');

// Partial derivatives, computed symbolically
var Fdx_txt = 'D(cos(2 * x) * cos(3 * y), x)';
var Fdy_txt = 'D(cos(2 * x) * cos(3 * y), y)';
var Fdx = board.jc.snippet(Fdx_txt, true, 'x,y');
var Fdy = board.jc.snippet(Fdy_txt, true, 'x,y');

// 3D function graph
var c = view.create("functiongraph3d", [F, box, box], { strokeWidth: .5, stepU: 100, stepsV: 100 });

// The two points
var Axy = view.create("point3d", [0.75, 1.25, -2], { withLabel: false, fillColor: '#aaaaaa', showInfobox: false }),
    A = view.create("point3d", [function() { return [Axy.X(), Axy.Y(), F(Axy.X(), Axy.Y())] }], {
        withLabel: false,
        fixed: true, fillColor: '#aaaaaa', showInfobox: false
    }),
    Ax = view.create("point3d", [function() { return [Axy.X(), 0, -2 ]}], { size:1, fillColor: '#aaaaaa', withLabel: false, showInfobox: false }),
    Ay = view.create("point3d", [function() { return [0, Axy.Y(), -2 ]}], { size:1, fillColor: '#aaaaaa', withLabel: false, showInfobox: false });
view.create("line3d", [Axy, A], { dash: 1 });
view.create("line3d", [Axy, Ax], { dash: 1 });
view.create("line3d", [Axy, Ay], { dash: 1 });

// Determine tangent vectors
var dFx = () => Fdx(A.X(), A.Y()),
    dFy = () => Fdy(A.X(), A.Y()),
    dFx_norm = () => Math.sqrt(1 + Fdx(A.X(), A.Y()) ** 2),
    dFy_norm = () => Math.sqrt(1 + Fdy(A.X(), A.Y()) ** 2),
    dFx1 = () => 1 / dFx_norm(),
    dFx2 = () => Fdx(A.X(), A.Y()) / dFx_norm(),
    dFy1 = () => 1 / dFy_norm(),
    dFy2 = () => Fdy(A.X(), A.Y()) / dFy_norm(),
    dFx_vec = [dFx1, 0, dFx2],
    dFy_vec = [0, dFy1, dFy2],

    // Tangent plane
    plane1 = view.create("plane3d", [A, dFx_vec, dFy_vec, [-.5, .5], [-.5, .5]], { fillOpacity: .8, fillColor: "#0080c0", strokeWidth: .5 }),
    // Tangent vectors of length 1
    a = view.create("line3d", [A, dFx_vec, [0, 1]]),
    b = view.create("line3d", [A, dFy_vec, [0, 1]]);
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Surface plot" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is licensed under a 
   Creative Commons Attribution ShareAlike 4.0 International License.
   https://creativecommons.org/licenses/by-sa/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   var board = JXG.JSXGraph.initBoard(BOARDID, {
       boundingbox: [-5, 5, 5, -5],
       axis: false,
       pan: { enabled: false },
       zoom: { enabled: false },
       showNavigation: false
   });
   var box = [-2, 2],
       view = board.create('view3d', [[-3, -1], [6, 6], [box, box, box]], {
           projection: 'central',
           xPlaneRear: { visible: false },
           yPlaneRear: { visible: false }
       });
   
   // Define the 3D function graph
   var F_txt = 'cos(1 * x) * cos(2 * y)';
   var F = board.jc.snippet(F_txt, true, 'x,y');
   
   // Partial derivatives, computed symbolically
   var Fdx_txt = 'D(cos(2 * x) * cos(3 * y), x)';
   var Fdy_txt = 'D(cos(2 * x) * cos(3 * y), y)';
   var Fdx = board.jc.snippet(Fdx_txt, true, 'x,y');
   var Fdy = board.jc.snippet(Fdy_txt, true, 'x,y');
   
   // 3D function graph
   var c = view.create("functiongraph3d", [F, box, box], { strokeWidth: .5, stepU: 100, stepsV: 100 });
   
   // The two points
   var Axy = view.create("point3d", [0.75, 1.25, -2], { withLabel: false, fillColor: '#aaaaaa', showInfobox: false }),
       A = view.create("point3d", [function() { return [Axy.X(), Axy.Y(), F(Axy.X(), Axy.Y())] }], {
           withLabel: false,
           fixed: true, fillColor: '#aaaaaa', showInfobox: false
       }),
       Ax = view.create("point3d", [function() { return [Axy.X(), 0, -2 ]}], { size:1, fillColor: '#aaaaaa', withLabel: false, showInfobox: false }),
       Ay = view.create("point3d", [function() { return [0, Axy.Y(), -2 ]}], { size:1, fillColor: '#aaaaaa', withLabel: false, showInfobox: false });
   view.create("line3d", [Axy, A], { dash: 1 });
   view.create("line3d", [Axy, Ax], { dash: 1 });
   view.create("line3d", [Axy, Ay], { dash: 1 });
   
   // Determine tangent vectors
   var dFx = () => Fdx(A.X(), A.Y()),
       dFy = () => Fdy(A.X(), A.Y()),
       dFx_norm = () => Math.sqrt(1 + Fdx(A.X(), A.Y()) ** 2),
       dFy_norm = () => Math.sqrt(1 + Fdy(A.X(), A.Y()) ** 2),
       dFx1 = () => 1 / dFx_norm(),
       dFx2 = () => Fdx(A.X(), A.Y()) / dFx_norm(),
       dFy1 = () => 1 / dFy_norm(),
       dFy2 = () => Fdy(A.X(), A.Y()) / dFy_norm(),
       dFx_vec = [dFx1, 0, dFx2],
       dFy_vec = [0, dFy1, dFy2],
   
       // Tangent plane
       plane1 = view.create("plane3d", [A, dFx_vec, dFy_vec, [-.5, .5], [-.5, .5]], { fillOpacity: .8, fillColor: "#0080c0", strokeWidth: .5 }),
       // Tangent vectors of length 1
       a = view.create("line3d", [A, dFx_vec, [0, 1]]),
       b = view.create("line3d", [A, dFy_vec, [0, 1]]);
</jsxgraph>

Surface plot

3D
Calculus
JSXGraph supports the visualization of surface plots, including features such as tangent planes.
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: false,
    pan: { enabled: false },
    zoom: { enabled: false },
    showNavigation: false
});
var box = [-2, 2],
    view = board.create('view3d', [[-3, -1], [6, 6], [box, box, box]], {
        projection: 'central',
        xPlaneRear: { visible: false },
        yPlaneRear: { visible: false }
    });

// Define the 3D function graph
var F_txt = 'cos(1 * x) * cos(2 * y)';
var F = board.jc.snippet(F_txt, true, 'x,y');

// Partial derivatives, computed symbolically
var Fdx_txt = 'D(cos(2 * x) * cos(3 * y), x)';
var Fdy_txt = 'D(cos(2 * x) * cos(3 * y), y)';
var Fdx = board.jc.snippet(Fdx_txt, true, 'x,y');
var Fdy = board.jc.snippet(Fdy_txt, true, 'x,y');

// 3D function graph
var c = view.create("functiongraph3d", [F, box, box], { strokeWidth: .5, stepU: 100, stepsV: 100 });

// The two points
var Axy = view.create("point3d", [0.75, 1.25, -2], { withLabel: false, fillColor: '#aaaaaa', showInfobox: false }),
    A = view.create("point3d", [function() { return [Axy.X(), Axy.Y(), F(Axy.X(), Axy.Y())] }], {
        withLabel: false,
        fixed: true, fillColor: '#aaaaaa', showInfobox: false
    }),
    Ax = view.create("point3d", [function() { return [Axy.X(), 0, -2 ]}], { size:1, fillColor: '#aaaaaa', withLabel: false, showInfobox: false }),
    Ay = view.create("point3d", [function() { return [0, Axy.Y(), -2 ]}], { size:1, fillColor: '#aaaaaa', withLabel: false, showInfobox: false });
view.create("line3d", [Axy, A], { dash: 1 });
view.create("line3d", [Axy, Ax], { dash: 1 });
view.create("line3d", [Axy, Ay], { dash: 1 });

// Determine tangent vectors
var dFx = () => Fdx(A.X(), A.Y()),
    dFy = () => Fdy(A.X(), A.Y()),
    dFx_norm = () => Math.sqrt(1 + Fdx(A.X(), A.Y()) ** 2),
    dFy_norm = () => Math.sqrt(1 + Fdy(A.X(), A.Y()) ** 2),
    dFx1 = () => 1 / dFx_norm(),
    dFx2 = () => Fdx(A.X(), A.Y()) / dFx_norm(),
    dFy1 = () => 1 / dFy_norm(),
    dFy2 = () => Fdy(A.X(), A.Y()) / dFy_norm(),
    dFx_vec = [dFx1, 0, dFx2],
    dFy_vec = [0, dFy1, dFy2],

    // Tangent plane
    plane1 = view.create("plane3d", [A, dFx_vec, dFy_vec, [-.5, .5], [-.5, .5]], { fillOpacity: .8, fillColor: "#0080c0", strokeWidth: .5 }),
    // Tangent vectors of length 1
    a = view.create("line3d", [A, dFx_vec, [0, 1]]),
    b = view.create("line3d", [A, dFy_vec, [0, 1]]);

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.