# Simple Linear Regression with Editable Table

Developer
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">
<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 }] }); });``````
 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.

Mei Weng Brough-Smyth (melatonind) Script Codes
 Name Size Cobbled together toy robot. 1,903 Kb A Pen by Mei Weng Brough-Smyth 2,429 Kb Simple Linear Regression 3,558 Kb New York Times Article Puller 1,703 Kb The Monty Hall Problem 4,360 Kb Sieve of Eratosthenes 2,341 Kb Junk 1,439 Kb Hacker News 2,844 Kb Hacker News 2 2,135 Kb Twitch Follower 2,345 Kb
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.