Dots To Lines

Dots To Lines

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 scratch: defining the prediction function (y = mx + b), calculating model error through a loss function, and applying stochastic gradient descent to iteratively adjust the line’s slope and intercept in real time as users add data points.

After developing the core model, I wanted to transform the experiment into an educational interactive tool with a focus 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.

DOTS TO LINES

Previous
Previous

Accessibility-First Digital Ecosystem