## 2017年4月28日金曜日

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

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

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')
.call(xaxis);

svg.append('g')
.call(yaxis);

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

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

n =