JSXGraph
JSXGraph share

Share

Binomial distribution
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/binomial-distribution" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Binomial distribution" 
    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: 4 / 1; width: 100%;" data-ar="4 / 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>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/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 BOARDID = BOARDID0;

    const board1 = JXG.JSXGraph.initBoard(BOARDID0, {
        boundingbox: [-0.3, 0, 1.3, -4],
        axis: false
    });
    var prob = board1.create('slider', [
        [0, -2],
        [1, -2],
        [0, .5, 1]
    ], {
        name: 'p'
    });
    
    const board = JXG.JSXGraph.initBoard(BOARDID1, {
        boundingbox: [-1, 1.1, 21, -.1],
        axis: true,
        showCopyright: false
    });
    board1.addChild(board);
    
    for (let i = 0; i <= 20; i++) {
        board.create('point', [i, () => binomial(20, i, prob.Value())], {
            name: ''
        });
    }
    
    var f = board.create('functiongraph', [function(x) {
        var n, dist = 0;
        for (n = 0; n < 20 + 1; n++) {
            if (x < n) {
                return dist;
            }
            dist = dist + binomial(20, n, prob.Value());
        }
        return dist;
    }]);
    
    function binomial(n, k, p) {
        var x, p1 = 1,
            p2 = 1,
            coeff = 1;
    
        for (x = n - k + 1; x < n + 1; x++) {
            coeff *= x;
        }
        for (x = 1; x < k + 1; x++) {
            coeff /= x;
        }
    
        for (x = 0; x < k; x++) {
            p1 *= p;
        }
    
        for (x = 0; x < n - k; x++) {
            p2 *= (1 - p);
        }
    
        return coeff * p1 * p2;
    }
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/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 board1 = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-0.3, 0, 1.3, -4],
    axis: false
});
var prob = board1.create('slider', [
    [0, -2],
    [1, -2],
    [0, .5, 1]
], {
    name: 'p'
});

const board = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-1, 1.1, 21, -.1],
    axis: true,
    showCopyright: false
});
board1.addChild(board);

for (let i = 0; i <= 20; i++) {
    board.create('point', [i, () => binomial(20, i, prob.Value())], {
        name: ''
    });
}

var f = board.create('functiongraph', [function(x) {
    var n, dist = 0;
    for (n = 0; n < 20 + 1; n++) {
        if (x < n) {
            return dist;
        }
        dist = dist + binomial(20, n, prob.Value());
    }
    return dist;
}]);

function binomial(n, k, p) {
    var x, p1 = 1,
        p2 = 1,
        coeff = 1;

    for (x = n - k + 1; x < n + 1; x++) {
        coeff *= x;
    }
    for (x = 1; x < k + 1; x++) {
        coeff /= x;
    }

    for (x = 0; x < k; x++) {
        p1 *= p;
    }

    for (x = 0; x < n - k; x++) {
        p2 *= (1 - p);
    }

    return coeff * p1 * p2;
}
<jsxgraph width="100%, 100%" aspect-ratio="4 / 1, 1 / 1" numberOfBoards="2" title="Binomial distribution" 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 4.0 International License.
   https://creativecommons.org/licenses/by/4.0/
   
   Please note you have to mention 
   The Center of Mobile Learning with Digital Technology
   in the credits.
   */
   
   const board1 = JXG.JSXGraph.initBoard(BOARDID0, {
       boundingbox: [-0.3, 0, 1.3, -4],
       axis: false
   });
   var prob = board1.create('slider', [
       [0, -2],
       [1, -2],
       [0, .5, 1]
   ], {
       name: 'p'
   });
   
   const board = JXG.JSXGraph.initBoard(BOARDID1, {
       boundingbox: [-1, 1.1, 21, -.1],
       axis: true,
       showCopyright: false
   });
   board1.addChild(board);
   
   for (let i = 0; i <= 20; i++) {
       board.create('point', [i, () => binomial(20, i, prob.Value())], {
           name: ''
       });
   }
   
   var f = board.create('functiongraph', [function(x) {
       var n, dist = 0;
       for (n = 0; n < 20 + 1; n++) {
           if (x < n) {
               return dist;
           }
           dist = dist + binomial(20, n, prob.Value());
       }
       return dist;
   }]);
   
   function binomial(n, k, p) {
       var x, p1 = 1,
           p2 = 1,
           coeff = 1;
   
       for (x = n - k + 1; x < n + 1; x++) {
           coeff *= x;
       }
       for (x = 1; x < k + 1; x++) {
           coeff /= x;
       }
   
       for (x = 0; x < k; x++) {
           p1 *= p;
       }
   
       for (x = 0; x < n - k; x++) {
           p2 *= (1 - p);
       }
   
       return coeff * p1 * p2;
   }
</jsxgraph>
In general, if the random variable $X$ follows the binomial distribution with parameters $n \in \mathbb{N}$ and $p \in [0,1]$, we write $X \simeq B(n, p)$. The probability of getting exactly $k$ successes in n independent Bernoulli trials is given by the probability mass function: $$ Pr(X=k) = \binom{n}{k}p^k(1−p)^{n−k} $$ for $k=0,1, \ldots n$ and $0$ else. From a technical point of view, this example uses two boards which are connected by `board1.addChild(board)`. 
// Define the ids of your boards in BOARDID0, BOARDID1,...

const board1 = JXG.JSXGraph.initBoard(BOARDID0, {
    boundingbox: [-0.3, 0, 1.3, -4],
    axis: false
});
var prob = board1.create('slider', [
    [0, -2],
    [1, -2],
    [0, .5, 1]
], {
    name: 'p'
});

const board = JXG.JSXGraph.initBoard(BOARDID1, {
    boundingbox: [-1, 1.1, 21, -.1],
    axis: true,
    showCopyright: false
});
board1.addChild(board);

for (let i = 0; i <= 20; i++) {
    board.create('point', [i, () => binomial(20, i, prob.Value())], {
        name: ''
    });
}

var f = board.create('functiongraph', [function(x) {
    var n, dist = 0;
    for (n = 0; n < 20 + 1; n++) {
        if (x < n) {
            return dist;
        }
        dist = dist + binomial(20, n, prob.Value());
    }
    return dist;
}]);

function binomial(n, k, p) {
    var x, p1 = 1,
        p2 = 1,
        coeff = 1;

    for (x = n - k + 1; x < n + 1; x++) {
        coeff *= x;
    }
    for (x = 1; x < k + 1; x++) {
        coeff /= x;
    }

    for (x = 0; x < k; x++) {
        p1 *= p;
    }

    for (x = 0; x < n - k; x++) {
        p2 *= (1 - p);
    }

    return coeff * p1 * p2;
}

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.