An interactive playground for core machine learning algorithms, built with React and Vite. Each algorithm has its own page with sliders and controls that update the visualization in real time, making it easier to build intuition for how models fit data, split, cluster, and project.
Live demo: https://ml-visualizer-nine.vercel.app/
| Algorithm | What you can explore |
|---|---|
| Linear Regression | Adjust slope and intercept against a generated dataset; regenerate data |
| K-Means Clustering | Choose k, step through iterations or auto-run, watch centroids move |
| Neural Network | Forward pass through a small network with sigmoid activation, driven by input sliders |
| Decision Tree | Move a split threshold and see the left/right groups and Gini impurity |
| Logistic Regression | Adjust slope and bias of the decision boundary |
| SVM | Maximum-margin visualization with support vectors |
| PCA | Rotate a projection axis to see a 2D to 1D projection |
Also includes a dashboard home page, sidebar navigation, a light/dark theme toggle, Framer Motion page transitions, and a profile page.
- React 18, React Router
- Vite
- Chart.js with react-chartjs-2, plus SVG-based visuals
- Framer Motion
- Plain CSS with a theme context
- Node.js (a recent LTS release) and npm
git clone https://github.com/Yafai01/ML-Visualizer.git
cd ML-Visualizer
npm install
npm run dev| Command | Description |
|---|---|
npm run dev |
Start the Vite dev server |
npm run build |
Build for production into dist/ |
npm run preview |
Preview the production build |
src/
App.jsx # Routes
main.jsx # Entry point, theme provider, router
context/ThemeContext.jsx
components/ # Algorithm visualizers, Sidebar, Navbar, PageWrapper
pages/ # One page per algorithm, plus Home and Profile
Yafai (@Yafai01)