JavaScript - 数学 - 集合と確率を操作する(大数の法則)

Pythonからはじめる数学入門
原著

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• D3.js (JavaScript Library)
• kjs-math-statistics
• Safari(Web browser)
• JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)

Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の5章(集合と確率を操作する)、3.9(プログラミングチャレンジ)、問題5-2(大数の法則)をJavaScript(とstatistics.js)で取り組んでみる。

問題5-2(大数の法則)

コード(Emacs)

HTML5

<div id="graph0"></div>
<label for="trials0">
  Trials:
</label>
<input id="trials0" type="number" min="1" step="1" value="100">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="statistics.js"></script>
<script src="sample2.js"></script>

JavaScript

(function (){
    'use strict';
    var expected_value,
        width = 600,
        height = 400,
        padding = 50,
        padding_left = 100,
        div_graph = document.querySelector('#graph0'),
        input_trials = document.querySelector('#trials0'),
        range,
        roll,
        averages,
        drawGraph;

    range = function (start, end, step) {
        var nums = [],
            i;

        for (i = start; i < end; i += step) {
            nums.push(i);
        }
        return nums;
    };

    expected_value = range(1, 7, 1).mean();

    roll = function () {
        return Math.floor(Math.random() * 6) + 1;
    };

    averages = function (trials) {
        var result = [],
            total,        
            i,
            j;

        for (i = 1; i <= trials; i += 1) {
            total = 0;
            for (j = 0; j < i; j += 1) {
                total += roll();
            }
            result.push([i, total / i]);
        }
        return result;
    };
    drawGraph = function () {
        var trials = parseInt(input_trials.value, 10),
            dataset = averages(trials),
            svg,
            xscale,
            yscale,
            xaxis,
            yaxis;

        xscale = d3.scaleLinear()
            .domain([0, trials])
            .range([padding_left, width - padding]);
        xaxis = d3.axisBottom().scale(xscale);

        yscale = d3.scaleLinear()
            .domain([1, 6])
            .range([height - padding, padding]);
        yaxis = d3.axisLeft().scale(yscale);
        
        div_graph.innerHTML = '';
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', width)
            .attr('height', height);

        svg.selectAll('line')
            .data(dataset.slice(0, -1))
            .enter()
            .append('line')
            .attr('x1', function (d, i) {
                return xscale(i);
            })
            .attr('y1', function (d, i) {
                return yscale(d[1]);
            })
            .attr('x2', function (d, i) {
                return xscale(i + 1);
            })
            .attr('y2', function (d, i) {
                return yscale(dataset[i + 1][1]);
            })
            .attr('stroke', 'blue');
        
        svg.append('line')
            .attr('x1', xscale(0))
            .attr('y1', yscale(expected_value))
            .attr('x2', xscale(trials))
            .attr('y2', yscale(expected_value))
            .attr('stroke', 'green');

        svg.append('g')
            .attr('transform', 'translate(0, ' + (height - padding) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform', 'translate(' + padding_left + ', 0)')
            .call(yaxis);
        svg.append('text')
            .attr('x', xscale(trials / 2))
            .attr('y', height - padding / 4)
            .attr('text-anchor', 'middle')
            .text('trials');
        svg.append('text')
            .attr('x', padding_left / 4)
            .attr('y', yscale((1 + 6) / 2))
            .attr('text-anchor', 'middle')
            .text('average');
    };

    input_trials.onchange = drawGraph;
    input_trials.onkeyup = drawGraph;

    drawGraph();
}());

Trials: