学習環境/開発環境
- Surface 3 (4G LTE)、Surface 3 タイプ カバー、Surface ペン(端末)
- Windows 10 Pro (OS)
- 数式入力ソフト(TeX, MathML): MathType
- MathML対応ブラウザ: Firefox、Safari
- MathML非対応ブラウザ(Internet Explorer, Google Chrome...)用JavaScript Library: MathJax
- OS X El Capitan - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- kjs-math-number (JavaScript Library)
- D3.js (JavaScript Library)
- Safari(Web browser)
- 参考書籍
- JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)
- JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)
- インタラクティブ・データビジュアライゼーション(Scott Murray (著)、長尾 高弘 (翻訳)、オライリージャパン)
線型代数入門 (松坂 和夫(著)、岩波書店)の第4章(複素数、複素ベクトル空間)、4(二項方程式)、問1.を取り組んでみる。
問1.
JavaScript(number.js) で確認してみる。
HTML5
<div id="graph0"></div>
<label for="n0">
n =
</label>
<input id="n0" type="number" min="1" step="1" value="4">
<br>
<br>
<div id="output0"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="number.js"></script>
<script src="sample1.js"></script>
JavaScript
コード(Emacs)
(function () {
'use strict';
var width = 600,
height = 600,
padding = 50,
min = -1.5,
max = 1.5,
xscale,
yscale,
xaxis,
yaxis,
svg,
div_graph = document.querySelector('#graph0'),
input_n = document.querySelector('#n0'),
div_output = document.querySelector('#output0'),
calc,
draw,
output;
xscale = d3.scaleLinear()
.domain([min, max])
.range([padding, width - padding]);
yscale = d3.scaleLinear()
.domain([min, max])
.range([height - padding, padding]);
xaxis = d3.axisBottom().scale(xscale);
yaxis = d3.axisLeft().scale(yscale);
calc = function (n) {
var answers = [],
k,
z,
theta;
for (k = 0; k < n; k += 1) {
theta = 2 * k * Math.PI / n;
z = new Complex(Math.cos(theta), Math.sin(theta));
answers.push(z);
}
return answers;
};
draw = function (answers) {
var points;
points = answers.map(function (z) {
return [xscale(z.getReal()), yscale(z.getImag())];
});
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 d[0];
})
.attr('cy', function (d) {
return d[1];
})
.attr('r', 5)
.attr('fill', 'green');
points.push(points[0]);
svg.selectAll('line')
.data(points.slice(0, -1))
.enter()
.append('line')
.attr('x1', function (d) {
return d[0];
})
.attr('y1', function (d) {
return d[1];
})
.attr('x2', function (d, i) {
return points[i + 1][0];
})
.attr('y2', function (d, i) {
return points[i + 1][1];
})
.attr('stroke', 'red');
svg.append('circle')
.attr('cx', xscale(0))
.attr('cy', yscale(0))
.attr('r', xscale(1) - xscale(0))
.attr('stroke', 'blue')
.attr('fill', 'rgba(0, 0, 0, 0)');
svg.append('g')
.attr('transform', 'translate(0, ' + (height / 2) + ')')
.call(xaxis);
svg.append('g')
.attr('transform', 'translate(' + (width / 2) + ', 0)')
.call(yaxis);
};
output = function () {
var n = parseInt(input_n.value, 10),
answers = calc(n);
draw(answers);
div_output.innerHTML = '';
answers.forEach(function (answer, i) {
div_output.innerHTML +=
'<math>' + answer + '</math> (k = ' + i + ')<br><br>';
});
};
input_n.onchange = output;
output();
}());
0 コメント:
コメントを投稿