JSXGraph
JSXGraph share

Share

Taylor Series for Sine
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/power-series-for-sine" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Taylor Series for Sine" 
    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: [-7, 3, 8, -3],
        keepaspectratio: true,
        axis: true
    });
    
    board.create('functiongraph', [function(t) { return Math.sin(t); }, -10, 10], { strokeColor: "#cccccc" });
    
    var s = board.create('slider', [[0.75, -1.5], [5.75, -1.5], [0, 1, 10]], { name: 's', snapWidth: 1 });
    var a = board.create('glider', [0, 0, board.defaultAxes.x], { name: 'a' });
    board.create('functiongraph', [
        function(t) {
            var val = 0,
                n, c,
                sv = s.Value() + 1;
    
            for (n = 0; n < sv; n++) {
                if (n % 4 == 0) {
                    c = Math.sin(a.X()); // 0th, 4th, 8th, ... derivative
                } else if (n % 4 == 1) {
                    c = Math.cos(a.X()); // 1st, 5th, 9th, ... derivative
                } else if (n % 4 == 2) {
                    c = -Math.sin(a.X()); // 2th, 6th, 10th, ... derivative
                } else if (n % 4 == 3) {
                    c = -Math.cos(a.X()); // 3th, 7th, 11th, ... derivative
                }
                val = val + c * Math.pow(t - a.X(), n) / JXG.Math.factorial(n);
            }
            return val;
      },
      -10, 10], {
        strokeColor: "#bb0000"
    });
 </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: [-7, 3, 8, -3],
    keepaspectratio: true,
    axis: true
});

board.create('functiongraph', [function(t) { return Math.sin(t); }, -10, 10], { strokeColor: "#cccccc" });

var s = board.create('slider', [[0.75, -1.5], [5.75, -1.5], [0, 1, 10]], { name: 's', snapWidth: 1 });
var a = board.create('glider', [0, 0, board.defaultAxes.x], { name: 'a' });
board.create('functiongraph', [
    function(t) {
        var val = 0,
            n, c,
            sv = s.Value() + 1;

        for (n = 0; n < sv; n++) {
            if (n % 4 == 0) {
                c = Math.sin(a.X()); // 0th, 4th, 8th, ... derivative
            } else if (n % 4 == 1) {
                c = Math.cos(a.X()); // 1st, 5th, 9th, ... derivative
            } else if (n % 4 == 2) {
                c = -Math.sin(a.X()); // 2th, 6th, 10th, ... derivative
            } else if (n % 4 == 3) {
                c = -Math.cos(a.X()); // 3th, 7th, 11th, ... derivative
            }
            val = val + c * Math.pow(t - a.X(), n) / JXG.Math.factorial(n);
        }
        return val;
  },
  -10, 10], {
    strokeColor: "#bb0000"
});
<jsxgraph width="100%" aspect-ratio="1 / 1" title="Taylor Series for Sine" 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: [-7, 3, 8, -3],
       keepaspectratio: true,
       axis: true
   });
   
   board.create('functiongraph', [function(t) { return Math.sin(t); }, -10, 10], { strokeColor: "#cccccc" });
   
   var s = board.create('slider', [[0.75, -1.5], [5.75, -1.5], [0, 1, 10]], { name: 's', snapWidth: 1 });
   var a = board.create('glider', [0, 0, board.defaultAxes.x], { name: 'a' });
   board.create('functiongraph', [
       function(t) {
           var val = 0,
               n, c,
               sv = s.Value() + 1;
   
           for (n = 0; n < sv; n++) {
               if (n % 4 == 0) {
                   c = Math.sin(a.X()); // 0th, 4th, 8th, ... derivative
               } else if (n % 4 == 1) {
                   c = Math.cos(a.X()); // 1st, 5th, 9th, ... derivative
               } else if (n % 4 == 2) {
                   c = -Math.sin(a.X()); // 2th, 6th, 10th, ... derivative
               } else if (n % 4 == 3) {
                   c = -Math.cos(a.X()); // 3th, 7th, 11th, ... derivative
               }
               val = val + c * Math.pow(t - a.X(), n) / JXG.Math.factorial(n);
           }
           return val;
     },
     -10, 10], {
       strokeColor: "#bb0000"
   });
</jsxgraph>
Visualize the Taylor series $$ \sum_{n=0}^\infty \frac{f^{(n)}(a)}{n!}(x-a)^n$$ for the sine curve expanded at $a$ up to degree $s$.
// Define the id of your board in BOARDID

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

board.create('functiongraph', [function(t) { return Math.sin(t); }, -10, 10], { strokeColor: "#cccccc" });

var s = board.create('slider', [[0.75, -1.5], [5.75, -1.5], [0, 1, 10]], { name: 's', snapWidth: 1 });
var a = board.create('glider', [0, 0, board.defaultAxes.x], { name: 'a' });
board.create('functiongraph', [
    function(t) {
        var val = 0,
            n, c,
            sv = s.Value() + 1;

        for (n = 0; n < sv; n++) {
            if (n % 4 == 0) {
                c = Math.sin(a.X()); // 0th, 4th, 8th, ... derivative
            } else if (n % 4 == 1) {
                c = Math.cos(a.X()); // 1st, 5th, 9th, ... derivative
            } else if (n % 4 == 2) {
                c = -Math.sin(a.X()); // 2th, 6th, 10th, ... derivative
            } else if (n % 4 == 3) {
                c = -Math.cos(a.X()); // 3th, 7th, 11th, ... derivative
            }
            val = val + c * Math.pow(t - a.X(), n) / JXG.Math.factorial(n);
        }
        return val;
  },
  -10, 10], {
    strokeColor: "#bb0000"
});

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.