JavaScript - 数学 - データをグラフで可視化する(2次関数を視覚的に探索する)

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

開発環境

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

Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の2章(データをグラフで可視化する)、2.6(プログラミングチャレンジ)、問題2-2(2次関数を視覚的に探索する)をJavaScript(とD3.js)で取り組んでみる。(バージョンアップで D3.js にいろいろ変更点があったみたい。)

問題2-2(2次関数を視覚的に探索する)

コード(Emacs)

HTML5

<div id="graph0"></div>  

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

<script src="sample2.js"></script>

JavaScript

(function () {
    var xs = [],
        x,
        start = -100,
        end = 101,
        len = end - start - 1,
        ys = [],
        xys = [],
        f,
        y,
        width = 600,
        height = 400,
        padding = 50,
        svg,
        xscale,
        yaxis,
        yscale,
        yaxis;

    f = function (x) {
        return Math.pow(x, 2) + 2 * x + 1;
    };

    for (x = start; x < end; x += 1) {
        y = f(x);
        xs.push(x);
        ys.push(y);
        xys.push([x, y]);
    }
    xscale = d3.scaleLinear()
        .domain([start, end])
        .range([padding, width - padding]);
    xaxis = d3.axisBottom().scale(xscale);

    yscale = d3.scaleLinear()
        .domain([d3.min(ys) - 1000, d3.max(ys)])
        .range([height - padding, padding]);

    yaxis = d3.axisLeft().scale(yscale);

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

    svg.selectAll('line')
        .data(xys)
        .enter()
        .append('line')
        .attr('x1', function (d, i) {
            if (i === len) {
                return xscale(start);
            }
            return xscale(d[0]);
        })
        .attr('y1', function (d, i) {
            if (i === len) {
                return yscale(0);
            }
            return yscale(d[1]);
        })
        .attr('x2', function (d, i) {
            if (i === len) {
                return xscale(end);
            }
            return xscale(xys[i+1][0]);
        })
        .attr('y2', function (d, i) {
            if (i === len) {
                return yscale(0);
            }
            return yscale(xys[i+1][1]);
        })
        .attr('stroke', function (d, i) {
            if (i === len) {
                return 'blue';
            }
            return 'green';
        });

    svg.append('g')
        .attr('transform', 'translate(0, ' + (height - padding) + ')')
        .call(xaxis);

    svg.append('g')
        .attr('transform', 'translate(' + padding + ', 0)')
        .call(yaxis);

    svg.append('text')
        .attr('x', xscale(0))
        .attr('y', padding / 2)
        .attr('text-anchor', 'middle')
        .text('y = x^2 + 2 * x + 1');
    
    svg.append('text')
        .attr('x', xscale(0))
        .attr('y', height - padding / 4)
        .attr('text-anchor', 'middle')
        .text('x');

    svg.append('text')
        .attr('x', padding / 5)
        .attr('y', (height - padding) / 2 )
        .attr('text-anchor', 'middle')
        .text('y');
}());