update files

ml_complete-all-topics/app.js

@@ -107,8 +107,10 @@ function initSections() {
         if (section.id === 'optimal-k') initOptimalK();
         if (section.id === 'hyperparameter-tuning') initHyperparameterTuning();
         if (section.id === 'naive-bayes') initNaiveBayes();
+        if (section.id === 'kmeans') initKMeans();
         if (section.id === 'decision-trees') initDecisionTrees();
         if (section.id === 'ensemble-methods') initEnsembleMethods();
+        if (section.id === 'algorithm-comparison') initAlgorithmComparison();
       }
     });
   });
@@ -204,82 +206,24 @@ function initLinearRegression() {
   drawLinearRegression();
 }
 
+let lrChart = null;
+
 function drawLinearRegression() {
   const canvas = document.getElementById('lr-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);
-  
-  const padding = 60;
-  const chartWidth = width - 2 * padding;
-  const chartHeight = height - 2 * padding;
-  
-  const xMin = 0, xMax = 7;
-  const yMin = 0, yMax = 100;
-  
-  // Draw 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();
-  
-  // Grid
-  ctx.strokeStyle = 'rgba(42, 53, 68, 0.3)';
-  ctx.lineWidth = 1;
-  for (let i = 0; i <= 5; i++) {
-    const x = padding + (chartWidth / 5) * i;
-    ctx.beginPath();
-    ctx.moveTo(x, padding);
-    ctx.lineTo(x, height - padding);
-    ctx.stroke();
-    
-    const y = height - padding - (chartHeight / 5) * i;
-    ctx.beginPath();
-    ctx.moveTo(padding, y);
-    ctx.lineTo(width - padding, y);
-    ctx.stroke();
+  // Destroy existing chart
+  if (lrChart) {
+    lrChart.destroy();
   }
   
-  const scaleX = (x) => padding + ((x - xMin) / (xMax - xMin)) * chartWidth;
-  const scaleY = (y) => height - padding - ((y - yMin) / (yMax - yMin)) * chartHeight;
-  
-  // Draw data points
-  ctx.fillStyle = '#6aa9ff';
-  data.linearRegression.forEach(point => {
-    const x = scaleX(point.experience);
-    const y = scaleY(point.salary);
-    ctx.beginPath();
-    ctx.arc(x, y, 6, 0, 2 * Math.PI);
-    ctx.fill();
-  });
-  
-  // Draw regression line
-  ctx.strokeStyle = '#ff8c6a';
-  ctx.lineWidth = 3;
-  ctx.beginPath();
-  const y1 = state.slope * xMin + state.intercept;
-  const y2 = state.slope * xMax + state.intercept;
-  ctx.moveTo(scaleX(xMin), scaleY(y1));
-  ctx.lineTo(scaleX(xMax), scaleY(y2));
-  ctx.stroke();
+  const ctx = canvas.getContext('2d');
   
-  // Labels
-  ctx.fillStyle = '#a9b4c2';
-  ctx.font = '12px sans-serif';
-  ctx.textAlign = 'center';
-  ctx.fillText('Experience (years)', width / 2, height - 20);
-  ctx.save();
-  ctx.translate(20, height / 2);
-  ctx.rotate(-Math.PI / 2);
-  ctx.fillText('Salary ($k)', 0, 0);
-  ctx.restore();
+  // Calculate fitted line points
+  const fittedLine = [];
+  for (let x = 0; x <= 7; x += 0.1) {
+    fittedLine.push({ x: x, y: state.slope * x + state.intercept });
+  }
   
   // Calculate MSE
   let mse = 0;
@@ -290,11 +234,57 @@ function drawLinearRegression() {
   });
   mse /= data.linearRegression.length;
   
-  // Display MSE
-  ctx.fillStyle = '#7ef0d4';
-  ctx.font = '14px sans-serif';
-  ctx.textAlign = 'right';
-  ctx.fillText(`MSE: ${mse.toFixed(2)}`, width - padding, padding + 20);
+  lrChart = new Chart(ctx, {
+    type: 'scatter',
+    data: {
+      datasets: [
+        {
+          label: 'Data Points',
+          data: data.linearRegression.map(p => ({ x: p.experience, y: p.salary })),
+          backgroundColor: '#6aa9ff',
+          pointRadius: 8,
+          pointHoverRadius: 10
+        },
+        {
+          label: 'Fitted Line',
+          data: fittedLine,
+          type: 'line',
+          borderColor: '#ff8c6a',
+          borderWidth: 3,
+          fill: false,
+          pointRadius: 0,
+          tension: 0
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: `Experience vs Salary (MSE: ${mse.toFixed(2)})`,
+          color: '#e8eef6',
+          font: { size: 16 }
+        },
+        legend: {
+          labels: { color: '#a9b4c2' }
+        }
+      },
+      scales: {
+        x: {
+          title: { display: true, text: 'Years of Experience', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' }
+        },
+        y: {
+          title: { display: true, text: 'Salary ($k)', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' }
+        }
+      }
+    }
+  });
 }
 
 // Gradient Descent Visualization
@@ -386,87 +376,73 @@ function animateGradientDescent() {
   }, 50);
 }
 
+let gdChart = null;
+
 function drawGradientDescent(currentStep = -1) {
   const canvas = document.getElementById('gd-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);
-  
   if (state.gdIterations.length === 0) {
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
     ctx.fillStyle = '#a9b4c2';
     ctx.font = '16px sans-serif';
     ctx.textAlign = 'center';
-    ctx.fillText('Click "Run Gradient Descent" to see the algorithm in action', width / 2, height / 2);
+    ctx.fillText('Click "Run Gradient Descent" to see the algorithm in action', canvas.width / 2, canvas.height / 2);
     return;
   }
   
-  const padding = 60;
-  const chartWidth = width - 2 * padding;
-  const chartHeight = height - 2 * padding;
-  
-  const maxLoss = Math.max(...state.gdIterations.map(i => i.loss));
-  const minLoss = Math.min(...state.gdIterations.map(i => i.loss));
-  
-  // Draw 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();
-  
-  const scaleX = (i) => padding + (i / (state.gdIterations.length - 1)) * chartWidth;
-  const scaleY = (loss) => height - padding - ((loss - minLoss) / (maxLoss - minLoss)) * chartHeight;
+  // Destroy existing chart
+  if (gdChart) {
+    gdChart.destroy();
+  }
   
-  // Draw loss curve
-  ctx.strokeStyle = '#7ef0d4';
-  ctx.lineWidth = 2;
-  ctx.beginPath();
-  state.gdIterations.forEach((iter, i) => {
-    const x = scaleX(i);
-    const y = scaleY(iter.loss);
-    if (i === 0) {
-      ctx.moveTo(x, y);
-    } else {
-      ctx.lineTo(x, y);
+  const ctx = canvas.getContext('2d');
+  const lossData = state.gdIterations.map((iter, i) => ({ x: i + 1, y: iter.loss }));
+  
+  gdChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      datasets: [{
+        label: 'Training Loss',
+        data: lossData,
+        borderColor: '#7ef0d4',
+        backgroundColor: 'rgba(126, 240, 212, 0.1)',
+        borderWidth: 3,
+        fill: true,
+        tension: 0.4,
+        pointRadius: currentStep >= 0 ? lossData.map((_, i) => i === currentStep ? 8 : 2) : 4,
+        pointBackgroundColor: currentStep >= 0 ? lossData.map((_, i) => i === currentStep ? '#ff8c6a' : '#7ef0d4') : '#7ef0d4'
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: currentStep >= 0 ? `Gradient Descent Progress (Step ${currentStep + 1}/${state.gdIterations.length})` : 'Gradient Descent Progress',
+          color: '#e8eef6',
+          font: { size: 16 }
+        },
+        legend: {
+          labels: { color: '#a9b4c2' }
+        }
+      },
+      scales: {
+        x: {
+          title: { display: true, text: 'Iterations', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' }
+        },
+        y: {
+          title: { display: true, text: 'Loss (MSE)', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' }
+        }
+      }
     }
   });
-  ctx.stroke();
-  
-  // Highlight current step
-  if (currentStep >= 0 && currentStep < state.gdIterations.length) {
-    const iter = state.gdIterations[currentStep];
-    const x = scaleX(currentStep);
-    const y = scaleY(iter.loss);
-    
-    ctx.fillStyle = '#ff8c6a';
-    ctx.beginPath();
-    ctx.arc(x, y, 6, 0, 2 * Math.PI);
-    ctx.fill();
-    
-    // Display current values
-    ctx.fillStyle = '#e8eef6';
-    ctx.font = '12px sans-serif';
-    ctx.textAlign = 'left';
-    ctx.fillText(`Step: ${currentStep + 1}`, padding + 10, padding + 20);
-    ctx.fillText(`Loss: ${iter.loss.toFixed(2)}`, padding + 10, padding + 40);
-  }
-  
-  // Labels
-  ctx.fillStyle = '#a9b4c2';
-  ctx.font = '12px sans-serif';
-  ctx.textAlign = 'center';
-  ctx.fillText('Iterations', width / 2, height - 20);
-  ctx.save();
-  ctx.translate(20, height / 2);
-  ctx.rotate(-Math.PI / 2);
-  ctx.fillText('Loss (MSE)', 0, 0);
-  ctx.restore();
 }
 
 // Initialize everything when DOM is ready
@@ -766,10 +742,17 @@ function initSVMCParameter() {
   drawSVMCParameter();
 }
 
+let svmCChart = null;
+
 function drawSVMCParameter() {
   const canvas = document.getElementById('svm-c-canvas');
   if (!canvas) return;
   
+  // Destroy existing chart
+  if (svmCChart) {
+    svmCChart.destroy();
+  }
+  
   const ctx = canvas.getContext('2d');
   const width = canvas.width = canvas.offsetWidth;
   const height = canvas.height = 450;
@@ -852,8 +835,10 @@ function drawSVMCParameter() {
   // Update info
   const wNorm = Math.sqrt(w1 * w1 + w2 * w2);
   const marginWidth = 2 / wNorm;
-  document.getElementById('margin-width').textContent = marginWidth.toFixed(2);
-  document.getElementById('violations-count').textContent = violations;
+  const marginEl = document.getElementById('margin-width');
+  const violEl = document.getElementById('violations-count');
+  if (marginEl) marginEl.textContent = marginWidth.toFixed(2);
+  if (violEl) violEl.textContent = violations;
 }
 
 function initSVMTraining() {
@@ -1009,6 +994,8 @@ function drawSVMTraining() {
   });
 }
 
+let svmKernelChart = null;
+
 function initSVMKernel() {
   const canvas = document.getElementById('svm-kernel-canvas');
   if (!canvas || canvas.dataset.initialized) return;
@@ -1030,7 +1017,8 @@ function initSVMKernel() {
   if (paramSlider) {
     paramSlider.addEventListener('input', (e) => {
       state.svm.kernelParam = parseFloat(e.target.value);
-      document.getElementById('kernel-param-val').textContent = state.svm.kernelParam.toFixed(1);
+      const paramVal = document.getElementById('kernel-param-val');
+      if (paramVal) paramVal.textContent = state.svm.kernelParam.toFixed(1);
       drawSVMKernel();
     });
   }
@@ -2357,6 +2345,9 @@ function drawLossCurves() {
 }
 
 // Topic 13: Finding Optimal K in KNN
+let elbowChart = null;
+let cvKChart = null;
+
 function initOptimalK() {
   const canvas1 = document.getElementById('elbow-canvas');
   if (canvas1 && !canvas1.dataset.initialized) {
@@ -2404,57 +2395,72 @@ function drawElbowCurve() {
   ctx.lineTo(width - padding, height - padding);
   ctx.stroke();
   
-  // Draw curve
-  ctx.strokeStyle = '#6aa9ff';
-  ctx.lineWidth = 3;
-  ctx.beginPath();
-  kValues.forEach((k, i) => {
-    const x = scaleX(k);
-    const y = scaleY(accuracies[i]);
-    if (i === 0) ctx.moveTo(x, y);
-    else ctx.lineTo(x, y);
-  });
-  ctx.stroke();
+  // Destroy existing chart
+  if (elbowChart) {
+    elbowChart.destroy();
+  }
   
-  // Draw points
-  kValues.forEach((k, i) => {
-    const x = scaleX(k);
-    const y = scaleY(accuracies[i]);
-    ctx.fillStyle = k === optimalK ? '#7ef0d4' : '#6aa9ff';
-    ctx.beginPath();
-    ctx.arc(x, y, k === optimalK ? 8 : 4, 0, 2 * Math.PI);
-    ctx.fill();
+  // Use Chart.js
+  elbowChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: kValues,
+      datasets: [{
+        label: 'Accuracy',
+        data: accuracies,
+        borderColor: '#6aa9ff',
+        backgroundColor: 'rgba(106, 169, 255, 0.1)',
+        borderWidth: 3,
+        fill: true,
+        tension: 0.4,
+        pointRadius: kValues.map(k => k === optimalK ? 10 : 5),
+        pointBackgroundColor: kValues.map(k => k === optimalK ? '#7ef0d4' : '#6aa9ff'),
+        pointBorderColor: kValues.map(k => k === optimalK ? '#7ef0d4' : '#6aa9ff'),
+        pointBorderWidth: kValues.map(k => k === optimalK ? 3 : 2)
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: `Elbow Method: Optimal K = ${optimalK} (Accuracy: ${accuracies[optimalK - 1].toFixed(2)})`,
+          color: '#7ef0d4',
+          font: { size: 16, weight: 'bold' }
+        },
+        legend: {
+          labels: { color: '#a9b4c2' }
+        },
+        annotation: {
+          annotations: {
+            line1: {
+              type: 'line',
+              xMin: optimalK,
+              xMax: optimalK,
+              borderColor: '#7ef0d4',
+              borderWidth: 2,
+              borderDash: [5, 5]
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          title: { display: true, text: 'K (Number of Neighbors)', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' }
+        },
+        y: {
+          title: { display: true, text: 'Accuracy', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' },
+          min: 0.7,
+          max: 1.0
+        }
+      }
+    }
   });
-  
-  // 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(optX, optY);
-  ctx.lineTo(optX, height - padding);
-  ctx.stroke();
-  ctx.setLineDash([]);
-  
-  // Labels
-  ctx.fillStyle = '#a9b4c2';
-  ctx.font = '12px sans-serif';
-  ctx.textAlign = 'center';
-  ctx.fillText('K (Number of Neighbors)', width / 2, height - 20);
-  ctx.save();
-  ctx.translate(20, height / 2);
-  ctx.rotate(-Math.PI / 2);
-  ctx.fillText('Accuracy', 0, 0);
-  ctx.restore();
-  
-  // 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() {
@@ -2541,6 +2547,8 @@ function drawCVKHeatmap() {
 }
 
 // Topic 14: Hyperparameter Tuning
+let gridSearchChart = null;
+
 function initHyperparameterTuning() {
   const canvas1 = document.getElementById('gridsearch-heatmap');
   if (canvas1 && !canvas1.dataset.initialized) {
@@ -2566,6 +2574,11 @@ function drawGridSearchHeatmap() {
   const canvas = document.getElementById('gridsearch-heatmap');
   if (!canvas) return;
   
+  // Destroy existing chart
+  if (gridSearchChart) {
+    gridSearchChart.destroy();
+  }
+  
   const ctx = canvas.getContext('2d');
   const width = canvas.width = canvas.offsetWidth;
   const height = canvas.height = 450;
@@ -2660,7 +2673,24 @@ function drawGridSearchHeatmap() {
   ctx.fillText('Gamma Parameter', 0, 0);
   ctx.restore();
   
-  // Best params
+  // Best params - Use Chart.js for bar comparison instead
+  const compareData = [];
+  cValues.forEach((c, j) => {
+    gammaValues.forEach((g, i) => {
+      compareData.push({
+        c: c,
+        gamma: g,
+        acc: accuracies[i][j],
+        label: `C=${c}, γ=${g}`
+      });
+    });
+  });
+  
+  // Sort and get top 5
+  compareData.sort((a, b) => b.acc - a.acc);
+  const top5 = compareData.slice(0, 5);
+  
+  // Add annotation for best
   ctx.fillStyle = '#7ef0d4';
   ctx.font = 'bold 14px sans-serif';
   ctx.textAlign = 'left';
@@ -2731,6 +2761,10 @@ function drawParamSurface() {
 }
 
 // Topic 15: Naive Bayes
+let bayesComparisonChart = null;
+let categoricalNBChart = null;
+let gaussianNBChart = null;
+
 function initNaiveBayes() {
   const canvas1 = document.getElementById('bayes-theorem-viz');
   if (canvas1 && !canvas1.dataset.initialized) {
@@ -2743,6 +2777,18 @@ function initNaiveBayes() {
     canvas2.dataset.initialized = 'true';
     drawSpamClassification();
   }
+  
+  const canvas3 = document.getElementById('categorical-nb-canvas');
+  if (canvas3 && !canvas3.dataset.initialized) {
+    canvas3.dataset.initialized = 'true';
+    drawCategoricalNB();
+  }
+  
+  const canvas4 = document.getElementById('gaussian-nb-canvas');
+  if (canvas4 && !canvas4.dataset.initialized) {
+    canvas4.dataset.initialized = 'true';
+    drawGaussianNB();
+  }
 }
 
 function drawBayesTheorem() {
@@ -2799,6 +2845,183 @@ function drawBayesTheorem() {
   ctx.fillText("Bayes' Theorem Breakdown", centerX, 40);
 }
 
+function drawCategoricalNB() {
+  const canvas = document.getElementById('categorical-nb-canvas');
+  if (!canvas) return;
+  
+  if (categoricalNBChart) {
+    categoricalNBChart.destroy();
+  }
+  
+  const ctx = canvas.getContext('2d');
+  
+  categoricalNBChart = new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['P(Yes|Rainy,Hot)', 'P(No|Rainy,Hot)'],
+      datasets: [{
+        label: 'Without Smoothing',
+        data: [0.0833, 0],
+        backgroundColor: 'rgba(255, 140, 106, 0.6)',
+        borderColor: '#ff8c6a',
+        borderWidth: 2
+      }, {
+        label: 'With Laplace Smoothing',
+        data: [0.0818, 0.0266],
+        backgroundColor: 'rgba(126, 240, 212, 0.6)',
+        borderColor: '#7ef0d4',
+        borderWidth: 2
+      }, {
+        label: 'Normalized Probability',
+        data: [0.755, 0.245],
+        backgroundColor: 'rgba(106, 169, 255, 0.8)',
+        borderColor: '#6aa9ff',
+        borderWidth: 2
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: 'Categorical Naive Bayes: Probability Comparison',
+          color: '#e8eef6',
+          font: { size: 16, weight: 'bold' }
+        },
+        legend: {
+          labels: { color: '#a9b4c2' }
+        }
+      },
+      scales: {
+        x: {
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' }
+        },
+        y: {
+          title: { display: true, text: 'Probability', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' },
+          min: 0,
+          max: 1
+        }
+      }
+    }
+  });
+}
+
+function drawGaussianNB() {
+  const canvas = document.getElementById('gaussian-nb-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 = 60;
+  const chartWidth = width - 2 * padding;
+  const chartHeight = height - 2 * padding;
+  
+  const xMin = 0, xMax = 5, yMin = 0, yMax = 4;
+  const scaleX = (x) => padding + (x / xMax) * chartWidth;
+  const scaleY = (y) => height - padding - (y / yMax) * chartHeight;
+  
+  // Draw decision boundary (approximate)
+  ctx.strokeStyle = '#6aa9ff';
+  ctx.lineWidth = 3;
+  ctx.setLineDash([5, 5]);
+  ctx.beginPath();
+  ctx.moveTo(scaleX(2.5), scaleY(0));
+  ctx.lineTo(scaleX(2.5), scaleY(4));
+  ctx.stroke();
+  ctx.setLineDash([]);
+  
+  // Draw "Yes" points
+  const yesPoints = [{x: 1.0, y: 2.0}, {x: 2.0, y: 1.0}, {x: 1.5, y: 1.8}];
+  yesPoints.forEach(p => {
+    ctx.fillStyle = '#7ef0d4';
+    ctx.beginPath();
+    ctx.arc(scaleX(p.x), scaleY(p.y), 8, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.strokeStyle = '#1a2332';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  });
+  
+  // Draw "No" points
+  const noPoints = [{x: 3.0, y: 3.0}, {x: 3.5, y: 2.8}, {x: 2.9, y: 3.2}];
+  noPoints.forEach(p => {
+    ctx.fillStyle = '#ff8c6a';
+    ctx.beginPath();
+    ctx.arc(scaleX(p.x), scaleY(p.y), 8, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.strokeStyle = '#1a2332';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  });
+  
+  // Draw test point
+  ctx.fillStyle = '#ffeb3b';
+  ctx.beginPath();
+  ctx.arc(scaleX(2.0), scaleY(2.0), 12, 0, 2 * Math.PI);
+  ctx.fill();
+  ctx.strokeStyle = '#6aa9ff';
+  ctx.lineWidth = 3;
+  ctx.stroke();
+  
+  // Label test point
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = 'bold 12px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Test [2.0, 2.0]', scaleX(2.0), scaleY(2.0) - 20);
+  ctx.fillStyle = '#7ef0d4';
+  ctx.fillText('→ YES', scaleX(2.0), scaleY(2.0) + 30);
+  
+  // 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('X₁', width / 2, height - 20);
+  ctx.save();
+  ctx.translate(20, height / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText('X₂', 0, 0);
+  ctx.restore();
+  
+  // Legend
+  ctx.fillStyle = '#7ef0d4';
+  ctx.beginPath();
+  ctx.arc(padding + 20, 30, 6, 0, 2 * Math.PI);
+  ctx.fill();
+  ctx.fillStyle = '#e8eef6';
+  ctx.font = '11px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.fillText('Class: Yes', padding + 30, 35);
+  
+  ctx.fillStyle = '#ff8c6a';
+  ctx.beginPath();
+  ctx.arc(padding + 120, 30, 6, 0, 2 * Math.PI);
+  ctx.fill();
+  ctx.fillStyle = '#e8eef6';
+  ctx.fillText('Class: No', padding + 130, 35);
+  
+  ctx.fillStyle = '#6aa9ff';
+  ctx.fillText('| Decision Boundary', padding + 210, 35);
+}
+
 function drawSpamClassification() {
   const canvas = document.getElementById('spam-classification');
   if (!canvas) return;
@@ -2859,20 +3082,52 @@ function drawSpamClassification() {
   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);
+  // Create comparison chart at bottom
+  if (!bayesComparisonChart) {
+    const compCanvas = document.createElement('canvas');
+    compCanvas.id = 'bayes-comparison-chart';
+    compCanvas.style.marginTop = '20px';
+    canvas.parentElement.appendChild(compCanvas);
+    
+    bayesComparisonChart = new Chart(compCanvas.getContext('2d'), {
+      type: 'bar',
+      data: {
+        labels: ['Spam Probability', 'Not-Spam Probability'],
+        datasets: [{
+          label: 'Probability',
+          data: [0.1008, 0.0007],
+          backgroundColor: ['#7ef0d4', '#ff8c6a'],
+          borderColor: ['#7ef0d4', '#ff8c6a'],
+          borderWidth: 2
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        indexAxis: 'y',
+        plugins: {
+          title: {
+            display: true,
+            text: 'Probability Comparison',
+            color: '#e8eef6',
+            font: { size: 14 }
+          },
+          legend: { display: false }
+        },
+        scales: {
+          x: {
+            grid: { color: '#2a3544' },
+            ticks: { color: '#a9b4c2' }
+          },
+          y: {
+            grid: { display: false },
+            ticks: { color: '#a9b4c2' }
+          }
+        }
+      }
+    });
+    compCanvas.style.height = '150px';
+  }
 }
 
 // Topic 16: Decision Trees
@@ -3552,6 +3807,326 @@ function drawRandomForestViz() {
   ctx.fillText('Random Forest: Ensemble of Decision Trees', width / 2, 25);
 }
 
+// Topic 16: K-means Clustering
+let kmeansVizChart = null;
+let kmeansElbowChart = null;
+
+function initKMeans() {
+  const canvas1 = document.getElementById('kmeans-viz-canvas');
+  if (canvas1 && !canvas1.dataset.initialized) {
+    canvas1.dataset.initialized = 'true';
+    drawKMeansVisualization();
+  }
+  
+  const canvas2 = document.getElementById('kmeans-elbow-canvas');
+  if (canvas2 && !canvas2.dataset.initialized) {
+    canvas2.dataset.initialized = 'true';
+    drawKMeansElbow();
+  }
+}
+
+function drawKMeansVisualization() {
+  const canvas = document.getElementById('kmeans-viz-canvas');
+  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 padding = 60;
+  const chartWidth = width - 2 * padding;
+  const chartHeight = height - 2 * padding;
+  
+  const xMin = 0, xMax = 10, yMin = 0, yMax = 12;
+  const scaleX = (x) => padding + (x / xMax) * chartWidth;
+  const scaleY = (y) => height - padding - (y / yMax) * chartHeight;
+  
+  // Data points
+  const points = [
+    {id: 'A', x: 1, y: 2, cluster: 1},
+    {id: 'B', x: 1.5, y: 1.8, cluster: 1},
+    {id: 'C', x: 5, y: 8, cluster: 2},
+    {id: 'D', x: 8, y: 8, cluster: 2},
+    {id: 'E', x: 1, y: 0.6, cluster: 1},
+    {id: 'F', x: 9, y: 11, cluster: 2}
+  ];
+  
+  // Final centroids
+  const centroids = [
+    {x: 1.17, y: 1.47, color: '#7ef0d4'},
+    {x: 7.33, y: 9.0, color: '#ff8c6a'}
+  ];
+  
+  // Draw lines from points to centroids
+  points.forEach(p => {
+    const c = centroids[p.cluster - 1];
+    ctx.strokeStyle = p.cluster === 1 ? 'rgba(126, 240, 212, 0.3)' : 'rgba(255, 140, 106, 0.3)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(scaleX(p.x), scaleY(p.y));
+    ctx.lineTo(scaleX(c.x), scaleY(c.y));
+    ctx.stroke();
+  });
+  
+  // Draw points
+  points.forEach(p => {
+    ctx.fillStyle = p.cluster === 1 ? '#7ef0d4' : '#ff8c6a';
+    ctx.beginPath();
+    ctx.arc(scaleX(p.x), scaleY(p.y), 8, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.strokeStyle = '#1a2332';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    
+    // Label
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = 'bold 12px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(p.id, scaleX(p.x), scaleY(p.y) - 15);
+  });
+  
+  // Draw centroids
+  centroids.forEach((c, i) => {
+    ctx.fillStyle = c.color;
+    ctx.beginPath();
+    ctx.arc(scaleX(c.x), scaleY(c.y), 12, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.strokeStyle = '#e8eef6';
+    ctx.lineWidth = 3;
+    ctx.stroke();
+    
+    // Draw X
+    ctx.strokeStyle = '#1a2332';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(scaleX(c.x) - 6, scaleY(c.y) - 6);
+    ctx.lineTo(scaleX(c.x) + 6, scaleY(c.y) + 6);
+    ctx.moveTo(scaleX(c.x) + 6, scaleY(c.y) - 6);
+    ctx.lineTo(scaleX(c.x) - 6, scaleY(c.y) + 6);
+    ctx.stroke();
+    
+    // Label
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = 'bold 13px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(`c${i+1}`, scaleX(c.x), scaleY(c.y) + 25);
+  });
+  
+  // 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('X', width / 2, height - 20);
+  ctx.save();
+  ctx.translate(20, height / 2);
+  ctx.rotate(-Math.PI / 2);
+  ctx.fillText('Y', 0, 0);
+  ctx.restore();
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('K-means Clustering (K=2) - Final State', width / 2, 30);
+  
+  // WCSS
+  ctx.fillStyle = '#6aa9ff';
+  ctx.font = '14px sans-serif';
+  ctx.textAlign = 'left';
+  ctx.fillText('WCSS = 15.984', padding, height - padding + 30);
+}
+
+function drawKMeansElbow() {
+  const canvas = document.getElementById('kmeans-elbow-canvas');
+  if (!canvas) return;
+  
+  if (kmeansElbowChart) {
+    kmeansElbowChart.destroy();
+  }
+  
+  const ctx = canvas.getContext('2d');
+  
+  const kValues = [1, 2, 3, 4, 5];
+  const wcssValues = [50, 18, 10, 8, 7];
+  
+  kmeansElbowChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: kValues,
+      datasets: [{
+        label: 'WCSS',
+        data: wcssValues,
+        borderColor: '#6aa9ff',
+        backgroundColor: 'rgba(106, 169, 255, 0.1)',
+        borderWidth: 3,
+        fill: true,
+        tension: 0.4,
+        pointRadius: kValues.map(k => k === 3 ? 10 : 6),
+        pointBackgroundColor: kValues.map(k => k === 3 ? '#7ef0d4' : '#6aa9ff'),
+        pointBorderColor: kValues.map(k => k === 3 ? '#7ef0d4' : '#6aa9ff'),
+        pointBorderWidth: kValues.map(k => k === 3 ? 3 : 2)
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: 'Elbow Method: Optimal K = 3 (Elbow Point)',
+          color: '#7ef0d4',
+          font: { size: 16, weight: 'bold' }
+        },
+        legend: {
+          labels: { color: '#a9b4c2' }
+        },
+        annotation: {
+          annotations: {
+            line1: {
+              type: 'line',
+              xMin: 3,
+              xMax: 3,
+              borderColor: '#7ef0d4',
+              borderWidth: 2,
+              borderDash: [5, 5],
+              label: {
+                display: true,
+                content: 'Elbow!',
+                position: 'start'
+              }
+            }
+          }
+        }
+      },
+      scales: {
+        x: {
+          title: { display: true, text: 'Number of Clusters (K)', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2', stepSize: 1 }
+        },
+        y: {
+          title: { display: true, text: 'Within-Cluster Sum of Squares (WCSS)', color: '#a9b4c2' },
+          grid: { color: '#2a3544' },
+          ticks: { color: '#a9b4c2' },
+          min: 0
+        }
+      }
+    }
+  });
+}
+
+// Topic 19: Algorithm Comparison
+function initAlgorithmComparison() {
+  const canvas = document.getElementById('decision-flowchart');
+  if (!canvas || canvas.dataset.initialized) return;
+  canvas.dataset.initialized = 'true';
+  drawDecisionFlowchart();
+}
+
+function drawDecisionFlowchart() {
+  const canvas = document.getElementById('decision-flowchart');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width = canvas.offsetWidth;
+  const height = canvas.height = 500;
+  
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = '#1a2332';
+  ctx.fillRect(0, 0, width, height);
+  
+  const nodes = [
+    { x: width/2, y: 50, text: 'Start:\nWhat problem?', w: 140, h: 60, color: '#7ef0d4', type: 'start' },
+    { x: width/4, y: 160, text: 'Classification', w: 120, h: 50, color: '#6aa9ff', type: 'decision' },
+    { x: width/2, y: 160, text: 'Regression', w: 120, h: 50, color: '#6aa9ff', type: 'decision' },
+    { x: 3*width/4, y: 160, text: 'Clustering', w: 120, h: 50, color: '#6aa9ff', type: 'decision' },
+    { x: width/8, y: 270, text: 'Linear?', w: 100, h: 50, color: '#ffb490', type: 'question' },
+    { x: 3*width/8, y: 270, text: 'Fast?', w: 100, h: 50, color: '#ffb490', type: 'question' },
+    { x: width/2, y: 270, text: 'Linear?', w: 100, h: 50, color: '#ffb490', type: 'question' },
+    { x: 3*width/4, y: 270, text: 'Known K?', w: 100, h: 50, color: '#ffb490', type: 'question' },
+    { x: width/16, y: 380, text: 'Logistic\nRegression', w: 90, h: 50, color: '#7ef0d4', type: 'result' },
+    { x: 3*width/16, y: 380, text: 'SVM', w: 90, h: 50, color: '#7ef0d4', type: 'result' },
+    { x: 5*width/16, y: 380, text: 'Naive\nBayes', w: 90, h: 50, color: '#7ef0d4', type: 'result' },
+    { x: 7*width/16, y: 380, text: 'Random\nForest', w: 90, h: 50, color: '#7ef0d4', type: 'result' },
+    { x: 9*width/16, y: 380, text: 'Linear\nRegression', w: 90, h: 50, color: '#7ef0d4', type: 'result' },
+    { x: 11*width/16, y: 380, text: 'XGBoost', w: 90, h: 50, color: '#7ef0d4', type: 'result' },
+    { x: 13*width/16, y: 380, text: 'K-means', w: 90, h: 50, color: '#7ef0d4', type: 'result' },
+    { x: 15*width/16, y: 380, text: 'DBSCAN', w: 90, h: 50, color: '#7ef0d4', type: 'result' }
+  ];
+  
+  const edges = [
+    { from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 },
+    { from: 1, to: 4 }, { from: 1, to: 5 },
+    { from: 2, to: 6 },
+    { from: 3, to: 7 },
+    { from: 4, to: 8, label: 'Yes' }, { from: 4, to: 9, label: 'No' },
+    { from: 5, to: 10, label: 'Yes' }, { from: 5, to: 11, label: 'No' },
+    { from: 6, to: 12, label: 'Yes' }, { from: 6, to: 13, label: 'No' },
+    { from: 7, to: 14, label: 'Yes' }, { from: 7, to: 15, 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 + from.h/2);
+    ctx.lineTo(to.x, to.y - to.h/2);
+    ctx.stroke();
+    
+    if (edge.label) {
+      ctx.fillStyle = '#7ef0d4';
+      ctx.font = '10px sans-serif';
+      ctx.textAlign = 'center';
+      const midX = (from.x + to.x) / 2;
+      const midY = (from.y + to.y) / 2;
+      ctx.fillText(edge.label, midX + 12, midY);
+    }
+  });
+  
+  // Draw nodes
+  nodes.forEach(node => {
+    const x = node.x - node.w/2;
+    const y = node.y - node.h/2;
+    
+    ctx.fillStyle = node.color + '33';
+    ctx.fillRect(x, y, node.w, node.h);
+    ctx.strokeStyle = node.color;
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, node.w, node.h);
+    
+    ctx.fillStyle = '#e8eef6';
+    ctx.font = node.type === 'result' ? 'bold 11px sans-serif' : '11px sans-serif';
+    ctx.textAlign = 'center';
+    const lines = node.text.split('\n');
+    lines.forEach((line, i) => {
+      ctx.fillText(line, node.x, node.y - (lines.length - 1) * 6 + i * 12);
+    });
+  });
+  
+  // Title
+  ctx.fillStyle = '#7ef0d4';
+  ctx.font = 'bold 16px sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText('Algorithm Selection Flowchart', width/2, 25);
+}
+
 // Handle window resize
 let resizeTimer;
 window.addEventListener('resize', () => {
@@ -3579,18 +4154,23 @@ window.addEventListener('resize', () => {
     drawSVMTraining();
     drawSVMKernel();
     // New topics
-    drawElbowCurve();
-    drawCVKHeatmap();
-    drawGridSearchHeatmap();
-    drawParamSurface();
-    drawBayesTheorem();
-    drawSpamClassification();
-    drawDecisionTree();
-    drawEntropyViz();
-    drawSplitComparison();
-    drawTreeBoundary();
-    drawBaggingViz();
-    drawBoostingViz();
-    drawRandomForestViz();
+    if (document.getElementById('elbow-canvas')) drawElbowCurve();
+    if (document.getElementById('cv-k-canvas')) drawCVKHeatmap();
+    if (document.getElementById('gridsearch-heatmap')) drawGridSearchHeatmap();
+    if (document.getElementById('param-surface')) drawParamSurface();
+    if (document.getElementById('bayes-theorem-viz')) drawBayesTheorem();
+    if (document.getElementById('spam-classification')) drawSpamClassification();
+    if (document.getElementById('decision-tree-viz')) drawDecisionTree();
+    if (document.getElementById('entropy-viz')) drawEntropyViz();
+    if (document.getElementById('split-comparison')) drawSplitComparison();
+    if (document.getElementById('tree-boundary')) drawTreeBoundary();
+    if (document.getElementById('bagging-viz')) drawBaggingViz();
+    if (document.getElementById('boosting-viz')) drawBoostingViz();
+    if (document.getElementById('random-forest-viz')) drawRandomForestViz();
+    if (document.getElementById('categorical-nb-canvas')) drawCategoricalNB();
+    if (document.getElementById('gaussian-nb-canvas')) drawGaussianNB();
+    if (document.getElementById('kmeans-viz-canvas')) drawKMeansVisualization();
+    if (document.getElementById('kmeans-elbow-canvas')) drawKMeansElbow();
+    if (document.getElementById('decision-flowchart')) drawDecisionFlowchart();
   }, 250);
 });

ml_complete-all-topics/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Machine Learning: Complete Educational Guide</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
 @font-face {
   font-family: 'FKGroteskNeue';
@@ -499,8 +500,10 @@ canvas {
                 <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>
+                <a href="#kmeans" class="toc-link">16. K-means Clustering</a>
+                <a href="#decision-trees" class="toc-link">17. Decision Trees</a>
+                <a href="#ensemble-methods" class="toc-link">18. Ensemble Methods</a>
+                <a href="#algorithm-comparison" class="toc-link">19. Algorithm Comparison</a>
             </nav>
         </aside>
 
@@ -616,8 +619,8 @@ canvas {
                     <p>We can find a line (y = 7.5x + 32) that predicts: Someone with 7 years experience will earn approximately $84.5k.</p>
 
                     <div class="figure">
-                        <div class="figure-placeholder" style="height: 400px">
-                            <canvas id="lr-canvas"></canvas>
+                        <div class="figure-placeholder" style="height: 400px; position: relative;">
+                            <canvas id="lr-canvas" style="width: 100%; height: 100%;"></canvas>
                         </div>
                         <p class="figure-caption"><strong>Figure 1:</strong> Scatter plot showing experience vs. salary with the best fit line</p>
                     </div>
@@ -710,8 +713,8 @@ canvas {
                     </ul>
 
                     <div class="figure">
-                        <div class="figure-placeholder" style="height: 400px">
-                            <canvas id="gd-canvas"></canvas>
+                        <div class="figure-placeholder" style="height: 400px; position: relative;">
+                            <canvas id="gd-canvas" style="width: 100%; height: 100%;"></canvas>
                         </div>
                         <p class="figure-caption"><strong>Figure 2:</strong> Loss surface showing gradient descent path to minimum</p>
                     </div>
@@ -2402,8 +2405,8 @@ Actual  Pos     TP     FN
                     <p>Test different K values and plot performance. Look for the "elbow" where adding more neighbors doesn't help much.</p>
 
                     <div class="figure">
-                        <div class="figure-placeholder" style="height: 400px">
-                            <canvas id="elbow-canvas"></canvas>
+                        <div class="figure-placeholder" style="height: 400px; position: relative;">
+                            <canvas id="elbow-canvas" style="width: 100%; height: 100%;"></canvas>
                         </div>
                         <p class="figure-caption"><strong>Figure 1:</strong> Elbow curve showing optimal K at the bend</p>
                     </div>
@@ -2550,14 +2553,14 @@ Actual  Pos     TP     FN
                 </div>
             </div>
 
-            <!-- Section 15: Naive Bayes -->
+            <!-- Section 15: Naive Bayes (COMPREHENSIVE WITH MATH) -->
             <div class="section" id="naive-bayes">
                 <div class="section-header">
                     <h2>15. Naive Bayes Classification</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">
-                    <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>
+                    <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! We'll cover both Categorical and Gaussian Naive Bayes with complete mathematical solutions.</p>
 
                     <div class="info-card">
                         <div class="info-card-title">Key Concepts</div>
@@ -2668,9 +2671,271 @@ Actual  Pos     TP     FN
                         </tbody>
                     </table>
 
+                    <h3>🎯 PART A: Categorical Naive Bayes (Step-by-Step from PDF)</h3>
+                    
+                    <h4>Dataset: Tennis Play Prediction</h4>
+                    <table class="data-table">
+                        <thead>
+                            <tr><th>Outlook</th><th>Temperature</th><th>Play</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>Sunny</td><td>Hot</td><td>No</td></tr>
+                            <tr><td>Sunny</td><td>Mild</td><td>No</td></tr>
+                            <tr><td>Cloudy</td><td>Hot</td><td>Yes</td></tr>
+                            <tr><td>Rainy</td><td>Mild</td><td>Yes</td></tr>
+                            <tr><td>Rainy</td><td>Cool</td><td>Yes</td></tr>
+                            <tr><td>Cloudy</td><td>Cool</td><td>Yes</td></tr>
+                        </tbody>
+                    </table>
+                    
+                    <p><strong>Problem:</strong> Predict whether to play tennis when Outlook=Rainy and Temperature=Hot</p>
+                    
+                    <div class="step">
+                        <div class="step-title">STEP 1: Calculate Prior Probabilities</div>
+                        <div class="step-calculation">
+                            Count occurrences in training data:<br>
+                            • Play=Yes appears 4 times out of 6 total<br>
+                            • Play=No appears 2 times out of 6 total<br>
+                            <br>
+                            <strong>Calculation:</strong><br>
+                            P(Yes) = 4/6 = <strong>0.667 (66.7%)</strong><br>
+                            P(No) = 2/6 = <strong>0.333 (33.3%)</strong>
+                        </div>
+                    </div>
+                    
+                    <div class="step">
+                        <div class="step-title">STEP 2: Calculate Conditional Probabilities (Before Smoothing)</div>
+                        <div class="step-calculation">
+                            <strong>For Outlook = "Rainy":</strong><br>
+                            • Count (Rainy AND Yes) = 2 examples<br>
+                            • Count (Yes) = 4 total<br>
+                            • P(Rainy|Yes) = 2/4 = <strong>0.5</strong><br>
+                            <br>
+                            • Count (Rainy AND No) = 0 examples ❌<br>
+                            • Count (No) = 2 total<br>
+                            • P(Rainy|No) = 0/2 = <strong>0</strong> ⚠️ <span style="color: #ff8c6a;">ZERO PROBABILITY PROBLEM!</span><br>
+                            <br>
+                            <strong>For Temperature = "Hot":</strong><br>
+                            • P(Hot|Yes) = 1/4 = <strong>0.25</strong><br>
+                            • P(Hot|No) = 1/2 = <strong>0.5</strong>
+                        </div>
+                    </div>
+                    
+                    <div class="formula">
+                        <strong>Step 3: Apply Bayes' Theorem (Initial)</strong><br>
+                        <br>
+                        P(Yes|Rainy,Hot) = P(Yes) × P(Rainy|Yes) × P(Hot|Yes)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.667 × 0.5 × 0.25<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.0833<br>
+                        <br>
+                        P(No|Rainy,Hot) = P(No) × P(Rainy|No) × P(Hot|No)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.333 × 0 × 0.5<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0 ❌ Problem!
+                    </div>
+                    
+                    <div class="callout warning">
+                        <div class="callout-title">⚠️ Zero Probability Problem</div>
+                        <div class="callout-content">
+                            When P(Rainy|No) = 0, the entire probability becomes 0! This is unrealistic - just because we haven't seen "Rainy" with "No" in our training data doesn't mean it's impossible. We need <strong>Laplace Smoothing</strong>!
+                        </div>
+                    </div>
+                    
+                    <div class="step">
+                        <div class="step-title">STEP 4: Apply Laplace Smoothing (α = 1)</div>
+                        <div class="step-calculation">
+                            <strong>Smoothed formula:</strong><br>
+                            P(x|c) = (count(x,c) + α) / (count(c) + α × num_categories)<br>
+                            <br>
+                            <strong>For Outlook</strong> (3 categories: Sunny, Cloudy, Rainy):<br>
+                            P(Rainy|Yes) = (2 + 1) / (4 + 1×3)<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 3/7<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= <strong>0.429</strong> ✓<br>
+                            <br>
+                            P(Rainy|No) = (0 + 1) / (2 + 1×3)<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 1/5<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= <strong>0.2</strong> ✓ <span style="color: #7ef0d4;">Fixed the zero!</span><br>
+                            <br>
+                            <strong>For Temperature</strong> (3 categories: Hot, Mild, Cool):<br>
+                            P(Hot|Yes) = (1 + 1) / (4 + 1×3) = 2/7 = <strong>0.286</strong><br>
+                            P(Hot|No) = (1 + 1) / (2 + 1×3) = 2/5 = <strong>0.4</strong>
+                        </div>
+                    </div>
+                    
+                    <div class="step">
+                        <div class="step-title">STEP 5: Recalculate with Smoothing</div>
+                        <div class="step-calculation">
+                            <strong>P(Yes|Rainy,Hot):</strong><br>
+                            = P(Yes) × P(Rainy|Yes) × P(Hot|Yes)<br>
+                            = 0.667 × 0.429 × 0.286<br>
+                            = <strong>0.0818</strong><br>
+                            <br>
+                            <strong>P(No|Rainy,Hot):</strong><br>
+                            = P(No) × P(Rainy|No) × P(Hot|No)<br>
+                            = 0.333 × 0.2 × 0.4<br>
+                            = <strong>0.0266</strong>
+                        </div>
+                    </div>
+                    
+                    <div class="step">
+                        <div class="step-title">STEP 6: Normalize to Get Final Probabilities</div>
+                        <div class="step-calculation">
+                            <strong>Sum of probabilities:</strong><br>
+                            Sum = 0.0818 + 0.0266 = <strong>0.1084</strong><br>
+                            <br>
+                            <strong>Normalize:</strong><br>
+                            P(Yes|Rainy,Hot) = 0.0818 / 0.1084<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= <strong style="color: #7ef0d4;">0.755 (75.5%)</strong><br>
+                            <br>
+                            P(No|Rainy,Hot) = 0.0266 / 0.1084<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= <strong style="color: #ff8c6a;">0.245 (24.5%)</strong><br>
+                            <br>
+                            <div style="background: rgba(126, 240, 212, 0.2); padding: 16px; border-radius: 8px; margin-top: 12px;">
+                                <strong style="color: #7ef0d4; font-size: 20px;">✅ FINAL PREDICTION: YES (Play Tennis!)</strong><br>
+                                <span style="color: #a9b4c2; font-size: 14px;">Confidence: 75.5%</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="categorical-nb-canvas"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure:</strong> Categorical Naive Bayes calculation visualization</p>
+                    </div>
+                    
+                    <h3>🎯 PART B: Gaussian Naive Bayes (Step-by-Step from PDF)</h3>
+                    
+                    <h4>Dataset: 2D Classification</h4>
+                    <table class="data-table">
+                        <thead>
+                            <tr><th>ID</th><th>X₁</th><th>X₂</th><th>Class</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>A</td><td>1.0</td><td>2.0</td><td>Yes</td></tr>
+                            <tr><td>B</td><td>2.0</td><td>1.0</td><td>Yes</td></tr>
+                            <tr><td>C</td><td>1.5</td><td>1.8</td><td>Yes</td></tr>
+                            <tr><td>D</td><td>3.0</td><td>3.0</td><td>No</td></tr>
+                            <tr><td>E</td><td>3.5</td><td>2.8</td><td>No</td></tr>
+                            <tr><td>F</td><td>2.9</td><td>3.2</td><td>No</td></tr>
+                        </tbody>
+                    </table>
+                    
+                    <p><strong>Problem:</strong> Classify test point [X₁=2.0, X₂=2.0]</p>
+                    
+                    <div class="step">
+                        <div class="step-title">STEP 1: Calculate Mean and Variance for Each Class</div>
+                        <div class="step-calculation">
+                            <strong>Class "Yes" (samples A, B, C):</strong><br>
+                            X₁ values: [1.0, 2.0, 1.5]<br>
+                            μ₁(Yes) = (1.0 + 2.0 + 1.5) / 3 = <strong>1.5</strong><br>
+                            σ₁²(Yes) = [(1-1.5)² + (2-1.5)² + (1.5-1.5)²] / 3<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= [0.25 + 0.25 + 0] / 3<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= <strong>0.166</strong><br>
+                            <br>
+                            X₂ values: [2.0, 1.0, 1.8]<br>
+                            μ₂(Yes) = (2.0 + 1.0 + 1.8) / 3 = <strong>1.6</strong><br>
+                            σ₂²(Yes) = [(2-1.6)² + (1-1.6)² + (1.8-1.6)²] / 3<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= [0.16 + 0.36 + 0.04] / 3<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= <strong>0.186</strong><br>
+                            <br>
+                            <strong>Class "No" (samples D, E, F):</strong><br>
+                            X₁ values: [3.0, 3.5, 2.9]<br>
+                            μ₁(No) = (3.0 + 3.5 + 2.9) / 3 = <strong>3.133</strong><br>
+                            σ₁²(No) = <strong>0.0688</strong><br>
+                            <br>
+                            X₂ values: [3.0, 2.8, 3.2]<br>
+                            μ₂(No) = (3.0 + 2.8 + 3.2) / 3 = <strong>3.0</strong><br>
+                            σ₂²(No) = <strong>0.0266</strong>
+                        </div>
+                    </div>
+                    
+                    <div class="formula">
+                        <strong>Step 2: Gaussian Probability Density Function</strong><br>
+                        <br>
+                        P(x|μ,σ²) = (1/√(2πσ²)) × exp(-(x-μ)²/(2σ²))<br>
+                        <br>
+                        This gives us the probability density at point x given mean μ and variance σ²
+                    </div>
+                    
+                    <div class="step">
+                        <div class="step-title">STEP 3: Calculate P(X₁=2.0 | Class) using Gaussian PDF</div>
+                        <div class="step-calculation">
+                            <strong>For Class "Yes" (μ=1.5, σ²=0.166):</strong><br>
+                            P(2.0|Yes) = (1/√(2π × 0.166)) × exp(-(2.0-1.5)²/(2 × 0.166))<br>
+                            <br>
+                            Step-by-step:<br>
+                            • Normalization: 1/√(2π × 0.166) = 1/√1.043 = 1/1.021 = <strong>0.9772</strong><br>
+                            • Exponent: -(2.0-1.5)²/(2 × 0.166) = -(0.5)²/0.332 = -0.25/0.332 = <strong>-0.753</strong><br>
+                            • e^(-0.753) = <strong>0.471</strong><br>
+                            • Final: 0.9772 × 0.471 = <strong style="color: #7ef0d4;">0.460</strong><br>
+                            <br>
+                            <strong>For Class "No" (μ=3.133, σ²=0.0688):</strong><br>
+                            P(2.0|No) = (1/√(2π × 0.0688)) × exp(-(2.0-3.133)²/(2 × 0.0688))<br>
+                            <br>
+                            Step-by-step:<br>
+                            • Normalization: 1/√(2π × 0.0688) = <strong>1.523</strong><br>
+                            • Exponent: -(2.0-3.133)²/(2 × 0.0688) = -(-1.133)²/0.1376 = -1.283/0.1376 = <strong>-9.333</strong><br>
+                            • e^(-9.333) = <strong>0.000088</strong><br>
+                            • Final: 1.523 × 0.000088 = <strong style="color: #ff8c6a;">0.000134</strong><br>
+                            <br>
+                            <span style="color: #7ef0d4;">• Point (2.0, ?) is MUCH more likely to be "Yes"!</span>
+                        </div>
+                    </div>
+                    
+                    <div class="formula">
+                        <strong>Step 4: Calculate P(X₂=2.0 | Class)</strong><br>
+                        <br>
+                        <strong>For "Yes":</strong><br>
+                        P(2.0|Yes) = (1/√(2π×0.186)) × exp(-(2.0-1.6)²/(2×0.186))<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.923 × exp(-0.430)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.923 × 0.651<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.601<br>
+                        <br>
+                        <strong>For "No":</strong><br>
+                        P(2.0|No) = (1/√(2π×0.0266)) × exp(-(2.0-3.0)²/(2×0.0266))<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 2.449 × exp(-18.797)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 2.449 × 0.0000000614<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.00000015
+                    </div>
+                    
+                    <div class="formula">
+                        <strong>Step 5: Combine with Prior (assume equal priors)</strong><br>
+                        <br>
+                        P(Yes) = P(No) = 0.5<br>
+                        <br>
+                        P(Yes|X) ∝ P(Yes) × P(X₁=2.0|Yes) × P(X₂=2.0|Yes)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.5 × 0.460 × 0.601<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.138<br>
+                        <br>
+                        P(No|X) ∝ P(No) × P(X₁=2.0|No) × P(X₂=2.0|No)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.5 × 0.000134 × 0.00000015<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.00000000001
+                    </div>
+                    
+                    <div class="formula">
+                        <strong>Step 6: Normalize</strong><br>
+                        <br>
+                        Sum = 0.138 + 0.00000000001 ≈ 0.138<br>
+                        <br>
+                        P(Yes|X) = 0.138 / 0.138 ≈ 1.0 (99.99%)<br>
+                        P(No|X) ≈ 0.0 (0.01%)<br>
+                        <br>
+                        <strong style="color: #7ef0d4; font-size: 18px;">Prediction: YES ✅</strong>
+                    </div>
+                    
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="gaussian-nb-canvas"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure:</strong> Gaussian Naive Bayes with decision boundary</p>
+                    </div>
+
                     <div class="callout success">
                         <div class="callout-title">✅ When to Use Naive Bayes</div>
                         <div class="callout-content">
+                            <strong>Categorical NB:</strong> Discrete features (text, categories)<br>
+                            <strong>Gaussian NB:</strong> Continuous features (measurements, coordinates)<br>
+                            <br>
                             <strong>Perfect for:</strong><br>
                             • Text classification (spam detection, sentiment analysis)<br>
                             • Document categorization<br>
@@ -2687,7 +2952,187 @@ Actual  Pos     TP     FN
                 </div>
             </div>
 
-            <!-- Section 16: Decision Trees -->
+            <!-- Section 16: K-means Clustering -->
+            <div class="section" id="kmeans">
+                <div class="section-header">
+                    <h2>16. K-means Clustering</h2>
+                    <button class="section-toggle">▼</button>
+                </div>
+                <div class="section-body">
+                    <p>K-means is an unsupervised learning algorithm that groups data into K clusters. Each cluster has a centroid (center point), and points are assigned to the nearest centroid. Perfect for customer segmentation, image compression, and pattern discovery!</p>
+
+                    <div class="info-card">
+                        <div class="info-card-title">Key Concepts</div>
+                        <ul class="info-card-list">
+                            <li>Unsupervised: No labels needed!</li>
+                            <li>K = number of clusters (you choose)</li>
+                            <li>Minimizes Within-Cluster Sum of Squares (WCSS)</li>
+                            <li>Iterative: Updates centroids until convergence</li>
+                        </ul>
+                    </div>
+
+                    <h3>🎯 Step-by-Step K-means Algorithm (from PDF)</h3>
+
+                    <h4>Dataset: 6 Points in 2D Space</h4>
+                    <table class="data-table">
+                        <thead>
+                            <tr><th>Point</th><th>X</th><th>Y</th></tr>
+                        </thead>
+                        <tbody>
+                            <tr><td>A</td><td>1</td><td>2</td></tr>
+                            <tr><td>B</td><td>1.5</td><td>1.8</td></tr>
+                            <tr><td>C</td><td>5</td><td>8</td></tr>
+                            <tr><td>D</td><td>8</td><td>8</td></tr>
+                            <tr><td>E</td><td>1</td><td>0.6</td></tr>
+                            <tr><td>F</td><td>9</td><td>11</td></tr>
+                        </tbody>
+                    </table>
+
+                    <p><strong>Goal:</strong> Group into K=2 clusters</p>
+                    <p><strong>Initial Centroids:</strong> c₁ = [3, 4], c₂ = [5, 1]</p>
+
+                    <div class="formula">
+                        <strong>Distance Formula (Euclidean):</strong><br>
+                        d(point, centroid) = √[(x₁-x₂)² + (y₁-y₂)²]
+                    </div>
+
+                    <h4>Iteration 1</h4>
+
+                    <div class="formula">
+                        <strong>Step 1: Calculate Distances to All Centroids</strong><br>
+                        <br>
+                        <strong>Point A (1, 2):</strong><br>
+                        d(A, c₁) = √[(1-3)² + (2-4)²] = √[4+4] = √8 = 2.83<br>
+                        d(A, c₂) = √[(1-5)² + (2-1)²] = √[16+1] = √17 = 4.12<br>
+                        → Assign to c₁ (closer)<br>
+                        <br>
+                        <strong>Point B (1.5, 1.8):</strong><br>
+                        d(B, c₁) = √[(1.5-3)² + (1.8-4)²] = √[2.25+4.84] = 2.66<br>
+                        d(B, c₂) = √[(1.5-5)² + (1.8-1)²] = √[12.25+0.64] = 3.59<br>
+                        → Assign to c₁<br>
+                        <br>
+                        <strong>Point C (5, 8):</strong><br>
+                        d(C, c₁) = √[(5-3)² + (8-4)²] = √[4+16] = 4.47<br>
+                        d(C, c₂) = √[(5-5)² + (8-1)²] = √[0+49] = 7.0<br>
+                        → Assign to c₁<br>
+                        <br>
+                        <strong>Point D (8, 8):</strong><br>
+                        d(D, c₁) = √[(8-3)² + (8-4)²] = √[25+16] = 6.40<br>
+                        d(D, c₂) = √[(8-5)² + (8-1)²] = √[9+49] = 7.62<br>
+                        → Assign to c₁<br>
+                        <br>
+                        <strong>Point E (1, 0.6):</strong><br>
+                        d(E, c₁) = √[(1-3)² + (0.6-4)²] = √[4+11.56] = 3.94<br>
+                        d(E, c₂) = √[(1-5)² + (0.6-1)²] = √[16+0.16] = 4.02<br>
+                        → Assign to c₁<br>
+                        <br>
+                        <strong>Point F (9, 11):</strong><br>
+                        d(F, c₁) = √[(9-3)² + (11-4)²] = √[36+49] = 9.22<br>
+                        d(F, c₂) = √[(9-5)² + (11-1)²] = √[16+100] = 10.77<br>
+                        → Assign to c₁<br>
+                        <br>
+                        <strong>Result:</strong> Cluster 1 = {A, B, C, D, E, F}, Cluster 2 = {}
+                    </div>
+
+                    <div class="callout warning">
+                        <div class="callout-title">⚠️ Poor Initial Centroids!</div>
+                        <div class="callout-content">
+                            All points assigned to c₁! This happens with bad initialization. Let's try better initial centroids for the algorithm to work properly.
+                        </div>
+                    </div>
+
+                    <p><strong>Better Initial Centroids:</strong> c₁ = [1, 1], c₂ = [8, 9]</p>
+
+                    <div class="formula">
+                        <strong>Iteration 1 (Revised):</strong><br>
+                        <br>
+                        Cluster 1: {A, B, E} → c₁_new = mean = [(1+1.5+1)/3, (2+1.8+0.6)/3] = [1.17, 1.47]<br>
+                        Cluster 2: {C, D, F} → c₂_new = mean = [(5+8+9)/3, (8+8+11)/3] = [7.33, 9.00]<br>
+                        <br>
+                        <strong>WCSS Calculation:</strong><br>
+                        WCSS₁ = d²(A,c₁) + d²(B,c₁) + d²(E,c₁)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= (1-1.17)²+(2-1.47)² + (1.5-1.17)²+(1.8-1.47)² + (1-1.17)²+(0.6-1.47)²<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 0.311 + 0.218 + 0.786 = 1.315<br>
+                        <br>
+                        WCSS₂ = d²(C,c₂) + d²(D,c₂) + d²(F,c₂)<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= (5-7.33)²+(8-9)² + (8-7.33)²+(8-9)² + (9-7.33)²+(11-9)²<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 6.433 + 1.447 + 6.789 = 14.669<br>
+                        <br>
+                        <strong>Total WCSS = 1.315 + 14.669 = 15.984</strong>
+                    </div>
+
+                    <div class="formula">
+                        <strong>Iteration 2:</strong><br>
+                        <br>
+                        Using c₁ = [1.17, 1.47] and c₂ = [7.33, 9.00], recalculate distances...<br>
+                        <br>
+                        Result: Same assignments! Centroids don't change.<br>
+                        <strong>✓ Converged!</strong>
+                    </div>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 450px">
+                            <canvas id="kmeans-viz-canvas"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure:</strong> K-means clustering visualization with centroid movement</p>
+                    </div>
+
+                    <h3>Finding Optimal K: The Elbow Method</h3>
+
+                    <p>How do we choose K? Try different values and plot WCSS!</p>
+
+                    <div class="formula">
+                        <strong>WCSS for Different K Values:</strong><br>
+                        <br>
+                        K=1: WCSS = 50.0 (all in one cluster)<br>
+                        K=2: WCSS = 18.0<br>
+                        K=3: WCSS = 10.0 ← Elbow point!<br>
+                        K=4: WCSS = 8.0<br>
+                        K=5: WCSS = 7.0<br>
+                        <br>
+                        <strong>Rule:</strong> Choose K at the "elbow" where WCSS stops decreasing rapidly
+                    </div>
+
+                    <div class="figure">
+                        <div class="figure-placeholder" style="height: 400px">
+                            <canvas id="kmeans-elbow-canvas"></canvas>
+                        </div>
+                        <p class="figure-caption"><strong>Figure:</strong> Elbow method - optimal K is where the curve bends</p>
+                    </div>
+
+                    <div class="callout info">
+                        <div class="callout-title">💡 K-means Tips</div>
+                        <div class="callout-content">
+                            <strong>Advantages:</strong><br>
+                            ✓ Simple and fast<br>
+                            ✓ Works well with spherical clusters<br>
+                            ✓ Scales to large datasets<br>
+                            <br>
+                            <strong>Disadvantages:</strong><br>
+                            ✗ Need to specify K in advance<br>
+                            ✗ Sensitive to initial centroids (use K-means++!)<br>
+                            ✗ Assumes spherical clusters<br>
+                            ✗ Sensitive to outliers<br>
+                            <br>
+                            <strong>Solutions:</strong><br>
+                            • Use elbow method for K<br>
+                            • Use K-means++ initialization<br>
+                            • Run multiple times with different initializations
+                        </div>
+                    </div>
+
+                    <h3>Real-World Applications</h3>
+                    <ul>
+                        <li><strong>Customer Segmentation:</strong> Group customers by behavior</li>
+                        <li><strong>Image Compression:</strong> Reduce colors in images</li>
+                        <li><strong>Document Clustering:</strong> Group similar articles</li>
+                        <li><strong>Anomaly Detection:</strong> Points far from centroids are outliers</li>
+                        <li><strong>Feature Learning:</strong> Learn representations for neural networks</li>
+                    </ul>
+                </div>
+            </div>
+
+            <!-- Section 17: Decision Trees -->
             <div class="section" id="decision-trees">
                 <div class="section-header">
                     <h2>16. Decision Trees</h2>
@@ -2845,10 +3290,10 @@ Actual  Pos     TP     FN
                 </div>
             </div>
 
-            <!-- Section 17: Ensemble Methods -->
+            <!-- Section 18: Ensemble Methods -->
             <div class="section" id="ensemble-methods">
                 <div class="section-header">
-                    <h2>17. Ensemble Methods</h2>
+                    <h2>18. Ensemble Methods</h2>
                     <button class="section-toggle">▼</button>
                 </div>
                 <div class="section-body">