数学 - JavaScript - 確からしさをみる - 確率 – 確率とその基本性質 - 試行が連続したときの確率

数学読本〈4〉

学習環境

• Surface 3 (4G LTE)、Surface 3 タイプ カバー、Surface ペン(端末)
• Windows 10 Pro (OS)
• 数式入力ソフト(TeX, MathML): MathType
• MathML対応ブラウザ: Firefox、Safari
• MathML非対応ブラウザ(Internet Explorer, Google Chrome...)用JavaScript Library: MathJax

数学読本〈4〉数列の極限，順列/順列・組合せ/確率/関数の極限と微分法(松坂 和夫(著)、岩波書店)の第16章(確からしさをみる - 確率)、16.1(確率とその基本性質)、試行が連続したときの確率、問16、17、18.を取り組んでみる。

16. 
    $\frac{3}{5}·\frac{4}{6}+\frac{2}{5}·\frac{3}{6}=\frac{18}{30}=\frac{3}{5}$
17. 
    $\frac{3}{5}·\frac{3}{6}+\frac{2}{5}·\frac{4}{6}=\frac{17}{30}$
18. 
    $\frac{3}{5}·\frac{2}{4}+\frac{2}{5}·\frac{3}{5}=\frac{6}{20}+\frac{6}{25}=\frac{3}{10}+\frac{6}{25}=\frac{27}{50}$

コード(Emacs)

HTML5

<div id="graph0"></div>
<pre id="output0"></pre>
回数: <input id="n0" type="number" min="1" step="1" value="1000">
<br>
<button id="run0">run</button>
<button id="clear0">clear</button>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js" integrity="sha256-5idA201uSwHAROtCops7codXJ0vja+6wbBrZdQ6ETQc=" crossorigin="anonymous"></script>
<script src="sample16.js"></script>    

JavaScript

let pre0 = document.querySelector('#output0'),
    input_n = document.querySelector('#n0'),
    btn0 = document.querySelector('#run0'),
    btn1 = document.querySelector('#clear0'),
    div0 = document.querySelector('#graph0'),
    width = 600,
    height = 600,
    padding = 50,
    p = (x) => pre0.textContent += x + '\n';

let range = (n) => {
    let result = [];
    for (let i = 0; i < n; i += 1) {
        result.push(i);
    }
    return result;
};

let nums = [0, 0, 0, 1, 1],
    white = 0,
    black = 1,
    getBall = (nums) => nums.splice(Math.floor(Math.random() * nums.length), 1)[0],
    f = (n) => {
        return range(n)
            .map(() => {
                let nums0 = nums.slice(),
                    ball = getBall(nums0);

                nums0.push(ball);
                nums0.push(ball);

                return getBall(nums0);
            })
            .filter((ball) => ball === white).length / n;
    },
    g = (n) => {
        return range(n)
            .map(() => {
                let nums0 = nums.slice(),
                    ball = getBall(nums0);

                nums0.push(ball);
                nums0.push(ball === white ? black : white);

                return getBall(nums0);
            })
            .filter((ball) => ball === white).length / n;
    },
    h = (n) => {
        return range(n)
            .map(() => {
                let nums0 = nums.slice(),
                    ball = getBall(nums0);

                if (ball === black) {
                    nums0.push(ball);
                }

                return getBall(nums0);
            })
            .filter((ball) => ball === white).length / n;
    };   

let output = () => {
    let n = parseInt(input_n.value, 10),
        points = [],
        t;
    
    p('16.');
    points = points.concat(range(n).map((i) => [i + 1, f(i + 1)]));

    t = points[points.length - 1][1];
    p(t === 3 / 5);
    p(t);
    p(3 / 5);
    p(Math.abs(t - 3 / 5));

    p('17.');
    points = points.concat(range(n).map((i) => [i + 1, g(i + 1)]));
    t = points[points.length - 1][1];
    p(t === 17 / 30);
    p(t);
    p(17 / 30);
    p(Math.abs(t - 17 / 30));

    p('18.');
    points = points.concat(range(n).map((i) => [i + 1, h(i + 1)]));
    t = points[points.length - 1][1];
    p(t === 27 / 50);
    p(t);
    p(27 / 50);
    p(Math.abs(t - 27 / 50));

    let xscale = d3.scaleLinear()
        .domain([2, n])
        .range([padding, width - padding]);
    let ys = points.map((a) => a[1]);
    let yscale = d3.scaleLinear()
        .domain([Math.min(...ys), Math.max(...ys)])
        .range([height - padding, padding]);

    let xaxis = d3.axisBottom().scale(xscale);
    let yaxis = d3.axisLeft().scale(yscale);
    div0.innerHTML = '';
    let svg = d3.select('#graph0')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

    let t1 = points.length / 3,
        t2 = t1 * 2;
    
    svg.selectAll('circle')
        .data(points)
        .enter()
        .append('circle')
        .attr('cx', (d) => xscale(d[0]))
        .attr('cy', (d) => yscale(d[1]))
        .attr('r', 1)
        .attr('fill', (d, i) =>
              i < t1 ? 'red' :
              i < t2 ? 'green' : 'blue');

    svg.append('g')
        .attr('transform', `translate(0, ${height - padding})`)
        .call(xaxis);

    svg.append('g')
        .attr('transform', `translate(${padding}, 0)`)
        .call(yaxis);    
};

input_n.onchange = output;
btn0.onclick = output;
btn1.onclick = () => pre0.textContent = '';

output();

回数: