An interactive web-based visualization tool for understanding how neural networks learn. Watch decision boundaries form in real-time as you train networks on various datasets.
- Interactive Training: Start/stop training and watch the network learn in real-time
- Multiple Datasets: Circle, XOR, Spiral, and Gaussian classification problems
- Customizable Architecture: Adjust hidden layers (1-6) and neurons per layer (1-8)
- Activation Functions: Choose between ReLU, Tanh, and Sigmoid
- Learning Rate Control: Fine-tune training speed from 0.001 to 0.3
- Live Visualizations:
- Decision boundary heatmap
- Network architecture with weight visualization
- Training loss chart
Try the Live Demo - No installation needed!
The playground implements a feedforward neural network from scratch using vanilla JavaScript:
- Forward Propagation: Computes activations layer by layer
- Backpropagation: Calculates gradients using the chain rule
- Gradient Descent: Updates weights to minimize binary cross-entropy loss
- Xavier Initialization: Smart weight initialization for stable training
- Select a dataset (Circle is easiest, Spiral is hardest)
- Configure the network architecture
- Click "Train" to start training
- Watch the decision boundary evolve
- Experiment with different settings!
- Pure JavaScript (no ML libraries)
- HTML5 Canvas for visualizations
- CSS3 with modern design
Built by Parsa Faraji Alamouti
MIT License