JSXGraph
JSXGraph share

Share

3D function graph plotter
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/3d-function-graph" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: 3D function graph plotter" 
    allowfullscreen
></iframe>
This code has to 
<p>Function term in <em>(x,y)</em>:
  <br>
  <input type"text" id="plot_input" value="sin(x * y * r / 4)" style="width: 10em; margin-top: 1rem;">
  <br>
  <input type="button" id="plot_start" value="plot" onClick="start_plot();" style="width: 4em; margin-top: 1rem;">
  <input type="button" id="plot_reset" value="reset" onClick="reset_plot();" style="width: 4em; margin-top: 1rem;">
  <br><br>
  (The function might also depend on the slider value <em>r</em>.)
</p>

<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';

    // Define some colors, optimized for color blinds
    var colors = [JXG.palette.blue,
            JXG.palette.red,
            JXG.palette.green,
            JXG.palette.black,
            JXG.palette.purple,
            JXG.palette.yellow,
            JXG.palette.skyblue
        ],
        cnt = 0;
    
    // We make board a global variable.
    // This is necessary just on this platform.
    window.board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-8, 8, 8, -8],
        keepaspectratio: false,
        axis: false,
        pan: {
            enabled: false
        }
    });
    
    var box = [-5, 5];
    var view = board.create('view3d', [
        [-6, -3],
        [8, 8],
        [box, box, box]
    ], {
        xPlaneRear: {visible: false}, yPlaneRear: {visible: false}
    });
    
    // Create a slider which might be used in the function term
    // using the name 'r'
    var slider = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 'r' });
    
    // Handler for button 'plot'
    window.start_plot = function() {
        var txt = document.getElementById('plot_input').value,
            f = board.jc.snippet(txt, true, 'x,y', true), // JessieCode parsing
            el;
    
        el = view.create('functiongraph3d', [f, box, box], {
            strokeColor: colors[cnt],
            stepsU: 50,
            stepsV: 50,
            strokeWidth: 0.5
        });
        board.update();
        // Cycle through the color array
        cnt = (cnt + 1) % colors.length;
    }
    
    // Handler for button 'reset'
    window.reset_plot = function() {
        // Complete restart of the construction
        JXG.JSXGraph.freeBoard(board);
        board = JXG.JSXGraph.initBoard(BOARDID, {
            boundingbox: [-8, 8, 8, -8]
        });
        view = board.create('view3d', [
            [-6, -3],
            [8, 8],
            [box, box, box]
        ]);
    
        slider = board.create('slider', [
            [-7, -6],
            [5, -6],
            [-3, 1, 4]
        ], {
            name: 'r'
        });
        cnt = 0;
    }
    
 </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!

// Define some colors, optimized for color blinds
var colors = [JXG.palette.blue,
        JXG.palette.red,
        JXG.palette.green,
        JXG.palette.black,
        JXG.palette.purple,
        JXG.palette.yellow,
        JXG.palette.skyblue
    ],
    cnt = 0;

// We make board a global variable.
// This is necessary just on this platform.
window.board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-8, 8, 8, -8],
    keepaspectratio: false,
    axis: false,
    pan: {
        enabled: false
    }
});

var box = [-5, 5];
var view = board.create('view3d', [
    [-6, -3],
    [8, 8],
    [box, box, box]
], {
    xPlaneRear: {visible: false}, yPlaneRear: {visible: false}
});

// Create a slider which might be used in the function term
// using the name 'r'
var slider = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 'r' });

// Handler for button 'plot'
window.start_plot = function() {
    var txt = document.getElementById('plot_input').value,
        f = board.jc.snippet(txt, true, 'x,y', true), // JessieCode parsing
        el;

    el = view.create('functiongraph3d', [f, box, box], {
        strokeColor: colors[cnt],
        stepsU: 50,
        stepsV: 50,
        strokeWidth: 0.5
    });
    board.update();
    // Cycle through the color array
    cnt = (cnt + 1) % colors.length;
}

// Handler for button 'reset'
window.reset_plot = function() {
    // Complete restart of the construction
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-8, 8, 8, -8]
    });
    view = board.create('view3d', [
        [-6, -3],
        [8, 8],
        [box, box, box]
    ]);

    slider = board.create('slider', [
        [-7, -6],
        [5, -6],
        [-3, 1, 4]
    ], {
        name: 'r'
    });
    cnt = 0;
}

3D function graph plotter

3D
Function plotting
3D function plot of functions $f: {\mathbb R}^2 \to {\mathbb R}, \; (x,y) \mapsto f(x, y)$.

Function term in (x,y):



(The function might also depend on the slider value r.) 

<p>Function term in <em>(x,y)</em>:
  <br>
  <input type"text" id="plot_input" value="sin(x * y * r / 4)" style="width: 10em; margin-top: 1rem;">
  <br>
  <input type="button" id="plot_start" value="plot" onClick="start_plot();" style="width: 4em; margin-top: 1rem;">
  <input type="button" id="plot_reset" value="reset" onClick="reset_plot();" style="width: 4em; margin-top: 1rem;">
  <br><br>
  (The function might also depend on the slider value <em>r</em>.)
</p>
// Define the id of your board in BOARDID

// Define some colors, optimized for color blinds
var colors = [JXG.palette.blue,
        JXG.palette.red,
        JXG.palette.green,
        JXG.palette.black,
        JXG.palette.purple,
        JXG.palette.yellow,
        JXG.palette.skyblue
    ],
    cnt = 0;

// We make board a global variable.
// This is necessary just on this platform.
window.board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-8, 8, 8, -8],
    keepaspectratio: false,
    axis: false,
    pan: {
        enabled: false
    }
});

var box = [-5, 5];
var view = board.create('view3d', [
    [-6, -3],
    [8, 8],
    [box, box, box]
], {
    xPlaneRear: {visible: false}, yPlaneRear: {visible: false}
});

// Create a slider which might be used in the function term
// using the name 'r'
var slider = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 'r' });

// Handler for button 'plot'
window.start_plot = function() {
    var txt = document.getElementById('plot_input').value,
        f = board.jc.snippet(txt, true, 'x,y', true), // JessieCode parsing
        el;

    el = view.create('functiongraph3d', [f, box, box], {
        strokeColor: colors[cnt],
        stepsU: 50,
        stepsV: 50,
        strokeWidth: 0.5
    });
    board.update();
    // Cycle through the color array
    cnt = (cnt + 1) % colors.length;
}

// Handler for button 'reset'
window.reset_plot = function() {
    // Complete restart of the construction
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-8, 8, 8, -8]
    });
    view = board.create('view3d', [
        [-6, -3],
        [8, 8],
        [box, box, box]
    ]);

    slider = board.create('slider', [
        [-7, -6],
        [5, -6],
        [-3, 1, 4]
    ], {
        name: 'r'
    });
    cnt = 0;
}

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.