Zenn
🔰

JSXGraphでかんたんグラフ表示

2022/09/03に公開
JavaScript
初心者
math
初心者向け
グラフ
tech

JSXGraphとは!?

JSXGraphを利用することで、カッコ良いグラフを簡単に実装する事ができます。

JSXGraph

今回はこのライブラリで線を引いて遊んでみます。

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ index.html (プログラムを起動するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)

HTMLファイルを用意する

では、使っていきましょう。
用意したHTMLファイルには次のコードを記述してください。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<!-- Stylesheet -->
	<link href="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.5/jsxgraph.min.css" rel="stylesheet">
	<!-- JavaScript -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.5/jsxgraphcore.js"></script>
	<script src="./main.js" defer></script>
</head>
<body>
	<!-- Graph -->
	<div id="jxgbox" class="jxgbox" style="width:480px; height:320px;"></div>
</body>
</html>

JSXGraphの利用に必要なファイルはCDNで読み込んでいます。
(CSSファイルとJavaScriptファイルですね)

index.html(抜粋)
<!-- Stylesheet -->
<link href="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.5/jsxgraph.min.css" rel="stylesheet">
<!-- JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.4.5/jsxgraphcore.js"></script>

そして、グラフを表示する部分としてdivタグを一つ用意しておきます。
このタグには忘れずにstyle属性として幅、高さを指定しておきましょう。
(忘れがちです!!)

index.html(抜粋)
<!-- Graph -->
<div id="jxgbox" class="jxgbox" style="width:480px; height:320px;">

JavaScriptファイルを編集する

いよいよここからが本題です。
プロジェクトに用意したJavaScriptファイルを次の様に編集します。

main.js
// Window
window.addEventListener("load", (event)=>{
	// JSXGraph
	const jsx = JXG.JSXGraph.initBoard("jxgbox", 
		{axis: true, boundingbox: [-20, 15, 20, -15]});
});

"JXG.JSXGraph.initBoard()"関数でグラフを作成します。
第一引数には表示対象のidを、第二引数にはオプションを指定しています。
このオプションにある"boundingbox"には、グラフ自体の表示範囲を配列として指定します。
(ここでは、x方向-20から+20、y方向-15から+15までの範囲になります)

グラフが颯爽と表示されました。(カッコイイ!!)

点を表示する

グラフオブジェクト"jsx"の"create"関数を利用して点を表示してみます。

main.js
// Window
window.addEventListener("load", (event)=>{
	// JSXGraph
	const jsx = JXG.JSXGraph.initBoard("jxgbox", 
		{axis: true, boundingbox: [-20, 15, 20, -15]});
	// 点を表示する
	jsx.create("point", [5, 5], {size:2, color:"orange"});
});

第一引数には描画の種別"point"を指定し、
第二引数でその座標を指定しています。
第三引数はオプションです。(見てわかる通り、点の大きさと色です)

おおお。。。点です!!

直線を描画する

次は直線です。

main.js
// Window
window.addEventListener("load", (event)=>{
	// JSXGraph
	const jsx = JXG.JSXGraph.initBoard("jxgbox", 
		{axis: true, boundingbox: [-20, 15, 20, -15]});
	// 直線
	jsx.create("functiongraph", [x=>x], {strokeColor:"purple"});
});

第一引数には描画の種別"functiongraph"を指定し、
第二引数には一次関数の式そのものを記述します。(これは"y = x"という例のあれです!!)
第三引数はオプションです。(今度は線の色を指定しています)

おおお。。。遥か遠い昔に見た事がある気がするー!!ޱ(ఠ皿ఠ)ว

二次関数を表示する

次は二次関数です。(恐れる事はありません!!)

main.js
// Window
window.addEventListener("load", (event)=>{
	// JSXGraph
	const jsx = JXG.JSXGraph.initBoard("jxgbox", 
		{axis: true, boundingbox: [-20, 15, 20, -15]});
	// 二次関数
	jsx.create("functiongraph", [x=>x**2], {strokeColor:"purple"});
});

第二引数のが二次関数になっているだけですね。(この"y = x^2"という例のそれです!!)
この様に、第二引数に単純に関数の式を当てはめるだけでJSXGraphが上手い事やってくれるという仕組みになっているのです。(ありがたや)

おおお。。。比較的遠い昔に見た事がある気がするー!!ޱ(ఠ皿ఠ)ว

三角関数を表示する

ついでに賢くなった気がする三角関数3点セットをまとめて表示してみます。

main.js
// Window
window.addEventListener("load", (event)=>{
	// JSXGraph
	const jsx = JXG.JSXGraph.initBoard("jxgbox", 
		{axis: true, boundingbox: [-20, 15, 20, -15]});
	// サイン、コサイン、タンジェント
	jsx.create("functiongraph", [x=>5*Math.sin(x/2)], {strokeColor:"red"});
	jsx.create("functiongraph", [x=>5*Math.cos(x/2)], {strokeColor:"green"});
	jsx.create("functiongraph", [x=>5*Math.tan(x/2)], {strokeColor:"blue"});
});

第二引数の関数に"sin, cos, tan"を書いただけです。(えっへん)
すると。。。

おおお、超絶賢くなった気がするー!!ޱ(ఠ皿ఠ)ว

最小二乗法でいい感じ直線を引いてみる

最後に"最小二乗法"を利用して、
グラフ上の点群をなぞる様な"いい感じ直線"を引いてみます。

最小二乗法

1, 点群を表示する

最初にグラフ上に複数の点を配置します。
(ある程度まとまりが感じられる様に配置してあります)

main.js
// Window
window.addEventListener("load", (event)=>{
	// JSXGraph
	const jsx = JXG.JSXGraph.initBoard("jxgbox", 
		{axis: true, boundingbox: [-20, 15, 20, -15]});
	// データ
	const points = [
		[-15, 0], [-8, 6], [-5, -9], [5, -4], [10, 4], [15, 8]
	];
	// ポイントだけ表示する
	for(const point of points){
		jsx.create("point", point, {size:2, color:"orange"});
	}
});

次に、これらの点群をなぞる様な"いい感じ直線"を計算します。

2, いい感じ直線の計算

計算方法に関しては次のサイトに概要が御座いますのでご参照下さいませ。
(神サイトです有難うございます)

高校数学の美しい物語

これを踏まえてごにょごにょすると次の様になります。

main.js
// Window
window.addEventListener("load", (event)=>{
	// JSXGraph
	const jsx = JXG.JSXGraph.initBoard("jxgbox", 
		{axis: true, boundingbox: [-20, 15, 20, -15]});
	// データ
	const points = [
		[-15, 0], [-8, 6], [-5, -9], [5, -4], [10, 4], [15, 8]
	];
	// ポイントだけ表示する
	for(const point of points){
		jsx.create("point", point, {size:2, color:"orange"});
	}
	
	// 最小二乗法
	// a, b, c, d, eの値を求める
	let a, b, c, d, e;
	a = b = c = d = e = 0;
	for(const point of points){
		const x = point[0];
		const y = point[1];
		a += y**2;
		b += x * y;
		c += y;
		d += x**2;
		e += x;
	}

	// 計算して直線の傾きmと切片iを求める
	const len = points.length;
	const m = (len * b - c * e)/(-(e**2) + len * d);
	const i = (c * d - b * e)/(-(e**2) + len * d);
	console.log("式: y = " + m + "x + " + i);

	// 一次関数を描画する
	const options = {strokeColor:"red"};
	jsx.create("functiongraph", [x=>m * x + i], options);
});

なんだか"いい感じ"になってるー!!ޱ(ఠ皿ఠ)ว

最後に

JSXGraphいかがでしたでしょうか!?
グラフを表示するだけでなんだかドキドキソワソワしてしまいますwޱ(ఠ皿ఠ)ว
「一体どこで使うのやら。。。」という感じがしない事も無いですが、
なんだか賢くなった気がしてとても楽しいです!!
ここまで読んでいただき有難うございました。

Discussion