数学 - JavaScript - 基礎理論 - パスカルの三角形 - 無限数列とその極限(無限級数の極限)

オイラーの贈物

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• D3.js (JavaScript Library)
• Safari(Web browser)
• 参考書籍
  • JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)
  • JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)
  • インタラクティブ・データビジュアライゼーション(Scott Murray (著)、長尾 高弘 (翻訳)、オライリージャパン)

オイラーの贈物―人類の至宝eiπ=-1を学ぶ (吉田 武(著)、東海大学出版会)の第1部(基礎理論)、1章(パスカルの三角形)、1.4(無限数列とその極限)、1.4.2(無限級数の極限)、問題6を取り組んでみる。

問題6

HTML5

<div id="graph0"></div>
<label for="a0">A = </label>
<input id="a0" type="number" min="1" step="1" value="0.9999">
<label for="n0">n = </label>
<input id="n0" type="number" min="1" step="1" value="10000">

<div id="graph1"></div>
<label for="b0">B = </label>
<input id="b0" type="number" min="1" step="1" value="1.0001">
<label for="n1">n = </label>
<input id="n1" type="number" min="1" step="1" value="10000">

<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="sample6.js"></script>

JavaScript

{
    let div_graph0 = document.querySelector('#graph0'),
        input_a = document.querySelector('#a0'),
        input_n0 = document.querySelector('#n0'),
        width = 600,
        height = 600,
        padding = 50;

    let range = (n) => {
        let result = [];
        for (let i = 1; i <= n; i += 1) {
            result.push(i);
        }
        return result;
    };
    let drawA = () => {
        let a = parseFloat(input_a.value),
            n = parseInt(input_n0.value, 10),
            points = range(n).map((n) => [n, Math.pow(a, n)]);

        let xscale = d3.scaleLinear()
            .domain([1, n])
            .range([padding, width - padding])
        let yscale = d3.scaleLinear()
            .domain([points[points.length- 1][1], 1])
            .range([height - padding, padding]);

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

        svg.selectAll('line')
            .data(points.slice(0, -1))
            .enter()
            .append('line')
            .attr('x1', (d) => xscale(d[0]))
            .attr('y1', (d) => yscale(d[1]))
            .attr('x2', (d, i) => xscale(points[i + 1][0]))
            .attr('y2', (d, i) => yscale(points[i + 1][1]))
            .attr('stroke', 'green');

        let xaxis = d3.axisBottom().scale(xscale);
        let yaxis = d3.axisLeft().scale(yscale);

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

    input_a.onchange = drawA;
    input_n0.onchange = drawA;

    drawA();

    let div_graph1 = document.querySelector('#graph1'),
        input_b = document.querySelector('#b0'),
        input_n1 = document.querySelector('#n1');

    let drawB = () => {
        let b = parseFloat(input_b.value),
            n = parseInt(input_n1.value, 10),
            points = range(n).map((n) => [n, Math.pow(b, n)]);

        let xscale = d3.scaleLinear()
            .domain([1, n])
            .range([padding, width - padding])
        let yscale = d3.scaleLinear()
            .domain([1, points[points.length- 1][1]])
            .range([height - padding, padding]);

        div_graph1.innerHTML = '';
        let svg = d3.select('#graph1')
            .append('svg')
            .attr('width', width)
            .attr('height', height);

        svg.selectAll('line')
            .data(points.slice(0, -1))
            .enter()
            .append('line')
            .attr('x1', (d) => xscale(d[0]))
            .attr('y1', (d) => yscale(d[1]))
            .attr('x2', (d, i) => xscale(points[i + 1][0]))
            .attr('y2', (d, i) => yscale(points[i + 1][1]))
            .attr('stroke', 'green');

        let xaxis = d3.axisBottom().scale(xscale);
        let yaxis = d3.axisLeft().scale(yscale);

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

    input_b.onchange = drawB;
    input_n1.onchange = drawB;

    drawB();
}

A = n =

B = n =