Simple Linear Regression with Editable Table

Size
3,264 Kb
Views
14,168

How do I make an simple linear regression with editable table?

An implementation of simple linear regression: Taking x and y values (light blue line) and creating an equation that will create an estimated straight line.. What is a simple linear regression with editable table? How do you make a simple linear regression with editable table? This script and codes were developed by Mei Weng Brough-Smyth on 06 November 2022, Sunday.

Simple Linear Regression with Editable Table Previews

Simple Linear Regression with Editable Table - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Linear Regression with Editable Table</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<body id = "bohday">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> <p>Does not take into account error term.</p>
<div id="y">:)</div>
<table id="datatable"> <tr> <th>x</th> <th>y</th> </tr> <tr> <td><div contenteditable="true" id="editor">130.7</div></td> <td>334.59</td> </tr> <tr> <td>136.2</td> <td>376.18</td> </tr>
</table><button onClick="update()">Edit</button>
</body> <script src="js/index.js"></script>
</body>
</html>

Simple Linear Regression with Editable Table - Script Codes CSS Codes

#bohday { font-family: 'Open Sans', 'sans-serif'; background-color: #f3f3f3; color: black; max-width: 700px; margin-left:auto; margin-right:auto;
}
td, th { width: 4rem; height: 2rem; border: 1px solid #ccc; text-align: left;
}
th { text-align: center; background: lightblue; border-color: white;
}

Simple Linear Regression with Editable Table - Script Codes JS Codes

// Mei Weng Brough-Smyth
// beepboop.com.au
var real = [];
var x = [];
var y = [];
function getValues() { $("table#datatable tr").each(function() { var arrayOfThisRow = []; var tableData = $(this).find('td'); if (tableData.length > 0) { tableData.each(function() { hi = parseInt($(this).text()); arrayOfThisRow.push(hi);}); real.push(arrayOfThisRow); } }); for (var i = 0; i < real.length; i++) { x.push(real[i][0]); y.push(real[i][1]); }
}
// put into [[x, y][x, y]] format
function formatValues() { for (var i = 0; i < x.length; i++) { real[i] = []; for (var k = 0; k < 1; k++) { real[i].push(x[i]); real[i].push(y[i]); } }
}
// gets sum of X*Y
var xySum = 0;
function getXY() { for (var l = 0; l < x.length; l++) { for (var m = 0; m < 1; m++) { xySum += real[l][m] * real[l][m+1]; } }
}
// gets sum of x^2
var xSquaredSum = 0;
function getXSquared() { for (var l = 0; l < x.length; l++) { for (var m = 0; m < 1; m++) { xSquaredSum += Math.pow(real[l][m], 2); } }
}
// gets average of x and y
var xAverage = 0;
var yAverage = 0;
function getAverages() { var totalx = 0; var totaly = 0; for (var i = 0; i < x.length; i++) { totalx += x[i]; totaly += y[i]; } xAverage = totalx/x.length; yAverage = totaly/x.length;
}
//[xySum - (count*xAverage*yAverage)]/[X^2sum - (count*xAverage^2)]
var b2 = 0;
function getB2() { b2 = (xySum - (x.length*xAverage*yAverage)) / (xSquaredSum - (x.length * Math.pow(xAverage, 2)));
}
var b1 = 0;
function getB1() { b1 = yAverage - xAverage * b2;
}
// Get predicted linear x y coords
var predicted = [];
function calculateYHat() { for (var i = 0; i < x.length; i++) { predicted[i] = []; for (var k = 0; k < 1; k++) { predicted[i].push(x[i]); predicted[i].push(b1+b2*x[i]); } }
}
var stdArray = [];
var std = 0;
function getStd() { for (var i = 0; i < x.length; i++) { stdArray.push(Math.pow(x[i]-xAverage, 2)); std += stdArray[i]; } std /= x.length; std = Math.sqrt(std); console.log(stdArray); console.log(std);
}
function compareNumbers(a, b) { return a[0] - b[0];
}
getValues();
formatValues();
getAverages();
getXY();
getXSquared();
getB2();
getB1();
calculateYHat();
getStd();
document.getElementById("y").innerHTML = ("Predicted = " + b1.toFixed(2) + " + " + b2.toFixed(2) + " * x<br>Average = " + xAverage.toFixed(2)) + "<br>Standard Deviation = " + std.toFixed(2);
function update() { getValues(); formatValues(); getAverages(); getXY(); getXSquared(); getB2(); getB1(); calculateYHat(); getStd();
}
$(function () { $('#container').highcharts({ title: { text: 'Simple Linear Regression', x: -20 //center }, subtitle: { text: 'Inconsistencies by Mei', x: -20 }, xAxis: { title: { text: 'X' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, yAxis: { title: { text: 'Y' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: 'Real', data: real }, { name: 'Predicted', data: predicted }] }); });
Simple Linear Regression with Editable Table - Script Codes
Simple Linear Regression with Editable Table - Script Codes
Home Page Home
Developer Mei Weng Brough-Smyth
Username melatonind
Uploaded November 06, 2022
Rating 3
Size 3,264 Kb
Views 14,168
Do you need developer help for Simple Linear Regression with Editable Table?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mei Weng Brough-Smyth (melatonind) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!