Interactive visualizations for machine learning, deep learning, and performance-engineering concepts used in lectures.
By Arash Saifhashemi
Browse the full catalog of interactive visualizations on the live website or explore them directly by opening the HTML files in your browser.
- 🎯 Interactive Visualizations covering ML fundamentals to advanced optimization
- 📱 Fully Responsive - works on desktop, tablet, and mobile
- 🎨 No Installation Required - runs entirely in your browser
- 📚 Educational Focus - designed for teaching and learning
- ⚡ Real-time Interaction - adjust parameters and see immediate results
Traditional machine learning algorithms and evaluation metrics
- Classification Metrics Explorer (Accuracy, Precision, Recall, F1, ROC, PR curves)
- Decision Trees, KNN, Logistic Regression, SVM
- Neural Network Classification
- K-Means & Hierarchical Clustering
Convolutional neural networks and deep learning building blocks
- Convolution operations and output formulas
- 3×3 convolution hardware dataflow (neuFlow)
- Pooling strategies (max, average)
- ResNet architecture and bottleneck blocks
- 1×1 convolutions and dimensionality reduction
Core concepts essential for understanding modern ML
- Softmax activation function
- Internal covariate shift and batch normalization
- Mathematical foundations
General Matrix Multiply optimization techniques
- Baseline vs. tiled implementations
- Strassen's Matrix Multiplication algorithm
- Cache cliff analysis
- Cache miss derivations (tiled and non-tiled)
- Interactive tiling visualizers
- img2col transformation pattern
Deep dive into hardware design for machine learning
- CISC vs RISC vs VLIW: Comparing CPU architecture philosophies
- TPU v1 & v7 Architectures: Interactive block diagrams and dataflow deep dives
- Systolic Arrays: The heart of matrix multiplication units
- TPU Programming Model: Visualizing CISC-like instruction sets for accelerators
- Vector Units: SIMD and vector processing specialized for ML
- Array vs. Vector Processors: Visualizing space-time mapping and execution differences
- Vector ILP: Accumulation of vector chunks and pipeline throughput
- SIMT & GPU Warps: Visualizing SPMD execution on hardware lanes
- Branch Divergence Profiler: Measuring throughput and utilization in divergent kernels
Data reuse and computational efficiency patterns
- Spatial and temporal reuse
- Data movement optimization
- Loop-nest transformations
Understanding the memory hierarchy
- Cache hierarchy concepts
- Memory access patterns
- Performance implications
Hardware execution patterns for neural networks
- Input-stationary dataflow
- Output-stationary dataflow
- Weight-stationary dataflow
- Weight-stationary accelerator (8 PE parallel)
- Simplified NVDLA convolution dataflow
Analyzing and predicting system performance
- Roofline model visualization
- Performance bounds and bottlenecks
ml-concept-visualizer/
├── index.html # Main landing page
├── fundamentals/ # Core ML concepts
├── classical-ml-classification/ # Traditional ML algorithms
├── cnn-architectures/ # Deep learning & CNNs
├── gemm-optimization/ # Matrix multiplication optimization
│ ├── strassen.html
│ ├── systolic_array.html
│ └── ...
├── tpu/ # AI Accelerators
│ ├── tpu1.html # TPU Block Diagram
│ ├── vliw.html # CISC vs RISC vs VLIW
│ ├── tpu-vector-unit.html
│ └── ...
├── kernel-optimization/ # Kernel-level optimizations
├── cache-optimization/ # Memory hierarchy
├── dataflow-loop-nests/ # Hardware dataflow patterns
└── performance-modeling/ # Performance analysis
Visit the live website to browse all visualizations.
-
Clone the repository:
git clone https://github.com/ourarash/ml-concept-visualizer.git cd ml-concept-visualizer -
Open any HTML file in your browser:
# macOS open index.html
Contributions are welcome! Please follow the existing folder structure and naming conventions.
Created by Arash Saifhashemi for educational purposes in ML/DL and systems optimization courses.
⭐ Star this repo if you find it helpful!