update files

ml_complete-all-topics/app.js

@@ -107,6 +107,8 @@ function initSections() {
         if (section.id === 'optimal-k') initOptimalK();
         if (section.id === 'hyperparameter-tuning') initHyperparameterTuning();
         if (section.id === 'naive-bayes') initNaiveBayes();
+        if (section.id === 'decision-trees') initDecisionTrees();
+        if (section.id === 'ensemble-methods') initEnsembleMethods();
       }
     });
   });
@@ -2354,34 +2356,23 @@ function drawLossCurves() {
   ctx.restore();
 }
 
-// Optimal K for KNN
+// Topic 13: Finding Optimal K in KNN
 function initOptimalK() {
-  const canvas = document.getElementById('optimal-k-canvas');
-  if (!canvas || canvas.dataset.initialized) return;
-  canvas.dataset.initialized = 'true';
-  
-  const rangeSlider = document.getElementById('k-range-slider');
-  const foldsSlider = document.getElementById('cv-folds-slider');
-  
-  if (rangeSlider) {
-    rangeSlider.addEventListener('input', (e) => {
-      document.getElementById('k-range-val').textContent = e.target.value;
-      drawOptimalK();
-    });
+  const canvas1 = document.getElementById('elbow-canvas');
+  if (canvas1 && !canvas1.dataset.initialized) {
+    canvas1.dataset.initialized = 'true';
+    drawElbowCurve();
   }
   
-  if (foldsSlider) {
-    foldsSlider.addEventListener('input', (e) => {
-      document.getElementById('cv-folds-val').textContent = e.target.value;
-      drawOptimalK();
-    });
+  const canvas2 = document.getElementById('cv-k-canvas');
+  if (canvas2 && !canvas2.dataset.initialized) {
+    canvas2.dataset.initialized = 'true';
+    drawCVKHeatmap();
   }
-  
-  drawOptimalK();
 }
 
-function drawOptimalK() {
-  const canvas = document.getElementById('optimal-k-canvas');
+function drawElbowCurve() {
+  const canvas = document.getElementById('elbow-canvas');
   if (!canvas) return;
   
   const ctx = canvas.getContext('2d');
@@ -2396,30 +2387,13 @@ function drawOptimalK() {
   const chartWidth = width - 2 * padding;
   const chartHeight = height - 2 * padding;
   
-  // Use provided data
-  const kRange = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
-  const accuracies = [0.85, 0.88, 0.92, 0.94, 0.96, 0.97, 0.98, 0.97, 0.96, 0.95, 0.94, 0.93, 0.92, 0.91, 0.90, 0.89, 0.88, 0.87, 0.86, 0.85];
-  const optimalK = 7;
-  
-  const scaleX = (k) => padding + ((k - 1) / 19) * chartWidth;
-  const scaleY = (acc) => height - padding - ((acc - 0.8) / 0.2) * chartHeight;
+  // Data from application_data_json
+  const kValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
+  const accuracies = [0.96, 0.94, 0.93, 0.91, 0.89, 0.87, 0.85, 0.84, 0.83, 0.82, 0.81, 0.80, 0.79, 0.78, 0.77, 0.76, 0.75, 0.74, 0.73];
+  const optimalK = 3;
   
-  // Draw grid
-  ctx.strokeStyle = 'rgba(42, 53, 68, 0.5)';
-  ctx.lineWidth = 1;
-  for (let i = 0; i <= 10; i++) {
-    const x = padding + (chartWidth / 10) * i;
-    ctx.beginPath();
-    ctx.moveTo(x, padding);
-    ctx.lineTo(x, height - padding);
-    ctx.stroke();
-    
-    const y = padding + (chartHeight / 10) * i;
-    ctx.beginPath();
-    ctx.moveTo(padding, y);
-    ctx.lineTo(width - padding, y);
-    ctx.stroke();
-  }
+  const scaleX = (k) => padding + ((k - 1) / (kValues.length - 1)) * chartWidth;
+  const scaleY = (acc) => height - padding - ((acc - 0.7) / 0.3) * chartHeight;
   
   // Draw axes
   ctx.strokeStyle = '#2a3544';
@@ -2430,11 +2404,11 @@ function drawOptimalK() {
   ctx.lineTo(width - padding, height - padding);
   ctx.stroke();
   
-  // Draw line
+  // Draw curve
   ctx.strokeStyle = '#6aa9ff';
   ctx.lineWidth = 3;
   ctx.beginPath();
-  kRange.forEach((k, i) => {
+  kValues.forEach((k, i) => {
     const x = scaleX(k);
     const y = scaleY(accuracies[i]);
     if (i === 0) ctx.moveTo(x, y);
@@ -2443,39 +2417,24 @@ function drawOptimalK() {
   ctx.stroke();
   
   // Draw points
-  kRange.forEach((k, i) => {
+  kValues.forEach((k, i) => {
     const x = scaleX(k);
     const y = scaleY(accuracies[i]);
-    const isOptimal = k === optimalK;
-    
-    ctx.fillStyle = isOptimal ? '#7ef0d4' : '#6aa9ff';
+    ctx.fillStyle = k === optimalK ? '#7ef0d4' : '#6aa9ff';
     ctx.beginPath();
-    ctx.arc(x, y, isOptimal ? 8 : 5, 0, 2 * Math.PI);
+    ctx.arc(x, y, k === optimalK ? 8 : 4, 0, 2 * Math.PI);
     ctx.fill();
-    
-    if (isOptimal) {
-      ctx.strokeStyle = '#7ef0d4';
-      ctx.lineWidth = 2;
-      ctx.beginPath();
-      ctx.arc(x, y, 14, 0, 2 * Math.PI);
-      ctx.stroke();
-      
-      // Label
-      ctx.fillStyle = '#7ef0d4';
-      ctx.font = 'bold 14px sans-serif';
-      ctx.textAlign = 'center';
-      ctx.fillText(`Optimal K=${optimalK}`, x, y - 25);
-      ctx.fillText(`Accuracy: ${(accuracies[i] * 100).toFixed(1)}%`, x, y - 10);
-    }
   });
   
-  // Draw vertical line at optimal K
-  ctx.strokeStyle = 'rgba(126, 240, 212, 0.3)';
+  // Highlight optimal K
+  const optX = scaleX(optimalK);
+  const optY = scaleY(accuracies[optimalK - 1]);
+  ctx.strokeStyle = '#7ef0d4';
   ctx.lineWidth = 2;
   ctx.setLineDash([5, 5]);
   ctx.beginPath();
-  ctx.moveTo(scaleX(optimalK), padding);
-  ctx.lineTo(scaleX(optimalK), height - padding);
+  ctx.moveTo(optX, optY);
+  ctx.lineTo(optX, height - padding);
   ctx.stroke();
   ctx.setLineDash([]);
   
@@ -2483,34 +2442,133 @@ function drawOptimalK() {
   ctx.fillStyle = '#a9b4c2';
   ctx.font = '12px sans-serif';
   ctx.textAlign = 'center';
-  ctx.fillText('K Value', width / 2, height - 20);
+  ctx.fillText('K (Number of Neighbors)', width / 2, height - 20);
   ctx.save();
   ctx.translate(20, height / 2);
   ctx.rotate(-Math.PI / 2);
-  ctx.fillText('Mean Accuracy', 0, 0);
+  ctx.fillText('Accuracy', 0, 0);
   ctx.restore();
   
-  // X-axis labels
-  for (let i = 1; i <= 20; i += 2) {
-    ctx.fillText(i, scaleX(i), height - padding + 20);
-  }
+  // Optimal K label
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText(`Optimal K = ${optimalK}`, optX, padding + 30);
+  ctx.fillText(`Accuracy: ${accuracies[optimalK - 1].toFixed(2)}`, optX, padding + 50);
+}
+
+function drawCVKHeatmap() {
+  const canvas = document.getElementById('cv-k-canvas');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const padding = 80;
+  const chartWidth = width - 2 * padding;
+  const chartHeight = height - 2 * padding;
+  
+  const kValues = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19];
+  const folds = ['Fold 1', 'Fold 2', 'Fold 3'];
+  const fold1 = [0.98, 0.92, 0.88, 0.85, 0.83, 0.81, 0.79, 0.77, 0.75, 0.73];
+  const fold2 = [0.96, 0.91, 0.87, 0.83, 0.81, 0.79, 0.77, 0.75, 0.73, 0.71];
+  const fold3 = [0.94, 0.90, 0.86, 0.82, 0.79, 0.77, 0.75, 0.73, 0.71, 0.69];
+  const allData = [fold1, fold2, fold3];
+  
+  const cellWidth = chartWidth / kValues.length;
+  const cellHeight = chartHeight / folds.length;
+  
+  // Draw heatmap
+  folds.forEach((fold, i) => {
+    kValues.forEach((k, j) => {
+      const acc = allData[i][j];
+      const x = padding + j * cellWidth;
+      const y = padding + i * cellHeight;
+      
+      // Color based on accuracy
+      const intensity = (acc - 0.65) / 0.35;
+      const r = Math.floor(106 + (126 - 106) * intensity);
+      const g = Math.floor(169 + (240 - 169) * intensity);
+      const b = Math.floor(255 + (212 - 255) * intensity);
+      ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
+      ctx.fillRect(x, y, cellWidth, cellHeight);
+      
+      // Border
+      ctx.strokeStyle = '#1a2332';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(x, y, cellWidth, cellHeight);
+      
+      // Text
+      ctx.fillStyle = '#1a2332';
+      ctx.font = 'bold 11px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(acc.toFixed(2), x + cellWidth / 2, y + cellHeight / 2 + 4);
+    });
+  });
+  
+  // Row labels
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = '12px sans-serif';
+  ctx.textAlign = 'right';
+  folds.forEach((fold, i) => {
+    const y = padding + i * cellHeight + cellHeight / 2;
+    ctx.fillText(fold, padding - 10, y + 4);
+  });
+  
+  // Column labels
+  ctx.textAlign = 'center';
+  kValues.forEach((k, j) => {
+    const x = padding + j * cellWidth + cellWidth / 2;
+    ctx.fillText(`K=${k}`, x, padding - 10);
+  });
+  
+  // Mean accuracy
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.textAlign = 'left';
+  const meanAccs = kValues.map((k, j) => {
+    const sum = fold1[j] + fold2[j] + fold3[j];
+    return sum / 3;
+  });
+  const maxMean = Math.max(...meanAccs);
+  const optIdx = meanAccs.indexOf(maxMean);
+  ctx.fillText(`Best K = ${kValues[optIdx]} (Mean Acc: ${maxMean.toFixed(3)})`, padding, height - 20);
 }
 
-// Hyperparameter Tuning & GridSearch
+// Topic 14: Hyperparameter Tuning
 function initHyperparameterTuning() {
-  const canvas = document.getElementById('gridsearch-canvas');
-  if (!canvas || canvas.dataset.initialized) return;
-  canvas.dataset.initialized = 'true';
-  drawGridSearch();
+  const canvas1 = document.getElementById('gridsearch-heatmap');
+  if (canvas1 && !canvas1.dataset.initialized) {
+    canvas1.dataset.initialized = 'true';
+    drawGridSearchHeatmap();
+  }
+  
+  const canvas2 = document.getElementById('param-surface');
+  if (canvas2 && !canvas2.dataset.initialized) {
+    canvas2.dataset.initialized = 'true';
+    drawParamSurface();
+  }
+  
+  const radios = document.querySelectorAll('input[name="grid-model"]');
+  radios.forEach(radio => {
+    radio.addEventListener('change', () => {
+      drawGridSearchHeatmap();
+    });
+  });
 }
 
-function drawGridSearch() {
-  const canvas = document.getElementById('gridsearch-canvas');
+function drawGridSearchHeatmap() {
+  const canvas = document.getElementById('gridsearch-heatmap');
   if (!canvas) return;
   
   const ctx = canvas.getContext('2d');
   const width = canvas.width = canvas.offsetWidth;
-  const height = canvas.height = 400;
+  const height = canvas.height = 450;
   
   ctx.clearRect(0, 0, width, height);
   ctx.fillStyle = '#1a2332';
@@ -2520,33 +2578,41 @@ function drawGridSearch() {
   const chartWidth = width - 2 * padding;
   const chartHeight = height - 2 * padding;
   
-  // Grid data - C vs gamma heatmap
   const cValues = [0.1, 1, 10, 100];
   const gammaValues = [0.001, 0.01, 0.1, 1];
   
-  // Scores (simulated)
-  const scores = [
-    [0.70, 0.75, 0.78, 0.76],
-    [0.82, 0.88, 0.92, 0.85],
-    [0.88, 0.95, 0.93, 0.87],
-    [0.85, 0.90, 0.88, 0.82]
+  // Simulate accuracy grid
+  const accuracies = [
+    [0.65, 0.82, 0.88, 0.75],
+    [0.78, 0.91, 0.95, 0.89],
+    [0.85, 0.93, 0.92, 0.87],
+    [0.80, 0.88, 0.84, 0.82]
   ];
   
   const cellWidth = chartWidth / cValues.length;
   const cellHeight = chartHeight / gammaValues.length;
   
-  // Draw cells
-  cValues.forEach((c, i) => {
-    gammaValues.forEach((g, j) => {
-      const x = padding + i * cellWidth;
-      const y = padding + j * cellHeight;
-      const score = scores[i][j];
+  let bestAcc = 0, bestI = 0, bestJ = 0;
+  
+  // Draw heatmap
+  gammaValues.forEach((gamma, i) => {
+    cValues.forEach((c, j) => {
+      const acc = accuracies[i][j];
+      if (acc > bestAcc) {
+        bestAcc = acc;
+        bestI = i;
+        bestJ = j;
+      }
       
-      // Color based on score
-      const intensity = (score - 0.7) / 0.25;
-      const r = Math.floor(255 - intensity * 155);
-      const gb = Math.floor(100 + intensity * 140);
-      ctx.fillStyle = `rgb(${r}, ${gb}, ${Math.floor(gb * 0.9)})`;
+      const x = padding + j * cellWidth;
+      const y = padding + i * cellHeight;
+      
+      // Color gradient
+      const intensity = (acc - 0.6) / 0.35;
+      const r = Math.floor(255 - 149 * intensity);
+      const g = Math.floor(140 + 100 * intensity);
+      const b = Math.floor(106 + 106 * intensity);
+      ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
       ctx.fillRect(x, y, cellWidth, cellHeight);
       
       // Border
@@ -2554,132 +2620,936 @@ function drawGridSearch() {
       ctx.lineWidth = 2;
       ctx.strokeRect(x, y, cellWidth, cellHeight);
       
-      // Score text
-      ctx.fillStyle = score > 0.88 ? '#1a2332' : '#e8eef6';
+      // Text
+      ctx.fillStyle = '#1a2332';
       ctx.font = 'bold 14px sans-serif';
       ctx.textAlign = 'center';
-      ctx.fillText((score * 100).toFixed(0) + '%', x + cellWidth / 2, y + cellHeight / 2 + 5);
-      
-      // Highlight best
-      if (score === 0.95) {
-        ctx.strokeStyle = '#7ef0d4';
-        ctx.lineWidth = 4;
-        ctx.strokeRect(x, y, cellWidth, cellHeight);
-        
-        ctx.fillStyle = '#7ef0d4';
-        ctx.font = '12px sans-serif';
-        ctx.fillText('★ Best', x + cellWidth / 2, y + cellHeight / 2 + 22);
-      }
+      ctx.fillText(acc.toFixed(2), x + cellWidth / 2, y + cellHeight / 2 + 5);
     });
   });
   
-  // Axis labels - C
-  ctx.fillStyle = '#a9b4c2';
+  // Highlight best
+  const bestX = padding + bestJ * cellWidth;
+  const bestY = padding + bestI * cellHeight;
+  ctx.strokeStyle = '#7ef0d4';
+  ctx.lineWidth = 4;
+  ctx.strokeRect(bestX, bestY, cellWidth, cellHeight);
+  
+  // Labels
+  ctx.fillStyle = '#e8eef6';
   ctx.font = '12px sans-serif';
+  ctx.textAlign = 'right';
+  gammaValues.forEach((gamma, i) => {
+    const y = padding + i * cellHeight + cellHeight / 2;
+    ctx.fillText(`γ=${gamma}`, padding - 10, y + 5);
+  });
+  
   ctx.textAlign = 'center';
-  cValues.forEach((c, i) => {
-    const x = padding + i * cellWidth + cellWidth / 2;
-    ctx.fillText(`C=${c}`, x, height - padding + 25);
+  cValues.forEach((c, j) => {
+    const x = padding + j * cellWidth + cellWidth / 2;
+    ctx.fillText(`C=${c}`, x, padding - 10);
   });
   
-  // Axis labels - gamma
-  ctx.textAlign = 'right';
-  gammaValues.forEach((g, i) => {
-    const y = padding + i * cellHeight + cellHeight / 2;
-    ctx.fillText(`γ=${g}`, padding - 10, y + 5);
+  // Axis labels
+  ctx.fillStyle = '#a9b4c2';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.fillText('C Parameter', width / 2, height - 30);
+  ctx.save();
+  ctx.translate(25, height / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText('Gamma Parameter', 0, 0);
+  ctx.restore();
+  
+  // Best params
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.fillText(`Best: C=${cValues[bestJ]}, γ=${gammaValues[bestI]} → Acc=${bestAcc.toFixed(2)}`, padding, height - 30);
+}
+
+function drawParamSurface() {
+  const canvas = document.getElementById('param-surface');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const padding = 60;
+  const centerX = width / 2;
+  const centerY = height / 2;
+  
+  // Draw 3D-ish surface using contour lines
+  const levels = [0.65, 0.70, 0.75, 0.80, 0.85, 0.90, 0.95];
+  const colors = ['#ff8c6a', '#ffa07a', '#ffb490', '#ffc8a6', '#7ef0d4', '#6aa9ff', '#5a99ef'];
+  
+  levels.forEach((level, i) => {
+    const radius = 150 - i * 20;
+    ctx.strokeStyle = colors[i];
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.ellipse(centerX, centerY, radius, radius * 0.6, 0, 0, 2 * Math.PI);
+    ctx.stroke();
+    
+    // Label
+    ctx.fillStyle = colors[i];
+    ctx.font = '11px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(level.toFixed(2), centerX + radius + 10, centerY);
   });
   
-  // Title
+  // Center point (optimum)
   ctx.fillStyle = '#7ef0d4';
-  ctx.font = 'bold 16px sans-serif';
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, 8, 0, 2 * Math.PI);
+  ctx.fill();
+  
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 14px sans-serif';
   ctx.textAlign = 'center';
-  ctx.fillText('GridSearch Heatmap: C vs gamma (RBF kernel)', width / 2, 30);
+  ctx.fillText('Optimal Point', centerX, centerY - 20);
+  ctx.fillText('(C=1, γ=scale)', centerX, centerY + 35);
   
-  // Legend
-  ctx.font = '12px sans-serif';
+  // Axis labels
   ctx.fillStyle = '#a9b4c2';
-  ctx.textAlign = 'left';
-  ctx.fillText('Lower accuracy', padding, height - 10);
-  ctx.textAlign = 'right';
-  ctx.fillText('Higher accuracy', width - padding, height - 10);
+  ctx.font = '12px sans-serif';
+  ctx.fillText('C Parameter →', width - 80, height - 20);
+  ctx.save();
+  ctx.translate(30, 60);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText('← Gamma', 0, 0);
+  ctx.restore();
+  
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Performance Surface (3D Contour View)', width / 2, 30);
 }
 
-// Naive Bayes
+// Topic 15: Naive Bayes
 function initNaiveBayes() {
-  const canvas = document.getElementById('naive-bayes-canvas');
-  if (!canvas || canvas.dataset.initialized) return;
-  canvas.dataset.initialized = 'true';
-  drawNaiveBayes();
+  const canvas1 = document.getElementById('bayes-theorem-viz');
+  if (canvas1 && !canvas1.dataset.initialized) {
+    canvas1.dataset.initialized = 'true';
+    drawBayesTheorem();
+  }
+  
+  const canvas2 = document.getElementById('spam-classification');
+  if (canvas2 && !canvas2.dataset.initialized) {
+    canvas2.dataset.initialized = 'true';
+    drawSpamClassification();
+  }
 }
 
-function drawNaiveBayes() {
-  const canvas = document.getElementById('naive-bayes-canvas');
+function drawBayesTheorem() {
+  const canvas = document.getElementById('bayes-theorem-viz');
   if (!canvas) return;
   
   const ctx = canvas.getContext('2d');
   const width = canvas.width = canvas.offsetWidth;
-  const height = canvas.height = 350;
+  const height = canvas.height = 400;
   
   ctx.clearRect(0, 0, width, height);
   ctx.fillStyle = '#1a2332';
   ctx.fillRect(0, 0, width, height);
   
-  // Display calculation flow
-  const steps = [
-    { label: 'Words', value: '["free", "money"]', color: '#6aa9ff' },
-    { label: 'P(free|spam)', value: '0.8', color: '#7ef0d4' },
-    { label: 'P(money|spam)', value: '0.7', color: '#7ef0d4' },
-    { label: 'P(spam)', value: '0.3', color: '#ff8c6a' },
-    { label: 'Likelihood', value: '0.8 × 0.7 = 0.56', color: '#7ef0d4' },
-    { label: 'Posterior', value: '0.56 × 0.3 = 0.168', color: '#7ef0d4' },
-    { label: 'Result', value: 'P(spam) = 0.98 (98%)', color: '#7ef0d4' }
-  ];
+  const centerX = width / 2;
+  const centerY = height / 2;
   
-  const boxWidth = 180;
-  const boxHeight = 45;
-  const startY = 40;
-  const gap = 8;
+  // Draw formula components as boxes
+  const boxes = [
+    { x: centerX - 300, y: centerY - 80, w: 120, h: 60, text: 'P(C|F)', label: 'Posterior', color: '#7ef0d4' },
+    { x: centerX - 100, y: centerY - 80, w: 120, h: 60, text: 'P(F|C)', label: 'Likelihood', color: '#6aa9ff' },
+    { x: centerX + 100, y: centerY - 80, w: 100, h: 60, text: 'P(C)', label: 'Prior', color: '#ffb490' },
+    { x: centerX - 50, y: centerY + 60, w: 100, h: 60, text: 'P(F)', label: 'Evidence', color: '#ff8c6a' }
+  ];
   
-  steps.forEach((step, i) => {
-    const x = (width - boxWidth) / 2;
-    const y = startY + i * (boxHeight + gap);
-    
-    // Box
-    ctx.fillStyle = '#2a3544';
-    ctx.fillRect(x, y, boxWidth, boxHeight);
-    ctx.strokeStyle = step.color;
+  boxes.forEach(box => {
+    ctx.fillStyle = box.color + '33';
+    ctx.fillRect(box.x, box.y, box.w, box.h);
+    ctx.strokeStyle = box.color;
     ctx.lineWidth = 2;
-    ctx.strokeRect(x, y, boxWidth, boxHeight);
+    ctx.strokeRect(box.x, box.y, box.w, box.h);
     
-    // Text
-    ctx.fillStyle = '#a9b4c2';
-    ctx.font = '11px sans-serif';
+    ctx.fillStyle = box.color;
+    ctx.font = 'bold 16px sans-serif';
     ctx.textAlign = 'center';
-    ctx.fillText(step.label, x + boxWidth / 2, y + boxHeight / 2 - 6);
+    ctx.fillText(box.text, box.x + box.w / 2, box.y + box.h / 2);
     
-    ctx.fillStyle = step.color;
-    ctx.font = 'bold 13px monospace';
-    ctx.fillText(step.value, x + boxWidth / 2, y + boxHeight / 2 + 10);
-    
-    // Arrow
-    if (i < steps.length - 1) {
-      ctx.strokeStyle = '#6aa9ff';
-      ctx.fillStyle = '#6aa9ff';
-      ctx.lineWidth = 2;
-      const arrowY = y + boxHeight + gap / 2;
-      ctx.beginPath();
-      ctx.moveTo(x + boxWidth / 2, arrowY - 3);
-      ctx.lineTo(x + boxWidth / 2, arrowY + 3);
-      ctx.stroke();
-      
-      // Arrowhead
-      ctx.beginPath();
-      ctx.moveTo(x + boxWidth / 2, arrowY + 3);
-      ctx.lineTo(x + boxWidth / 2 - 4, arrowY - 2);
-      ctx.lineTo(x + boxWidth / 2 + 4, arrowY - 2);
-      ctx.fill();
-    }
+    ctx.font = '12px sans-serif';
+    ctx.fillStyle = '#a9b4c2';
+    ctx.fillText(box.label, box.x + box.w / 2, box.y + box.h + 20);
   });
+  
+  // Draw arrows and operators
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = 'bold 20px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('=', centerX - 160, centerY - 40);
+  ctx.fillText('×', centerX + 40, centerY - 40);
+  ctx.fillText('÷', centerX, centerY + 20);
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 18px sans-serif';
+  ctx.fillText("Bayes' Theorem Breakdown", centerX, 40);
+}
+
+function drawSpamClassification() {
+  const canvas = document.getElementById('spam-classification');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const padding = 40;
+  const stepHeight = 70;
+  const startY = 60;
+  
+  // Step 1: Features
+  ctx.fillStyle = '#6aa9ff';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.fillText('Step 1: Email Features', padding, startY);
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = '13px sans-serif';
+  ctx.fillText('Words: ["free", "winner", "click"]', padding + 20, startY + 25);
+  
+  // Step 2: Calculate P(spam)
+  const y2 = startY + stepHeight;
+  ctx.fillStyle = '#6aa9ff';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.fillText('Step 2: P(spam | features)', padding, y2);
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = '12px monospace';
+  ctx.fillText('= P("free"|spam) × P("winner"|spam) × P("click"|spam) × P(spam)', padding + 20, y2 + 25);
+  ctx.fillText('= 0.8 × 0.7 × 0.6 × 0.3', padding + 20, y2 + 45);
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 14px monospace';
+  ctx.fillText('= 0.1008', padding + 20, y2 + 65);
+  
+  // Step 3: Calculate P(not spam)
+  const y3 = y2 + stepHeight + 50;
+  ctx.fillStyle = '#6aa9ff';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.fillText('Step 3: P(not-spam | features)', padding, y3);
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = '12px monospace';
+  ctx.fillText('= P("free"|not-spam) × P("winner"|not-spam) × P("click"|not-spam) × P(not-spam)', padding + 20, y3 + 25);
+  ctx.fillText('= 0.1 × 0.05 × 0.2 × 0.7', padding + 20, y3 + 45);
+  ctx.fillStyle = '#ff8c6a';
+  ctx.font = 'bold 14px monospace';
+  ctx.fillText('= 0.0007', padding + 20, y3 + 65);
+  
+  // Step 4: Decision
+  const y4 = y3 + stepHeight + 50;
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.fillText('Decision: 0.1008 > 0.0007', padding, y4);
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 18px sans-serif';
+  ctx.fillText('→ SPAM! 📧❌', padding, y4 + 30);
+  
+  // Visual comparison
+  const barY = y4 + 60;
+  const barMaxWidth = width - 2 * padding - 100;
+  ctx.fillStyle = '#7ef0d4';
+  ctx.fillRect(padding, barY, 0.1008 / 0.1008 * barMaxWidth, 20);
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = '11px sans-serif';
+  ctx.textAlign = 'right';
+  ctx.fillText('Spam', padding + barMaxWidth + 80, barY + 15);
+  
+  ctx.fillStyle = '#ff8c6a';
+  ctx.fillRect(padding, barY + 30, 0.0007 / 0.1008 * barMaxWidth, 20);
+  ctx.fillStyle = '#e8eef6';
+  ctx.fillText('Not Spam', padding + barMaxWidth + 80, barY + 45);
+}
+
+// Topic 16: Decision Trees
+function initDecisionTrees() {
+  const canvas1 = document.getElementById('decision-tree-viz');
+  if (canvas1 && !canvas1.dataset.initialized) {
+    canvas1.dataset.initialized = 'true';
+    drawDecisionTree();
+  }
+  
+  const canvas2 = document.getElementById('entropy-viz');
+  if (canvas2 && !canvas2.dataset.initialized) {
+    canvas2.dataset.initialized = 'true';
+    drawEntropyViz();
+  }
+  
+  const canvas3 = document.getElementById('split-comparison');
+  if (canvas3 && !canvas3.dataset.initialized) {
+    canvas3.dataset.initialized = 'true';
+    drawSplitComparison();
+  }
+  
+  const canvas4 = document.getElementById('tree-boundary');
+  if (canvas4 && !canvas4.dataset.initialized) {
+    canvas4.dataset.initialized = 'true';
+    drawTreeBoundary();
+  }
+}
+
+function drawDecisionTree() {
+  const canvas = document.getElementById('decision-tree-viz');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 450;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const centerX = width / 2;
+  
+  // Node structure
+  const nodes = [
+    { x: centerX, y: 60, text: 'Has "free"?', type: 'root' },
+    { x: centerX - 150, y: 160, text: 'Has link?', type: 'internal' },
+    { x: centerX + 150, y: 160, text: 'Sender new?', type: 'internal' },
+    { x: centerX - 220, y: 260, text: 'SPAM', type: 'leaf', class: 'spam' },
+    { x: centerX - 80, y: 260, text: 'NOT SPAM', type: 'leaf', class: 'not-spam' },
+    { x: centerX + 80, y: 260, text: 'SPAM', type: 'leaf', class: 'spam' },
+    { x: centerX + 220, y: 260, text: 'NOT SPAM', type: 'leaf', class: 'not-spam' }
+  ];
+  
+  const edges = [
+    { from: 0, to: 1, label: 'Yes' },
+    { from: 0, to: 2, label: 'No' },
+    { from: 1, to: 3, label: 'Yes' },
+    { from: 1, to: 4, label: 'No' },
+    { from: 2, to: 5, label: 'Yes' },
+    { from: 2, to: 6, label: 'No' }
+  ];
+  
+  // Draw edges
+  ctx.strokeStyle = '#6aa9ff';
+  ctx.lineWidth = 2;
+  edges.forEach(edge => {
+    const from = nodes[edge.from];
+    const to = nodes[edge.to];
+    ctx.beginPath();
+    ctx.moveTo(from.x, from.y + 25);
+    ctx.lineTo(to.x, to.y - 25);
+    ctx.stroke();
+    
+    // Edge label
+    ctx.fillStyle = '#7ef0d4';
+    ctx.font = '11px sans-serif';
+    ctx.textAlign = 'center';
+    const midX = (from.x + to.x) / 2;
+    const midY = (from.y + to.y) / 2;
+    ctx.fillText(edge.label, midX + 15, midY);
+  });
+  
+  // Draw nodes
+  nodes.forEach(node => {
+    if (node.type === 'leaf') {
+      ctx.fillStyle = node.class === 'spam' ? '#ff8c6a33' : '#7ef0d433';
+      ctx.strokeStyle = node.class === 'spam' ? '#ff8c6a' : '#7ef0d4';
+    } else {
+      ctx.fillStyle = '#6aa9ff33';
+      ctx.strokeStyle = '#6aa9ff';
+    }
+    
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.rect(node.x - 60, node.y - 20, 120, 40);
+    ctx.fill();
+    ctx.stroke();
+    
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = node.type === 'leaf' ? 'bold 13px sans-serif' : '12px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(node.text, node.x, node.y + 5);
+  });
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.fillText('Decision Tree: Email Spam Classifier', centerX, 30);
+  
+  // Example path
+  ctx.fillStyle = '#a9b4c2';
+  ctx.font = '12px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.fillText('Example: Email with "free" + link → SPAM', 40, height - 20);
+}
+
+function drawEntropyViz() {
+  const canvas = document.getElementById('entropy-viz');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const padding = 60;
+  const chartWidth = width - 2 * padding;
+  const chartHeight = height - 2 * padding;
+  
+  // Draw entropy curve
+  ctx.strokeStyle = '#6aa9ff';
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  for (let p = 0.01; p <= 0.99; p += 0.01) {
+    const entropy = -p * Math.log2(p) - (1 - p) * Math.log2(1 - p);
+    const x = padding + p * chartWidth;
+    const y = height - padding - entropy * chartHeight;
+    if (p === 0.01) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.stroke();
+  
+  // Mark key points
+  const points = [
+    { p: 0.1, label: 'Pure\n(low)' },
+    { p: 0.5, label: 'Maximum\n(high)' },
+    { p: 0.9, label: 'Pure\n(low)' }
+  ];
+  
+  points.forEach(point => {
+    const entropy = -point.p * Math.log2(point.p) - (1 - point.p) * Math.log2(1 - point.p);
+    const x = padding + point.p * chartWidth;
+    const y = height - padding - entropy * chartHeight;
+    
+    ctx.fillStyle = '#7ef0d4';
+    ctx.beginPath();
+    ctx.arc(x, y, 6, 0, 2 * Math.PI);
+    ctx.fill();
+    
+    ctx.fillStyle = '#7ef0d4';
+    ctx.font = '11px sans-serif';
+    ctx.textAlign = 'center';
+    const lines = point.label.split('\n');
+    lines.forEach((line, i) => {
+      ctx.fillText(line, x, y - 15 - (lines.length - 1 - i) * 12);
+    });
+  });
+  
+  // Axes
+  ctx.strokeStyle = '#2a3544';
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(padding, padding);
+  ctx.lineTo(padding, height - padding);
+  ctx.lineTo(width - padding, height - padding);
+  ctx.stroke();
+  
+  // Labels
+  ctx.fillStyle = '#a9b4c2';
+  ctx.font = '12px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Proportion of Positive Class (p)', width / 2, height - 20);
+  ctx.save();
+  ctx.translate(20, height / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText('Entropy H(p)', 0, 0);
+  ctx.restore();
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Entropy: Measuring Disorder', width / 2, 30);
+}
+
+function drawSplitComparison() {
+  const canvas = document.getElementById('split-comparison');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const splits = [
+    { name: 'Split A: "Contains FREE"', ig: 0.034, color: '#ff8c6a' },
+    { name: 'Split B: "Has Link"', ig: 0.156, color: '#7ef0d4' },
+    { name: 'Split C: "Urgent"', ig: 0.089, color: '#ffb490' }
+  ];
+  
+  const padding = 60;
+  const barHeight = 60;
+  const maxWidth = width - 2 * padding - 200;
+  const maxIG = Math.max(...splits.map(s => s.ig));
+  
+  splits.forEach((split, i) => {
+    const y = 80 + i * (barHeight + 40);
+    const barWidth = (split.ig / maxIG) * maxWidth;
+    
+    // Bar
+    ctx.fillStyle = split.color;
+    ctx.fillRect(padding, y, barWidth, barHeight);
+    
+    // Border
+    ctx.strokeStyle = split.color;
+    ctx.lineWidth = 2;
+    ctx.strokeRect(padding, y, barWidth, barHeight);
+    
+    // Label
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = 'bold 13px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(split.name, padding, y - 10);
+    
+    // Value
+    ctx.fillStyle = '#1a2332';
+    ctx.font = 'bold 16px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(`IG = ${split.ig.toFixed(3)}`, padding + barWidth / 2, y + barHeight / 2 + 6);
+  });
+  
+  // Winner
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('✓ Best split: Highest Information Gain!', width / 2, height - 30);
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.fillText('Comparing Split Quality', width / 2, 40);
+}
+
+function drawTreeBoundary() {
+  const canvas = document.getElementById('tree-boundary');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const padding = 60;
+  const chartWidth = width - 2 * padding;
+  const chartHeight = height - 2 * padding;
+  
+  // Draw regions
+  const regions = [
+    { x1: 0, y1: 0, x2: 0.5, y2: 0.6, class: 'orange' },
+    { x1: 0.5, y1: 0, x2: 1, y2: 0.6, class: 'yellow' },
+    { x1: 0, y1: 0.6, x2: 0.3, y2: 1, class: 'yellow' },
+    { x1: 0.3, y1: 0.6, x2: 1, y2: 1, class: 'orange' }
+  ];
+  
+  regions.forEach(region => {
+    const x = padding + region.x1 * chartWidth;
+    const y = padding + region.y1 * chartHeight;
+    const w = (region.x2 - region.x1) * chartWidth;
+    const h = (region.y2 - region.y1) * chartHeight;
+    
+    ctx.fillStyle = region.class === 'orange' ? 'rgba(255, 140, 106, 0.2)' : 'rgba(255, 235, 59, 0.2)';
+    ctx.fillRect(x, y, w, h);
+    
+    ctx.strokeStyle = region.class === 'orange' ? '#ff8c6a' : '#ffeb3b';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, w, h);
+  });
+  
+  // Generate random points
+  const orangePoints = [];
+  const yellowPoints = [];
+  for (let i = 0; i < 15; i++) {
+    if (Math.random() < 0.3) {
+      orangePoints.push({ x: Math.random() * 0.5, y: Math.random() * 0.6 });
+    }
+    if (Math.random() < 0.3) {
+      yellowPoints.push({ x: 0.5 + Math.random() * 0.5, y: Math.random() * 0.6 });
+    }
+    if (Math.random() < 0.3) {
+      orangePoints.push({ x: 0.3 + Math.random() * 0.7, y: 0.6 + Math.random() * 0.4 });
+    }
+    if (Math.random() < 0.3) {
+      yellowPoints.push({ x: Math.random() * 0.3, y: 0.6 + Math.random() * 0.4 });
+    }
+  }
+  
+  // Draw points
+  orangePoints.forEach(p => {
+    ctx.fillStyle = '#ff8c6a';
+    ctx.beginPath();
+    ctx.arc(padding + p.x * chartWidth, padding + p.y * chartHeight, 5, 0, 2 * Math.PI);
+    ctx.fill();
+  });
+  
+  yellowPoints.forEach(p => {
+    ctx.fillStyle = '#ffeb3b';
+    ctx.beginPath();
+    ctx.arc(padding + p.x * chartWidth, padding + p.y * chartHeight, 5, 0, 2 * Math.PI);
+    ctx.fill();
+  });
+  
+  // Labels
+  ctx.fillStyle = '#a9b4c2';
+  ctx.font = '12px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Feature 1', width / 2, height - 20);
+  ctx.save();
+  ctx.translate(20, height / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText('Feature 2', 0, 0);
+  ctx.restore();
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Decision Tree Creates Rectangular Regions', width / 2, 30);
+}
+
+// Topic 17: Ensemble Methods
+function initEnsembleMethods() {
+  const canvas1 = document.getElementById('bagging-viz');
+  if (canvas1 && !canvas1.dataset.initialized) {
+    canvas1.dataset.initialized = 'true';
+    drawBaggingViz();
+  }
+  
+  const canvas2 = document.getElementById('boosting-viz');
+  if (canvas2 && !canvas2.dataset.initialized) {
+    canvas2.dataset.initialized = 'true';
+    drawBoostingViz();
+  }
+  
+  const canvas3 = document.getElementById('random-forest-viz');
+  if (canvas3 && !canvas3.dataset.initialized) {
+    canvas3.dataset.initialized = 'true';
+    drawRandomForestViz();
+  }
+}
+
+function drawBaggingViz() {
+  const canvas = document.getElementById('bagging-viz');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const boxWidth = 150;
+  const boxHeight = 60;
+  const startY = 60;
+  const spacing = (width - 3 * boxWidth) / 4;
+  
+  // Original data
+  ctx.fillStyle = '#6aa9ff33';
+  ctx.fillRect(width / 2 - 100, startY, 200, boxHeight);
+  ctx.strokeStyle = '#6aa9ff';
+  ctx.lineWidth = 2;
+  ctx.strokeRect(width / 2 - 100, startY, 200, boxHeight);
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Original Dataset', width / 2, startY + boxHeight / 2 + 5);
+  
+  // Bootstrap samples
+  const sampleY = startY + boxHeight + 60;
+  for (let i = 0; i < 3; i++) {
+    const x = spacing + i * (boxWidth + spacing);
+    
+    // Arrow
+    ctx.strokeStyle = '#7ef0d4';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(width / 2, startY + boxHeight);
+    ctx.lineTo(x + boxWidth / 2, sampleY);
+    ctx.stroke();
+    
+    // Sample box
+    ctx.fillStyle = '#7ef0d433';
+    ctx.fillRect(x, sampleY, boxWidth, boxHeight);
+    ctx.strokeStyle = '#7ef0d4';
+    ctx.strokeRect(x, sampleY, boxWidth, boxHeight);
+    
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = 'bold 12px sans-serif';
+    ctx.fillText(`Bootstrap ${i + 1}`, x + boxWidth / 2, sampleY + boxHeight / 2 - 5);
+    ctx.font = '10px sans-serif';
+    ctx.fillStyle = '#a9b4c2';
+    ctx.fillText('(random sample)', x + boxWidth / 2, sampleY + boxHeight / 2 + 10);
+    
+    // Model
+    const modelY = sampleY + boxHeight + 40;
+    ctx.fillStyle = '#ffb49033';
+    ctx.fillRect(x, modelY, boxWidth, boxHeight);
+    ctx.strokeStyle = '#ffb490';
+    ctx.strokeRect(x, modelY, boxWidth, boxHeight);
+    
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = 'bold 12px sans-serif';
+    ctx.fillText(`Model ${i + 1}`, x + boxWidth / 2, modelY + boxHeight / 2 + 5);
+    
+    // Arrow to final
+    ctx.strokeStyle = '#ffb490';
+    ctx.beginPath();
+    ctx.moveTo(x + boxWidth / 2, modelY + boxHeight);
+    ctx.lineTo(width / 2, height - 60);
+    ctx.stroke();
+  }
+  
+  // Final prediction
+  ctx.fillStyle = '#ff8c6a33';
+  ctx.fillRect(width / 2 - 100, height - 60, 200, boxHeight);
+  ctx.strokeStyle = '#ff8c6a';
+  ctx.lineWidth = 3;
+  ctx.strokeRect(width / 2 - 100, height - 60, 200, boxHeight);
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.fillText('Average / Vote', width / 2, height - 60 + boxHeight / 2 + 5);
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.fillText('Bagging: Bootstrap Aggregating', width / 2, 30);
+}
+
+function drawBoostingViz() {
+  const canvas = document.getElementById('boosting-viz');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 450;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const iterY = [80, 180, 280];
+  const dataX = 100;
+  const modelX = width / 2;
+  const predX = width - 150;
+  
+  for (let i = 0; i < 3; i++) {
+    const y = iterY[i];
+    const alpha = i === 0 ? 1 : (i === 1 ? 0.7 : 0.5);
+    
+    // Iteration label
+    ctx.fillStyle = '#7ef0d4';
+    ctx.font = 'bold 14px sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(`Iteration ${i + 1}`, 20, y + 30);
+    
+    // Data with weights
+    ctx.globalAlpha = alpha;
+    ctx.fillStyle = '#6aa9ff33';
+    ctx.fillRect(dataX, y, 120, 60);
+    ctx.strokeStyle = '#6aa9ff';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(dataX, y, 120, 60);
+    ctx.globalAlpha = 1;
+    
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = '12px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Weighted Data', dataX + 60, y + 25);
+    ctx.fillStyle = i > 0 ? '#ff8c6a' : '#7ef0d4';
+    ctx.font = 'bold 11px sans-serif';
+    ctx.fillText(i > 0 ? '↑ Focus on errors' : 'Equal weights', dataX + 60, y + 45);
+    
+    // Arrow
+    ctx.strokeStyle = '#7ef0d4';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(dataX + 120, y + 30);
+    ctx.lineTo(modelX - 60, y + 30);
+    ctx.stroke();
+    
+    // Model
+    ctx.fillStyle = '#ffb49033';
+    ctx.fillRect(modelX - 60, y, 120, 60);
+    ctx.strokeStyle = '#ffb490';
+    ctx.strokeRect(modelX - 60, y, 120, 60);
+    
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = 'bold 12px sans-serif';
+    ctx.fillText(`Model ${i + 1}`, modelX, y + 35);
+    
+    // Arrow
+    ctx.strokeStyle = '#ffb490';
+    ctx.beginPath();
+    ctx.moveTo(modelX + 60, y + 30);
+    ctx.lineTo(predX - 60, y + 30);
+    ctx.stroke();
+    
+    // Predictions
+    ctx.fillStyle = '#7ef0d433';
+    ctx.fillRect(predX - 60, y, 120, 60);
+    ctx.strokeStyle = '#7ef0d4';
+    ctx.strokeRect(predX - 60, y, 120, 60);
+    
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = '11px sans-serif';
+    ctx.fillText('Predictions', predX, y + 25);
+    ctx.fillStyle = i < 2 ? '#ff8c6a' : '#7ef0d4';
+    ctx.font = 'bold 10px sans-serif';
+    ctx.fillText(i < 2 ? 'Some errors' : 'Better!', predX, y + 45);
+    
+    // Feedback arrow
+    if (i < 2) {
+      ctx.strokeStyle = '#ff8c6a';
+      ctx.lineWidth = 2;
+      ctx.setLineDash([5, 5]);
+      ctx.beginPath();
+      ctx.moveTo(predX - 60, y + 60);
+      ctx.lineTo(dataX + 60, y + 90);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      
+      ctx.fillStyle = '#ff8c6a';
+      ctx.font = '10px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('Increase weights for errors', width / 2, y + 80);
+    }
+  }
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Boosting: Sequential Learning from Mistakes', width / 2, 30);
+  
+  // Final
+  ctx.fillStyle = '#ff8c6a';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.fillText('Final Prediction = Weighted Combination of All Models', width / 2, height - 20);
+}
+
+function drawRandomForestViz() {
+  const canvas = document.getElementById('random-forest-viz');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 400;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const treeY = 120;
+  const numTrees = 5;
+  const treeSpacing = (width - 100) / numTrees;
+  const treeSize = 50;
+  
+  // Original data
+  ctx.fillStyle = '#6aa9ff33';
+  ctx.fillRect(width / 2 - 100, 40, 200, 50);
+  ctx.strokeStyle = '#6aa9ff';
+  ctx.lineWidth = 2;
+  ctx.strokeRect(width / 2 - 100, 40, 200, 50);
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Training Data', width / 2, 70);
+  
+  // Trees
+  for (let i = 0; i < numTrees; i++) {
+    const x = 50 + i * treeSpacing + treeSpacing / 2;
+    
+    // Arrow from data
+    ctx.strokeStyle = '#7ef0d4';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(width / 2, 90);
+    ctx.lineTo(x, treeY - 20);
+    ctx.stroke();
+    
+    // Tree icon (triangle)
+    ctx.fillStyle = '#7ef0d4';
+    ctx.beginPath();
+    ctx.moveTo(x, treeY - 20);
+    ctx.lineTo(x - treeSize / 2, treeY + treeSize - 20);
+    ctx.lineTo(x + treeSize / 2, treeY + treeSize - 20);
+    ctx.closePath();
+    ctx.fill();
+    
+    // Trunk
+    ctx.fillStyle = '#ffb490';
+    ctx.fillRect(x - 8, treeY + treeSize - 20, 16, 30);
+    
+    // Tree label
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = 'bold 11px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(`Tree ${i + 1}`, x, treeY + treeSize + 25);
+    
+    // Random features note
+    if (i === 0) {
+      ctx.font = '9px sans-serif';
+      ctx.fillStyle = '#a9b4c2';
+      ctx.fillText('Random', x, treeY + treeSize + 40);
+      ctx.fillText('subset', x, treeY + treeSize + 52);
+    }
+    
+    // Prediction
+    const predY = treeY + treeSize + 70;
+    ctx.fillStyle = i < 3 ? '#ff8c6a' : '#7ef0d4';
+    ctx.beginPath();
+    ctx.arc(x, predY, 12, 0, 2 * Math.PI);
+    ctx.fill();
+    
+    ctx.fillStyle = '#1a2332';
+    ctx.font = 'bold 10px sans-serif';
+    ctx.fillText(i < 3 ? '1' : '0', x, predY + 4);
+    
+    // Arrow to vote
+    ctx.strokeStyle = i < 3 ? '#ff8c6a' : '#7ef0d4';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x, predY + 12);
+    ctx.lineTo(width / 2, height - 80);
+    ctx.stroke();
+  }
+  
+  // Vote box
+  ctx.fillStyle = '#7ef0d433';
+  ctx.fillRect(width / 2 - 80, height - 80, 160, 60);
+  ctx.strokeStyle = '#7ef0d4';
+  ctx.lineWidth = 3;
+  ctx.strokeRect(width / 2 - 80, height - 80, 160, 60);
+  
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = 'bold 14px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Majority Vote', width / 2, height - 60);
+  ctx.font = 'bold 16px sans-serif';
+  ctx.fillStyle = '#ff8c6a';
+  ctx.fillText('Class 1 wins (3 vs 2)', width / 2, height - 35);
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.fillText('Random Forest: Ensemble of Decision Trees', width / 2, 25);
 }
 
 // Handle window resize
@@ -2708,8 +3578,19 @@ window.addEventListener('resize', () => {
     drawSVMCParameter();
     drawSVMTraining();
     drawSVMKernel();
-    drawOptimalK();
-    drawGridSearch();
-    drawNaiveBayes();
+    // New topics
+    drawElbowCurve();
+    drawCVKHeatmap();
+    drawGridSearchHeatmap();
+    drawParamSurface();
+    drawBayesTheorem();
+    drawSpamClassification();
+    drawDecisionTree();
+    drawEntropyViz();
+    drawSplitComparison();
+    drawTreeBoundary();
+    drawBaggingViz();
+    drawBoostingViz();
+    drawRandomForestViz();
   }, 250);
 });

ml_complete-all-topics/index.html

@@ -496,9 +496,11 @@ canvas {
                 <a href="#cross-validation" class="toc-link">10. Cross-Validation</a>
                 <a href="#preprocessing" class="toc-link">11. Data Preprocessing</a>
                 <a href="#loss-functions" class="toc-link">12. Loss Functions</a>
-                <a href="#optimal-k" class="toc-link">13. Finding Optimal K for KNN</a>
-                <a href="#hyperparameter-tuning" class="toc-link">14. Hyperparameter Tuning &amp; GridSearch</a>
-                <a href="#naive-bayes" class="toc-link">15. Naive Bayes Classifier</a>
+                <a href="#optimal-k" class="toc-link">13. Finding Optimal K in KNN</a>
+                <a href="#hyperparameter-tuning" class="toc-link">14. Hyperparameter Tuning</a>
+                <a href="#naive-bayes" class="toc-link">15. Naive Bayes</a>
+                <a href="#decision-trees" class="toc-link">16. Decision Trees</a>
+                <a href="#ensemble-methods" class="toc-link">17. Ensemble Methods</a>
             </nav>
         </aside>
 
@@ -2374,517 +2376,632 @@ Actual  Pos     TP     FN
                         </div>
                     </div>
 
-                    <h3>🎉 Congratulations!</h3>
-                    <p style="font-size: 18px; color: #7ef0d4; margin-top: 24px;">
-                        You've completed all 12 machine learning topics! You now understand the fundamentals of ML from linear regression to loss functions. Keep practicing and building projects! 🚀
-                    </p>
                 </div>
             </div>
 
-            <!-- Section 13: Finding Optimal K for KNN -->
+            <!-- Section 13: Finding Optimal K in KNN -->
             <div class="section" id="optimal-k">
                 <div class="section-header">
-                    <h2>13. Finding Optimal K for KNN 🎯</h2>
+                    <h2>13. Finding Optimal K in KNN</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
-                    <p>In KNN, choosing the right K value is crucial! Too small = overfitting, too large = underfitting. How do we find the optimal K? Use cross-validation!</p>
+                    <p>Choosing the right K value is critical for KNN performance! Too small causes overfitting, too large causes underfitting. Let's explore systematic methods to find the optimal K.</p>
 
                     <div class="info-card">
-                        <div class="info-card-title">The Problem</div>
+                        <div class="info-card-title">Key Methods</div>
                         <ul class="info-card-list">
-                            <li>K=1: Overfits (memorizes training data, including noise)</li>
-                            <li>K=too large: Underfits (boundary too smooth, misses patterns)</li>
-                            <li>Need: K that balances bias and variance</li>
-                            <li>K controls model complexity</li>
+                            <li>Elbow Method: Plot accuracy vs K, find the "elbow"</li>
+                            <li>Cross-Validation: Test multiple K values with k-fold CV</li>
+                            <li>Grid Search: Systematically test K values</li>
+                            <li>Avoid K=1 (overfits) and K=n (underfits)</li>
                         </ul>
                     </div>
 
-                    <h3>Why K Matters</h3>
-                    <ul>
-                        <li><strong>K controls model complexity:</strong> Small K = complex boundaries, large K = simple boundaries</li>
-                        <li><strong>Affects decision boundary smoothness:</strong> Directly impacts predictions</li>
-                        <li><strong>Impacts generalization ability:</strong> Wrong K hurts test performance</li>
-                        <li><strong>Must be chosen carefully:</strong> Can't just guess!</li>
-                    </ul>
+                    <h3>Method 1: Elbow Method</h3>
+                    <p>Test different K values and plot performance. Look for the "elbow" where adding more neighbors doesn't help much.</p>
 
-                    <h3>The Solution: Cross-Validation</h3>
-                    <div class="formula">
-                        <strong>K-Selection Algorithm:</strong>
-                        For K = 1 to 20:<br>
-                        &nbsp;&nbsp;For each fold in K-Fold CV:<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;Train KNN with this K value<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;Test on validation fold<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;Record accuracy<br>
-                        &nbsp;&nbsp;Calculate mean accuracy across all folds<br>
-                        &nbsp;&nbsp;Store: (K, mean_accuracy)<br>
-                        <br>
-                        Plot K vs Mean Accuracy<br>
-                        Choose K with highest mean accuracy
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="elbow-canvas"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure 1:</strong> Elbow curve showing optimal K at the bend</p>
                     </div>
 
-                    <h3>Step-by-Step Process</h3>
-                    <ol>
-                        <li><strong>Define K Range:</strong> Try K = 1, 2, 3, ..., 20 (or use √n as starting point)</li>
-                        <li><strong>Set Up Cross-Validation:</strong> Use k-fold CV (e.g., k=10) to ensure robust evaluation</li>
-                        <li><strong>Train and Evaluate:</strong> For each K value, run k-fold CV, get accuracy for each fold, calculate mean ± std dev</li>
-                        <li><strong>Select Optimal K:</strong> Choose K with highest mean accuracy (or use elbow method)</li>
-                    </ol>
-
-                    <h3>Example Walkthrough</h3>
-                    <p><strong>Dataset:</strong> A, B, C, D, E, F (6 samples), k-fold = 3</p>
+                    <h3>Method 2: Cross-Validation Approach</h3>
+                    <p>For each K value, run k-fold cross-validation and calculate mean accuracy. Choose K with highest mean accuracy.</p>
 
-                    <table class="data-table">
-                        <thead>
-                            <tr><th>K Value</th><th>Fold 1</th><th>Fold 2</th><th>Fold 3</th><th>Mean Accuracy</th></tr>
-                        </thead>
-                        <tbody>
-                            <tr><td>K=1</td><td>100%</td><td>100%</td><td>50%</td><td>83.3%</td></tr>
-                            <tr style="background: rgba(126, 240, 212, 0.1);"><td><strong>K=3</strong></td><td>100%</td><td>100%</td><td>100%</td><td><strong>100% ← Best!</strong></td></tr>
-                            <tr><td>K=5</td><td>100%</td><td>50%</td><td>100%</td><td>83.3%</td></tr>
-                        </tbody>
-                    </table>
+                    <div class="formula">
+                        <strong>Cross-Validation Process:</strong>
+                        for K in [1, 2, 3, ..., 20]:<br>
+                        &nbsp;&nbsp;accuracies = []<br>
+                        &nbsp;&nbsp;for fold in [1, 2, 3]:<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;train model with K neighbors<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;test on validation fold<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;accuracies.append(accuracy)<br>
+                        &nbsp;&nbsp;mean_accuracy[K] = mean(accuracies)<br>
+                        <br>
+                        optimal_K = argmax(mean_accuracy)
+                    </div>
 
                     <div class="figure">
                         <div class="figure-placeholder" style="height: 400px">
-                            <canvas id="optimal-k-canvas"></canvas>
+                            <canvas id="cv-k-canvas"></canvas>
                         </div>
-                        <p class="figure-caption"><strong>Figure:</strong> K vs Accuracy plot showing optimal K value</p>
+                        <p class="figure-caption"><strong>Figure 2:</strong> Cross-validation accuracies heatmap for different K values</p>
                     </div>
 
-                    <div class="controls">
-                        <div class="control-group">
-                            <label>K Range (max): <span id="k-range-val">20</span></label>
-                            <input type="range" id="k-range-slider" min="10" max="30" step="5" value="20">
-                        </div>
-                        <div class="control-group">
-                            <label>CV Folds: <span id="cv-folds-val">10</span></label>
-                            <input type="range" id="cv-folds-slider" min="3" max="10" step="1" value="10">
+                    <div class="callout success">
+                        <div class="callout-title">✅ Why Cross-Validation is Better</div>
+                        <div class="callout-content">
+                            Single train-test split might be lucky/unlucky. Cross-validation gives you:
+                            <ul>
+                                <li>Mean accuracy (average performance)</li>
+                                <li>Standard deviation (how stable is K?)</li>
+                                <li>Confidence in your choice</li>
+                            </ul>
                         </div>
                     </div>
 
-                    <h3>Elbow Method</h3>
-                    <p>Look for the "elbow point" where accuracy stops improving significantly:</p>
+                    <h3>Practical Guidelines</h3>
                     <ul>
-                        <li><strong>Sharp increase:</strong> Significant improvement with larger K</li>
-                        <li><strong>Elbow point:</strong> Diminishing returns begin</li>
-                        <li><strong>Plateau:</strong> Little benefit from larger K</li>
-                        <li><strong>Choose K at/near elbow:</strong> Best trade-off</li>
+                        <li><strong>Start with K = √n:</strong> Good rule of thumb</li>
+                        <li><strong>Try odd K values:</strong> Avoids ties in binary classification</li>
+                        <li><strong>Test range [1, 20]:</strong> Covers most practical scenarios</li>
+                        <li><strong>Check for stability:</strong> Low std dev across folds</li>
                     </ul>
 
                     <div class="callout info">
-                        <div class="callout-title">💡 Odd K Values</div>
+                        <div class="callout-title">💡 Real-World Example</div>
                         <div class="callout-content">
-                            Always prefer odd K values (3, 5, 7, 9) for binary classification! This avoids ties when neighbors vote. For K=4, you might get 2 votes for each class.
+                            <strong>Iris Dataset (150 samples):</strong><br>
+                            √150 ≈ 12, so start testing around K=11, K=13, K=15<br>
+                            After CV: K=5 gives 96% ± 2% → Optimal choice!<br>
+                            K=1 gives 94% ± 8% → Too much variance<br>
+                            K=25 gives 88% ± 1% → Too smooth, underfitting
                         </div>
                     </div>
+                </div>
+            </div>
 
-                    <div class="callout warning">
-                        <div class="callout-title">⚠️ Don't Use Test Set!</div>
-                        <div class="callout-content">
-                            Never use the test set for K selection! Always use cross-validation on training data only. The test set should remain untouched until final evaluation.
+            <!-- Section 14: Hyperparameter Tuning -->
+            <div class="section" id="hyperparameter-tuning">
+                <div class="section-header">
+                    <h2>14. Hyperparameter Tuning with GridSearch</h2>
+                    <button class="section-toggle">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>Hyperparameters control how your model learns. Unlike model parameters (learned from data), hyperparameters are set BEFORE training. GridSearch systematically finds the best combination!</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">Common Hyperparameters</div>
+                        <ul class="info-card-list">
+                            <li>Learning rate (α) - Gradient Descent step size</li>
+                            <li>K - Number of neighbors in KNN</li>
+                            <li>C, gamma - SVM parameters</li>
+                            <li>Max depth - Decision Tree depth</li>
+                            <li>Number of trees - Random Forest</li>
+                        </ul>
+                    </div>
+
+                    <h3>GridSearch Explained</h3>
+                    <p>GridSearch tests ALL combinations of hyperparameters you specify. It's exhaustive but guarantees finding the best combination in your grid.</p>
+
+                    <div class="formula">
+                        <strong>Example: SVM GridSearch</strong>
+                        param_grid = {<br>
+                        &nbsp;&nbsp;'C': [0.1, 1, 10, 100],<br>
+                        &nbsp;&nbsp;'gamma': [0.001, 0.01, 0.1, 1],<br>
+                        &nbsp;&nbsp;'kernel': ['linear', 'rbf']<br>
+                        }<br>
+                        <br>
+                        Total combinations: 4 × 4 × 2 = 32<br>
+                        With 5-fold CV: 32 × 5 = 160 model trainings!
+                    </div>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 450px">
+                            <canvas id="gridsearch-heatmap"></canvas>
                         </div>
+                        <p class="figure-caption"><strong>Figure:</strong> GridSearch heatmap showing accuracy for C vs gamma combinations</p>
                     </div>
 
-                    <h3>Practical Tips</h3>
-                    <ul>
-                        <li><strong>Start with K = √n:</strong> n = training samples (good starting point)</li>
-                        <li><strong>Use odd K:</strong> Avoids ties in binary classification</li>
-                        <li><strong>Consider computational cost:</strong> Large K = more neighbors to check</li>
-                        <li><strong>Visualize decision boundaries:</strong> For different K values</li>
-                        <li><strong>Use stratified k-fold:</strong> For imbalanced data</li>
-                    </ul>
+                    <div class="controls">
+                        <div class="control-group">
+                            <label>Select Model:</label>
+                            <div class="radio-group">
+                                <label><input type="radio" name="grid-model" value="svm" checked> SVM</label>
+                                <label><input type="radio" name="grid-model" value="rf"> Random Forest</label>
+                            </div>
+                        </div>
+                    </div>
 
-                    <h3>Real-World Example</h3>
-                    <div class="info-card">
-                        <div class="info-card-title">🌸 Iris Flower Classification (150 samples)</div>
-                        <p style="margin: 12px 0; line-height: 1.6;">
-                            <strong>Process:</strong> Try K = 1 to 20, Use 10-fold CV<br>
-                            <strong>Results:</strong><br>
-                            • K=1: 95% accuracy (overfits to noise)<br>
-                            • K=7: 97% accuracy (optimal! ✓)<br>
-                            • K=15: 94% accuracy (underfits, too smooth)<br>
-                            <br>
-                            The optimal K=7 provides the best balance between model complexity and generalization!
-                        </p>
+                    <h3>Performance Surface (3D View)</h3>
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="param-surface"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure:</strong> 3D surface showing how parameters affect performance</p>
                     </div>
 
-                    <div class="callout success">
-                        <div class="callout-title">✅ Key Takeaway</div>
+                    <h3>When GridSearch Fails</h3>
+                    <div class="callout warning">
+                        <div class="callout-title">⚠️ The Curse of Dimensionality</div>
                         <div class="callout-content">
-                            Finding optimal K is not guesswork! Use systematic cross-validation to evaluate multiple K values and choose the one with highest mean accuracy. This ensures your KNN model generalizes well to unseen data.
+                            <strong>Problem:</strong> Too many hyperparameters = exponential search space<br>
+                            <br>
+                            <strong>Example:</strong> 5 hyperparameters × 10 values each = 100,000 combinations!<br>
+                            <br>
+                            <strong>Solutions:</strong><br>
+                            • RandomSearchCV: Random sampling (faster, often good enough)<br>
+                            • Bayesian Optimization: Smart search using previous results<br>
+                            • Halving GridSearch: Eliminate poor performers early
                         </div>
                     </div>
+
+                    <h3>Best Practices</h3>
+                    <ul>
+                        <li><strong>Start coarse:</strong> Wide range, few values (e.g., C: [0.1, 1, 10, 100])</li>
+                        <li><strong>Then refine:</strong> Narrow range around best (e.g., C: [5, 7, 9, 11])</li>
+                        <li><strong>Use cross-validation:</strong> Avoid overfitting to validation set</li>
+                        <li><strong>Log scale for wide ranges:</strong> [0.001, 0.01, 0.1, 1, 10, 100]</li>
+                        <li><strong>Consider computation time:</strong> More folds = more reliable but slower</li>
+                    </ul>
                 </div>
             </div>
 
-            <!-- Section 14: Hyperparameter Tuning & GridSearch -->
-            <div class="section" id="hyperparameter-tuning">
+            <!-- Section 15: Naive Bayes -->
+            <div class="section" id="naive-bayes">
                 <div class="section-header">
-                    <h2>14. Hyperparameter Tuning &amp; GridSearch ⚙️</h2>
+                    <h2>15. Naive Bayes Classification</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
-                    <p>Models have two types of parameters: <strong>learned parameters</strong> (like weights) and <strong>hyperparameters</strong> (like learning rate). We must tune hyperparameters to get the best model!</p>
-
-                    <h3>What Are Hyperparameters?</h3>
-                    <p><strong>Definition:</strong> Parameters that control the learning process but aren't learned from data.</p>
+                    <p>Naive Bayes is a probabilistic classifier based on Bayes' Theorem. Despite its "naive" independence assumption, it works surprisingly well for text classification and other tasks!</p>
 
                     <div class="info-card">
-                        <div class="info-card-title">Parameters vs Hyperparameters</div>
-                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px;">
-                            <div style="background: rgba(126, 240, 212, 0.1); padding: 12px; border-radius: 6px;">
-                                <strong style="color: #7ef0d4;">Parameters (Learned)</strong>
-                                <ul style="margin-top: 8px; font-size: 14px;">
-                                    <li>Linear Regression: w, b</li>
-                                    <li>Logistic Regression: coefficients</li>
-                                    <li>SVM: support vector positions</li>
-                                    <li>Optimized during training</li>
-                                </ul>
-                            </div>
-                            <div style="background: rgba(106, 169, 255, 0.1); padding: 12px; border-radius: 6px;">
-                                <strong style="color: #6aa9ff;">Hyperparameters (Set Before)</strong>
-                                <ul style="margin-top: 8px; font-size: 14px;">
-                                    <li>Learning rate (α)</li>
-                                    <li>Number of iterations</li>
-                                    <li>SVM: C, gamma, kernel</li>
-                                    <li>KNN: K value</li>
-                                    <li>Must be tuned manually</li>
-                                </ul>
-                            </div>
-                        </div>
+                        <div class="info-card-title">Key Concepts</div>
+                        <ul class="info-card-list">
+                            <li>Based on Bayes' Theorem from probability theory</li>
+                            <li>Assumes features are independent (naive assumption)</li>
+                            <li>Very fast training and prediction</li>
+                            <li>Works well with high-dimensional data</li>
+                        </ul>
                     </div>
 
-                    <h3>Examples Across Algorithms</h3>
-                    
-                    <h4>Linear/Logistic Regression:</h4>
-                    <ul>
-                        <li><strong>Learning rate (α):</strong> 0.001, 0.01, 0.1</li>
-                        <li><strong>Number of iterations:</strong> 100, 1000, 10000</li>
-                        <li><strong>Regularization strength (λ):</strong> 0.01, 0.1, 1, 10</li>
-                    </ul>
+                    <h3>Bayes' Theorem</h3>
+                    <div class="formula">
+                        <strong>The Foundation:</strong>
+                        P(Class|Features) = P(Features|Class) × P(Class) / P(Features)<br>
+                        <br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;↓<br>
+                        Posterior&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Likelihood&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prior&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Evidence<br>
+                        (What we want)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(From data)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(Baseline)&nbsp;&nbsp;(Normalizer)
+                    </div>
 
-                    <h4>SVM:</h4>
-                    <ul>
-                        <li><strong>C (regularization):</strong> 0.1, 1, 10, 100, 1000</li>
-                        <li><strong>gamma (kernel coefficient):</strong> 'scale', 'auto', 0.001, 0.01, 0.1</li>
-                        <li><strong>kernel:</strong> 'linear', 'poly', 'rbf', 'sigmoid'</li>
-                        <li><strong>degree (for poly):</strong> 2, 3, 4, 5</li>
-                    </ul>
+                    <h3>The Naive Independence Assumption</h3>
+                    <p>"Naive" because we assume all features are independent given the class:</p>
 
-                    <h4>KNN:</h4>
-                    <ul>
-                        <li><strong>K (neighbors):</strong> 1, 3, 5, 7, 9, 11</li>
-                        <li><strong>Distance metric:</strong> 'euclidean', 'manhattan', 'minkowski'</li>
-                        <li><strong>Weights:</strong> 'uniform', 'distance'</li>
-                    </ul>
+                    <div class="formula">
+                        <strong>Independence Assumption:</strong>
+                        P(x₁, x₂, ..., xₙ | Class) = P(x₁|Class) × P(x₂|Class) × ... × P(xₙ|Class)<br>
+                        <br>
+                        <small>This is often NOT true in reality, but works anyway!</small>
+                    </div>
 
-                    <div class="callout warning">
-                        <div class="callout-title">⚠️ The Problem with Random Values</div>
-                        <div class="callout-content">
-                            If we just try random hyperparameter values:<br>
-                            • Inefficient (might miss optimal combination)<br>
-                            • No systematic approach<br>
-                            • Hard to reproduce<br>
-                            • Wastes time and resources
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="bayes-theorem-viz"></canvas>
                         </div>
+                        <p class="figure-caption"><strong>Figure 1:</strong> Bayes' Theorem visual explanation</p>
                     </div>
 
-                    <h3>Solution: GridSearch!</h3>
-                    <p><strong>What is GridSearch?</strong> Systematically try all combinations of hyperparameters and pick the best.</p>
+                    <h3>Real-World Example: Email Spam Detection</h3>
+                    <p>Let's classify an email with words: ["free", "winner", "click"]</p>
 
                     <div class="formula">
-                        <strong>GridSearch Algorithm:</strong><br>
-                        1. Define parameter grid:<br>
-                        &nbsp;&nbsp;{ 'C': [0.1, 1, 10, 100],<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;'gamma': ['scale', 'auto', 0.001, 0.01],<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;'kernel': ['linear', 'rbf', 'poly'] }<br>
+                        <strong>Training Data:</strong><br>
+                        • 300 spam emails (30%)<br>
+                        • 700 not-spam emails (70%)<br>
                         <br>
-                        2. Generate all combinations:<br>
-                        &nbsp;&nbsp;Total: 4 × 4 × 3 = 48 combinations<br>
+                        <strong>Word frequencies:</strong><br>
+                        P("free" | spam) = 0.8 (appears in 80% of spam)<br>
+                        P("free" | not-spam) = 0.1 (appears in 10% of not-spam)<br>
                         <br>
-                        3. For each combination:<br>
-                        &nbsp;&nbsp;- Train model with these hyperparameters<br>
-                        &nbsp;&nbsp;- Evaluate using cross-validation<br>
-                        &nbsp;&nbsp;- Record mean CV score<br>
+                        P("winner" | spam) = 0.7<br>
+                        P("winner" | not-spam) = 0.05<br>
                         <br>
-                        4. Select best combination:<br>
-                        &nbsp;&nbsp;- Highest CV score = best hyperparameters
+                        P("click" | spam) = 0.6<br>
+                        P("click" | not-spam) = 0.2
                     </div>
 
                     <div class="figure">
                         <div class="figure-placeholder" style="height: 400px">
-                            <canvas id="gridsearch-canvas"></canvas>
+                            <canvas id="spam-classification"></canvas>
                         </div>
-                        <p class="figure-caption"><strong>Figure:</strong> GridSearch heatmap showing parameter combinations and their scores</p>
+                        <p class="figure-caption"><strong>Figure 2:</strong> Spam classification calculation step-by-step</p>
                     </div>
 
-                    <h3>SVM GridSearch Example</h3>
-                    
+                    <h3>Step-by-Step Calculation</h3>
+                    <div class="callout info">
+                        <div class="callout-title">📧 Classifying Our Email</div>
+                        <div class="callout-content">
+                            <strong>P(spam | features):</strong><br>
+                            = P("free"|spam) × P("winner"|spam) × P("click"|spam) × P(spam)<br>
+                            = 0.8 × 0.7 × 0.6 × 0.3<br>
+                            = 0.1008<br>
+                            <br>
+                            <strong>P(not-spam | features):</strong><br>
+                            = P("free"|not-spam) × P("winner"|not-spam) × P("click"|not-spam) × P(not-spam)<br>
+                            = 0.1 × 0.05 × 0.2 × 0.7<br>
+                            = 0.0007<br>
+                            <br>
+                            <strong>Prediction:</strong> 0.1008 &gt; 0.0007 → SPAM! 📧❌
+                        </div>
+                    </div>
+
+                    <h3>Why It Works Despite Wrong Assumption</h3>
+                    <ul>
+                        <li><strong>Don't need exact probabilities:</strong> Just need correct ranking</li>
+                        <li><strong>Errors cancel out:</strong> Multiple features reduce impact</li>
+                        <li><strong>Simple is robust:</strong> Fewer parameters = less overfitting</li>
+                        <li><strong>Fast:</strong> Just multiply probabilities!</li>
+                    </ul>
+
+                    <h3>Comparison with Other Classifiers</h3>
                     <table class="data-table">
                         <thead>
-                            <tr><th>#</th><th>C</th><th>gamma</th><th>kernel</th><th>CV Score</th></tr>
+                            <tr>
+                                <th>Aspect</th>
+                                <th>Naive Bayes</th>
+                                <th>Logistic Reg</th>
+                                <th>SVM</th>
+                                <th>KNN</th>
+                            </tr>
                         </thead>
                         <tbody>
-                            <tr><td>1</td><td>0.1</td><td>0.001</td><td>linear</td><td>0.85</td></tr>
-                            <tr><td>2</td><td>0.1</td><td>0.001</td><td>rbf</td><td>0.88</td></tr>
-                            <tr><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
-                            <tr style="background: rgba(126, 240, 212, 0.1);"><td><strong>32</strong></td><td><strong>10</strong></td><td><strong>0.01</strong></td><td><strong>rbf</strong></td><td><strong>0.95 ← Best!</strong></td></tr>
+                            <tr><td>Speed</td><td>Very Fast</td><td>Fast</td><td>Slow</td><td>Very Slow</td></tr>
+                            <tr><td>Works with Little Data</td><td>Yes</td><td>Yes</td><td>No</td><td>No</td></tr>
+                            <tr><td>Interpretable</td><td>Very</td><td>Yes</td><td>No</td><td>No</td></tr>
+                            <tr><td>Handles Non-linear</td><td>Yes</td><td>No</td><td>Yes</td><td>Yes</td></tr>
+                            <tr><td>High Dimensions</td><td>Excellent</td><td>Good</td><td>Good</td><td>Poor</td></tr>
                         </tbody>
                     </table>
 
-                    <p><strong>Result:</strong> Best parameters found automatically: C=10, gamma=0.01, kernel='rbf'</p>
+                    <div class="callout success">
+                        <div class="callout-title">✅ When to Use Naive Bayes</div>
+                        <div class="callout-content">
+                            <strong>Perfect for:</strong><br>
+                            • Text classification (spam detection, sentiment analysis)<br>
+                            • Document categorization<br>
+                            • Real-time prediction (very fast)<br>
+                            • High-dimensional data<br>
+                            • Small training datasets<br>
+                            <br>
+                            <strong>Avoid when:</strong><br>
+                            • Features are highly correlated<br>
+                            • Need probability calibration<br>
+                            • Complex feature interactions matter
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Section 16: Decision Trees -->
+            <div class="section" id="decision-trees">
+                <div class="section-header">
+                    <h2>16. Decision Trees</h2>
+                    <button class="section-toggle">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>Decision Trees make decisions by asking yes/no questions recursively. They're interpretable, powerful, and the foundation for ensemble methods like Random Forests!</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">Key Concepts</div>
+                        <ul class="info-card-list">
+                            <li>Recursive partitioning of feature space</li>
+                            <li>Each node asks a yes/no question</li>
+                            <li>Leaves contain predictions</li>
+                            <li>Uses Information Gain or Gini Impurity for splitting</li>
+                        </ul>
+                    </div>
+
+                    <h3>How Decision Trees Work</h3>
+                    <p>Imagine you're playing "20 Questions" to guess an animal. Each question splits possibilities into two groups. Decision Trees work the same way!</p>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 450px">
+                            <canvas id="decision-tree-viz"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure 1:</strong> Interactive decision tree structure</p>
+                    </div>
+
+                    <h3>Splitting Criteria</h3>
+                    <p>How do we choose which question to ask at each node? We want splits that maximize information gain!</p>
 
-                    <h3>Computational Cost</h3>
+                    <h4>1. Entropy (Information Theory)</h4>
                     <div class="formula">
-                        <strong>Total Time Formula:</strong><br>
-                        Total Time = n_combinations × cv_folds × training_time<br>
+                        <strong>Entropy Formula:</strong>
+                        H(S) = -Σ pᵢ × log₂(pᵢ)<br>
                         <br>
-                        <strong>Example:</strong><br>
-                        • 48 combinations<br>
-                        • 5-fold CV<br>
-                        • 1 second per training<br>
-                        <strong>Total:</strong> 48 × 5 × 1 = 240 seconds (4 minutes)
+                        where pᵢ = proportion of class i<br>
+                        <br>
+                        <strong>Interpretation:</strong><br>
+                        • Entropy = 0: Pure (all same class)<br>
+                        • Entropy = 1: Maximum disorder (50-50 split)<br>
+                        • Lower entropy = better!
                     </div>
 
-                    <div class="callout warning">
-                        <div class="callout-title">⚠️ GridSearch Can Be Slow!</div>
-                        <div class="callout-content">
-                            For large parameter grids, GridSearch can take hours or days! Solutions:<br>
-                            • Use fewer parameter values (coarse then fine grid)<br>
-                            • Use RandomizedSearchCV (samples random combinations)<br>
-                            • Use parallel processing (n_jobs=-1)
+                    <h4>2. Information Gain</h4>
+                    <div class="formula">
+                        <strong>Information Gain Formula:</strong>
+                        IG(S, A) = H(S) - Σ |Sᵥ|/|S| × H(Sᵥ)<br>
+                        <br>
+                        = Entropy before split - Weighted entropy after split<br>
+                        <br>
+                        <strong>We choose the split with HIGHEST information gain!</strong>
+                    </div>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="entropy-viz"></canvas>
                         </div>
+                        <p class="figure-caption"><strong>Figure 2:</strong> Entropy and Information Gain visualization</p>
+                    </div>
+
+                    <h4>3. Gini Impurity (Alternative)</h4>
+                    <div class="formula">
+                        <strong>Gini Formula:</strong>
+                        Gini(S) = 1 - Σ pᵢ²<br>
+                        <br>
+                        <strong>Interpretation:</strong><br>
+                        • Gini = 0: Pure<br>
+                        • Gini = 0.5: Maximum impurity (binary)<br>
+                        • Faster to compute than entropy
                     </div>
 
+                    <h3>Worked Example: Email Classification</h3>
+                    <p>Dataset: 10 emails - 7 spam, 3 not spam</p>
+
                     <div class="callout info">
-                        <div class="callout-title">💡 Always Use Cross-Validation!</div>
+                        <div class="callout-title">📊 Calculating Information Gain</div>
                         <div class="callout-content">
-                            GridSearch must use cross-validation internally to avoid overfitting to validation set. Never tune hyperparameters on test set!
+                            <strong>Initial Entropy:</strong><br>
+                            H(S) = -7/10×log₂(7/10) - 3/10×log₂(3/10)<br>
+                            H(S) = 0.881 bits<br>
+                            <br>
+                            <strong>Split by "Contains 'FREE'":</strong><br>
+                            • Left (5 emails): 4 spam, 1 not → H = 0.722<br>
+                            • Right (5 emails): 3 spam, 2 not → H = 0.971<br>
+                            <br>
+                            <strong>Weighted Entropy:</strong><br>
+                            = 5/10 × 0.722 + 5/10 × 0.971 = 0.847<br>
+                            <br>
+                            <strong>Information Gain:</strong><br>
+                            IG = 0.881 - 0.847 = 0.034 bits<br>
+                            <br>
+                            <strong>Split by "Has suspicious link":</strong><br>
+                            IG = 0.156 bits ← BETTER! Use this split!
                         </div>
                     </div>
 
-                    <h3>Practical Workflow</h3>
-                    <ol>
-                        <li><strong>Step 1 - Coarse Grid:</strong> Wide range, few values (e.g., C = [0.1, 1, 10, 100, 1000]) to find approximate best region</li>
-                        <li><strong>Step 2 - Fine Grid:</strong> Narrow range, more values (e.g., C = [5, 7, 9, 11, 13]) to refine optimal value</li>
-                        <li><strong>Step 3 - Final Model:</strong> Train on full training set using best hyperparameters, then evaluate on test set</li>
-                    </ol>
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="split-comparison"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure 3:</strong> Comparing different splits by information gain</p>
+                    </div>
 
-                    <div class="callout success">
-                        <div class="callout-title">✅ Key Takeaway</div>
+                    <h3>Decision Boundaries</h3>
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="tree-boundary"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure 4:</strong> Decision tree creates rectangular regions</p>
+                    </div>
+
+                    <h3>Overfitting in Decision Trees</h3>
+                    <div class="callout warning">
+                        <div class="callout-title">⚠️ The Overfitting Problem</div>
                         <div class="callout-content">
-                            GridSearch finds optimal hyperparameters automatically - no manual guessing needed! It's the standard approach for hyperparameter tuning in machine learning. Just be patient with large grids!
+                            Without constraints, decision trees grow until each leaf has ONE sample!<br>
+                            <br>
+                            <strong>Solutions:</strong><br>
+                            • <strong>Max depth:</strong> Limit tree height (e.g., max_depth=5)<br>
+                            • <strong>Min samples split:</strong> Need X samples to split (e.g., min=10)<br>
+                            • <strong>Min samples leaf:</strong> Each leaf must have X samples<br>
+                            • <strong>Pruning:</strong> Grow full tree, then remove branches
                         </div>
                     </div>
 
-                    <h3>Advanced: RandomizedSearchCV</h3>
-                    <p>For very large hyperparameter spaces, use <strong>RandomizedSearchCV</strong>:</p>
-                    <ul>
-                        <li>Samples random combinations instead of trying all</li>
-                        <li>Much faster than exhaustive GridSearch</li>
-                        <li>Good for many hyperparameters or continuous ranges</li>
-                        <li>Specify number of iterations (e.g., 100 random combinations)</li>
-                    </ul>
+                    <h3>Advantages vs Disadvantages</h3>
+                    <table class="data-table">
+                        <thead>
+                            <tr><th>Advantages ✅</th><th>Disadvantages ❌</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>Easy to understand and interpret</td>
+                                <td>Prone to overfitting</td>
+                            </tr>
+                            <tr>
+                                <td>No feature scaling needed</td>
+                                <td>Small changes → big tree changes</td>
+                            </tr>
+                            <tr>
+                                <td>Handles non-linear relationships</td>
+                                <td>Biased toward features with more levels</td>
+                            </tr>
+                            <tr>
+                                <td>Works with mixed data types</td>
+                                <td>Can't extrapolate beyond training data</td>
+                            </tr>
+                            <tr>
+                                <td>Fast prediction</td>
+                                <td>Less accurate than ensemble methods</td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
 
-            <!-- Section 15: Naive Bayes Classifier -->
-            <div class="section" id="naive-bayes">
+            <!-- Section 17: Ensemble Methods -->
+            <div class="section" id="ensemble-methods">
                 <div class="section-header">
-                    <h2>15. Naive Bayes Classifier 📊</h2>
+                    <h2>17. Ensemble Methods</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
-                    <p>Naive Bayes is a probabilistic classifier based on Bayes' Theorem. It's called "naive" because it assumes features are independent (which often isn't true, but it works surprisingly well anyway!)</p>
+                    <p>"Wisdom of the crowds" applied to machine learning! Ensemble methods combine multiple weak learners to create a strong learner. They power most Kaggle competition winners!</p>
 
                     <div class="info-card">
                         <div class="info-card-title">Key Concepts</div>
                         <ul class="info-card-list">
-                            <li>Based on Bayes' Theorem and probability</li>
-                            <li>Assumes features are independent ("naive" assumption)</li>
-                            <li>Fast training and prediction</li>
-                            <li>Works well for text classification</li>
+                            <li>Combine multiple models for better predictions</li>
+                            <li>Bagging: Train on random subsets (parallel)</li>
+                            <li>Boosting: Sequential learning from mistakes</li>
+                            <li>Stacking: Meta-learner combines base models</li>
                         </ul>
                     </div>
 
-                    <h3>Bayes' Theorem</h3>
-                    <div class="formula">
-                        <strong>Bayes' Theorem:</strong><br>
-                        P(A|B) = P(B|A) × P(A) / P(B)<br>
-                        <br>
-                        <strong>In classification context:</strong><br>
-                        P(class|features) = P(features|class) × P(class) / P(features)<br>
-                        <br>
-                        <small>where:<br>
-                        • P(class|features) = Posterior probability (what we want)<br>
-                        • P(features|class) = Likelihood<br>
-                        • P(class) = Prior probability<br>
-                        • P(features) = Evidence (normalizing constant)</small>
-                    </div>
+                    <h3>Why Ensembles Work</h3>
+                    <p>Imagine 100 doctors diagnosing a patient. Even if each is 70% accurate individually, their majority vote is 95%+ accurate! Same principle applies to ML.</p>
 
-                    <h3>Simple Example: Email Spam Classification</h3>
-                    <p>Email contains words: ["free", "money"]</p>
-                    <p><strong>Calculate:</strong> P(spam|free, money)</p>
+                    <div class="callout success">
+                        <div class="callout-title">🎯 The Magic of Diversity</div>
+                        <div class="callout-content">
+                            <strong>Key insight:</strong> Each model makes DIFFERENT errors!<br>
+                            <br>
+                            Model A: Correct on samples [1,2,3,5,7,9] - 60% accuracy<br>
+                            Model B: Correct on samples [2,4,5,6,8,10] - 60% accuracy<br>
+                            Model C: Correct on samples [1,3,4,6,7,8] - 60% accuracy<br>
+                            <br>
+                            <strong>Majority vote:</strong> Correct on [1,2,3,4,5,6,7,8] - 80% accuracy!<br>
+                            <br>
+                            Diversity reduces variance!
+                        </div>
+                    </div>
 
-                    <h4>Given:</h4>
-                    <ul>
-                        <li>P(spam) = 0.3 (30% emails are spam)</li>
-                        <li>P(not spam) = 0.7</li>
-                        <li>P(free|spam) = 0.8</li>
-                        <li>P(money|spam) = 0.7</li>
-                        <li>P(free|not spam) = 0.1</li>
-                        <li>P(money|not spam) = 0.05</li>
-                    </ul>
+                    <h3>Method 1: Bagging (Bootstrap Aggregating)</h3>
+                    <p>Train multiple models on different random subsets of data (with replacement), then average predictions.</p>
 
-                    <h4>Naive Assumption (features are independent):</h4>
                     <div class="formula">
-                        P(free, money|spam) = P(free|spam) × P(money|spam)<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.8 × 0.7 = 0.56<br>
+                        <strong>Bagging Algorithm:</strong><br>
+                        1. Create B bootstrap samples (random sampling with replacement)<br>
+                        2. Train a model on each sample independently<br>
+                        3. For prediction:<br>
+                        &nbsp;&nbsp;&nbsp;• Regression: Average all predictions<br>
+                        &nbsp;&nbsp;&nbsp;• Classification: Majority vote<br>
                         <br>
-                        P(free, money|not spam) = 0.1 × 0.05 = 0.005
+                        <strong>Effect:</strong> Reduces variance, prevents overfitting
+                    </div>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="bagging-viz"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure 1:</strong> Bagging process - multiple models from bootstrap samples</p>
                     </div>
 
-                    <h4>Calculate Posterior:</h4>
+                    <h3>Method 2: Boosting (Sequential Learning)</h3>
+                    <p>Train models sequentially, where each new model focuses on examples the previous models got wrong.</p>
+
                     <div class="formula">
-                        P(spam|features) = P(free, money|spam) × P(spam)<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.56 × 0.3 = 0.168<br>
-                        <br>
-                        P(not spam|features) = 0.005 × 0.7 = 0.0035<br>
+                        <strong>Boosting Algorithm:</strong><br>
+                        1. Start with equal weights for all samples<br>
+                        2. Train model on weighted data<br>
+                        3. Increase weights for misclassified samples<br>
+                        4. Train next model (focuses on hard examples)<br>
+                        5. Repeat for M iterations<br>
+                        6. Final prediction = weighted vote of all models<br>
                         <br>
-                        <strong>Normalize:</strong><br>
-                        P(spam|features) = 0.168 / (0.168 + 0.0035) = 0.98<br>
-                        <br>
-                        <strong style="color: #7ef0d4;">Result: 98% probability it's spam! 📧</strong>
+                        <strong>Effect:</strong> Reduces bias AND variance
                     </div>
 
                     <div class="figure">
-                        <div class="figure-placeholder" style="height: 350px">
-                            <canvas id="naive-bayes-canvas"></canvas>
+                        <div class="figure-placeholder" style="height: 450px">
+                            <canvas id="boosting-viz"></canvas>
                         </div>
-                        <p class="figure-caption"><strong>Figure:</strong> Naive Bayes probability calculations for spam detection</p>
+                        <p class="figure-caption"><strong>Figure 2:</strong> Boosting iteration - focusing on misclassified points</p>
                     </div>
 
-                    <h3>Types of Naive Bayes</h3>
-
-                    <h4>1. Gaussian Naive Bayes</h4>
-                    <ul>
-                        <li><strong>For:</strong> Continuous features</li>
-                        <li><strong>Assumes:</strong> Normal distribution</li>
-                        <li><strong>Formula:</strong> P(x|class) = (1/√(2πσ²)) × e^(-(x-μ)²/(2σ²))</li>
-                        <li><strong>Use case:</strong> Real-valued features (height, weight, temperature)</li>
-                    </ul>
-
-                    <h4>2. Multinomial Naive Bayes</h4>
-                    <ul>
-                        <li><strong>For:</strong> Count data</li>
-                        <li><strong>Features:</strong> Frequencies (e.g., word counts)</li>
-                        <li><strong>Use case:</strong> Text classification (word counts in documents)</li>
-                    </ul>
+                    <h3>Random Forest: Bagging + Decision Trees</h3>
+                    <p>The most popular ensemble method! Combines bagging with feature randomness.</p>
 
-                    <h4>3. Bernoulli Naive Bayes</h4>
-                    <ul>
-                        <li><strong>For:</strong> Binary features (0/1, yes/no)</li>
-                        <li><strong>Features:</strong> Presence/absence</li>
-                        <li><strong>Use case:</strong> Document classification (word present or not)</li>
-                    </ul>
-
-                    <h3>Training Algorithm</h3>
                     <div class="formula">
-                        <strong>Training Process:</strong><br>
-                        For each class:<br>
-                        &nbsp;&nbsp;Calculate P(class) = count(class) / total_samples<br>
-                        &nbsp;&nbsp;<br>
-                        &nbsp;&nbsp;For each feature:<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;Calculate P(feature|class)<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;Gaussian: Estimate μ and σ<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;Multinomial: Count frequencies<br>
-                        &nbsp;&nbsp;&nbsp;&nbsp;Bernoulli: Count presence<br>
-                        <br>
-                        <strong>Prediction Process:</strong><br>
-                        For each class:<br>
-                        &nbsp;&nbsp;posterior = P(class) × ∏ P(feature_i|class)<br>
+                        <strong>Random Forest Algorithm:</strong><br>
+                        1. Create B bootstrap samples<br>
+                        2. For each sample:<br>
+                        &nbsp;&nbsp;&nbsp;• Grow decision tree<br>
+                        &nbsp;&nbsp;&nbsp;• At each split, consider random subset of features<br>
+                        &nbsp;&nbsp;&nbsp;• Don't prune (let trees overfit!)<br>
+                        3. Final prediction = average/vote of all trees<br>
                         <br>
-                        Choose class with maximum posterior
+                        <strong>Typical values:</strong> B=100-500 trees, √features per split
                     </div>
 
-                    <h3>Worked Example: Play Tennis Dataset</h3>
-                    <p>Predict: Should we play tennis?</p>
-                    <p><strong>Given:</strong> Sunny, Cool, High humidity, Windy</p>
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="random-forest-viz"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure 3:</strong> Random Forest - multiple diverse trees voting</p>
+                    </div>
 
+                    <h3>Comparison: Bagging vs Boosting</h3>
                     <table class="data-table">
                         <thead>
-                            <tr><th>Outlook</th><th>Temp</th><th>Humidity</th><th>Windy</th><th>Play</th></tr>
+                            <tr><th>Aspect</th><th>Bagging</th><th>Boosting</th></tr>
                         </thead>
                         <tbody>
-                            <tr><td>Sunny</td><td>Hot</td><td>High</td><td>No</td><td>No</td></tr>
-                            <tr><td>Sunny</td><td>Hot</td><td>High</td><td>Yes</td><td>No</td></tr>
-                            <tr><td>Overcast</td><td>Hot</td><td>High</td><td>No</td><td>Yes</td></tr>
-                            <tr><td>Rain</td><td>Mild</td><td>High</td><td>No</td><td>Yes</td></tr>
-                            <tr><td>Rain</td><td>Cool</td><td>Normal</td><td>No</td><td>Yes</td></tr>
-                            <tr><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
+                            <tr><td>Training</td><td>Parallel (independent)</td><td>Sequential (dependent)</td></tr>
+                            <tr><td>Focus</td><td>Reduce variance</td><td>Reduce bias &amp; variance</td></tr>
+                            <tr><td>Weights</td><td>Equal for all samples</td><td>Higher for hard samples</td></tr>
+                            <tr><td>Speed</td><td>Fast (parallelizable)</td><td>Slower (sequential)</td></tr>
+                            <tr><td>Overfitting</td><td>Resistant</td><td>Can overfit if too many iterations</td></tr>
+                            <tr><td>Examples</td><td>Random Forest</td><td>AdaBoost, Gradient Boosting, XGBoost</td></tr>
                         </tbody>
                     </table>
 
-                    <p>Calculate P(Yes|features) and P(No|features), then compare!</p>
-
-                    <h3>Advantages</h3>
-                    <ul>
-                        <li>✓ <strong>Fast training and prediction:</strong> Very efficient</li>
-                        <li>✓ <strong>Works well with high dimensions:</strong> Many features</li>
-                        <li>✓ <strong>Requires small training data:</strong> Good for limited data</li>
-                        <li>✓ <strong>Handles missing values well:</strong> Robust</li>
-                        <li>✓ <strong>Probabilistic predictions:</strong> Returns confidence scores</li>
-                        <li>✓ <strong>Good baseline classifier:</strong> Easy to implement</li>
-                    </ul>
-
-                    <h3>Disadvantages</h3>
+                    <h3>Real-World Success Stories</h3>
                     <ul>
-                        <li>✗ <strong>Independence assumption often wrong:</strong> Features are usually correlated</li>
-                        <li>✗ <strong>Zero probability problem:</strong> Needs Laplace smoothing</li>
-                        <li>✗ <strong>Not great for correlated features:</strong> Performance suffers</li>
-                        <li>✗ <strong>Requires distribution assumption:</strong> For continuous features</li>
+                        <li><strong>Netflix Prize (2009):</strong> Winning team used ensemble of 100+ models</li>
+                        <li><strong>Kaggle competitions:</strong> 99% of winners use ensembles</li>
+                        <li><strong>XGBoost:</strong> Most popular algorithm for structured data</li>
+                        <li><strong>Random Forests:</strong> Default choice for many data scientists</li>
                     </ul>
 
                     <div class="callout info">
-                        <div class="callout-title">💡 Despite "Naive" Assumption</div>
+                        <div class="callout-title">💡 When to Use Each Method</div>
                         <div class="callout-content">
-                            Despite the naive independence assumption being violated in most real-world datasets, Naive Bayes often works remarkably well in practice! It's especially powerful for text classification tasks.
-                        </div>
-                    </div>
-
-                    <div class="callout warning">
-                        <div class="callout-title">⚠️ Zero Probability Problem</div>
-                        <div class="callout-content">
-                            If a feature value never occurs with a class in training, P = 0! This makes the entire posterior zero.<br>
+                            <strong>Use Random Forest when:</strong><br>
+                            • You want good accuracy with minimal tuning<br>
+                            • You have high-variance base models<br>
+                            • Interpretability is secondary<br>
                             <br>
-                            <strong>Solution: Laplace Smoothing</strong><br>
-                            P(feature|class) = (count + α) / (total + α × n_features)<br>
-                            where α = smoothing parameter (usually 1)
-                        </div>
-                    </div>
-
-                    <h3>Applications</h3>
-                    <ul>
-                        <li><strong>Spam filtering:</strong> Email classification (spam/not spam)</li>
-                        <li><strong>Sentiment analysis:</strong> Positive/negative reviews</li>
-                        <li><strong>Document classification:</strong> Topic categorization</li>
-                        <li><strong>Medical diagnosis:</strong> Disease prediction from symptoms</li>
-                        <li><strong>Real-time prediction:</strong> Fast classification needed</li>
-                        <li><strong>Recommendation systems:</strong> User preferences</li>
-                    </ul>
-
-                    <div class="callout success">
-                        <div class="callout-title">✅ Key Takeaway</div>
-                        <div class="callout-content">
-                            Naive Bayes is simple, fast, and surprisingly effective! Despite its "naive" independence assumption, it's a powerful baseline classifier that works especially well for text classification. Great for when you need quick results with limited data!
+                            <strong>Use Gradient Boosting (XGBoost) when:</strong><br>
+                            • You want maximum accuracy<br>
+                            • You can afford hyperparameter tuning<br>
+                            • You have high-bias base models<br>
+                            <br>
+                            <strong>Use Stacking when:</strong><br>
+                            • You want to combine very different model types<br>
+                            • You're in a competition (squeeze every 0.1%!)
                         </div>
                     </div>
 
-                    <h3>🎉 Congratulations!</h3>
+                    <h3>🎉 Course Complete!</h3>
                     <p style="font-size: 18px; color: #7ef0d4; margin-top: 24px;">
-                        You've now completed all 15 machine learning topics! From basic concepts to advanced techniques, you've learned linear regression, gradient descent, classification algorithms, model evaluation, regularization, hyperparameter tuning, and probabilistic methods. You're ready to build real ML projects! 🚀
+                        Congratulations! You've mastered all 17 machine learning topics - from basic linear regression to advanced ensemble methods! You now have the knowledge to:
+                    </p>
+                    <ul style="color: #7ef0d4; font-size: 16px;">
+                        <li>Choose the right algorithm for any problem</li>
+                        <li>Understand the math behind each method</li>
+                        <li>Tune hyperparameters systematically</li>
+                        <li>Evaluate models properly</li>
+                        <li>Build production-ready ML systems</li>
+                    </ul>
+                    <p style="font-size: 18px; color: #7ef0d4; margin-top: 16px;">
+                        Keep practicing, building projects, and exploring! The ML journey never ends. 🚀✨
                     </p>
                 </div>
             </div>

ml_complete-all-topics/script.py

@@ -0,0 +1,125 @@
+
+# Extract new topics from the latest PDFs
+
+new_topics = {
+    "optimal_k_knn": {
+        "title": "Finding Optimal K in KNN",
+        "concepts": [
+            "Elbow method for finding optimal K",
+            "Cross-validation to find best K",
+            "Testing K values 1-20",
+            "Mean accuracy across k-folds",
+            "Avoiding underfitting and overfitting"
+        ],
+        "data": {
+            "k_values": list(range(1, 20)),
+            "accuracies_fold1": [0.98, 0.95, 0.92, 0.90, 0.88, 0.86, 0.85, 0.84, 0.83, 0.82, 0.81, 0.80, 0.79, 0.78, 0.77, 0.76, 0.75, 0.74, 0.73],
+            "accuracies_fold2": [0.96, 0.93, 0.91, 0.89, 0.87, 0.85, 0.83, 0.82, 0.81, 0.80, 0.79, 0.78, 0.77, 0.76, 0.75, 0.74, 0.73, 0.72, 0.71],
+            "accuracies_fold3": [0.94, 0.92, 0.90, 0.88, 0.86, 0.84, 0.82, 0.80, 0.79, 0.78, 0.77, 0.76, 0.75, 0.74, 0.73, 0.72, 0.71, 0.70, 0.69]
+        }
+    },
+    
+    "hyperparameter_tuning": {
+        "title": "Hyperparameter Tuning with GridSearch",
+        "concepts": [
+            "What are hyperparameters?",
+            "GridSearch exhaustive search",
+            "Testing multiple parameter combinations",
+            "Finding optimal hyperparameters",
+            "Train/test performance comparison"
+        ],
+        "svm_params": {
+            "C": [0.1, 1, 10, 100],
+            "gamma": ["scale", "auto", 0.001, 0.01],
+            "kernel": ["linear", "poly", "rbf"]
+        },
+        "results": {
+            "best_C": 1,
+            "best_gamma": "scale",
+            "best_kernel": "rbf",
+            "best_score": 0.95
+        }
+    },
+    
+    "naive_bayes": {
+        "title": "Naive Bayes Classification",
+        "concepts": [
+            "Probabilistic classifier",
+            "Bayes' theorem",
+            "Independence assumption",
+            "Prior and posterior probabilities",
+            "Feature independence"
+        ],
+        "formulas": [
+            "P(C|X) = P(X|C) × P(C) / P(X)",
+            "P(X|C) = P(x1|C) × P(x2|C) × ... × P(xn|C)",
+            "Posterior = Likelihood × Prior / Evidence"
+        ]
+    },
+    
+    "decision_trees": {
+        "title": "Decision Trees",
+        "concepts": [
+            "Tree structure with nodes and branches",
+            "Splitting criteria (Information Gain, Gini)",
+            "Entropy calculation",
+            "Recursive splitting",
+            "Leaf nodes for predictions"
+        ]
+    },
+    
+    "ensemble_methods": {
+        "title": "Ensemble Methods",
+        "concepts": [
+            "Bagging (Bootstrap Aggregating)",
+            "Boosting (AdaBoost, Gradient Boosting)",
+            "Random Forest",
+            "Combining weak learners",
+            "Voting mechanisms"
+        ]
+    }
+}
+
+print("="*80)
+print("NEW TOPICS FROM 26-10-2025 LECTURES")
+print("="*80)
+
+for topic_id, topic_data in new_topics.items():
+    print(f"\n📚 {topic_data['title'].upper()}")
+    print(f"   Concepts: {len(topic_data['concepts'])}")
+    for i, concept in enumerate(topic_data['concepts'], 1):
+        print(f"      {i}. {concept}")
+
+print("\n" + "="*80)
+print("TOPICS TO ADD TO APPLICATION")
+print("="*80)
+print("""
+NEW TOPICS (from 26-10-2025):
+1. ✅ Finding Optimal K in KNN (Elbow Method + Cross-Validation)
+2. ✅ Hyperparameter Tuning with GridSearch
+3. ✅ Naive Bayes Classification
+4. ✅ Decision Trees
+5. ✅ Ensemble Methods (Bagging, Boosting, Random Forest)
+
+FIXES NEEDED:
+1. ✅ Fix Linear Regression Visualization (currently not showing)
+2. ✅ Add MORE visualizations for every algorithm
+3. ✅ Add Mathematical explanations for WHY each algorithm
+4. ✅ Add More Real-World Examples
+5. ✅ Explain WHY one algorithm works vs another
+6. ✅ Add comparison visualizations between algorithms
+""")
+
+print("\n" + "="*80)
+print("ENHANCED LINEAR REGRESSION VISUALIZATION FIX")
+print("="*80)
+print("""
+The Linear Regression visualization issue will be fixed with:
+1. Proper Canvas initialization
+2. Error handling for drawing
+3. Auto-scaling for data points
+4. Clear axes and labels
+5. Live updating as sliders move
+6. Residual lines visualization
+7. MSE display with calculation breakdown
+""")