DEV Community

CertosinoLab
CertosinoLab

Posted on

Building a Linear Regression PWA with React

#react #pwa #webdev #javascript

From a CSV file to an interactive chart, entirely in the browser

Linear regression is one of the simplest statistical techniques, but it is also a useful example of how data processing, mathematics and visualization can be combined in a modern web application.

In this project, I built a Progressive Web App with React that allows users to upload a CSV file containing pairs of X and Y values. The application processes the data, calculates a linear regression model, displays the resulting equation and plots both the original observations and the regression line.

The technology stack

The application was created with React and Vite. A few focused libraries handle the main features:

  • Papa Parse reads and processes the uploaded CSV file.
  • Chart.js and react-chartjs-2 display the dataset and regression line.
  • KaTeX renders the regression equation in mathematical notation.
  • vite-plugin-pwa adds the web app manifest, service worker and installable PWA functionality.

Everything runs directly in the browser. The CSV file does not need to be uploaded to a server, which keeps the application simple and preserves the privacy of the data.

Parsing the CSV data

When the user selects a file, Papa Parse reads its rows. The application treats the first two values of each row as the X and Y coordinates:

const parsedData = result.data
  .map((row) => ({
    x: parseFloat(row[0]),
    y: parseFloat(row[1]),
  }))
  .filter((point) => !isNaN(point.x) && !isNaN(point.y));
Enter fullscreen mode Exit fullscreen mode

Invalid or non-numeric rows are filtered out. Once the data has been cleaned, it is stored in the React state and passed to the regression function.

Calculating the regression line

The application implements ordinary least squares directly in JavaScript. It calculates the sums of X, Y, XY and X², and then uses them to obtain the slope and intercept:

slope = (nΣxy − ΣxΣy) / (nΣx² − (Σx)²)

intercept = (Σy − slopeΣx) / n
Enter fullscreen mode Exit fullscreen mode

The final model has the familiar form:

y = slope × x + intercept
Enter fullscreen mode Exit fullscreen mode

The code also determines the minimum and maximum X values in the dataset. These values are used to generate the two endpoints of the regression line, avoiding the need to calculate a separate fitted point for every observation.

Visualizing the result

The graph is rendered through react-chartjs-2. One dataset represents the original observations as individual points, while a second dataset represents the fitted regression line.

Although the React Line component is used, the original dataset has showLine set to false. This produces a scatter-style visualization, while the regression dataset remains a continuous line.

The application also displays the minimum and maximum values of both variables and renders the regression equation with KaTeX. A small conversion function attempts to represent decimal coefficients as fractions, making the output easier to read in some datasets.

Making predictions

After calculating the model, users can enter a new X value. The application applies the previously calculated slope and intercept and returns the expected Y value:

const y = slope * x + intercept;
Enter fullscreen mode Exit fullscreen mode

This turns the project from a static visualization into a simple interactive prediction tool.

Turning it into a PWA

The PWA configuration is handled through vite-plugin-pwa. The project defines an application manifest, installable icons, a standalone display mode and an automatic service-worker update strategy.

Static assets such as JavaScript, CSS, HTML and images are cached through Workbox. As a result, the application can be installed on supported devices and continue to work even when the network connection is unavailable.

Final thoughts

This project demonstrates that a useful data-analysis application does not always require a backend or a large machine-learning framework.

With React, a CSV parser and a charting library, it is possible to create a lightweight tool that imports data, performs a real statistical calculation, visualizes the results and works as an installable application.

The complete source code is available in the project’s public GitHub repository:
https://github.com/sfestacatenate/React_PWA_Linear_Regression

Link to the project:
https://pwa-linear-regression-react.surge.sh

Top comments (1)

Collapse
 
topstar_ai profile image
Luis Cruz •

I was particularly interested in the implementation of ordinary least squares for calculating the regression line, specifically how the sums of X, Y, XY, and X² are used to obtain the slope and intercept. The use of vite-plugin-pwa to handle the PWA configuration and caching of static assets through Workbox is also noteworthy, as it enables the application to work offline. One potential improvement could be to explore the use of more advanced regression techniques, such as polynomial or logistic regression, to handle more complex datasets. How do you think the application could be extended to support more advanced statistical models, while still maintaining its simplicity and performance?