An interactive visualization tool for understanding gradient descent through beautiful, real-time animations and mathematical rigor.
- Interactive Loss Landscape: Color-coded heatmap, smooth contour lines, and gradient vector field all in one view
- Real-time Training: Watch gradient descent optimize with animated parameter trails that fade over time
- Multiple Problem Types: Explore linear regression, logistic classification, and polynomial regression
- Beautiful LaTeX Formulas: Professional mathematical notation rendered with KaTeX
- Dark/Light Themes: Elegant emerald-themed interface with seamless theme switching
- Educational: Comprehensive help modal with theory and suggested experiments
Gradient Descent Explorer helps you understand optimization algorithms through visual experimentation:
- Drag the orange marker to manually explore parameter space
- Train the model to watch gradient descent find optimal solutions automatically
- Experiment with learning rates, noise levels, and data splits
- Observe how loss landscapes change with different configurations
💡 Tip: Drag the orange marker on the Loss & Gradient diagram to explore the connection between parameters, the model, and loss in real-time.
- Node.js 20 or higher
- npm
# Clone the repository
git clone https://github.com/neovand/GradientDescent.git
cd GradientDescent
# Install dependencies
npm install
# Start development server
npm run devThe app will open at http://localhost:5173
npm run build
npm run preview- Svelte 5 - Reactive UI framework
- D3.js - Data visualization and SVG rendering
- KaTeX - Fast LaTeX math rendering
- Lucide Icons - Beautiful icon library
- Vite - Lightning-fast build tool
The app visualizes the gradient descent update rule:
θ ← θ - γ∇ℒ
where θ = [α, β]ᵀ are the parameters, γ is the learning rate, and ∇ℒ is the gradient of the loss function.
- Data Plot: Training and test data with model predictions and decision boundaries (for classification)
- Loss & Gradient: Color-coded loss heatmap with iso-loss contour lines and gradient vector field
- Loss History: Training dynamics with sliding window display (last 500 steps) and current position markers
- Formulas: Real-time LaTeX-rendered equations showing model, parameters, loss, and update rules
MIT License - see LICENSE for details
Neo Mohsenvand
Developed with ∂ for educational purposes
If you find this project helpful for learning or teaching gradient descent, please consider giving it a star! Your support helps make educational tools like this more visible to students and educators worldwide.
Explore, experiment, and understand gradient descent like never before.