Building a Linear Regression PWA with React

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));

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

The final model has the familiar form:

y = slope × x + intercept

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;

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

Comments

[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?

[CertosinoLab]

Thanks, Luis! Adding polynomial or logistic regression would be an interesting direction, although I do not currently plan to expand this project in the short term. I would prefer to keep this version focused on a small, lightweight, offline-first linear regression PWA.

If I revisit the project in the future, polynomial regression would probably be the first model to add because it could reuse the current two-column dataset and prediction workflow. From a performance perspective, I would limit the polynomial degree, move the fitting logic outside the React component, and generate only the number of curve points actually needed for the chart.

For larger datasets, the main priority would be keeping the UI responsive. Regression calculations and CSV processing could run inside a Web Worker, while the chart could display a sampled version of the dataset instead of rendering every observation. The complete dataset could still be used for fitting.

Additional model implementations could also be lazy-loaded so that users interested only in linear regression would not pay the download and initialization cost of polynomial or logistic regression. Model results and imported datasets could be cached locally with IndexedDB, while the service worker would continue caching the application shell for offline use.

Logistic regression would require an iterative optimization algorithm, so it would benefit even more from running outside the main thread and exposing progress or cancellation for larger datasets.

For now, though, I intend to keep the current project stable and limited in scope. These ideas would be more appropriate for a future version or a separate follow-up project. Thanks for the thoughtful suggestion!

[Luis Cruz]

Great implementation of keeping the entire workflow client-side while still delivering a useful data analysis tool. The offline-first approach with React, Vite PWA, and browser-based processing is a good example of how modern web apps can avoid unnecessary backend complexity.

I also like your thinking around future scalability — moving heavy calculations to Web Workers, sampling large datasets for visualization, and lazy-loading additional models are exactly the kind of decisions that help preserve performance without sacrificing features.

In AI and data applications, I’ve found a similar balance is important: start with a focused workflow that solves one problem well, then introduce complexity only when real user needs justify it.

Really nice project. I’d be interested to hear if you’re planning more browser-based data/AI tools in the future or collaborating on any new frontend, PWA, or data-driven projects.