ML Visualizations with D3.js

An interactive exploration of machine learning concepts through animated visualizations. This project experiments with D3.js animations and scroll-driven storytelling to make complex ML topics more intuitive.

Stack

• D3.js v7 - Interactive data visualizations
• Vanilla JavaScript - No frameworks, pure JS
• HTML/CSS - Custom styling and animations

Visualizations

Decision Boundaries

• Manually created concentric circle data points (inspired by scikit-learn's make_circles)
• Pre-computed boundary evolution from ellipse to circle over 50 epochs
• Interactive slider to explore boundary formation

Loss Curves & Overfitting

• Scroll-driven animation revealing training/validation loss over 100 epochs
• Synthetic loss curves with confidence intervals
• Demonstrates overfitting gap between training and validation

Optimizer Comparison

• Quadratic loss surface: f(x,y) = x² + y²
• SGD and Adam optimizers with distinct path visualizations
• Real-time convergence comparison

Bias-Variance Tradeoff

• Sine wave ground truth: f(x) = sin(2x)
• Four scenarios with varying model complexity and noise
• Polynomial fits demonstrating bias-variance relationships

Feature Space Evolution

• Procedurally generated three-class clusters
• Linear interpolation from random initialization to separated clusters
• Shows how neural networks learn discriminative features

Approach

All data is synthetically generated in JavaScript using mathematical functions and procedural generation. Scikit-learn datasets were explored during development for pattern reference, but final visualizations use pure JavaScript implementation.

The project focuses on concepts that benefit from visual representation, using natural animations and scroll-driven interactions inspired by Distill.pub and r2d3.us.