Enhance Visualization module with Python code snippets and fix broken interactive canvases

Visualization/app.js

@@ -3,13 +3,13 @@
  * Demonstrates core visualization concepts through live examples
  */
 
-(function() {
+(function () {
   'use strict';
 
   // Utility functions
   const $ = id => document.getElementById(id);
   const $$ = sel => document.querySelectorAll(sel);
-  
+
   // Color palette
   const COLORS = {
     primary: '#6366f1',
@@ -72,7 +72,7 @@
       data.x.forEach((x, j) => {
         const px = offsetX + ((x - xMin) / (xMax - xMin)) * (panelWidth - 50);
         const py = offsetY + panelHeight - 25 - ((data.y[j] - yMin) / (yMax - yMin)) * (panelHeight - 40);
-        
+
         ctx.beginPath();
         ctx.arc(px, py, 5, 0, Math.PI * 2);
         ctx.fillStyle = [COLORS.primary, COLORS.secondary, COLORS.accent, COLORS.success][i];
@@ -111,10 +111,10 @@
       data.forEach((v, i) => {
         const x = startX + i * (barWidth + 15);
         const height = v * 2.5;
-        
+
         ctx.fillStyle = COLORS.primary;
         ctx.fillRect(x, 280 - height, barWidth, height);
-        
+
         ctx.fillStyle = COLORS.dark;
         ctx.font = '11px Inter, sans-serif';
         ctx.textAlign = 'center';
@@ -135,7 +135,7 @@
         const hue = (v / 100) * 240; // Blue to red gradient
         ctx.fillStyle = `hsl(${240 - hue}, 70%, 50%)`;
         ctx.fillRect(x, 80, squareSize, squareSize);
-        
+
         ctx.fillStyle = COLORS.dark;
         ctx.font = '11px Inter, sans-serif';
         ctx.textAlign = 'center';
@@ -150,7 +150,7 @@
       ctx.textAlign = 'left';
       ctx.fillText('Low', 50, 220);
       ctx.fillText('High', 650, 220);
-      
+
       const gradWidth = 600;
       for (let i = 0; i < gradWidth; i++) {
         const hue = 240 - (i / gradWidth) * 240;
@@ -168,14 +168,14 @@
       data.forEach((v, i) => {
         const x = startX + i * 65;
         const radius = Math.sqrt(v) * 3.5;
-        
+
         ctx.beginPath();
         ctx.arc(x, 150, radius, 0, Math.PI * 2);
         ctx.fillStyle = COLORS.accent;
         ctx.globalAlpha = 0.7;
         ctx.fill();
         ctx.globalAlpha = 1;
-        
+
         ctx.fillStyle = COLORS.dark;
         ctx.font = '10px Inter, sans-serif';
         ctx.textAlign = 'center';
@@ -210,7 +210,7 @@
     components.forEach((comp, i) => {
       const y = startY + i * layerHeight;
       const width = 180 - i * 10;
-      
+
       // Layer rectangle
       ctx.fillStyle = comp.color;
       ctx.globalAlpha = 0.8;
@@ -218,13 +218,13 @@
       ctx.roundRect(centerX - width / 2, y, width, 35, 5);
       ctx.fill();
       ctx.globalAlpha = 1;
-      
+
       // Text
       ctx.fillStyle = 'white';
       ctx.font = 'bold 13px Inter, sans-serif';
       ctx.textAlign = 'center';
       ctx.fillText(`${comp.icon} ${comp.name}`, centerX, y + 22);
-      
+
       // Connector
       if (i < components.length - 1) {
         ctx.strokeStyle = '#94a3b8';
@@ -276,7 +276,7 @@
 
     if (chartPurpose === 'comparison') {
       ctx.fillText('Comparison: Bar Chart / Grouped Bar / Line', canvas.width / 2, 25);
-      
+
       const data = [
         { name: 'Q1', values: [40, 55, 30] },
         { name: 'Q2', values: [65, 45, 50] },
@@ -312,7 +312,7 @@
       });
     } else if (chartPurpose === 'composition') {
       ctx.fillText('Composition: Stacked Bar / Pie Chart (use sparingly!)', canvas.width / 2, 25);
-      
+
       // Stacked bar
       const data = [
         { name: '2020', values: [30, 25, 45] },
@@ -353,7 +353,7 @@
       });
     } else if (chartPurpose === 'distribution') {
       ctx.fillText('Distribution: Histogram / Box Plot / Violin', canvas.width / 2, 25);
-      
+
       // Simple histogram
       const bins = [5, 12, 25, 42, 55, 48, 30, 18, 8, 3];
       const barWidth = 50;
@@ -376,7 +376,7 @@
       ctx.fillText('← Histogram shows full distribution', 350, 340);
     } else if (chartPurpose === 'relationship') {
       ctx.fillText('Relationship: Scatter Plot / Bubble / Heatmap', canvas.width / 2, 25);
-      
+
       // Random scatter with trend
       ctx.strokeStyle = '#e5e7eb';
       ctx.lineWidth = 1;
@@ -513,7 +513,7 @@
       ctx.fillStyle = COLORS.dark;
       ctx.textAlign = 'left';
       ctx.fillText(a.label, a.x, a.y);
-      
+
       ctx.strokeStyle = '#94a3b8';
       ctx.lineWidth = 1;
       ctx.setLineDash([3, 3]);
@@ -607,7 +607,7 @@
         const x = margin.left + Math.random() * width;
         const baseY = margin.top + height - ((x - margin.left) / width) * height * 0.7;
         const y = baseY + (Math.random() - 0.5) * 100;
-        
+
         ctx.beginPath();
         ctx.arc(x, Math.max(margin.top, Math.min(margin.top + height, y)), 6, 0, Math.PI * 2);
         ctx.fillStyle = COLORS.accent;
@@ -628,10 +628,10 @@
       data.forEach((v, i) => {
         const x = margin.left + i * (barWidth + 20) + 10;
         const barHeight = (v / 100) * height;
-        
+
         ctx.fillStyle = COLORS.primary;
         ctx.fillRect(x, margin.top + height - barHeight, barWidth, barHeight);
-        
+
         ctx.fillStyle = COLORS.dark;
         ctx.font = '11px Inter, sans-serif';
         ctx.textAlign = 'center';
@@ -652,12 +652,12 @@
       bins.forEach((v, i) => {
         const x = margin.left + i * (barWidth + 2);
         const barHeight = (v / maxVal) * height;
-        
+
         ctx.fillStyle = COLORS.secondary;
         ctx.globalAlpha = 0.8;
         ctx.fillRect(x, margin.top + height - barHeight, barWidth, barHeight);
         ctx.globalAlpha = 1;
-        
+
         ctx.strokeStyle = 'white';
         ctx.lineWidth = 1;
         ctx.strokeRect(x, margin.top + height - barHeight, barWidth, barHeight);
@@ -728,6 +728,192 @@
     ctx.stroke();
   }
 
+  // ==================== SEABORN RELATIONSHIP PLOTS ====================
+  let relPlotType = 'scatter';
+
+  function drawRelationships() {
+    const canvas = $('canvas-relationships');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    const margin = { top: 50, right: 150, bottom: 50, left: 70 };
+    const width = canvas.width - margin.left - margin.right;
+    const height = canvas.height - margin.top - margin.bottom;
+
+    // Generate correlated data
+    const n = 60;
+    const data = [];
+    for (let i = 0; i < n; i++) {
+      const x = margin.left + (i / n) * width;
+      const group = i % 2 === 0 ? 'A' : 'B';
+      const noise = (Math.random() - 0.5) * 50;
+      const slope = group === 'A' ? 0.5 : 0.8;
+      const intercept = group === 'A' ? 20 : -30;
+      const yRaw = (i / n) * 100 * slope + intercept + noise;
+      // Map to canvas Y
+      const y = margin.top + height - ((yRaw + 50) / 150) * height;
+      data.push({ x, y, group });
+    }
+
+    if (relPlotType === 'scatter') {
+      ctx.fillStyle = COLORS.dark;
+      ctx.font = 'bold 14px Inter, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('sns.scatterplot(..., hue="group")', canvas.width / 2, 25);
+
+      data.forEach(d => {
+        ctx.beginPath();
+        ctx.arc(d.x, d.y, 6, 0, Math.PI * 2);
+        ctx.fillStyle = d.group === 'A' ? COLORS.primary : COLORS.secondary;
+        ctx.globalAlpha = 0.7;
+        ctx.fill();
+        ctx.strokeStyle = 'white';
+        ctx.globalAlpha = 1;
+        ctx.stroke();
+      });
+
+      // Legend
+      ctx.fillStyle = COLORS.primary;
+      ctx.fillRect(canvas.width - 120, 60, 15, 15);
+      ctx.fillStyle = COLORS.secondary;
+      ctx.fillRect(canvas.width - 120, 85, 15, 15);
+      ctx.fillStyle = COLORS.dark;
+      ctx.font = '12px Inter, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText('Group A', canvas.width - 95, 72);
+      ctx.fillText('Group B', canvas.width - 95, 97);
+
+    } else if (relPlotType === 'regplot') {
+      ctx.fillStyle = COLORS.dark;
+      ctx.font = 'bold 14px Inter, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('sns.regplot() - Scatter + Regression Line + 95% CI', canvas.width / 2, 25);
+
+      // Draw confidence interval band (approximated)
+      ctx.beginPath();
+      ctx.moveTo(margin.left, margin.top + height - 30);
+      ctx.lineTo(margin.left + width, margin.top + 20);
+      ctx.lineTo(margin.left + width, margin.top + 80);
+      ctx.lineTo(margin.left, margin.top + height - (-30));
+      ctx.fillStyle = COLORS.primary;
+      ctx.globalAlpha = 0.2;
+      ctx.fill();
+      ctx.globalAlpha = 1;
+
+      // Draw regression line
+      ctx.beginPath();
+      ctx.moveTo(margin.left, margin.top + height - 10);
+      ctx.lineTo(margin.left + width, margin.top + 50);
+      ctx.strokeStyle = COLORS.primary;
+      ctx.lineWidth = 3;
+      ctx.stroke();
+
+      // Draw points
+      data.forEach(d => {
+        ctx.beginPath();
+        ctx.arc(d.x, d.y, 5, 0, Math.PI * 2);
+        ctx.fillStyle = COLORS.dark;
+        ctx.globalAlpha = 0.5;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      });
+    } else if (relPlotType === 'residplot') {
+      ctx.fillStyle = COLORS.dark;
+      ctx.font = 'bold 14px Inter, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('sns.residplot() - Plotting Regression Residuals', canvas.width / 2, 25);
+
+      // Zero line
+      const midY = margin.top + height / 2;
+      ctx.beginPath();
+      ctx.moveTo(margin.left, midY);
+      ctx.lineTo(margin.left + width, midY);
+      ctx.strokeStyle = COLORS.danger;
+      ctx.setLineDash([5, 5]);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Residuals
+      data.forEach(d => {
+        // Calculate distance from an imaginary regression line
+        const expectedY = margin.top + height - 10 - ((d.x - margin.left) / width) * (height - 60);
+        const residual = d.y - expectedY;
+
+        ctx.beginPath();
+        ctx.arc(d.x, midY + residual, 5, 0, Math.PI * 2);
+        ctx.fillStyle = COLORS.blue;
+        ctx.globalAlpha = 0.6;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+
+        // Stem
+        ctx.beginPath();
+        ctx.moveTo(d.x, midY);
+        ctx.lineTo(d.x, midY + residual);
+        ctx.strokeStyle = COLORS.blue;
+        ctx.globalAlpha = 0.3;
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+      });
+    } else if (relPlotType === 'pairplot') {
+      ctx.fillStyle = COLORS.dark;
+      ctx.font = 'bold 14px Inter, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText('sns.pairplot() - Pairwise relationships', canvas.width / 2, 25);
+
+      const gridSize = 3;
+      const cellW = width / gridSize;
+      const cellH = height / gridSize;
+
+      ctx.lineWidth = 1;
+      for (let r = 0; r < gridSize; r++) {
+        for (let c = 0; c < gridSize; c++) {
+          const cx = margin.left + c * cellW;
+          const cy = margin.top + r * cellH;
+
+          ctx.strokeStyle = COLORS.gray;
+          ctx.strokeRect(cx, cy, cellW, cellH);
+
+          // Diagonal: KDE
+          if (r === c) {
+            ctx.beginPath();
+            ctx.moveTo(cx, cy + cellH);
+            for (let i = 0; i <= cellW; i += 5) {
+              const h = Math.sin((i / cellW) * Math.PI) * (cellH * 0.8) + (Math.random() * 10 - 5);
+              ctx.lineTo(cx + i, cy + cellH - Math.max(0, h));
+            }
+            ctx.lineTo(cx + cellW, cy + cellH);
+            ctx.fillStyle = COLORS.success;
+            ctx.globalAlpha = 0.3;
+            ctx.fill();
+            ctx.globalAlpha = 1;
+          }
+          // Off-diagonal: Scatter
+          else {
+            for (let i = 0; i < 20; i++) {
+              ctx.beginPath();
+              ctx.arc(cx + 5 + Math.random() * (cellW - 10), cy + 5 + Math.random() * (cellH - 10), 3, 0, Math.PI * 2);
+              ctx.fillStyle = COLORS.dark;
+              ctx.globalAlpha = 0.4;
+              ctx.fill();
+              ctx.globalAlpha = 1;
+            }
+          }
+        }
+      }
+    }
+
+    // Axes
+    ctx.strokeStyle = COLORS.dark;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(margin.left, margin.top);
+    ctx.lineTo(margin.left, margin.top + height);
+    ctx.lineTo(margin.left + width, margin.top + height);
+    ctx.stroke();
+  }
+
   // ==================== SEABORN DISTRIBUTION PLOTS ====================
   let distPlotType = 'histplot';
 
@@ -754,7 +940,7 @@
       bins.forEach((v, i) => {
         const x = margin.left + i * (barWidth + 4);
         const barHeight = (v / maxVal) * height * 0.9;
-        
+
         ctx.fillStyle = COLORS.primary;
         ctx.globalAlpha = 0.6;
         ctx.fillRect(x, margin.top + height - barHeight, barWidth, barHeight);
@@ -1011,7 +1197,7 @@
       // Draw dendrogram (simplified tree)
       ctx.strokeStyle = COLORS.gray;
       ctx.lineWidth = 1;
-      
+
       // Top dendrogram
       const dendroY = 60;
       ctx.beginPath();
@@ -1040,12 +1226,12 @@
         for (let j = 0; j < cols; j++) {
           const x = startX + j * cellSize;
           const y = startY + i * cellSize;
-          
+
           // Clustered pattern
           let val = Math.random();
           if ((i < 2 && j < 3) || (i >= 2 && j >= 3)) val = val * 0.3 + 0.7; // high values in clusters
           else val = val * 0.3;
-          
+
           const hue = 240 - val * 240;
           ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
           ctx.fillRect(x, y, cellSize - 2, cellSize - 2);
@@ -1112,15 +1298,15 @@
 
     // Animate movement
     const progress = (animFrame % 100) / 100;
-    
+
     countries.forEach(country => {
       // Countries move up and right over time (improving)
       const xOffset = progress * 0.3 * Math.sin(progress * Math.PI);
       const yOffset = progress * 0.2;
-      
+
       const x = margin.left + (country.baseX + xOffset) * width;
       const y = margin.top + (country.baseY - yOffset) * height;
-      
+
       ctx.beginPath();
       ctx.arc(x, y, country.size * (1 + progress * 0.3), 0, Math.PI * 2);
       ctx.fillStyle = country.color;
@@ -1186,6 +1372,367 @@
     }
   }
 
+  // ==================== GEOSPATIAL ====================
+  let geoType = 'choropleth';
+
+  function drawGeo() {
+    const canvas = $('canvas-geo');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = COLORS.dark;
+    ctx.font = 'bold 14px Inter, sans-serif';
+    ctx.textAlign = 'center';
+
+    if (geoType === 'choropleth') {
+      ctx.fillText('Choropleth Map: Values mapped to regions', canvas.width / 2, 25);
+
+      // Draw grid lines (longitude/latitude)
+      ctx.strokeStyle = '#e5e7eb';
+      ctx.lineWidth = 1;
+      for (let i = 0; i <= 8; i++) {
+        ctx.beginPath();
+        ctx.moveTo(i * 100, 50);
+        ctx.lineTo(i * 100, 450);
+        ctx.stroke();
+      }
+      for (let i = 0; i <= 4; i++) {
+        ctx.beginPath();
+        ctx.moveTo(0, 50 + i * 100);
+        ctx.lineTo(800, 50 + i * 100);
+        ctx.stroke();
+      }
+
+      // Draw stylized map regions
+      const regions = [
+        { path: [[100, 100], [300, 80], [350, 200], [150, 250]], val: 0.8 },
+        { path: [[350, 200], [500, 150], [600, 300], [400, 350]], val: 0.4 },
+        { path: [[150, 250], [400, 350], [300, 450], [100, 400]], val: 0.2 },
+        { path: [[500, 150], [700, 100], [750, 250], [600, 300]], val: 0.9 },
+        { path: [[400, 350], [600, 300], [650, 450], [450, 480]], val: 0.6 }
+      ];
+
+      regions.forEach(r => {
+        ctx.beginPath();
+        ctx.moveTo(r.path[0][0], r.path[0][1]);
+        for (let i = 1; i < r.path.length; i++) {
+          ctx.lineTo(r.path[i][0], r.path[i][1]);
+        }
+        ctx.closePath();
+
+        // Color mapping
+        const hue = 240 - r.val * 240;
+        ctx.fillStyle = `hsla(${hue}, 70%, 50%, 0.7)`;
+        ctx.fill();
+        ctx.strokeStyle = 'white';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      });
+    } else if (geoType === 'scatter') {
+      ctx.fillText('Scatter on Map: Point data over geography', canvas.width / 2, 25);
+
+      // Draw basic continent outlines
+      ctx.strokeStyle = COLORS.gray;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      // Rough Americas
+      ctx.moveTo(200, 100); ctx.quadraticCurveTo(100, 200, 250, 250); ctx.lineTo(300, 400); ctx.lineTo(350, 380); ctx.lineTo(250, 200); ctx.lineTo(350, 80); ctx.closePath();
+      // Rough Afro-Eurasia
+      ctx.moveTo(400, 150); ctx.quadraticCurveTo(500, 50, 700, 100); ctx.lineTo(750, 250); ctx.lineTo(600, 300); ctx.lineTo(450, 400); ctx.lineTo(380, 250); ctx.closePath();
+      ctx.stroke();
+      ctx.fillStyle = '#f3f4f6';
+      ctx.fill();
+
+      // Scatter points
+      for (let i = 0; i < 40; i++) {
+        const x = 150 + Math.random() * 600;
+        const y = 80 + Math.random() * 350;
+        ctx.beginPath();
+        ctx.arc(x, y, 3 + Math.random() * 8, 0, Math.PI * 2);
+        ctx.fillStyle = COLORS.primary;
+        ctx.globalAlpha = 0.6;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      }
+    } else if (geoType === 'heatmap') {
+      ctx.fillText('Density Heatmap: Clustering over geography', canvas.width / 2, 25);
+
+      // Base map
+      ctx.fillStyle = '#1f2937';
+      ctx.fillRect(50, 50, 700, 400);
+
+      // Gradient density clusters
+      const clusters = [
+        { x: 250, y: 150, r: 100, intensity: 1 },
+        { x: 550, y: 200, r: 150, intensity: 0.8 },
+        { x: 300, y: 350, r: 120, intensity: 0.9 },
+        { x: 650, y: 350, r: 80, intensity: 0.6 }
+      ];
+
+      clusters.forEach(c => {
+        const grad = ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, c.r);
+        grad.addColorStop(0, `rgba(239, 68, 68, ${c.intensity})`); // red
+        grad.addColorStop(0.3, `rgba(245, 158, 11, ${c.intensity * 0.7})`); // orange
+        grad.addColorStop(0.6, `rgba(16, 185, 129, ${c.intensity * 0.4})`); // green
+        grad.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+        ctx.fillStyle = grad;
+        ctx.beginPath();
+        ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2);
+        ctx.fill();
+      });
+    }
+  }
+
+  // ==================== 3D PLOTS ====================
+  let plot3DType = 'scatter';
+
+  function draw3D() {
+    const canvas = $('canvas-3d');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = COLORS.dark;
+    ctx.font = 'bold 14px Inter, sans-serif';
+    ctx.textAlign = 'center';
+
+    const cx = canvas.width / 2;
+    const cy = canvas.height / 2 + 20;
+
+    // Draw isometric axes
+    ctx.strokeStyle = COLORS.gray;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    // Z axis (up)
+    ctx.moveTo(cx, cy); ctx.lineTo(cx, cy - 150);
+    // X axis (down-left)
+    ctx.moveTo(cx, cy); ctx.lineTo(cx - 150, cy + 86);
+    // Y axis (down-right)
+    ctx.moveTo(cx, cy); ctx.lineTo(cx + 150, cy + 86);
+    ctx.stroke();
+
+    ctx.fillStyle = COLORS.gray;
+    ctx.font = '12px Inter, sans-serif';
+    ctx.fillText('Z', cx, cy - 160);
+    ctx.fillText('X', cx - 160, cy + 96);
+    ctx.fillText('Y', cx + 160, cy + 96);
+
+    // Helper for isometric projection
+    const isoMap = (x, y, z) => {
+      // 30 degree isometric projection
+      const cos30 = Math.cos(Math.PI / 6);
+      const sin30 = Math.sin(Math.PI / 6);
+      return {
+        px: cx + (y - x) * cos30,
+        py: cy + (x + y) * sin30 - z
+      };
+    };
+
+    if (plot3DType === 'scatter') {
+      ctx.fillText('3D Scatter Plot', canvas.width / 2, 25);
+
+      for (let i = 0; i < 80; i++) {
+        // Random 3D coords [0, 100]
+        const x = Math.random() * 100;
+        const y = Math.random() * 100;
+        const z = (x + y) / 2 + (Math.random() - 0.5) * 40; // correlated Z
+
+        const pos = isoMap(x, y, z);
+
+        ctx.beginPath();
+        ctx.arc(pos.px, pos.py, 4, 0, Math.PI * 2);
+        const hue = (z / 120) * 240;
+        ctx.fillStyle = `hsl(${240 - hue}, 70%, 50%)`;
+        ctx.fill();
+        ctx.strokeStyle = 'white';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+      }
+    } else if (plot3DType === 'surface' || plot3DType === 'wireframe') {
+      ctx.fillText(`3D ${plot3DType === 'surface' ? 'Surface' : 'Wireframe'} Plot (sin(R)/R)`, canvas.width / 2, 25);
+
+      const resolution = 15;
+      const step = 120 / resolution;
+
+      const grid = [];
+      for (let x = -60; x <= 60; x += step) {
+        const row = [];
+        for (let y = -60; y <= 60; y += step) {
+          const r = Math.sqrt(x * x + y * y);
+          const z = r === 0 ? 80 : Math.sin(r * 0.15) / (r * 0.15) * 80;
+          row.push({ x: x + 60, y: y + 60, z: z + 40 });
+        }
+        grid.push(row);
+      }
+
+      ctx.lineWidth = 1;
+
+      // Draw polygons from back to front (rough Painter's Algorithm)
+      // Since it's symmetric, a simple loop works decently
+      for (let i = 0; i < grid.length - 1; i++) {
+        for (let j = 0; j < grid[i].length - 1; j++) {
+          const p1 = isoMap(grid[i][j].x, grid[i][j].y, grid[i][j].z);
+          const p2 = isoMap(grid[i + 1][j].x, grid[i + 1][j].y, grid[i + 1][j].z);
+          const p3 = isoMap(grid[i + 1][j + 1].x, grid[i + 1][j + 1].y, grid[i + 1][j + 1].z);
+          const p4 = isoMap(grid[i][j + 1].x, grid[i][j + 1].y, grid[i][j + 1].z);
+
+          ctx.beginPath();
+          ctx.moveTo(p1.px, p1.py);
+          ctx.lineTo(p2.px, p2.py);
+          ctx.lineTo(p3.px, p3.py);
+          ctx.lineTo(p4.px, p4.py);
+          ctx.closePath();
+
+          const avgZ = (grid[i][j].z + grid[i + 1][j].z + grid[i + 1][j + 1].z + grid[i][j + 1].z) / 4;
+          const hue = (avgZ / 120) * 240 + 60; // offset hue
+
+          if (plot3DType === 'surface') {
+            ctx.fillStyle = `hsl(${240 - hue}, 70%, 50%)`;
+            ctx.fill();
+            ctx.strokeStyle = `hsl(${240 - hue}, 70%, 30%)`;
+          } else {
+            ctx.strokeStyle = COLORS.primary;
+          }
+          ctx.stroke();
+        }
+      }
+    }
+  }
+
+  // ==================== STORYTELLING ====================
+  function drawStorytelling() {
+    const canvas = $('canvas-storytelling');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Title: Big, bold conclusion
+    ctx.fillStyle = COLORS.dark;
+    ctx.font = 'bold 22px Inter, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText('Product B exceeded sales targets by 45% in Q4', 50, 40);
+
+    // Subtitle / context
+    ctx.fillStyle = COLORS.gray;
+    ctx.font = '14px Inter, sans-serif';
+    ctx.fillText('Driven by the new marketing campaign launched in September.', 50, 65);
+
+    // Plot Area
+    const margin = { left: 50, right: 150, top: 120, bottom: 50 };
+    const width = canvas.width - margin.left - margin.right;
+    const height = canvas.height - margin.top - margin.bottom;
+
+    // Remove harsh gridlines, only light Y grid
+    ctx.strokeStyle = '#f3f4f6';
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= 4; i++) {
+      const y = margin.top + (i / 4) * height;
+      ctx.beginPath();
+      ctx.moveTo(margin.left, y);
+      ctx.lineTo(margin.left + width, y);
+      ctx.stroke();
+    }
+
+    // Data Series A (Context - Greyed out)
+    const dataA = [120, 130, 125, 140];
+    const dataB = [90, 100, 110, 205]; // Massive spike
+    const target = 140;
+
+    const quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
+    const xStep = width / 3;
+
+    // Draw Target Line
+    const targetY = margin.top + height - (target / 250) * height;
+    ctx.beginPath();
+    ctx.moveTo(margin.left, targetY);
+    ctx.lineTo(margin.left + width, targetY);
+    ctx.strokeStyle = COLORS.warning;
+    ctx.setLineDash([5, 5]);
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = COLORS.warning;
+    ctx.fillText('Q4 Target (140)', margin.left + width + 10, targetY + 5);
+
+    // Draw Line A (Less important)
+    ctx.beginPath();
+    dataA.forEach((v, i) => {
+      const x = margin.left + i * xStep;
+      const y = margin.top + height - (v / 250) * height;
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    });
+    ctx.strokeStyle = '#cbd5e1'; // light slate
+    ctx.lineWidth = 3;
+    ctx.stroke();
+    ctx.fillStyle = '#94a3b8';
+    ctx.fillText('Product A', margin.left + width + 10, margin.top + height - (dataA[3] / 250) * height + 5);
+
+    // Draw Line B (The Hero)
+    ctx.beginPath();
+    dataB.forEach((v, i) => {
+      const x = margin.left + i * xStep;
+      const y = margin.top + height - (v / 250) * height;
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    });
+    ctx.strokeStyle = COLORS.primary;
+    ctx.lineWidth = 5;
+    ctx.stroke();
+
+    // Highlight points for B
+    dataB.forEach((v, i) => {
+      const x = margin.left + i * xStep;
+      const y = margin.top + height - (v / 250) * height;
+      ctx.beginPath();
+      ctx.arc(x, y, 6, 0, Math.PI * 2);
+      ctx.fillStyle = i === 3 ? COLORS.success : COLORS.primary; // Make final point stand out more
+      ctx.fill();
+
+      // Data labels directly on line
+      ctx.fillStyle = i === 3 ? COLORS.success : COLORS.dark;
+      ctx.font = i === 3 ? 'bold 16px Inter, sans-serif' : '12px Inter, sans-serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(v, x, y - 15);
+    });
+
+    // Label Hero line
+    ctx.fillStyle = COLORS.primary;
+    ctx.textAlign = 'left';
+    ctx.font = 'bold 14px Inter, sans-serif';
+    ctx.fillText('Product B', margin.left + width + 10, margin.top + height - (dataB[3] / 250) * height + 5);
+
+    // X Axis
+    ctx.strokeStyle = COLORS.dark;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(margin.left, margin.top + height);
+    ctx.lineTo(margin.left + width, margin.top + height);
+    ctx.stroke();
+
+    ctx.fillStyle = COLORS.dark;
+    ctx.textAlign = 'center';
+    quarters.forEach((q, i) => {
+      ctx.fillText(q, margin.left + i * xStep, margin.top + height + 20);
+    });
+
+    // Storytelling annotation
+    ctx.beginPath();
+    const finalX = margin.left + 3 * xStep;
+    const finalY = margin.top + height - (dataB[3] / 250) * height;
+    ctx.moveTo(finalX - 60, finalY + 40);
+    ctx.lineTo(finalX - 10, finalY + 10);
+    ctx.strokeStyle = COLORS.success;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    ctx.fillStyle = COLORS.success;
+    ctx.textAlign = 'right';
+    ctx.fillText('+45% over Target!', finalX - 65, finalY + 45);
+  }
+
   // ==================== EVENT LISTENERS ====================
   function bindEvents() {
     // Perception buttons
@@ -1212,6 +1759,12 @@
     $('btn-ecdfplot')?.addEventListener('click', () => { distPlotType = 'ecdfplot'; drawDistributions(); });
     $('btn-rugplot')?.addEventListener('click', () => { distPlotType = 'rugplot'; drawDistributions(); });
 
+    // Relationship buttons
+    $('btn-scatter-hue')?.addEventListener('click', () => { relPlotType = 'scatter'; drawRelationships(); });
+    $('btn-regplot')?.addEventListener('click', () => { relPlotType = 'regplot'; drawRelationships(); });
+    $('btn-residplot')?.addEventListener('click', () => { relPlotType = 'residplot'; drawRelationships(); });
+    $('btn-pairplot')?.addEventListener('click', () => { relPlotType = 'pairplot'; drawRelationships(); });
+
     // Heatmap buttons
     $('btn-heatmap-basic')?.addEventListener('click', () => { heatmapType = 'basic'; drawHeatmaps(); });
     $('btn-corr-matrix')?.addEventListener('click', () => { heatmapType = 'corr'; drawHeatmaps(); });
@@ -1221,6 +1774,16 @@
     $('btn-animate')?.addEventListener('click', startAnimation);
     $('btn-stop')?.addEventListener('click', stopAnimation);
 
+    // Geospatial
+    $('btn-choropleth')?.addEventListener('click', () => { geoType = 'choropleth'; drawGeo(); });
+    $('btn-scatter-geo')?.addEventListener('click', () => { geoType = 'scatter'; drawGeo(); });
+    $('btn-heatmap-geo')?.addEventListener('click', () => { geoType = 'heatmap'; drawGeo(); });
+
+    // 3D Plots
+    $('btn-3d-scatter')?.addEventListener('click', () => { plot3DType = 'scatter'; draw3D(); });
+    $('btn-3d-surface')?.addEventListener('click', () => { plot3DType = 'surface'; draw3D(); });
+    $('btn-3d-wireframe')?.addEventListener('click', () => { plot3DType = 'wireframe'; draw3D(); });
+
     // Smooth scroll for nav links
     $$('.nav__link').forEach(link => {
       link.addEventListener('click', (e) => {
@@ -1230,7 +1793,7 @@
         if (target) {
           target.scrollIntoView({ behavior: 'smooth' });
         }
-        
+
         // Update active state
         $$('.nav__link').forEach(l => l.classList.remove('active'));
         link.classList.add('active');
@@ -1241,7 +1804,7 @@
   // ==================== INITIALIZATION ====================
   function init() {
     bindEvents();
-    
+
     // Draw all initial visualizations
     drawAnscombe();
     perceptionMode = 'position';
@@ -1254,9 +1817,18 @@
     drawBasicPlots();
     distPlotType = 'histplot';
     drawDistributions();
+    relPlotType = 'scatter';
+    drawRelationships();
     heatmapType = 'basic';
     drawHeatmaps();
     drawAnimation();
+
+    // Draw Advanced Topics initial state
+    geoType = 'choropleth';
+    drawGeo();
+    plot3DType = 'scatter';
+    draw3D();
+    drawStorytelling();
   }
 
   // Run on DOM ready

Visualization/index.html

@@ -6,6 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Data Visualization Masterclass</title>
   <link rel="stylesheet" href="style.css" />
+
+  <!-- MathJax for rendering LaTeX formulas -->
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </head>
 
 <body>
@@ -58,7 +62,8 @@
         <h2>🎯 Why Visualize Data?</h2>
         <p>Data visualization transforms abstract numbers into visual stories. The human brain processes images 60,000×
           faster than text. Visualization helps us <strong>explore</strong>, <strong>analyze</strong>, and
-          <strong>communicate</strong> data effectively.</p>
+          <strong>communicate</strong> data effectively.
+        </p>
 
         <div class="info-card">
           <strong>Anscombe's Quartet:</strong> Four datasets with nearly identical statistical properties (mean,
@@ -126,6 +131,23 @@
         <div class="callout callout--mistake">⚠️ Pie charts use angle (low accuracy). Bar charts are almost always
           better!</div>
         <div class="callout callout--tip">✅ Use position for most important data, color for categories.</div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: The Weber-Fechner Law</h3>
+          <p>Why are humans bad at comparing bubble sizes (area) but great at comparing bar chart heights
+            (length/position)? Human perception of physical magnitudes follows a logarithmic scale, not a linear one.
+          </p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; font-size: 1.1em; color: #e4e6eb;">
+            $$ \frac{\Delta I}{I} = k \quad \Rightarrow \quad S = c \ln\left(\frac{I}{I_0}\right) $$
+          </div>
+          <ul style="margin-bottom: 0;">
+            <li><strong>$I$</strong>: Initial stimulus intensity (e.g., initial bubble area)</li>
+            <li><strong>$\Delta I$</strong>: Just Noticeable Difference (JND) required to perceive a change</li>
+            <li><strong>$k$</strong>: Weber's constant. For length/position $k \approx 0.03$ (very sensitive), but for
+              area $k \approx 0.10$ to $0.20$ (very insensitive).</li>
+          </ul>
+        </div>
       </section>
 
       <!-- ====================== 3. GRAMMAR OF GRAPHICS ================== -->
@@ -153,6 +175,41 @@
 
         <div class="callout callout--insight">💡 Understanding Grammar of Graphics makes you a better visualizer in ANY
           library.</div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: Coordinate Transformations</h3>
+          <p>When mapping data to visuals, the coordinate system applies a mathematical transformation matrix. For
+            example, converting standard Cartesian coordinates $(x, y)$ to Polar coordinates $(r, \theta)$ to render a
+            pie chart or Coxcomb plot:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; overflow-x: auto; color: #e4e6eb;">
+            $$ r = \sqrt{x^2 + y^2} $$
+            $$ \theta = \text{atan2}(y, x) $$
+            $$ \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} r \cos(\theta) \\ r \sin(\theta) \end{bmatrix} $$
+          </div>
+          <p style="margin-bottom: 0;">This is why pie charts are computationally and perceptually different from bar
+            charts—they apply a non-linear polar transformation to the linear data dimensions.</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>app.py - Grammar of Graphics with Plotnine (Python)</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import pandas as pd
+from plotnine import *
+
+# Following Grammar of Graphics exactly:
+# Data (mpg) -> Aesthetics (x,y,color) -> Geometries (point, smooth)
+plot = (
+    ggplot(mpg, aes(x='displ', y='hwy', color='class'))
+    + geom_point(size=3, alpha=0.7)
+    + geom_smooth(method='lm', se=False) # Add regression line
+    + theme_minimal()                    # Add theme
+    + labs(title='Engine Displacement vs Highway MPG')
+)
+print(plot)</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 4. CHOOSING CHARTS ================== -->
@@ -195,6 +252,20 @@
         <div class="callout callout--mistake">⚠️ <strong>3D effects on 2D data</strong> - Distorts perception</div>
         <div class="callout callout--mistake">⚠️ <strong>Truncated Y-axis</strong> - Exaggerates differences</div>
         <div class="callout callout--mistake">⚠️ <strong>Rainbow color scales</strong> - Not perceptually uniform</div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: Information Entropy in Visuals</h3>
+          <p>How much data can a chart "handle" before it becomes cluttered? We can use Shannon Entropy ($H$) to
+            quantify the visual information density. If a chart has $n$ visual marks (dots, lines) with probabilities
+            $p_i$ of drawing attention:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; color: #e4e6eb;">
+            $$ H(X) = - \sum_{i=1}^{n} p_i \log_2(p_i) $$
+          </div>
+          <p style="margin-bottom: 0;"><strong>Takeaway:</strong> If you add too many dimensions (color, size, shape
+            simultaneously) on a single plot, the entropy $H$ exceeds human working memory limits ($\approx 2.5$ bits),
+            leading to chart fatigue. This is mathematically why "less is more" in dashboard design.</p>
+        </div>
       </section>
 
       <!-- ====================== 5. MATPLOTLIB ANATOMY ================== -->
@@ -230,6 +301,53 @@
         </div>
 
         <div class="callout callout--tip">✅ Always use OO interface for publication-quality plots.</div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: Affine Transformations</h3>
+          <p>How does Matplotlib convert your data coordinates (e.g., $x \in [0, 1000]$) into physical pixels on your
+            screen? It uses a continuous pipeline of <strong>Affine Transformation Matrices</strong>:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; overflow-x: auto; color: #e4e6eb;">
+            $$ \begin{bmatrix} x_{\text{display}} \\ y_{\text{display}} \\ 1 \end{bmatrix} = \begin{bmatrix} s_x & 0 &
+            t_x \\ 0 & s_y & t_y \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x_{\text{data}} \\ y_{\text{data}} \\ 1
+            \end{bmatrix} $$
+          </div>
+          <p style="margin-bottom: 0;">This matrix $T$ scales ($s_x, s_y$) and translates ($t_x, t_y$) data points. The
+            transformation pipeline is: Data $\rightarrow$ Axes (relative 0-1) $\rightarrow$ Figure (inches)
+            $\rightarrow$ Display (pixels based on DPI).</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>plot.py - Matplotlib Object-Oriented Setup</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import matplotlib.pyplot as plt
+
+# 1. Create the Figure (The Canvas) and Axes (The Artist)
+fig, ax = plt.subplots(figsize=(10, 6), dpi=100)
+
+# 2. Draw on the Axes
+ax.plot([1, 2, 3], [4, 5, 2], marker='o', label='Data A')
+
+# 3. Configure the Axes (Anatomy elements)
+ax.set_title("My First OOP Plot", fontsize=16, fontweight='bold')
+ax.set_xlabel("X-Axis (Units)", fontsize=12)
+ax.set_ylabel("Y-Axis (Units)", fontsize=12)
+
+# Set limits and ticks
+ax.set_xlim(0, 4)
+ax.set_ylim(0, 6)
+ax.grid(True, linestyle='--', alpha=0.7)
+
+# 4. Add accessories
+ax.legend(loc='upper right')
+
+# 5. Render or Save
+plt.tight_layout() # Prevent clipping
+plt.show()
+# fig.savefig('my_plot.png', dpi=300)</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 6. BASIC PLOTS ================== -->
@@ -263,6 +381,54 @@
           <strong>Histogram:</strong><br>
           <code>ax.hist(data, bins=30, edgecolor='white', density=True)</code>
         </div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: The Freedman-Diaconis Rule</h3>
+          <p>When you call a histogram without specifying bins, how does the library choose the optimal bin width?
+            Advanced statistical libraries use the Freedman-Diaconis rule, which minimizes the integral of the squared
+            difference between the histogram and the true underlying probability density:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; font-size: 1.1em; color: #e4e6eb;">
+            $$ \text{Bin Width } (h) = 2 \frac{\text{IQR}(x)}{\sqrt[3]{n}} $$
+          </div>
+          <p style="margin-bottom: 0;">Where $\text{IQR}$ is the Interquartile Range and $n$ is the number of
+            observations. Unlike simpler rules (e.g., Sturges' rule), this mathematical method is extremely robust to
+            heavy-tailed distributions and outliers.</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>basic_plots.py - Common Matplotlib Patterns</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import matplotlib.pyplot as plt
+import numpy as np
+
+fig, axs = plt.subplots(1, 2, figsize=(15, 5))
+
+# 1. Scatter Plot (Color & Size mapping)
+x = np.random.randn(100)
+y = x + np.random.randn(100)*0.5
+sizes = np.random.uniform(10, 200, 100)
+colors = x
+
+sc = axs[0].scatter(x, y, s=sizes, c=colors, cmap='viridis', alpha=0.7)
+axs[0].set_title('Scatter Plot')
+fig.colorbar(sc, ax=axs[0], label='Color Value')
+
+# 2. Bar Chart (with Error Bars)
+categories = ['Group A', 'Group B', 'Group C']
+values = [10, 22, 15]
+errors = [1.5, 3.0, 2.0]
+
+axs[1].bar(categories, values, yerr=errors, capsize=5, color='coral', alpha=0.8)
+axs[1].set_title('Bar Chart with Error Bars')
+for i, v in enumerate(values):
+    axs[1].text(i, v + 0.5, str(v), ha='center')
+
+plt.tight_layout()
+plt.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 7. SUBPLOTS ================== -->
@@ -289,6 +455,33 @@
 
         <div class="callout callout--tip">✅ Use plt.tight_layout() or fig.set_constrained_layout(True) to prevent
           overlaps.</div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>subplots.py - Complex Layouts with GridSpec</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import matplotlib.pyplot as plt
+import matplotlib.gridspec as gridspec
+
+fig = plt.figure(figsize=(10, 8))
+gs = gridspec.GridSpec(3, 3, figure=fig)
+
+# 1. Main large plot (spans 2x2 grid)
+ax_main = fig.add_subplot(gs[0:2, 0:2])
+ax_main.set_title('Main View')
+
+# 2. Side plots (Top right, Bottom right)
+ax_side1 = fig.add_subplot(gs[0, 2])
+ax_side2 = fig.add_subplot(gs[1, 2])
+
+# 3. Bottom wide plot (spans 1x3 grid)
+ax_bottom = fig.add_subplot(gs[2, :])
+ax_bottom.set_title('Timeline View')
+
+plt.tight_layout()
+plt.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 8. STYLING ================== -->
@@ -322,6 +515,53 @@
           <strong>Diverging:</strong> coolwarm, RdBu (for +/- deviations)<br>
           <strong>Categorical:</strong> tab10, Set2, Paired (discrete groups)
         </div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: Perceptually Uniform Colors (CIELAB)</h3>
+          <p>Why do we use "viridis" instead of "rainbow" colormaps? A color map is a mathematical function mapping data
+            $f(x) \rightarrow (R, G, B)$. However, standard RGB math doesn't match human perception (Euclidean distance
+            in RGB $\neq$ perceived color distance).</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; font-size: 1.1em; color: #e4e6eb;">
+            $$ \Delta E^* = \sqrt{(\Delta L^*)^2 + (\Delta a^*)^2 + (\Delta b^*)^2} $$
+          </div>
+          <p style="margin-bottom: 0;">Advanced colormaps like <em>viridis</em> are calculated in the <strong>CIELAB
+              ($L^*a^*b^*$) color space</strong>. In this space, the mathematical distance formula $\Delta E^*$
+            perfectly matches how the retina and brain perceive brightness and hue differences, ensuring data is never
+            visually distorted.</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>styling.py - Applying Professional Aesthetics</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import matplotlib.pyplot as plt
+import seaborn as sns
+
+# 1. Apply a global Seaborn theme
+sns.set_theme(style="whitegrid", palette="muted")
+
+# 2. Customize fonts globally
+plt.rcParams.update({
+    'font.family': 'sans-serif',
+    'font.sans-serif': ['Helvetica', 'Arial'],
+    'axes.titleweight': 'bold',
+    'axes.titlesize': 16,
+    'axes.labelsize': 12,
+    'lines.linewidth': 2
+})
+
+# 3. Plotting with the new theme
+fig, ax = plt.subplots(figsize=(8, 5))
+ax.plot([1, 2, 3], [4, 5, 2], label='Data')
+ax.legend()
+
+# 4. Remove top and right spines (cleaner look)
+sns.despine(ax=ax)
+
+plt.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 9. SEABORN INTRO ================== -->
@@ -382,6 +622,55 @@
 
         <div class="callout callout--insight">💡 ECDF (Empirical Cumulative Distribution Function) avoids binning issues
           entirely.</div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: Kernel Density Estimation (KDE)</h3>
+          <p>A KDE plot is not just a smoothed line; it's a mathematical sum of continuous probability distributions
+            (kernels) placed at every single data point $x_i$:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; font-size: 1.1em; color: #e4e6eb;">
+            $$ \hat{f}_h(x) = \frac{1}{n h} \sum_{i=1}^{n} K\left(\frac{x - x_i}{h}\right) $$
+          </div>
+          <p style="margin-bottom: 0;">Here, $K$ is typically the Standard Normal Gaussian density function, and $h$ is
+            the bandwidth parameter. If $h$ is too small, the curve is jagged (overfit); if $h$ is too large, it hides
+            important statistical features (underfit).</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>distributions.py - Visualizing Distributions</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import seaborn as sns
+import matplotlib.pyplot as plt
+
+penguins = sns.load_dataset("penguins")
+
+fig, axes = plt.subplots(1, 2, figsize=(12, 5))
+
+# 1. Histogram + KDE overlay
+sns.histplot(
+    data=penguins, x="flipper_length_mm", hue="species",
+    element="step", stat="density", common_norm=False,
+    ax=axes[0]
+)
+axes[0].set_title("Histogram with Step Fill")
+
+# 2. KDE Plot with Rug Plot
+sns.kdeplot(
+    data=penguins, x="body_mass_g", hue="species",
+    fill=True, common_norm=False, palette="crest",
+    alpha=0.5, linewidth=1.5, ax=axes[1]
+)
+sns.rugplot(
+    data=penguins, x="body_mass_g", hue="species",
+    height=0.05, ax=axes[1]
+)
+axes[1].set_title("KDE Density + Rug Plot")
+
+sns.despine()
+plt.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 11. RELATIONSHIPS ================== -->
@@ -406,6 +695,56 @@
           <code>sns.regplot(data=df, x='x', y='y', scatter_kws={'alpha':0.5})</code><br>
           <code>sns.pairplot(df, hue='species', diag_kind='kde')</code>
         </div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: Ordinary Least Squares (OLS)</h3>
+          <p>When you use <code>sns.regplot</code>, Seaborn calculates the line of best fit by minimizing the sum of the
+            squared residuals ($e_i^2$). The exact matrix algebra closed-form solution for the coefficients
+            $\hat{\boldsymbol{\beta}}$ is:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; font-size: 1.1em; color: #e4e6eb;">
+            $$ \hat{\boldsymbol{\beta}} = (\mathbf{X}^T \mathbf{X})^{-1} \mathbf{X}^T \mathbf{y} $$
+          </div>
+          <p style="margin-bottom: 0;">The shaded region around the line represents the 95% confidence interval, meaning
+            if we resampled the data 100 times, the true regression line would fall inside this shaded band 95 times
+            (usually computed via bootstrapping).</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>relationships.py - Scatter and Regression</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import seaborn as sns
+import matplotlib.pyplot as plt
+
+tips = sns.load_dataset("tips")
+
+# 1. Advanced Scatter (4 dimensions: x, y, color, size)
+plt.figure(figsize=(8, 6))
+sns.scatterplot(
+    data=tips, x="total_bill", y="tip",
+    hue="time", size="size", sizes=(20, 200),
+    palette="deep", alpha=0.8
+)
+plt.title("4D Scatter Plot (Total Bill vs Tip)")
+plt.show()
+
+# 2. Regression Plot with Subplots (Using lmplot)
+# lmplot is a figure-level function that creates multiple subplots automatically
+sns.lmplot(
+    data=tips, x="total_bill", y="tip", col="time", hue="smoker",
+    height=5, aspect=1.2, scatter_kws={'alpha':0.5}
+)
+plt.show()
+
+# 3. Pairplot (Explore all pairwise relationships)
+sns.pairplot(
+    data=tips, hue="smoker",
+    diag_kind="kde", markers=["o", "s"]
+)
+plt.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 12. CATEGORICAL ================== -->
@@ -432,6 +771,56 @@
           • <strong>Violin:</strong> Full distribution shape + summary<br>
           • <strong>Bar:</strong> Mean/count with error bars
         </div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: The IQR Outlier Rule</h3>
+          <p>Box plots identify "outliers" (the individual dots beyond the whiskers) purely mathematically, not
+            visually. They use John Tukey's Interquartile Range (IQR) method:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; color: #e4e6eb;">
+            $$ \text{IQR} = Q_3 - Q_1 $$
+            $$ \text{Lower Fence} = Q_1 - 1.5 \times \text{IQR} $$
+            $$ \text{Upper Fence} = Q_3 + 1.5 \times \text{IQR} $$
+          </div>
+          <p style="margin-bottom: 0;">Any point strictly outside $[Lower, Upper]$ is plotted as an outlier. <strong>Fun
+              Fact:</strong> In a perfectly normal Gaussian distribution $\mathcal{N}(\mu, \sigma^2)$, exactly 0.70% of
+            the data will be incorrectly flagged as outliers by this static math rule!</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>categorical.py - Categories and Factor Variables</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import seaborn as sns
+import matplotlib.pyplot as plt
+
+tips = sns.load_dataset("tips")
+fig, axes = plt.subplots(1, 2, figsize=(14, 6))
+
+# 1. Violin Plot (Distribution density across categories)
+sns.violinplot(
+    data=tips, x="day", y="total_bill", hue="sex",
+    split=True, inner="quart", palette="muted",
+    ax=axes[0]
+)
+axes[0].set_title("Violin Plot (Split by Sex)")
+
+# 2. Boxplot + Swarmplot Overlay
+# Good for showing summary stats PLUS underlying data points
+sns.boxplot(
+    data=tips, x="day", y="total_bill", color="white",
+    width=.5, showfliers=False, ax=axes[1] # hide boxplot outliers to avoid overlap
+)
+sns.swarmplot(
+    data=tips, x="day", y="total_bill", hue="time",
+    size=6, alpha=0.7, ax=axes[1]
+)
+axes[1].set_title("Boxplot + Swarmplot Overlay")
+
+plt.tight_layout()
+plt.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 13. HEATMAPS ================== -->
@@ -458,6 +847,60 @@
         </div>
 
         <div class="callout callout--insight">💡 Clustermap automatically clusters similar rows/columns together.</div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: Correlation Coefficients</h3>
+          <p>Correlation heatmaps display the strength of linear relationships between variables, typically mapping the
+            <strong>Pearson Correlation Coefficient ($r$)</strong> to a discrete color gradient hexbin:
+          </p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; font-size: 1.1em; color: #e4e6eb;">
+            $$ r = \frac{\sum (x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum (x_i - \bar{x})^2 \sum (y_i - \bar{y})^2}} $$
+          </div>
+          <p style="margin-bottom: 0;">For non-linear but monotonic relationships, you should switch pandas to use
+            <strong>Spearman's Rank Correlation ($\rho$)</strong>, which mathematically converts raw values to ranks
+            $R(x_i)$ before applying the same formula. Both map perfectly bounds of $[-1, 1]$.
+          </p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>heatmaps.py - Correlation Matrix</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import seaborn as sns
+import matplotlib.pyplot as plt
+import numpy as np
+
+# Load data and calculate correlation matrix
+penguins = sns.load_dataset("penguins")
+# Select only numerical columns for correlation
+numerical_df = penguins.select_dtypes(include=[np.number]) 
+corr = numerical_df.corr()
+
+# Create a mask for the upper triangle
+mask = np.triu(np.ones_like(corr, dtype=bool))
+
+plt.figure(figsize=(8, 6))
+
+# Draw the heatmap with the mask and correct aspect ratio
+sns.heatmap(
+    corr, 
+    mask=mask, 
+    cmap='coolwarm', 
+    vmax=1, vmin=-1, 
+    center=0,
+    square=True, 
+    linewidths=.5, 
+    annot=True, 
+    fmt=".2f",
+    cbar_kws={"shrink": .8}
+)
+
+plt.title("Penguin Feature Correlation")
+plt.tight_layout()
+plt.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 14. PLOTLY ================== -->
@@ -514,6 +957,31 @@
 
         <div class="callout callout--tip">✅ Hans Rosling's Gapminder is the classic example of animated scatter plots!
         </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>animation_example.py - Gapminder Scatter</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import plotly.express as px
+
+df = px.data.gapminder()
+
+# Plotly makes animations incredibly easy with two arguments:
+# 'animation_frame' (the time dimension) and 'animation_group' (the entity)
+fig = px.scatter(
+    df, 
+    x="gdpPercap", y="lifeExp", 
+    animation_frame="year", animation_group="country",
+    size="pop", color="continent", 
+    hover_name="country",
+    log_x=True, size_max=55, 
+    range_x=[100,100000], range_y=[25,90],
+    title="Global Development 1952 - 2007"
+)
+
+fig.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 16. DASHBOARDS ================== -->
@@ -537,6 +1005,43 @@
         </div>
 
         <div class="callout callout--insight">💡 Streamlit auto-reruns when input changes - no callbacks needed!</div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>app.py - Minimal Streamlit Dashboard</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import streamlit as st
+import pandas as pd
+import plotly.express as px
+
+# 1. Page Configuration
+st.set_page_config(page_title="Sales Dashboard", layout="wide")
+st.title("Interactive Sales Dashboard 📊")
+
+# 2. Sidebar Filters
+st.sidebar.header("Filters")
+category = st.sidebar.selectbox("Select Category", ["Electronics", "Clothing", "Home"])
+min_sales = st.sidebar.slider("Minimum Sales", 0, 1000, 200)
+
+# Mock Data Generation
+df = pd.DataFrame({
+    'Date': pd.date_range(start='2023-01-01', periods=30),
+    'Sales': [x * 10 for x in range(30)],
+    'Category': [category] * 30
+})
+filtered_df = df[df['Sales'] >= min_sales]
+
+# 3. Layout with Columns
+col1, col2 = st.columns(2)
+
+# KPI Metric
+col1.metric("Total Filtered Sales", f"${filtered_df['Sales'].sum()}")
+
+# 4. Insert Plotly Chart
+fig = px.line(filtered_df, x='Date', y='Sales', title=f"{category} Sales Trend")
+col2.plotly_chart(fig, use_container_width=True)</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 17. GEOSPATIAL ================== -->
@@ -561,6 +1066,52 @@
           • <strong>Geopandas + Matplotlib:</strong> Static maps with shapefiles<br>
           • <strong>Kepler.gl:</strong> Large-scale geospatial visualization
         </div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: Geospatial Math</h3>
+          <p>Visualizing data on a map requires mathematically converting a 3D spherical Earth into 2D screen pixels.
+            The <strong>Web Mercator Projection</strong> (used by Google Maps and Plotly) achieves this by preserving
+            angles (conformal) but heavily distorting sizes near the poles:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; font-size: 1.1em; color: #e4e6eb;">
+            $$ x = R \cdot \lambda \qquad y = R \ln\left[\tan\left(\frac{\pi}{4} + \frac{\varphi}{2}\right)\right] $$
+          </div>
+          <p style="margin-bottom: 0;">Furthermore, when calculating distances between two GPS coordinates (e.g., to
+            color a density heatmap), you cannot use straight Euclidean distance $d = \sqrt{x^2+y^2}$. Advanced
+            libraries compute the <strong>Haversine formula</strong> to find the true great-circle distance over the
+            sphere.</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>geospatial.py - Plotly Choropleth</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import plotly.express as px
+
+# Plotly includes built-in geospatial data
+df = px.data.gapminder().query("year==2007")
+
+# Create a choropleth map
+# 'locations' takes ISO-3 country codes by default 
+fig = px.choropleth(
+    df, 
+    locations="iso_alpha",   # Geopolitical boundaries
+    color="lifeExp",         # Data to map to color
+    hover_name="country",    # Tooltip label
+    color_continuous_scale=px.colors.sequential.Plasma,
+    title="Global Life Expectancy (2007)"
+)
+
+# Customize the map projection type
+fig.update_geos(
+    projection_type="orthographic", # "natural earth", "mercator", etc.
+    showcoastlines=True, 
+    coastlinecolor="DarkBlue"
+)
+
+fig.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 18. 3D PLOTS ================== -->
@@ -582,6 +1133,51 @@
         </div>
         <div class="callout callout--tip">✅ Use Plotly for interactive 3D (rotate, zoom) instead of static Matplotlib
           3D.</div>
+
+        <div class="info-card" style="margin-top: 20px; border-left-color: #9900ff;">
+          <h3 style="margin-top: 0; color: #9900ff;">🧠 Under the Hood: 3D Perspective Projection Matrix</h3>
+          <p>To render 3D data $(x, y, z)$ on a 2D screen browser, libraries like Plotly.js apply a <strong>Perspective
+              Projection Matrix</strong>. This creates the optical illusion of depth by scaling $x$ and $y$ inversely
+            with distance $z$:</p>
+          <div
+            style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; text-align: center; margin: 15px 0; overflow-x: auto; color: #e4e6eb;">
+            $$ \begin{bmatrix} x' \\ y' \\ z' \\ w \end{bmatrix} = \begin{bmatrix} \frac{1}{\text{aspect} \cdot
+            \tan(\frac{fov}{2})} & 0 & 0 & 0 \\ 0 & \frac{1}{\tan(\frac{fov}{2})} & 0 & 0 \\ 0 & 0 & \frac{f+n}{f-n} &
+            \frac{-2fn}{f-n} \\ 0 & 0 & 1 & 0 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix} $$
+          </div>
+          <p style="margin-bottom: 0;">Once multiplied out, the final screen coordinates are $(x'/w, y'/w)$. When you
+            rapidly drag to rotate a 3D Plotly graph, your browser's WebGL engine is recalculating this exact matrix
+            millions of times per second to update the viewpoint mapping in real-time!</p>
+        </div>
+
+        <div class="code-block" style="margin-top: 20px;">
+          <div class="code-header">
+            <span>3d_plots.py - Interactive 3D Scatter</span>
+            <button class="copy-btn" onclick="copyCode(this)">Copy</button>
+          </div>
+          <pre><code>import plotly.express as px
+
+# Load Iris dataset
+df = px.data.iris()
+
+# Create interactive 3D scatter plot
+fig = px.scatter_3d(
+    df, 
+    x='sepal_length', 
+    y='sepal_width', 
+    z='petal_width',
+    color='species',
+    size='petal_length', 
+    size_max=18,
+    symbol='species',
+    opacity=0.7,
+    title="Iris 3D Feature Space"
+)
+
+# Tight layout for 3D plot
+fig.update_layout(margin=dict(l=0, r=0, b=0, t=40))
+fig.show()</code></pre>
+        </div>
       </section>
 
       <!-- ====================== 19. STORYTELLING ================== -->