JSXGraph
JSXGraph share

Share

Lagrange interpolation, show term
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/lagrange-interpolation-show-term" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Lagrange interpolation, show term" 
    allowfullscreen
></iframe>
This code has to 
<button onClick="addPoint()">Add point</button>
<button onClick="removePoint()">Remove point</button>

<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, 10, 7, -6], axis: true, keepaspectratio: true });
    
    var points = [];
    points[0] = board.create('point', [-1, 2], { size: 4 });
    points[1] = board.create('point', [3, -1], { size: 4 });
    var f = JXG.Math.Numerics.lagrangePolynomial(points);
    var graph = board.create('functiongraph', [f, -10, 10], { strokeWidth: 3 });
    var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], { dash: 1 });
    
    var txt = board.create('text', [-3, -4, () => f.getTerm(2, 't', ' * ')], { fontSize: 16 });
    
    function addPoint() {
        points.push(board.create('point', [(Math.random() - 0.5) * 10, (Math.random() - 0.5) * 3], { size: 4 }));
        board.update();
    }
    
    function removePoint() {
        if (points.length > 2) {
            board.removeObject(points[points.length - 1]);
            points.pop();
        }
    }
 </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, 10, 7, -6], axis: true, keepaspectratio: true });

var points = [];
points[0] = board.create('point', [-1, 2], { size: 4 });
points[1] = board.create('point', [3, -1], { size: 4 });
var f = JXG.Math.Numerics.lagrangePolynomial(points);
var graph = board.create('functiongraph', [f, -10, 10], { strokeWidth: 3 });
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], { dash: 1 });

var txt = board.create('text', [-3, -4, () => f.getTerm(2, 't', ' * ')], { fontSize: 16 });

function addPoint() {
    points.push(board.create('point', [(Math.random() - 0.5) * 10, (Math.random() - 0.5) * 3], { size: 4 }));
    board.update();
}

function removePoint() {
    if (points.length > 2) {
        board.removeObject(points[points.length - 1]);
        points.pop();
    }
}
Constructs a polynomial of degree $n$ through $n+1$ given points. Points can be added by clicking on "Add point". The dotted line is the graph of the first derivative, the dashed line is the graph of the second derivative.
<button onClick="addPoint()">Add point</button>
<button onClick="removePoint()">Remove point</button>
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-5, 10, 7, -6], axis: true, keepaspectratio: true });

var points = [];
points[0] = board.create('point', [-1, 2], { size: 4 });
points[1] = board.create('point', [3, -1], { size: 4 });
var f = JXG.Math.Numerics.lagrangePolynomial(points);
var graph = board.create('functiongraph', [f, -10, 10], { strokeWidth: 3 });
var d1 = board.create('functiongraph', [JXG.Math.Numerics.D(f), -10, 10], { dash: 1 });

var txt = board.create('text', [-3, -4, () => f.getTerm(2, 't', ' * ')], { fontSize: 16 });

function addPoint() {
    points.push(board.create('point', [(Math.random() - 0.5) * 10, (Math.random() - 0.5) * 3], { size: 4 }));
    board.update();
}

function removePoint() {
    if (points.length > 2) {
        board.removeObject(points[points.length - 1]);
        points.pop();
    }
}

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.