Linear Regression from Scratch in JS — First Foray into ML for Web Developers.

The HTML

We’ll start by adding a bit of HTML to our page so we can see what’s up and use our model in real time. I’ll use Bootstrap (V5) and Chart.js just fancy things up.

Importing Bootstrap & Chart.js
Not too shabby.

Getting the values from the user

The user will need to input at least 3 numeric values in both input areas. Then we can simply get them as a string and convert that into an array of numbers to do our computations on.

Get the strings and map them into an array of numeric values

Finding the slope

Linear regression is essentially finding the line of best given the x & y values — we’ll be using the Least Squares Method to do just that.

Finding “m” lets us know how steep the line is

Finding the intercept

The intercept refers to the “b” in y=m*x+b and represents the value where the line intersects the y-axis. The formula for this is relatively straightforward.

b is y_mean — slope*x_average

Predicting using our model

Now that we have our linear regression formula, we can enter the x values to see what the model predicts and then use the predictions against the true y values.

Loop through X values and feed them into the model to get y_hat (predictions)

Finding the error

To know how well our model is performing, we can use a pretty handy metric called the R2 score. R2 score, r², is, in a sense, a measure of how much prediction error is eliminated when we employ least-squares regression — with a score of 1 being a perfect fit.

R2 is simply the sum of the squares of the differences of predicted and actual values upon the sum of the squares of the differences in actual values and their mean.
RSS is the sum of the squares of the differences of predicted and actual values
TSS is the sum of the squares of the differences in actual values and their mean.
Find the RSS & TSS and R2 will be 1 — RSS/TSS

Displaying the results

Calculating it all is awesome, but it would be even better if we can visualize the results. We’ll use Chart.js to plot the actual and predicted values and add the equation to the user’s screen.

Add the chart & equation to the user’s screen.
A pretty chart always makes everything look better

The Pen

Nothing’s fun without a demo; the pen’s below and I’ve broken the functions for the sake of readability.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hazlo

Hazlo

No-code platform for startups & SMBs to train, deploy & host machine learning models.