Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mohammad's Blogs - Interactive Visualizations</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 20px; | |
| padding: 30px; | |
| margin-bottom: 30px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| } | |
| h1 { | |
| font-size: 2.5em; | |
| color: #2c3e50; | |
| margin-bottom: 10px; | |
| } | |
| .subtitle { | |
| color: #7f8c8d; | |
| font-size: 1.1em; | |
| margin-bottom: 20px; | |
| } | |
| .back-btn { | |
| display: inline-block; | |
| background: linear-gradient(45deg, #e74c3c, #c0392b); | |
| color: white; | |
| text-decoration: none; | |
| padding: 12px 25px; | |
| border-radius: 25px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3); | |
| } | |
| .back-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); | |
| } | |
| .blog-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 25px; | |
| } | |
| .blog-card { | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 15px; | |
| padding: 25px; | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| border-left: 5px solid transparent; | |
| } | |
| .blog-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .blog-card.statistics { | |
| border-left-color: #3498db; | |
| } | |
| .blog-card.ml { | |
| border-left-color: #e74c3c; | |
| } | |
| .blog-card.visualization { | |
| border-left-color: #27ae60; | |
| } | |
| .blog-card.template { | |
| border-left-color: #f39c12; | |
| } | |
| .blog-card.nn { | |
| border-left-color: #9b59b6; | |
| } | |
| .blog-title { | |
| color: #2c3e50; | |
| font-size: 1.4em; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .blog-description { | |
| color: #7f8c8d; | |
| line-height: 1.6; | |
| margin-bottom: 20px; | |
| font-size: 0.95em; | |
| } | |
| .blog-link { | |
| display: inline-block; | |
| background: linear-gradient(45deg, #3498db, #2980b9); | |
| color: white; | |
| text-decoration: none; | |
| padding: 12px 20px; | |
| border-radius: 25px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); | |
| } | |
| .blog-link:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4); | |
| } | |
| .tags { | |
| margin-bottom: 15px; | |
| } | |
| .tag { | |
| display: inline-block; | |
| background: #ecf0f1; | |
| color: #2c3e50; | |
| padding: 4px 12px; | |
| border-radius: 15px; | |
| font-size: 0.8em; | |
| margin: 2px; | |
| font-weight: 500; | |
| } | |
| .count-info { | |
| text-align: center; | |
| color: white; | |
| margin-bottom: 20px; | |
| font-size: 1.1em; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 15px; | |
| border-radius: 10px; | |
| } | |
| @media (max-width: 768px) { | |
| .blog-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| h1 { | |
| font-size: 2em; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Interactive Blog Collection</h1> | |
| <p class="subtitle">Data Science & Statistics Visualizations</p> | |
| <a href="../index.html" class="back-btn">← Back to Main Site</a> | |
| </header> | |
| <div class="count-info"> | |
| 🎯 Featured Interactive Visualizations & Educational Content | |
| </div> | |
| <div class="blog-grid"> | |
| <div class="blog-card statistics"> | |
| <div class="blog-title">Bias-Variance Visualization with Archery</div> | |
| <div class="tags"> | |
| <span class="tag">Statistics</span> | |
| <span class="tag">Visualization</span> | |
| <span class="tag">Machine Learning</span> | |
| </div> | |
| <div class="blog-description"> | |
| An intuitive dartboard visualization explaining the bias-variance tradeoff using archery targets. Perfect for understanding this fundamental ML concept through interactive examples. | |
| </div> | |
| <a href="bias_variance_visualization-archery.html" target="_blank" class="blog-link"> | |
| View Interactive Demo ↗ | |
| </a> | |
| </div> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">Bias-Variance in Regression Analysis</div> | |
| <div class="tags"> | |
| <span class="tag">Regression</span> | |
| <span class="tag">Statistics</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Mathematical visualization of bias-variance tradeoff in regression with interactive plots. Includes the complete mathematical foundation and decomposition formulas. | |
| </div> | |
| <a href="bias_variance_visualization.html" target="_blank" class="blog-link"> | |
| Explore Mathematics ↗ | |
| </a> | |
| </div> | |
| <div class="blog-card statistics"> | |
| <div class="blog-title">PCA Interactive Playground</div> | |
| <div class="tags"> | |
| <span class="tag">PCA</span> | |
| <span class="tag">Linear Algebra</span> | |
| <span class="tag">Educational</span> | |
| </div> | |
| <div class="blog-description"> | |
| Step-by-step interactive guide to Principal Component Analysis with real-time calculations. Learn about eigenvectors, eigenvalues, and data transformation with hands-on examples. | |
| </div> | |
| <a href="pca_playground.html" target="_blank" class="blog-link"> | |
| Start Learning PCA ↗ | |
| </a> | |
| </div> | |
| <div class="blog-card nn"> | |
| <div class="blog-title">Dropout Neural Network Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Neural Networks</span> | |
| <span class="tag">Deep Learning</span> | |
| <span class="tag">Educational</span> | |
| </div> | |
| <div class="blog-description"> | |
| Interactive guide to understanding dropout in neural networks. Visualize how dropout prevents overfitting, improves generalization, and impacts training performance with live examples. | |
| </div> | |
| <a href="dropout_neural_network.html" target="_blank" class="blog-link"> | |
| Explore Dropout ↗ | |
| </a> | |
| </div> | |
| <!-- ✅ Train-Test Split Playground --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">Train-Test Split Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Machine Learning</span> | |
| <span class="tag">Data Splitting</span> | |
| <span class="tag">Educational</span> | |
| </div> | |
| <div class="blog-description"> | |
| Interactive playground to explore how <code>train_test_split</code> works in scikit-learn. Learn the effects of shuffling and stratification on data splitting with visual examples. | |
| </div> | |
| <a href="train_test_split.html" target="_blank" class="blog-link"> | |
| Try Playground ↗ | |
| </a> | |
| </div> | |
| <!-- ✅ Binary Classification Playground --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">Binary Classification Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Machine Learning</span> | |
| <span class="tag">Classification</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Hands-on playground for binary classification. Explore decision boundaries, feature scaling, and model performance with interactive visualizations. | |
| </div> | |
| <a href="binary_classification_playground.html" target="_blank" class="blog-link"> | |
| Try Playground ↗ | |
| </a> | |
| </div> | |
| <!-- ✅ Convergence Plot Demo --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">Convergence Plot Demo</div> | |
| <div class="tags"> | |
| <span class="tag">Optimization</span> | |
| <span class="tag">Machine Learning</span> | |
| <span class="tag">Visualization</span> | |
| </div> | |
| <div class="blog-description"> | |
| Interactive demo showing optimization convergence. Visualize loss curves, parameter updates, and training dynamics for different algorithms. | |
| </div> | |
| <a href="convergence_plot_demo.html" target="_blank" class="blog-link"> | |
| View Demo ↗ | |
| </a> | |
| </div> | |
| <!-- ✅ Feature Encoding Methods Playground --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">Feature Encoding Methods Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Machine Learning</span> | |
| <span class="tag">Feature Engineering</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Explore and compare encoding methods like Label Encoding, One-Hot Encoding, Embeddings, and more. Visualize how encoding impacts model performance and data representation. | |
| </div> | |
| <a href="feature_encoding_viz.html" target="_blank" class="blog-link"> | |
| Try Playground ↗ | |
| </a> | |
| </div> | |
| <!-- ✅ R-CNN Variants Playground --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">R-CNN Variants Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Deep Learning</span> | |
| <span class="tag">Computer Vision</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Compare R-CNN, Fast R-CNN, and Faster R-CNN. Visualize how each architecture processes images, detects objects, and improves speed and accuracy. | |
| </div> | |
| <a href="rcnn_playground.html" target="_blank" class="blog-link"> | |
| Try Playground ↗ | |
| </a> | |
| </div> | |
| <!-- ✅ Outlier Detection Playground --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">Outlier Detection Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Statistics</span> | |
| <span class="tag">Data Science</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Explore Z-Score and IQR methods for detecting outliers. Generate sample data, visualize distributions with histograms and boxplots, and understand how each method identifies anomalies. | |
| </div> | |
| <a href="outlier_playground.html" target="_blank" class="blog-link"> | |
| Try Playground ↗ | |
| </a> | |
| </div> | |
| <!-- ✅ Text-to-Numerical Encoding Playground --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">Text-to-Numerical Encoding Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Machine Learning</span> | |
| <span class="tag">Data Science</span> | |
| <span class="tag">NLP</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Master text encoding techniques essential for ML/DL models. Learn Label Encoding, One-Hot Encoding, Bag-of-Words, TF-IDF, and Embeddings with interactive examples. Transform categorical text data into numerical representations and understand when to use each method. | |
| </div> | |
| <a href="text_encoding_playground.html" target="_blank" class="blog-link"> | |
| Try Playground ↗ | |
| </a> | |
| </div> | |
| <!-- ✅ One-Hot Encoding: Sparse vs Dense Playground --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">One-Hot Encoding Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Machine Learning</span> | |
| <span class="tag">Data Science</span> | |
| <span class="tag">Feature Engineering</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Learn the difference between dense and sparse one-hot encoding representations. Compare memory usage, sparsity metrics, and understand when sparse encoding saves computational resources. Interactive playground with real-time statistics. | |
| </div> | |
| <a href="onehot_encoding_playground.html" target="_blank" class="blog-link"> | |
| Try Playground ↗ | |
| </a> | |
| </div> | |
| <!-- 🎯 YOLO NMS Playground --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">YOLO Non-Maximum Suppression (NMS) Playground</div> | |
| <div class="tags"> | |
| <span class="tag">Deep Learning</span> | |
| <span class="tag">Computer Vision</span> | |
| <span class="tag">YOLO</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Visualize how Non-Maximum Suppression (NMS) filters overlapping bounding boxes in YOLO. Adjust confidence and IoU thresholds to see how redundant detections are removed and only the most confident boxes remain. | |
| </div> | |
| <a href="yolo_nms_playground.html" target="_blank" class="blog-link"> | |
| Try Playground ↗ | |
| </a> | |
| </div> | |
| <!-- 📉 YOLO Loss Function Visualization --> | |
| <div class="blog-card ml"> | |
| <div class="blog-title">YOLO Loss Function Visualization</div> | |
| <div class="tags"> | |
| <span class="tag">Deep Learning</span> | |
| <span class="tag">Computer Vision</span> | |
| <span class="tag">YOLO</span> | |
| <span class="tag">Interactive</span> | |
| </div> | |
| <div class="blog-description"> | |
| Explore how YOLO computes localization, confidence, and classification losses. Adjust prediction errors to see how each component influences the total loss dynamically. | |
| </div> | |
| <a href="yolo_loss_viz.html" target="_blank" class="blog-link"> | |
| Try Visualization ↗ | |
| </a> | |
| </div> | |
| </div> <!-- ✅ blog-grid closed --> | |
| <div style="text-align: center; margin-top: 40px; padding: 30px; background: rgba(255, 255, 255, 0.95); border-radius: 15px;"> | |
| <h3 style="color: #2c3e50; margin-bottom: 15px;">About These Visualizations</h3> | |
| <p style="color: #7f8c8d; line-height: 1.6; max-width: 600px; margin: 0 auto;"> | |
| These interactive educational tools combine advanced statistical concepts with engaging visualizations. | |
| Each demo is built with modern web technologies and designed to make complex mathematical concepts accessible and intuitive. | |
| </p> | |
| <div style="margin-top: 20px;"> | |
| <a href="mailto:mnoorchenarboo@gmail.com" style="color: #3498db; text-decoration: none; font-weight: 600;"> | |
| 📧 Contact for collaboration or questions | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |