JavaScript - 数学 - 初等解析問題を解く(確率密度関数(正規分布))

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

開発環境

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

Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の7章(初等解析問題を解く)、7.8(確率密度関数)をJavaScriptで取り組んでみる。

7.8(確率密度関数)

コード(Emacs)

HTML5

<div id="graph0"></div>
<label for="dx0">
  dx =
</label>
<input id="dx0" type="number" min="0" max="20.00" value="0.001"> 
P(
<input id="x0" type="number" min="0" max="20" step="0.1" value="11">
< x <
<input id="x1" type="number" min="0" max="20" step="0.1" value="12">
) =
<span id="probability"></span>

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

JavaScript

(function () {
    'use strict';
    var width = 600,
        height = 600,
        padding = 50,
        xmin = 0,
        xmax = 20,
        ymin = 0,
        ymax = 0.45,
        xscale,
        yscale,
        xaxis,
        yaxis,
        svg,
        div_graph = document.querySelector('#graph0'),
        input_dx = document.querySelector('#dx0'),
        input_x0 = document.querySelector('#x0'),
        input_x1 = document.querySelector('#x1'),
        inputs = [input_dx, input_x0, input_x1],
        span_probability = document.querySelector('#probability'),
        probability_density,
        getPoints,
        draw,
        integral,
        output;

    xscale = d3.scaleLinear()
        .domain([xmin, xmax])
        .range([padding, width - padding]);
    yscale = d3.scaleLinear()
        .domain([ymin, ymax])
        .range([height - padding, padding]);
    xaxis = d3.axisBottom().scale(xscale);
    yaxis = d3.axisLeft().scale(yscale);

    probability_density = function (x) {
        return 1 / Math.sqrt(2 * Math.PI) *
            Math.pow(Math.E, -Math.pow(x - 10, 2) / 2);
    };
    getPoints = function (f) {
        var dx = parseFloat(input_dx.value),
            points = [];

        range(xmin, xmax, dx).forEach(function (x) {
            points.push([x, f(x)]);
        });
        return points;
    };
    draw = function () {
        var points = getPoints(probability_density);

        div_graph.innerHTML = '';
        svg = d3.select('#graph0')
            .append('svg')
            .attr('width', width)
            .attr('height', height);

        svg.selectAll('circle')
            .data(points)
            .enter()
            .append('circle')
            .attr('cx', function (d) {
                return xscale(d[0]);
            })
            .attr('cy', function (d) {
                return yscale(d[1]);
            })
            .attr('r', 1)
            .attr('fill', 'green');

        svg.append('g')
            .attr('transform', 'translate(0, ' + (height - padding) + ')')
            .call(xaxis);
        svg.append('g')
            .attr('transform', 'translate(' + padding + ', 0)')
            .call(yaxis);
    };
    integral = function (f, a, b, dx) {
        var area = 0;

        range(a, b, dx).forEach(function (x) {
            area += dx * f(x);
        });
        return area;
    };
    output = function () {
        var dx = parseFloat(input_dx.value),
            a = parseFloat(input_x0.value),
            b = parseFloat(input_x1.value);
        
        span_probability.innerText = integral(probability_density, a, b, dx);
    };
    inputs.forEach(function (input) {
        input.onchange = output;
    });

    draw();
    output();
}());

dx = P( < x < ) =