回帰直線とは
組となるデータの、中心的な分布傾向を表す直線。
最小二乗法( least squares method )によって求められます。
最小二乗法の式
📖最小二乗法(wikipedia)より引用
これを、javascript( ES6 )で関数化します。
Σをreduceで表現しています。
// 回帰直線を求める（最小二乗法）
const lsm = coordinates => {
const n = coordinates.length;
const sigX = coordinates.reduce((acc, c) => acc + c.x, 0);
const sigY = coordinates.reduce((acc, c) => acc + c.y, 0);
const sigXX = coordinates.reduce((acc, c) => acc + c.x * c.x, 0);
const sigXY = coordinates.reduce((acc, c) => acc + c.x * c.y, 0);
// a(傾き)を求める
const a = (n * sigXY - sigX * sigY) / (n * sigXX - Math.pow(sigX, 2));
// b(切片)を求める
const b = (sigXX * sigY - sigXY * sigX) / (n * sigXX - Math.pow(sigX, 2));
return { a, b };
}
👀動作確認
ドライバを作成して呼び出してみます。
const coordinates = [
{ x: 200, y: 100 },
{ x: 250, y: 150 },
{ x: 300, y: 150 },
{ x: 312, y: 200 },
{ x: 330, y: 210 },
{ x: 100, y: 80 },
{ x: 110, y: 40 },
]
const { a, b } = lsm(coordinates)
console.log(a, b)
結果
0.6227602344112315 -9.665985075256124
📈グラフを書いて確認
canvasにグラフを描画して確認してみました。
青のドットがサンプルデータ、赤が回帰直線です。
確認に使ったソースコードは以下です。
html
<html>
<head></head>
<body>
<canvas id="graph" width="500" height="500"></canvas>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
javascript
main.js
// 回帰直線を求める（最小二乗法）
const lsm = coordinates => {
const n = coordinates.length
const sigX = coordinates.reduce((acc, c) => acc + c.x, 0)
const sigY = coordinates.reduce((acc, c) => acc + c.y, 0)
const sigXX = coordinates.reduce((acc, c) => acc + c.x * c.x, 0)
const sigXY = coordinates.reduce((acc, c) => acc + c.x * c.y, 0)
// a(傾き)を求める
const a = (n * sigXY - sigX * sigY) / (n * sigXX - Math.pow(sigX, 2));
// b(切片)を求める
const b = (sigXX * sigY - sigXY * sigX) / (n * sigXX - Math.pow(sigX, 2));
return { a, b }
}
const canvas = document.getElementById('graph');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
// ｘ軸の描画
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.lineTo(100, 500);
ctx.stroke();
// ｙ軸の描画
ctx.beginPath();
ctx.moveTo(0, 400);
ctx.lineTo(500, 400);
ctx.stroke();
const coordinates = [
{ x: 200, y: 100 },
{ x: 250, y: 150 },
{ x: 300, y: 150 },
{ x: 312, y: 200 },
{ x: 330, y: 210 },
{ x: 100, y: 80 },
{ x: 110, y: 40 },
]
// サンプルデータの点を描画
ctx.fillStyle = "rgb(0, 0, 255)"
coordinates.forEach(c => {
ctx.fillRect(c.x + 100, -c.y + 400, 3, 3)
})
// 回帰直線の描画
const { a, b } = lsm(coordinates)
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.beginPath();
ctx.moveTo(-100 + 100, -(-100 * a + b) + 400);
ctx.lineTo(400 + 100, -(400 * a + b) + 400);
ctx.stroke();
}
コードのダウンロードはここ。
以上。