JSXGraph
JSXGraph share

Share

Secant and tangent
Show plain example
QR code 
<iframe 
    src="https://www.jsxgraph.uni-bayreuth.de/share/iframe/secant-and-tangent" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Secant and tangent" 
    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>
<div id="board-1-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-1" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>
<div id="board-2-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-2" 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 BOARDID0 = 'board-0';
    const BOARDID1 = 'board-1';
    const BOARDID2 = 'board-2';
    const BOARDID = BOARDID0;

    // Continuous, differentiable functiongraph
    var board = JXG.JSXGraph.initBoard(BOARDID0, {
        boundingbox: [-5, 10, 7, -6],
        axis: true,
        showClearTraces: true,
        keepaspectratio: true
    });
    
    var p = [];
    p[0] = board.create('point', [-1, 0], { size: 2, name: '' });
    p[1] = board.create('point', [-0.5, 1], { size: 2, name: '' });
    p[2] = board.create('point', [2, 0.5], { size: 2, name: '' });
    p[3] = board.create('point', [6, 5], { size: 2, name: '' });
    var pol = JXG.Math.Numerics.lagrangePolynomial(p);
    var graph = board.create('functiongraph', [pol, -10, 10], { strokeWidth: 3 });
    
    var q = board.create('glider', [4.5, 0, graph], { size: 5, name: 'A' });
    var s = board.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
    var q2 = board.create('point', [
            () => q.X() + Math.max(s.Value(), 0.01),
            () => pol(q.X() + Math.max(s.Value(), 0.01))], { face: '[]', size: 2 });
    var e = board.create('point', [
            () => q2.X() - q.X(),
            () => (q2.Y() - q.Y()) / (q2.X() - q.X())
    ], { style: 7, name: 'secant slope', trace: true });
    var line = board.create('line', [q, q2], { strokeColor: '#ff0000', dash: 2 });
    
    // Continuous functiongraph, not differentiable at x=0
    var board1 = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-5, 10, 7, -6],
        axis: true,
        showClearTraces: true,
        keepaspectratio: true
    });
    
    var f = function(x) { return (Math.abs(x)); };
    var graph = board1.create('functiongraph', [f, -10, 10], { strokeWidth: 3 });
    
    var qf = board1.create('glider', [0, 0, graph], { size: 5, name: 'A' });
    var sf = board1.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
    var qf2 = board1.create('point', [
            () => qf.X() + sf.Value(),
            () => f(qf.X() + sf.Value())], { face: '[]', size: 2 });
    var ef = board1.create('point', [
            () => qf2.X() - qf.X(),
            () => (qf2.Y() - qf.Y()) / (qf2.X() - qf.X())
    ], {
        face: '[]',
        size: 2,
        name: 'secant slope',
        trace: true
    });
    var line = board1.create('line', [qf, qf2], { strokeColor: '#ff0000', dash: 2 });
    
    // functiongraph, not continous at x=0
    var board2 = JXG.JSXGraph.initBoard(BOARDID2, {
        boundingbox: [-5, 10, 7, -6],
        axis: true,
        showClearTraces: true,
        keepaspectratio: true
    });
    
    var g = function(x) { return (x <= 0) ? 0 : 1; };
    var graph = board2.create('functiongraph', [g, -10, 10], { strokeWidth: 3 });
    
    var qg = board2.create('glider', [0, 0, graph], { size: 4, name: 'A' });
    var sg = board2.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
    var qg2 = board2.create('point', [
            () => qg.X() + sg.Value(),
            () => g(qg.X() + sg.Value())
    ], { face: '[]', size: 2 });
    var eg = board2.create('point', [
            () => qg2.X() - qg.X(),
            () => (qg2.Y() - qg.Y()) / (qg2.X() - qg.X())
    ], {
        face: '[]',
        size: 2,
        name: 'secant slope',
        trace: true
    });
    var line = board2.create('line', [qg, qg2], { strokeColor: '#ff0000', dash: 2 });
 </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 BOARDID0 = 'your_div_id_0'; // Insert your 1st board id here!
const BOARDID1 = 'your_div_id_1'; // Insert your 2nd board id here!
const BOARDID2 = 'your_div_id_2'; // Insert your 3rd board id here!

// Continuous, differentiable functiongraph
var board = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-5, 10, 7, -6],
    axis: true,
    showClearTraces: true,
    keepaspectratio: true
});

var p = [];
p[0] = board.create('point', [-1, 0], { size: 2, name: '' });
p[1] = board.create('point', [-0.5, 1], { size: 2, name: '' });
p[2] = board.create('point', [2, 0.5], { size: 2, name: '' });
p[3] = board.create('point', [6, 5], { size: 2, name: '' });
var pol = JXG.Math.Numerics.lagrangePolynomial(p);
var graph = board.create('functiongraph', [pol, -10, 10], { strokeWidth: 3 });

var q = board.create('glider', [4.5, 0, graph], { size: 5, name: 'A' });
var s = board.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
var q2 = board.create('point', [
        () => q.X() + Math.max(s.Value(), 0.01),
        () => pol(q.X() + Math.max(s.Value(), 0.01))], { face: '[]', size: 2 });
var e = board.create('point', [
        () => q2.X() - q.X(),
        () => (q2.Y() - q.Y()) / (q2.X() - q.X())
], { style: 7, name: 'secant slope', trace: true });
var line = board.create('line', [q, q2], { strokeColor: '#ff0000', dash: 2 });

// Continuous functiongraph, not differentiable at x=0
var board1 = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-5, 10, 7, -6],
    axis: true,
    showClearTraces: true,
    keepaspectratio: true
});

var f = function(x) { return (Math.abs(x)); };
var graph = board1.create('functiongraph', [f, -10, 10], { strokeWidth: 3 });

var qf = board1.create('glider', [0, 0, graph], { size: 5, name: 'A' });
var sf = board1.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
var qf2 = board1.create('point', [
        () => qf.X() + sf.Value(),
        () => f(qf.X() + sf.Value())], { face: '[]', size: 2 });
var ef = board1.create('point', [
        () => qf2.X() - qf.X(),
        () => (qf2.Y() - qf.Y()) / (qf2.X() - qf.X())
], {
    face: '[]',
    size: 2,
    name: 'secant slope',
    trace: true
});
var line = board1.create('line', [qf, qf2], { strokeColor: '#ff0000', dash: 2 });

// functiongraph, not continous at x=0
var board2 = JXG.JSXGraph.initBoard(BOARDID2, {
    boundingbox: [-5, 10, 7, -6],
    axis: true,
    showClearTraces: true,
    keepaspectratio: true
});

var g = function(x) { return (x <= 0) ? 0 : 1; };
var graph = board2.create('functiongraph', [g, -10, 10], { strokeWidth: 3 });

var qg = board2.create('glider', [0, 0, graph], { size: 4, name: 'A' });
var sg = board2.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
var qg2 = board2.create('point', [
        () => qg.X() + sg.Value(),
        () => g(qg.X() + sg.Value())
], { face: '[]', size: 2 });
var eg = board2.create('point', [
        () => qg2.X() - qg.X(),
        () => (qg2.Y() - qg.Y()) / (qg2.X() - qg.X())
], {
    face: '[]',
    size: 2,
    name: 'secant slope',
    trace: true
});
var line = board2.create('line', [qg, qg2], { strokeColor: '#ff0000', dash: 2 });
<jsxgraph width="100%, 100%, 100%" aspect-ratio="1 / 1, 1 / 1, 1 / 1" numberOfBoards="3" title="Secant and tangent" 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.
   */
   
   // Continuous, differentiable functiongraph
   var board = JXG.JSXGraph.initBoard(BOARDID0, {
       boundingbox: [-5, 10, 7, -6],
       axis: true,
       showClearTraces: true,
       keepaspectratio: true
   });
   
   var p = [];
   p[0] = board.create('point', [-1, 0], { size: 2, name: '' });
   p[1] = board.create('point', [-0.5, 1], { size: 2, name: '' });
   p[2] = board.create('point', [2, 0.5], { size: 2, name: '' });
   p[3] = board.create('point', [6, 5], { size: 2, name: '' });
   var pol = JXG.Math.Numerics.lagrangePolynomial(p);
   var graph = board.create('functiongraph', [pol, -10, 10], { strokeWidth: 3 });
   
   var q = board.create('glider', [4.5, 0, graph], { size: 5, name: 'A' });
   var s = board.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
   var q2 = board.create('point', [
           () => q.X() + Math.max(s.Value(), 0.01),
           () => pol(q.X() + Math.max(s.Value(), 0.01))], { face: '[]', size: 2 });
   var e = board.create('point', [
           () => q2.X() - q.X(),
           () => (q2.Y() - q.Y()) / (q2.X() - q.X())
   ], { style: 7, name: 'secant slope', trace: true });
   var line = board.create('line', [q, q2], { strokeColor: '#ff0000', dash: 2 });
   
   // Continuous functiongraph, not differentiable at x=0
   var board1 = JXG.JSXGraph.initBoard(BOARDID1, {
       boundingbox: [-5, 10, 7, -6],
       axis: true,
       showClearTraces: true,
       keepaspectratio: true
   });
   
   var f = function(x) { return (Math.abs(x)); };
   var graph = board1.create('functiongraph', [f, -10, 10], { strokeWidth: 3 });
   
   var qf = board1.create('glider', [0, 0, graph], { size: 5, name: 'A' });
   var sf = board1.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
   var qf2 = board1.create('point', [
           () => qf.X() + sf.Value(),
           () => f(qf.X() + sf.Value())], { face: '[]', size: 2 });
   var ef = board1.create('point', [
           () => qf2.X() - qf.X(),
           () => (qf2.Y() - qf.Y()) / (qf2.X() - qf.X())
   ], {
       face: '[]',
       size: 2,
       name: 'secant slope',
       trace: true
   });
   var line = board1.create('line', [qf, qf2], { strokeColor: '#ff0000', dash: 2 });
   
   // functiongraph, not continous at x=0
   var board2 = JXG.JSXGraph.initBoard(BOARDID2, {
       boundingbox: [-5, 10, 7, -6],
       axis: true,
       showClearTraces: true,
       keepaspectratio: true
   });
   
   var g = function(x) { return (x <= 0) ? 0 : 1; };
   var graph = board2.create('functiongraph', [g, -10, 10], { strokeWidth: 3 });
   
   var qg = board2.create('glider', [0, 0, graph], { size: 4, name: 'A' });
   var sg = board2.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
   var qg2 = board2.create('point', [
           () => qg.X() + sg.Value(),
           () => g(qg.X() + sg.Value())
   ], { face: '[]', size: 2 });
   var eg = board2.create('point', [
           () => qg2.X() - qg.X(),
           () => (qg2.Y() - qg.Y()) / (qg2.X() - qg.X())
   ], {
       face: '[]',
       size: 2,
       name: 'secant slope',
       trace: true
   });
   var line = board2.create('line', [qg, qg2], { strokeColor: '#ff0000', dash: 2 });
</jsxgraph>

Secant and tangent

Calculus
This example visualizes the tangent at a curve point $A$ of a curve as it is the limit of a second point $B$ of the curve, converging to point $A$. Please, drag the slider in each example such that the distance $|A-B|\to 0$. The first example is the tangent of a continuous and differentiable function, the second example is not differentiable at $0$, and he third example is not continuous at $0$.
// Define the ids of your boards in BOARDID0, BOARDID1,...

// Continuous, differentiable functiongraph
var board = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-5, 10, 7, -6],
    axis: true,
    showClearTraces: true,
    keepaspectratio: true
});

var p = [];
p[0] = board.create('point', [-1, 0], { size: 2, name: '' });
p[1] = board.create('point', [-0.5, 1], { size: 2, name: '' });
p[2] = board.create('point', [2, 0.5], { size: 2, name: '' });
p[3] = board.create('point', [6, 5], { size: 2, name: '' });
var pol = JXG.Math.Numerics.lagrangePolynomial(p);
var graph = board.create('functiongraph', [pol, -10, 10], { strokeWidth: 3 });

var q = board.create('glider', [4.5, 0, graph], { size: 5, name: 'A' });
var s = board.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
var q2 = board.create('point', [
        () => q.X() + Math.max(s.Value(), 0.01),
        () => pol(q.X() + Math.max(s.Value(), 0.01))], { face: '[]', size: 2 });
var e = board.create('point', [
        () => q2.X() - q.X(),
        () => (q2.Y() - q.Y()) / (q2.X() - q.X())
], { style: 7, name: 'secant slope', trace: true });
var line = board.create('line', [q, q2], { strokeColor: '#ff0000', dash: 2 });

// Continuous functiongraph, not differentiable at x=0
var board1 = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-5, 10, 7, -6],
    axis: true,
    showClearTraces: true,
    keepaspectratio: true
});

var f = function(x) { return (Math.abs(x)); };
var graph = board1.create('functiongraph', [f, -10, 10], { strokeWidth: 3 });

var qf = board1.create('glider', [0, 0, graph], { size: 5, name: 'A' });
var sf = board1.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
var qf2 = board1.create('point', [
        () => qf.X() + sf.Value(),
        () => f(qf.X() + sf.Value())], { face: '[]', size: 2 });
var ef = board1.create('point', [
        () => qf2.X() - qf.X(),
        () => (qf2.Y() - qf.Y()) / (qf2.X() - qf.X())
], {
    face: '[]',
    size: 2,
    name: 'secant slope',
    trace: true
});
var line = board1.create('line', [qf, qf2], { strokeColor: '#ff0000', dash: 2 });

// functiongraph, not continous at x=0
var board2 = JXG.JSXGraph.initBoard(BOARDID2, {
    boundingbox: [-5, 10, 7, -6],
    axis: true,
    showClearTraces: true,
    keepaspectratio: true
});

var g = function(x) { return (x <= 0) ? 0 : 1; };
var graph = board2.create('functiongraph', [g, -10, 10], { strokeWidth: 3 });

var qg = board2.create('glider', [0, 0, graph], { size: 4, name: 'A' });
var sg = board2.create('slider', [[0, -3], [4, -3], [0.001, 1, 1]]);
var qg2 = board2.create('point', [
        () => qg.X() + sg.Value(),
        () => g(qg.X() + sg.Value())
], { face: '[]', size: 2 });
var eg = board2.create('point', [
        () => qg2.X() - qg.X(),
        () => (qg2.Y() - qg.Y()) / (qg2.X() - qg.X())
], {
    face: '[]',
    size: 2,
    name: 'secant slope',
    trace: true
});
var line = board2.create('line', [qg, qg2], { strokeColor: '#ff0000', dash: 2 });

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.