開発環境
- OS X El Capitan - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- kjs-array (JavaScript Library)
- D3.js (JavaScript Library)
- Safari(Web browser)
- 参考書籍
- JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)
- JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)
- インタラクティブ・データビジュアライゼーション(Scott Murray (著)、長尾 高弘 (翻訳)、オライリージャパン)
Pythonからはじめる数学入門 (Amit Saha (著)、黒川 利明 (翻訳)、オライリージャパン)の7章(初等解析問題を解く)、7.10(プログラミングチャレンジ)、問題7-3(2曲線で囲まれた領域の面積)をJavaScript取り組んでみる。
問題7-3(2曲線で囲まれた領域の面積)
コード(Emacs)
HTML5
<div id="graph0"></div>
Area: <span id="area0"></span>
<br>
<label for="dx0">
dx =
</label>
<input id="dx0" type="number" min="0" value="0.001">
<br>
<label for="a0">a = </label>
<input id="a0" type="number" step="0.01" value="0.00">
<label for="b0">b = </label>
<input id="b0" type="number" step="0.01" value="1.00">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="array.js"></script>
<script src="sample3.js"></script>
JavaScript
'use strict';
var fx,
gx,
width = 600,
height = 600,
padding = 50,
xmin,
xmax,
ymin,
ymax,
xscale,
yscale,
xaxis,
yaxis,
svg,
div_graph = document.querySelector('#graph0'),
span_area = document.querySelector('#area0'),
input_dx = document.querySelector('#dx0'),
input_a = document.querySelector('#a0'),
input_b = document.querySelector('#b0'),
inputs = [input_dx, input_a, input_b],
getPoints,
draw,
integral,
output;
fx = function (x) {
return x;
};
gx = function (x) {
return Math.pow(x, 2);
};
getPoints = function () {
var dx = parseFloat(input_dx.value),
points = [];
range(xmin, xmax, dx).forEach(function (x) {
points.push([x, fx(x), 'green']);
});
range(xmin, xmax, dx).forEach(function (x) {
points.push([x, gx(x), 'blue']);
});
return points;
};
draw = function () {
var points = getPoints();
ymax = Math.max.apply(null,
points.map(function (point) {
return point[1];
}));
ymax += 1;
ymin = -ymax;
xscale = d3.scaleLinear()
.domain([xmin, xmax])
.range([padding, width - padding]);
yscale = d3.scaleLinear()
.domain([ymin, ymax])
.range([height - padding, padding]);
xaxis = d3.axisBottom().scale(xscale);
yaxis = d3.axisLeft().scale(yscale);
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 xscale(d[0]);
})
.attr('cy', function (d) {
return yscale(d[1]);
})
.attr('r', 1)
.attr('fill', function (d) {
return d[2];
});
svg.append('g')
.attr('transform', 'translate(0, ' + (height / 2) + ')')
.call(xaxis);
svg.append('g')
.attr('transform', 'translate(' + (width / 2) + ', 0)')
.call(yaxis);
};
integral = function (f, a, b, dx) {
var area = 0;
range(a, b, dx).forEach(function (x) {
area += dx * f(x);
});
return area;
};
output = function () {
var dx = parseFloat(input_dx.value),
a = parseFloat(input_a.value),
b = parseFloat(input_b.value);
xmax = Math.max(Math.abs(a), Math.abs(b)) + 1;
xmin = -xmax;
draw();
span_area.innerText =
integral(function (x) {
return fx(x) - gx(x);
}, a, b, dx);
};
inputs.forEach(function (input) {
input.onchange = output;
});
output();
Area:
0 コメント:
コメントを投稿