<iframe src="https://jsxgraph.org/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>
<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 plot of functions f:R2→R,(x,y)↦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; }
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.