Keywords: Machine Learning, Data Visualization, Educational Tool.

Tools Used: JavaScript (p5.js, TensorFlow.js), HTML, Claude Code

Base code and the linear regression / gradient descent implementation coded independently from scratch; Claude Code was then used to extend it into a fully interactive educational tool (UI, animations, step-by-step mode, live loss chart).

Year: 2026

This project started as a self-directed experiment: I wanted to understand linear regression and gradient descent not just in theory, but by building the underlying mechanics from scratch. Using p5.js for interactive visualization and TensorFlow.js for machine learning operations, I implemented a linear regression model from the ground up: defining trainable parameters for slope and intercept using TensorFlow.js variables, a mean squared error loss function to quantify model error, and a stochastic gradient descent optimizer to iteratively adjust the line in real time as users add data points. I also handled coordinate normalization, mapping raw screen coordinates into the 0-1 range the model trains on, then un-mapping predictions back to pixel space to render them, and used TensorFlow.js's tensor memory management (tidy) to keep the app performant as it runs continuously in the browser.

After developing the core model, I transformed the experiment into an educational interactive tool focused on making statistical concepts accessible to non-technical audiences. I added a step-by-step mode that explains in plain language how the line adjusts itself, a live chart showing it improve over time, a learning rate control, and a way to generate random data to test it on.

The result is an interactive experience that demystifies machine learning by making the invisible learning process visible. Users can place data points, watch the model adapt, and understand why the line changes, all directly in the browser with no prior machine learning or mathematics background required.