A few weeks ago I saw @chrwittm’s thread about Visualizing Gradient Descent in 3D which I really liked and which made me clear up some conceptions about gradient descent.
As good as Christian’s visualization is, it is limited by what python/jupyter offers, like “slow” render times and cumbersome handling of the 3D-plot. Since I was searching for a project I could refine my React skills with anyway, it seemed to be a nice thing to make it a web app.
If you are interested in the computations and on how to arrive at such visualization you should also have a look at Christian’s notebook since it explains the steps in detail.
With this app you can:
- manually fit a quadratic function to some data,
- use a Stepper to automatically step the parameters towards the local minimum,
- have a look at the trace the loss left as it walked through the loss surface,
- choose from different critics (
mae,mse,rmse) to “see” how changing the way we measure the loss effects gradient descent, - intuitively interact with the 3D-plot by dragging and zoom, to keep the interesting parts in focus.
In the info-boxes of the app I gave “some” additional information about what is going on. I tried to walk the line between mathematical precision and accessibility, so please let me know if I failed at that 
. Also: I’m not a web dev, so excuse me if the app is not optimized for every device (I tried my best). Having said that: please let me know, if you have any issues, questions or improvements, I’m happy to answer/discuss them here 
I hope you enjoy playing around with this as much as I did and learn something about gradient descent on the way.
Again: kudos to @chrwittm for the “original” project. It gave me alot of inspiration and something to glimpse at if I made an error in my implementation 
.
Cheers