Interactive MicroSims¶

This textbook includes 18 interactive MicroSims designed to enhance your understanding of machine learning concepts through visualization and hands-on exploration.

What are MicroSims?¶

MicroSims are lightweight, browser-based interactive simulations that allow you to:

• Visualize complex algorithms and mathematical concepts
• Experiment with parameters and observe real-time changes
• Explore different scenarios and edge cases
• Understand abstract concepts through concrete examples

All MicroSims run directly in your browser with no installation required.

MicroSims by Chapter¶

Chapter 2: K-Nearest Neighbors¶

• Distance Metrics - Compare Euclidean vs Manhattan distance calculations
• K-Selection Simulator - Explore how different k values affect classification boundaries

Chapter 3: Decision Trees¶

• Entropy-Gini Comparison - Visualize impurity metrics for splitting criteria

Chapter 4: Logistic Regression¶

• Sigmoid Explorer - Interactive sigmoid function transformation

Chapter 5: Regularization¶

• Ridge Regression Geometry - L2 regularization with circular constraint visualization
• Lasso Regression Geometry - L1 regularization with diamond constraint visualization

Chapter 6: Support Vector Machines¶

• SVM Margin Maximization - Interactive SVM decision boundary and margin visualization

Chapter 8: Data Preprocessing¶

• Feature Scaling Visualizer - Compare Min-Max scaling vs Z-score standardization
• Categorical Encoding Explorer - Compare Label encoding vs One-Hot encoding

Chapter 9: Neural Networks¶

• Network Architecture Visualizer - Explore different neural network architectures
• Activation Functions - Compare Sigmoid, Tanh, ReLU, and Leaky ReLU

Chapter 10: Convolutional Neural Networks¶

• Convolution Operation - See how convolution filters slide over images
• CNN Architecture - Visualize different CNN architectures with data flow

Chapter 11: Transfer Learning¶

• Training Validation Curves - Observe training vs validation loss over epochs

Chapter 12: Model Evaluation¶

• Confusion Matrix Explorer - Interactive confusion matrix with metrics calculations
• ROC Curve Comparison - Compare ROC curves for different classifiers
• K-Fold Cross Validation - Visualize k-fold cross-validation partitioning

Using MicroSims¶

Each MicroSim includes:

• Interactive controls - Sliders, buttons, and dropdowns to adjust parameters
• Real-time visualization - See changes immediately as you adjust controls
• Educational context - Descriptions and learning objectives
• Lesson plans - Suggested activities and discussion questions

How to Use¶

1. Read the description - Understand what the MicroSim demonstrates
2. Experiment with controls - Try different parameter values
3. Observe the changes - See how the visualization responds
4. Reflect on patterns - Think about what you're observing
5. Apply your learning - Connect concepts to chapter content

Technical Details¶

All MicroSims are built using:

• p5.js - For interactive visualizations and animations
• Chart.js - For data charts and plots
• vis-network - For network diagrams

MicroSims are:

• Width-responsive - Adapt to your screen size
• Accessible - Work on desktop, tablet, and mobile
• Open source - View the code and learn from it
• Embeddable - Can be used in other educational contexts

Embedding MicroSims¶

Educators can embed MicroSims in their own materials using iframes:

<iframe src="https://your-site.github.io/sims/[microsim-name]/main.html"
        height="800px"
        width="100%"
        scrolling="no">
</iframe>

Replace [microsim-name] with the specific MicroSim directory name.

Feedback¶

Have suggestions for improving existing MicroSims or ideas for new ones? We welcome your feedback!

Total MicroSims: 18 interactive visualizations