Optimization Playground: Interactive Gradient Descent Visualizer

Try the live demo → · View the code on GitHub →

The problem

Gradient descent is easy to describe in a lecture but hard to build real intuition for — how learning rate affects convergence, why certain loss surfaces cause oscillation or divergence, and how starting point matters, are all things that only really click when you can watch the algorithm run and change the inputs yourself.

My approach

I built an interactive web app that runs gradient descent live on three classic optimization test surfaces — the Quadratic Bowl, the Rosenbrock Function, and a Saddle Point — each chosen because they expose a different failure mode or behavior of gradient-based optimization. Users can adjust:

• The objective function (with learning-rate ranges that adapt dynamically based on which surface is selected)
• Learning rate, iteration count, and starting point

The app outputs a contour plot with the optimization path traced on top, alongside loss-vs-iteration and gradient-norm-vs-iteration diagnostics, so convergence and divergence behavior is visible in real time rather than just reported as a final number.

Skills used

Python · Shiny for Python · NumPy · Matplotlib · Optimization theory · Numerical methods

Try it yourself

Open the visualizer here and try running the Rosenbrock function with a learning rate that’s too high — it’s a fast, visual way to see divergence happen live.