数学 - JavaScript - 倍数、約数、双曲線と格子点 - ( @hyuki )結城浩 さんのツイートより

インタラクティブ・データビジュアライゼーション
原著

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Learning JavaScript [邦訳](参考書籍)

金曜日は『数学ガールの秘密ノート』の日。最新回は一週間無料で読めます。公式RTしてから読みにいってね！
やさしく始まる新シーズン「整数に誘われて」第1章　倍数って何だろう（後編）https://t.co/MLaqKKJjwS

— 結城浩 (@hyuki) 2017年4月27日

倍数って何だろう（後編）

双曲線のグラフが格子点を通るところに現れる

36以外の約数でも、双曲線のグラフが格子点を通るところに現れることを、気軽に確認できるようにしてみた。

コード(Emacs)

HTML5

<div id="graph0"></div>
<pre id="output0"></pre>
n = <input id="n0" min="1" step="1" type="number" value="36">
<br>
<button id="draw0">draw</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="sample7.js"></script>    

JavaScript

let div0 = document.querySelector('#graph0'),
    input_n = document.querySelector('#n0'),
    pre0 = document.querySelector('#output0'),
    width = 600,
    height = 600,
    padding = 50,
    btn0 = document.querySelector('#draw0'),
    btn1 = document.querySelector('#clear0'),
    p = (x) => pre0.textContent += x + '\n',
    range = (start, end, step=1) => {
        let result = [];
        for (let i = start; i < end; i += step) {
            result.push(i);
        }
        return result;
    };

let draw = () => {
    pre0.textContent = '';    
    
    let n = parseInt(input_n.value, 10),
        f = (x) => n / x;

    let points = range(1, n, 0.001).map((x) => [x, f(x)]);
    let t = points.length;

    let points0 = range(1, n + 1)
        .map((x) => [x, f(x)])
        .filter((p) => Math.floor(p[1]) === p[1]);
    let lines = range(1, n + 1)
        .map((x) => [[0, x], [n, x]])

    lines = lines.concat(lines.map((p) => [[p[0][1], p[0][0]], [p[1][1], p[1][0]]]));

    let xscale = d3.scaleLinear()
        .domain([0, n])
        .range([padding, width - padding]);
    let yscale = d3.scaleLinear()
        .domain([0, n])
        .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);

    svg.selectAll('line')
        .data(lines)
        .enter()
        .append('line')
        .attr('x1', (d) => xscale(d[0][0]))
        .attr('y1', (d) => yscale(d[0][1]))
        .attr('x2', (d) => xscale(d[1][0]))
        .attr('y2', (d) => yscale(d[1][1]))
        .attr('stroke', 'lightgray');
    
    svg.selectAll('circle')
        .data(points.concat(points0))
        .enter()
        .append('circle')
        .attr('cx', (d) => xscale(d[0]))
        .attr('cy', (d) => yscale(d[1]))
        .attr('r', (d) => {
            let [x, y] = d;
            
            return Math.floor(x) === x && Math.floor(y) === y ? 4 : 1;
        })
        .attr('fill', 'red');

    svg.selectAll('text')
        .data(points0)
        .enter()
        .append('text')
        .text((d) => `(${d[0]}, ${d[1]})`)
        .attr('x', (d) => xscale(d[0]))
        .attr('y', (d) => yscale(d[1]))
        .attr('fill', 'black');
    
    svg.append('g')
        .attr('transform', `translate(0, ${height - padding})`)
        .call(xaxis);

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

    points0.forEach((point) => p(`(${point[0]}, ${point[1]})`));
}

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

n =