JSXGraph
JSXGraph share

Share

Population growth models
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/population-growth-models" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Population growth models" 
    allowfullscreen
></iframe>
This code has to 
<input type="button" value="clear and run" onClick="clearturtle();run()">

<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: [-0.25, 12.5, 14.75, -12.5],
        axis: true,
        keepaspectratio: true
    });
    var t = board.create('turtle', [4, 3, 70]);
    var s = board.create('slider', [[0, -5], [10, -5], [-5, 0.5, 5]], { name: 's' });
    var alpha = board.create('slider', [[0, -6], [10, -6], [-1, 0.2, 2]], { name: 'α' });
    var e = board.create('functiongraph', [
          (x) => s.Value() * Math.exp(alpha.Value() * x)
        ], {
        strokeColor: 'red',
        strokeWidth: 2
    });
    
    t.hideTurtle();
    
    var A = 5;
    var tau = 0.3;
    
    function clearturtle() {
        t.cs();
        t.ht();
    }
    
    function run() {
        t.setPos(0, s.Value());
        t.setPenSize(4);
        dx = 0.1;   // global
        x = 0.0;    // global
        loop();
    }
    
    function loop() {
        var dy = alpha.Value() * t.Y() * dx;    // Exponential growth model
        t.moveTo([dx + t.X(), dy + t.Y()]);     // Move to the next iteration
        x += dx;
        if (x < 20.0) {
            setTimeout(loop, 10);
        }
    }
 </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: [-0.25, 12.5, 14.75, -12.5],
    axis: true,
    keepaspectratio: true
});
var t = board.create('turtle', [4, 3, 70]);
var s = board.create('slider', [[0, -5], [10, -5], [-5, 0.5, 5]], { name: 's' });
var alpha = board.create('slider', [[0, -6], [10, -6], [-1, 0.2, 2]], { name: 'α' });
var e = board.create('functiongraph', [
      (x) => s.Value() * Math.exp(alpha.Value() * x)
    ], {
    strokeColor: 'red',
    strokeWidth: 2
});

t.hideTurtle();

var A = 5;
var tau = 0.3;

function clearturtle() {
    t.cs();
    t.ht();
}

function run() {
    t.setPos(0, s.Value());
    t.setPenSize(4);
    dx = 0.1;   // global
    x = 0.0;    // global
    loop();
}

function loop() {
    var dy = alpha.Value() * t.Y() * dx;    // Exponential growth model
    t.moveTo([dx + t.X(), dy + t.Y()]);     // Move to the next iteration
    x += dx;
    if (x < 20.0) {
        setTimeout(loop, 10);
    }
}
This is a visualization of the Malthusian growth model, also called simple exponential growth model. In time $\Delta t$, the population consisting of $y$ elements grows by $\alpha\cdot y $ elements: $$ \Delta y = \alpha\cdot y\cdot \Delta t.$$ That is $$ \frac{\Delta y}{\Delta t} = \alpha\cdot y .$$ With $\Delta t\to 0$ we get for the function $y$ describing the population growth: $ \frac{d y}{d t} = \alpha\cdot y $, i.e. $ y' = \alpha\cdot y $. The initial population is $y(0)= s$. The red line shows the analytic solution of the differential equation $y(t)=s\cdot e^{\alpha t}$ using The black line is the simulation using a JSXGraph turtle with $\Delta t = 0.1$. In numerical mathematics, the black curve is essentially is essentially the outcome of Euler's method. The JSXGraph turtle is well suited to simulate dynamic processes.
<input type="button" value="clear and run" onClick="clearturtle();run()">
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-0.25, 12.5, 14.75, -12.5],
    axis: true,
    keepaspectratio: true
});
var t = board.create('turtle', [4, 3, 70]);
var s = board.create('slider', [[0, -5], [10, -5], [-5, 0.5, 5]], { name: 's' });
var alpha = board.create('slider', [[0, -6], [10, -6], [-1, 0.2, 2]], { name: 'α' });
var e = board.create('functiongraph', [
      (x) => s.Value() * Math.exp(alpha.Value() * x)
    ], {
    strokeColor: 'red',
    strokeWidth: 2
});

t.hideTurtle();

var A = 5;
var tau = 0.3;

function clearturtle() {
    t.cs();
    t.ht();
}

function run() {
    t.setPos(0, s.Value());
    t.setPenSize(4);
    dx = 0.1;   // global
    x = 0.0;    // global
    loop();
}

function loop() {
    var dy = alpha.Value() * t.Y() * dx;    // Exponential growth model
    t.moveTo([dx + t.X(), dy + t.Y()]);     // Move to the next iteration
    x += dx;
    if (x < 20.0) {
        setTimeout(loop, 10);
    }
}

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.