fix: Fixed missing visualization canvases, repaired ML Lab link, and fixed MathJax tab rendering logic.

Visualization/app.js

@@ -1733,6 +1733,258 @@
     ctx.fillText('+45% over Target!', finalX - 65, finalY + 45);
   }
 
+
+  // ==================== SUBPLOTS & LAYOUTS ====================
+  let subplotType = '2x2';
+  function drawSubplots() {
+    const canvas = $('canvas-subplots');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = COLORS.text;
+    ctx.font = '14px Inter, sans-serif';
+    ctx.textAlign = 'center';
+
+    if (subplotType === '2x2') {
+      ctx.fillText('2x2 Grid Layout', canvas.width / 2, 30);
+      drawRect(ctx, 50, 60, 300, 180, COLORS.primary, false);
+      drawRect(ctx, 400, 60, 300, 180, COLORS.secondary, false);
+      drawRect(ctx, 50, 270, 300, 180, COLORS.accent, false);
+      drawRect(ctx, 400, 270, 300, 180, COLORS.success, false);
+      ctx.fillText('ax1', 200, 150); ctx.fillText('ax2', 550, 150);
+      ctx.fillText('ax3', 200, 360); ctx.fillText('ax4', 550, 360);
+    } else if (subplotType === 'uneven') {
+      ctx.fillText('Uneven Grid (1 top, 2 bottom)', canvas.width / 2, 30);
+      drawRect(ctx, 50, 60, 650, 180, COLORS.primary, false);
+      drawRect(ctx, 50, 270, 300, 180, COLORS.secondary, false);
+      drawRect(ctx, 400, 270, 300, 180, COLORS.accent, false);
+      ctx.fillText('ax1 (colspan=2)', 375, 150);
+      ctx.fillText('ax2', 200, 360); ctx.fillText('ax3', 550, 360);
+    } else if (subplotType === 'gridspec') {
+      ctx.fillText('GridSpec Layout (Complex sizing)', canvas.width / 2, 30);
+      drawRect(ctx, 50, 60, 450, 390, COLORS.primary, false);
+      drawRect(ctx, 530, 60, 200, 180, COLORS.secondary, false);
+      drawRect(ctx, 530, 270, 200, 180, COLORS.accent, false);
+      ctx.fillText('Main Plot (3x3 grid, spans 2x3)', 275, 255);
+      ctx.fillText('Side Plot 1', 630, 150);
+      ctx.fillText('Side Plot 2', 630, 360);
+    }
+  }
+
+  // ==================== STYLING & THEMES ====================
+  let styleType = 'default';
+  function drawStyling() {
+    const canvas = $('canvas-styling');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+
+    // Background based on style
+    let bg = '#ffffff';
+    let fg = '#333333';
+    let lineColors = ['#1f77b4', '#ff7f0e', '#2ca02c'];
+
+    if (styleType === 'dark') { bg = '#121212'; fg = '#eeeeee'; lineColors = ['#00d4ff', '#ff5555', '#55ff55']; }
+    else if (styleType === 'seaborn') { bg = '#eaeaf2'; fg = '#222222'; lineColors = ['#4c72b0', '#55a868', '#c44e52']; }
+    else if (styleType === 'ggplot') { bg = '#e5e5e5'; fg = '#555555'; lineColors = ['#f8766d', '#00ba38', '#619cff']; }
+    else if (styleType === '538') { bg = '#f0f0f0'; fg = '#333333'; lineColors = ['#008fd5', '#fc4f30', '#e5ae38']; }
+
+    ctx.fillStyle = bg;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = fg;
+    ctx.font = styleType === '538' ? 'bold 16px Arial' : '14px Inter, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(`${styleType.toUpperCase()} Theme Preview`, canvas.width / 2, 30);
+
+    // Draw generic line chart
+    const startX = 100, endX = 700, baseY = 300;
+
+    // Axes
+    ctx.strokeStyle = (styleType === 'seaborn' || styleType === 'ggplot') ? '#ffffff' : fg;
+    ctx.lineWidth = (styleType === 'seaborn' || styleType === 'ggplot') ? 2 : 1;
+    ctx.beginPath();
+    ctx.moveTo(startX, 50); ctx.lineTo(startX, baseY); ctx.lineTo(endX, baseY);
+    ctx.stroke();
+
+    // Grid
+    ctx.strokeStyle = (styleType === 'dark') ? '#333' : '#ddd';
+    for (let i = 1; i <= 5; i++) {
+      let y = baseY - (i * 50);
+      ctx.beginPath(); ctx.moveTo(startX, y); ctx.lineTo(endX, y); ctx.stroke();
+    }
+
+    // Lines
+    for (let l = 0; l < 3; l++) {
+      ctx.strokeStyle = lineColors[l];
+      ctx.lineWidth = styleType === '538' ? 4 : 2;
+      ctx.beginPath();
+      for (let i = 0; i <= 10; i++) {
+        let x = startX + (i * 60);
+        let y = baseY - 50 - (Math.sin(i * 0.5 + l) * 50) - (l * 40);
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+    }
+  }
+
+  // ==================== SEABORN INTRO ====================
+  function drawSeabornIntro() {
+    const canvas = $('canvas-seaborn-intro');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = COLORS.text;
+    ctx.font = '14px Inter, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('Matplotlib vs Seaborn Comparison', canvas.width / 2, 30);
+
+    // Fake Matplotlib code
+    drawRect(ctx, 50, 60, 300, 200, '#1e293b', true);
+    ctx.fillStyle = '#fff'; ctx.font = '12px Courier'; ctx.textAlign = 'left';
+    ctx.fillText('import matplotlib.pyplot as plt', 60, 80);
+    ctx.fillText('fig, ax = plt.subplots()', 60, 100);
+    ctx.fillText('ax.scatter(df[\'target\'], df[\'value\'])', 60, 120);
+    ctx.fillText('ax.set_title(\'Complex to Style\')', 60, 140);
+
+    // Fake Seaborn
+    drawRect(ctx, 400, 60, 300, 200, '#1e293b', true);
+    ctx.fillStyle = '#fff'; ctx.fillText('import seaborn as sns', 410, 80);
+    ctx.fillText('sns.scatterplot(', 410, 100);
+    ctx.fillText('  data=df, x=\'target\', y=\'value\',', 410, 120);
+    ctx.fillText('  hue=\'category\', style=\'type\')', 410, 140);
+    ctx.fillStyle = COLORS.accent; ctx.fillText('// 1 line creates a styled mapped plot!', 410, 180);
+  }
+
+  // ==================== CATEGORICAL PLOTS ====================
+  let catPlotType = 'boxplot';
+  function drawCategorical() {
+    const canvas = $('canvas-categorical');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    const categories = ['Group A', 'Group B', 'Group C'];
+    const colors = [COLORS.primary, COLORS.accent, COLORS.warning];
+
+    ctx.fillStyle = COLORS.text;
+    ctx.textAlign = 'center';
+    ctx.font = 'bold 14px Inter, sans-serif';
+    ctx.fillText(catPlotType.toUpperCase() + ' PREVIEW', canvas.width / 2, 30);
+
+    const startX = 150;
+    const spacing = 200;
+    const baseY = 320;
+
+    // Axis
+    ctx.strokeStyle = COLORS.textSecondary;
+    ctx.beginPath(); ctx.moveTo(50, baseY); ctx.lineTo(750, baseY); ctx.stroke();
+
+    for (let c = 0; c < 3; c++) {
+      let cx = startX + c * spacing;
+      ctx.fillStyle = COLORS.text;
+      ctx.fillText(categories[c], cx, baseY + 20);
+
+      ctx.fillStyle = colors[c];
+      ctx.strokeStyle = colors[c];
+
+      if (catPlotType === 'boxplot') {
+        // Box
+        ctx.fillRect(cx - 30, baseY - 150 + c * 10, 60, 80);
+        // Whiskers
+        ctx.beginPath();
+        ctx.moveTo(cx, baseY - 150 + c * 10); ctx.lineTo(cx, baseY - 200 + c * 20);
+        ctx.moveTo(cx, baseY - 70 + c * 10); ctx.lineTo(cx, baseY - 30 - c * 10);
+        // Caps
+        ctx.moveTo(cx - 15, baseY - 200 + c * 20); ctx.lineTo(cx + 15, baseY - 200 + c * 20);
+        ctx.moveTo(cx - 15, baseY - 30 - c * 10); ctx.lineTo(cx + 15, baseY - 30 - c * 10);
+        ctx.stroke();
+        // Median (black line)
+        ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
+        ctx.beginPath(); ctx.moveTo(cx - 30, baseY - 110 + c * 10); ctx.lineTo(cx + 30, baseY - 110 + c * 10); ctx.stroke();
+      } else if (catPlotType === 'violinplot') {
+        ctx.beginPath();
+        ctx.moveTo(cx, baseY - 50);
+        ctx.bezierCurveTo(cx - 50, baseY - 100, cx - 70, baseY - 180, cx, baseY - 230);
+        ctx.bezierCurveTo(cx + 70, baseY - 180, cx + 50, baseY - 100, cx, baseY - 50);
+        ctx.globalAlpha = 0.5; ctx.fill(); ctx.globalAlpha = 1;
+        ctx.stroke();
+      } else if (catPlotType === 'barplot') {
+        let h = 150 + c * 30;
+        ctx.fillRect(cx - 40, baseY - h, 80, h);
+        // Error bar
+        ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
+        ctx.beginPath(); ctx.moveTo(cx, baseY - h - 20); ctx.lineTo(cx, baseY - h + 20);
+        ctx.moveTo(cx - 10, baseY - h - 20); ctx.lineTo(cx + 10, baseY - h - 20);
+        ctx.moveTo(cx - 10, baseY - h + 20); ctx.lineTo(cx + 10, baseY - h + 20);
+        ctx.stroke();
+      } else if (catPlotType === 'stripplot' || catPlotType === 'swarmplot') {
+        ctx.globalAlpha = 0.6;
+        for (let i = 0; i < 40; i++) {
+          let y = baseY - 50 - Math.random() * 150;
+          let x = (catPlotType === 'swarmplot') ? cx + (Math.sin(y) * 30 * Math.random()) : cx - 30 + Math.random() * 60;
+          ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI * 2); ctx.fill();
+        }
+        ctx.globalAlpha = 1;
+      }
+    }
+  }
+
+  // ==================== PLOTLY & DASHBOARDS ====================
+  function drawPlotly() {
+    const canvas = $('canvas-plotly');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = '#1e293b';
+    ctx.fillRect(40, 40, canvas.width - 80, canvas.height - 80);
+    ctx.fillStyle = COLORS.cyan || '#06b6d4';
+    ctx.font = '16px Inter'; ctx.textAlign = 'center';
+    ctx.fillText('Plotly / Interactive Charts Visualization', canvas.width / 2, 80);
+    ctx.font = '12px Inter';
+    ctx.fillText('Hover tooltips, zooming, and panning enabled out of the box.', canvas.width / 2, 100);
+
+    // Draw a fake cursor and tooltip
+    ctx.beginPath(); ctx.arc(400, 200, 8, 0, Math.PI * 2); ctx.fillStyle = COLORS.orange; ctx.fill();
+    ctx.fillStyle = '#fff'; ctx.fillRect(415, 175, 100, 50);
+    ctx.fillStyle = '#000'; ctx.fillText('X: 2024-01-01', 465, 195);
+    ctx.fillText('Y: $450.2K', 465, 215);
+  }
+
+  function drawDashboard() {
+    const canvas = $('canvas-dashboard');
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = COLORS.text;
+    ctx.font = '16px Inter'; ctx.textAlign = 'center';
+    ctx.fillText('Streamlit Dashboard Architecture', canvas.width / 2, 30);
+
+    drawRect(ctx, 100, 60, 200, 250, '#1e293b', true);
+    ctx.fillStyle = '#fff'; ctx.fillText('Sidebar / Inputs', 200, 90);
+    drawRect(ctx, 120, 120, 160, 30, '#334155', true);
+    drawRect(ctx, 120, 170, 160, 30, '#334155', true);
+
+    drawRect(ctx, 350, 60, 400, 250, '#0f172a', true);
+    ctx.fillStyle = COLORS.cyan || '#06b6d4'; ctx.fillText('Main Chart Area', 550, 90);
+    ctx.beginPath(); ctx.arc(550, 180, 50, 0, Math.PI * 2); ctx.strokeStyle = COLORS.accent; ctx.lineWidth = 15; ctx.stroke();
+  }
+
+  function drawRect(ctx, x, y, width, height, color, filled = true) {
+    if (filled) {
+      ctx.fillStyle = color;
+      ctx.fillRect(x, y, width, height);
+    } else {
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 2;
+      ctx.strokeRect(x, y, width, height);
+    }
+  }
+
   // ==================== EVENT LISTENERS ====================
   function bindEvents() {
     // Perception buttons
@@ -1740,6 +1992,25 @@
     $('btn-color')?.addEventListener('click', () => { perceptionMode = 'color'; drawPerception(); });
     $('btn-size')?.addEventListener('click', () => { perceptionMode = 'size'; drawPerception(); });
 
+
+    // Subplots
+    $('btn-grid-2x2')?.addEventListener('click', () => { subplotType = '2x2'; drawSubplots(); });
+    $('btn-grid-uneven')?.addEventListener('click', () => { subplotType = 'uneven'; drawSubplots(); });
+    $('btn-gridspec')?.addEventListener('click', () => { subplotType = 'gridspec'; drawSubplots(); });
+
+    // Styling
+    $('btn-style-default')?.addEventListener('click', () => { styleType = 'default'; drawStyling(); });
+    $('btn-style-seaborn')?.addEventListener('click', () => { styleType = 'seaborn'; drawStyling(); });
+    $('btn-style-ggplot')?.addEventListener('click', () => { styleType = 'ggplot'; drawStyling(); });
+    $('btn-style-dark')?.addEventListener('click', () => { styleType = 'dark'; drawStyling(); });
+    $('btn-style-538')?.addEventListener('click', () => { styleType = '538'; drawStyling(); });
+
+    // Categorical
+    $('btn-stripplot')?.addEventListener('click', () => { catPlotType = 'stripplot'; drawCategorical(); });
+    $('btn-swarmplot')?.addEventListener('click', () => { catPlotType = 'swarmplot'; drawCategorical(); });
+    $('btn-boxplot')?.addEventListener('click', () => { catPlotType = 'boxplot'; drawCategorical(); });
+    $('btn-violinplot')?.addEventListener('click', () => { catPlotType = 'violinplot'; drawCategorical(); });
+    $('btn-barplot')?.addEventListener('click', () => { catPlotType = 'barplot'; drawCategorical(); });
     // Chart choosing buttons
     $('btn-comparison')?.addEventListener('click', () => { chartPurpose = 'comparison'; drawChoosingCharts(); });
     $('btn-composition')?.addEventListener('click', () => { chartPurpose = 'composition'; drawChoosingCharts(); });
@@ -1806,6 +2077,13 @@
     bindEvents();
 
     // Draw all initial visualizations
+
+    drawSubplots();
+    drawStyling();
+    drawSeabornIntro();
+    drawCategorical();
+    drawPlotly();
+    drawDashboard();
     drawAnscombe();
     perceptionMode = 'position';
     drawPerception();

Visualization/index.html

@@ -9,6 +9,13 @@
 
   <!-- MathJax for rendering LaTeX formulas -->
   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script>
+    MathJax = {
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']]
+      }
+    };
+  </script>
   <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 </head>
 

index.html

@@ -681,7 +681,8 @@
                 </a>
 
                 <!-- ML Lab -->
-                <a href="ML/index.html" class="module-card module-ml">
+                <a href="https://github.com/aashishgarg13/DataScience/tree/main/ML" target="_blank"
+                    class="module-card module-ml">
                     <div class="module-card-header">
                         <span class="badge badge-ml">Lab</span>
                     </div>

math-ds-complete/app.js

@@ -113,6 +113,11 @@ function switchSubject(subject) {
             }, 100);
         }
     }
+
+    // Force MathJax to re-typeset formulas in the newly visible section
+    if (window.MathJax && window.MathJax.typesetPromise) {
+        window.MathJax.typesetPromise().catch((err) => console.log('MathJax typeset failed: ', err));
+    }
 }
 
 // ===== NAVIGATION =====