Add Fourier & linear pages; unify styles

Add new Fourier Transform and Linear Regression HTML pages with their page-specific CSS and JS, and register shared utilities in a new src/js/common.js. Refactor global styling (src/css/style.css) to a unified design system, remove legacy src/css/inverse_style.css, and add page CSS for fourier and linear-regression. Update direct_classifier.html and inverse_classifier.html titles/labels and include common.js, and update README to document new pages, structure, usage and bump project version to 0.2.0.

README.md

@@ -1,74 +1,102 @@
 ---
----
-title: School of Statistics - Interactive Classification Dashboards
-emoji: 📊
+title: School of Statistics
 colorFrom: blue
 colorTo: indigo
 sdk: static
 pinned: false
 ---
 
-# School of Statistics - Interactive Classification Dashboards
-
-![Logo](./src/assets/logo.jpg)
+# School of Statistics
 
-Welcome to the Interactive Classification Dashboards project! This repository contains a set of tools designed to help users understand the core concepts of binary classification in machine learning through hands-on, visual interaction.
+Interactive visualizations for exploring statistical and machine learning concepts. Each page runs entirely in the browser (HTML, CSS, JavaScript with Chart.js) without requiring a server or build step.
 
-## 🚀 About This Project
+## Available Pages
 
-### 🌐 Live Demos
+### Classification
 
-*   **[Direct Classification Dashboard](https://berangerthomas.github.io/SchoolOfStatistics/direct_classifier.html)**
-*   **[Inverse Classification Dashboard](https://berangerthomas.github.io/SchoolOfStatistics/inverse_classifier.html)**
+| Page | Description |
+|------|-------------|
+| [Direct Classification](https://berangerthomas.github.io/SchoolOfStatistics/direct_classifier.html) | Generate synthetic 2D datasets and observe how class separation affects Gaussian Naive Bayes classifier performance. Displays ROC curve, AUC, confusion matrix, and standard metrics (accuracy, precision, recall, specificity, F1-score). |
+| [Inverse Classification](https://berangerthomas.github.io/SchoolOfStatistics/inverse_classifier.html) | Directly set confusion matrix values (TP, FP, TN, FN) and observe resulting metrics, ROC curve, and simulated score distributions. Parameters can be locked to constrain totals. |
 
-This project provides two distinct interactive dashboards:
+### Regression
 
-1.  **Direct Classification Dashboard (`direct_classifier.html`)** : This tool allows you to generate a synthetic 2D dataset for two classes. You can adjust the **class separation** and **data spread (standard deviation)** to see how these parameters affect the performance of a Gaussian Naive Bayes classifier. The dashboard visualizes:
-    *   The generated data points.
-    *   The resulting ROC curve and its Area Under the Curve (AUC).
-    *   Key performance metrics (Accuracy, Precision, Recall, etc.).
-    *   A detailed confusion matrix.
+| Page | Description |
+|------|-------------|
+| [Linear Regression](https://berangerthomas.github.io/SchoolOfStatistics/linear_regression.html) | Interactive point placement on canvas with linear or polynomial regression fitting. Displays residuals, coefficient of determination (R²), and regression diagnostics. Supports zoom, point dragging, and confidence band display. |
 
-2.  **Inverse Classification Dashboard (`inverse_classifier.html`)** : This tool works in reverse. Instead of generating data, you directly manipulate the values of the **confusion matrix** (True Positives, False Positives, True Negatives, and False Negatives). The application then simulates a distribution of classifier scores that would lead to your specified matrix and visualizes the resulting metrics, ROC curve, and score distribution. This provides a unique, intuitive way to understand the relationships between the confusion matrix and other performance indicators.
+### Signal Processing
 
-## 📂 Project Structure
+| Page | Description |
+|------|-------------|
+| [Fourier Transform](https://berangerthomas.github.io/SchoolOfStatistics/fourier_transform.html) | Compose signals from sine waves and visualize their frequency spectrum. Up to 4 components with frequency, amplitude, and phase control. Displays time-domain signal, magnitude spectrum, phase spectrum, and signal metrics (sampling rate, Nyquist frequency, frequency resolution, total power, RMS). |
 
-The project has been organized into a clean and maintainable structure:
+## Project Structure
 
 ```
 .
-├── direct_classifier.html
-├── inverse_classifier.html
+├── direct_classifier.html          # Direct classification (Naive Bayes)
+├── inverse_classifier.html         # Inverse classification (confusion matrix)
+├── logistic_regression.html        # Logistic regression
+├── linear_regression.html          # Linear/polynomial regression
+├── fourier_transform.html          # Fourier transform
+├── embedding_distances.html        # Embedding space distances
+├── IDEAS.md                        # Specifications for planned pages
+├── CHANGELOG.md                    # Version history
 ├── LICENSE
 ├── README.md
-└── src
-    ├── assets
+└── src/
+    ├── assets/
     │   └── logo.jpg
-    ├── css
-    │   ├── inverse_style.css
-    │   └── style.css
-    └── js
+    ├── css/
+    │   ├── style.css               # Shared base styles
+    │   ├── direct_classifier.css   # Page-specific styles
+    │   ├── embedding_distances.css
+    │   ├── fourier_transform.css
+    │   ├── linear_regression.css
+    │   └── logistic_regression.css
+    └── js/
+        ├── common.js               # Shared utilities (metrics, ROC, matrices, drag, etc.)
         ├── direct_classifier.js
-        └── inverse_classifier.js
+        ├── embedding_distances.js
+        ├── fourier_transform.js
+        ├── inverse_classifier.js
+        ├── linear_regression.js
+        └── logistic_regression.js
 ```
 
-*   **`direct_classifier.html`**: The main page for the direct classification tool.
-*   **`inverse_classifier.html`**: The main page for the inverse classification tool.
-*   **`src/`**: Contains all source assets.
-    *   **`assets/`**: Stores static assets like the project logo.
-    *   **`css/`**: Contains the stylesheets for the HTML pages.
-    *   **`js/`**: Contains the JavaScript logic for each interactive dashboard.
-*   **`LICENSE`**: The project's license file.
-*   **`README.md`**: This file.
+## Usage
+
+1. Clone the repository.
+2. Open any `.html` file in a web browser.
+
+No dependencies to install — all libraries are loaded via CDN.
+
+## Versioning
+
+This project follows [Semantic Versioning](https://semver.org/). See [CHANGELOG.md](CHANGELOG.md) for release history.
+
+Current version: **0.2.0**
+
+## Roadmap
 
-## 🛠️ How to Use
+Detailed specifications for planned pages are documented in `IDEAS.md`.
 
-1.  Clone this repository to your local machine.
-2.  Open either `direct_classifier.html` or `inverse_classifier.html` in your web browser.
-3.  No local server is needed! All the logic is self-contained in the HTML, CSS, and JavaScript files.
+### À venir
 
-Interact with the sliders and controls on each page to explore the concepts of classification.
+- **Bias-Variance Tradeoff Explorer**: visualize bias-variance decomposition with polynomial fitting of increasing degree
+- **k-Nearest Neighbors Playground**: interactive point placement and k-NN decision boundary visualization
+- **Gradient Descent Visualizer**: real-time navigation on 2D loss surfaces, optimizer comparison
+- **Principal Component Analysis (PCA) Step-by-Step**: Gaussian cloud generation and principal component visualization
+- **Clustering Algorithms Visualizer**: k-Means and DBSCAN comparison on various dataset shapes
+- **Neural Network Architecture & Forward Pass Visualizer**: layer-by-layer fully-connected network construction
+- **Tokenization & Embedding Visualizer**: tokenization and 2D embedding space projection
+- **Attention Mechanism Visualizer**: Transformer attention mechanism visualization
+- **Probability Distributions Explorer**: exploration of standard distributions (Normal, Uniform, Exponential, Poisson, Binomial, Beta, Gamma, Chi-squared)
+- **Markov Chain Text Generator**: Markov chain construction and text generation
+- **A/B Testing Calculator**: statistical tool for hypothesis testing
+- **Voice Signal Waveform Analyzer**: audio recording, waveform display, spectrogram computation, and dominant frequency identification
 
-## 📄 License
+## License
 
-This project is distributed under the terms of the license specified in the `LICENSE` file.
+See the [LICENSE](LICENSE) file.

direct_classifier.html

@@ -4,17 +4,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pro Classification Dashboard</title>
+    <title>Direct Classification Dashboard</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
     <link rel="stylesheet" href="src/css/style.css">
 </head>
 
 <body>
     <div class="container">
-        <h1>Pro Classification Dashboard</h1>
+        <h1>Direct Classification Dashboard</h1>
 
         <div class="floating-controls" id="floatingControls">
-            <div class="controls-title" id="controlsTitle">🎛️ Data Controls</div>
+            <div class="controls-title" id="controlsTitle">Data Controls</div>
             <div class="controls-grid">
                 <div class="control-group">
                     <label for="separationSlider" class="control-label">Class Separation</label>
@@ -31,15 +31,15 @@
 
         <div class="charts-container">
             <div class="chart-card">
-                <div class="chart-title">🎯 ROC Curve & AUC</div>
+                <div class="chart-title">ROC Curve & AUC</div>
                 <div class="chart-container"><canvas id="rocChart"></canvas></div>
             </div>
             <div class="chart-card">
-                <div class="chart-title">📈 Performance Metrics</div>
+                <div class="chart-title">Performance Metrics</div>
                 <div class="chart-container"><canvas id="metricsChart"></canvas></div>
             </div>
             <div class="chart-card">
-                <div class="chart-title">📋 Confusion Matrix</div>
+                <div class="chart-title">Confusion Matrix</div>
                 <div class="confusion-matrix-layout">
                     <div class="matrix-ylabel">TRUE class</div>
                     <div class="matrix-canvas-container">
@@ -49,7 +49,7 @@
                 </div>
             </div>
             <div class="chart-card">
-                <div class="chart-title">📊 Data Distribution</div>
+                <div class="chart-title">Data Distribution</div>
                 <div class="chart-container"><canvas id="dataChart"></canvas></div>
             </div>
         </div>
@@ -61,6 +61,7 @@
             rel="noopener noreferrer">Project's GitHub</a>
     </footer>
 
+    <script src="src/js/common.js"></script>
     <script src="src/js/direct_classifier.js"></script>
 </body>
 

fourier_transform.html

@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fourier Transform Visualizer</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <link rel="stylesheet" href="src/css/style.css">
+    <link rel="stylesheet" href="src/css/fourier_transform.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Fourier Transform Visualizer</h1>
+        <p class="subtitle">Compose signals from sine waves and visualize their frequency spectrum</p>
+
+        <div class="floating-controls" id="floatingControls">
+            <div class="controls-title" id="controlsTitle">Signal Controls</div>
+            <div class="controls-grid">
+                <!-- Wave 1 -->
+                <div class="wave-section">
+                    <div class="wave-header">
+                        <label class="control-label">
+                            <input type="checkbox" id="enableWave1" class="checkbox-input" checked>
+                            Wave 1
+                        </label>
+                        <span class="wave-color" style="background-color: #1976d2;"></span>
+                    </div>
+                    <div class="control-group">
+                        <label for="freq1" class="control-label">Frequency (Hz)</label>
+                        <input type="range" min="0" max="50" value="5" step="1" class="slider" id="freq1">
+                        <div class="slider-value" id="freq1Value">5 Hz</div>
+                    </div>
+                    <div class="control-group">
+                        <label for="amp1" class="control-label">Amplitude</label>
+                        <input type="range" min="0" max="10" value="5" step="0.1" class="slider" id="amp1">
+                        <div class="slider-value" id="amp1Value">5.0</div>
+                    </div>
+                    <div class="control-group">
+                        <label for="phase1" class="control-label">Phase (°)</label>
+                        <input type="range" min="0" max="360" value="0" step="15" class="slider" id="phase1">
+                        <div class="slider-value" id="phase1Value">0°</div>
+                    </div>
+                </div>
+
+                <!-- Wave 2 -->
+                <div class="wave-section">
+                    <div class="wave-header">
+                        <label class="control-label">
+                            <input type="checkbox" id="enableWave2" class="checkbox-input" checked>
+                            Wave 2
+                        </label>
+                        <span class="wave-color" style="background-color: #d32f2f;"></span>
+                    </div>
+                    <div class="control-group">
+                        <label for="freq2" class="control-label">Frequency (Hz)</label>
+                        <input type="range" min="0" max="50" value="15" step="1" class="slider" id="freq2">
+                        <div class="slider-value" id="freq2Value">15 Hz</div>
+                    </div>
+                    <div class="control-group">
+                        <label for="amp2" class="control-label">Amplitude</label>
+                        <input type="range" min="0" max="10" value="3" step="0.1" class="slider" id="amp2">
+                        <div class="slider-value" id="amp2Value">3.0</div>
+                    </div>
+                    <div class="control-group">
+                        <label for="phase2" class="control-label">Phase (°)</label>
+                        <input type="range" min="0" max="360" value="90" step="15" class="slider" id="phase2">
+                        <div class="slider-value" id="phase2Value">90°</div>
+                    </div>
+                </div>
+
+                <!-- Wave 3 -->
+                <div class="wave-section">
+                    <div class="wave-header">
+                        <label class="control-label">
+                            <input type="checkbox" id="enableWave3" class="checkbox-input">
+                            Wave 3
+                        </label>
+                        <span class="wave-color" style="background-color: #388e3c;"></span>
+                    </div>
+                    <div class="control-group">
+                        <label for="freq3" class="control-label">Frequency (Hz)</label>
+                        <input type="range" min="0" max="50" value="25" step="1" class="slider" id="freq3">
+                        <div class="slider-value" id="freq3Value">25 Hz</div>
+                    </div>
+                    <div class="control-group">
+                        <label for="amp3" class="control-label">Amplitude</label>
+                        <input type="range" min="0" max="10" value="0" step="0.1" class="slider" id="amp3">
+                        <div class="slider-value" id="amp3Value">0.0</div>
+                    </div>
+                    <div class="control-group">
+                        <label for="phase3" class="control-label">Phase (°)</label>
+                        <input type="range" min="0" max="360" value="0" step="15" class="slider" id="phase3">
+                        <div class="slider-value" id="phase3Value">0°</div>
+                    </div>
+                </div>
+
+                <!-- Wave 4 -->
+                <div class="wave-section">
+                    <div class="wave-header">
+                        <label class="control-label">
+                            <input type="checkbox" id="enableWave4" class="checkbox-input">
+                            Wave 4
+                        </label>
+                        <span class="wave-color" style="background-color: #f57c00;"></span>
+                    </div>
+                    <div class="control-group">
+                        <label for="freq4" class="control-label">Frequency (Hz)</label>
+                        <input type="range" min="0" max="50" value="35" step="1" class="slider" id="freq4">
+                        <div class="slider-value" id="freq4Value">35 Hz</div>
+                    </div>
+                    <div class="control-group">
+                        <label for="amp4" class="control-label">Amplitude</label>
+                        <input type="range" min="0" max="10" value="0" step="0.1" class="slider" id="amp4">
+                        <div class="slider-value" id="amp4Value">0.0</div>
+                    </div>
+                    <div class="control-group">
+                        <label for="phase4" class="control-label">Phase (°)</label>
+                        <input type="range" min="0" max="360" value="0" step="15" class="slider" id="phase4">
+                        <div class="slider-value" id="phase4Value">0°</div>
+                    </div>
+                </div>
+
+                <!-- Global Settings -->
+                <div class="wave-section" style="border-top: 2px solid var(--color-border); padding-top: var(--space-md); margin-top: var(--space-md);">
+                    <div class="control-group">
+                        <label for="numSamples" class="control-label">Samples (N)</label>
+                        <input type="range" min="64" max="512" value="256" step="1" class="slider" id="numSamples">
+                        <div class="slider-value" id="numSamplesValue">256</div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label">
+                            <input type="checkbox" id="addNoise" class="checkbox-input">
+                            Add Gaussian Noise
+                        </label>
+                    </div>
+                    <div class="control-group" id="noiseLevelGroup" style="opacity: 0.4;">
+                        <label for="noiseLevel" class="control-label">Noise Level (σ)</label>
+                        <input type="range" min="0.1" max="3" value="0.5" step="0.1" class="slider" id="noiseLevel" disabled>
+                        <div class="slider-value" id="noiseLevelValue">0.5</div>
+                    </div>
+                </div>
+
+                <div class="chart-hint" style="margin-top: 8px; font-size: 0.7rem; color: var(--color-text-muted);">
+                    💡 Combine up to 4 sine waves to create complex signals
+                </div>
+            </div>
+        </div>
+
+        <div class="charts-container">
+            <!-- Time Domain Chart -->
+            <div class="chart-card" style="grid-column: span 2;">
+                <div class="chart-title">Time Domain Signal</div>
+                <div class="chart-container" style="height: 300px;">
+                    <canvas id="timeDomainChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Magnitude Spectrum -->
+            <div class="chart-card">
+                <div class="chart-title">Magnitude Spectrum |X(f)|</div>
+                <div class="chart-container" style="height: 280px;">
+                    <canvas id="magnitudeChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Phase Spectrum -->
+            <div class="chart-card" id="phaseCard">
+                <div class="chart-title">Phase Spectrum ∠X(f)</div>
+                <div class="chart-container" style="height: 280px;">
+                    <canvas id="phaseChart"></canvas>
+                </div>
+            </div>
+
+            <!-- Signal Info -->
+            <div class="chart-card" style="grid-column: span 2;">
+                <div class="chart-title">Signal Information</div>
+                <div class="metrics-display" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md);">
+                    <div class="metric-item">
+                        <span class="metric-label">Sampling Rate (Fs)</span>
+                        <span class="metric-value" id="samplingRate">-</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Nyquist Frequency</span>
+                        <span class="metric-value" id="nyquistFreq">-</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Frequency Resolution (Δf)</span>
+                        <span class="metric-value" id="freqResolution">-</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Signal Duration</span>
+                        <span class="metric-value" id="signalDuration">-</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">Total Power</span>
+                        <span class="metric-value" id="totalPower">-</span>
+                    </div>
+                    <div class="metric-item">
+                        <span class="metric-label">RMS Amplitude</span>
+                        <span class="metric-value" id="rmsAmplitude">-</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer>
+        <a href="https://github.com/berangerthomas/SchoolOfStatistics" target="_blank"
+            rel="noopener noreferrer">Project's GitHub</a>
+    </footer>
+
+    <script src="src/js/common.js"></script>
+    <script src="src/js/fourier_transform.js"></script>
+</body>
+
+</html>

inverse_classifier.html

@@ -4,17 +4,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Interactive Classification Dashboard</title>
+    <title>Inverse Classification Dashboard</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
-    <link rel="stylesheet" href="src/css/inverse_style.css">
+    <link rel="stylesheet" href="src/css/style.css">
 </head>
 
 <body>
     <div class="container">
-        <h1>Interactive Classification Dashboard</h1>
+        <h1>Inverse Classification Dashboard</h1>
 
         <div class="floating-controls" id="floatingControls">
-            <div class="controls-title" id="controlsTitle">🎛️ Result Controls</div>
+            <div class="controls-title" id="controlsTitle">Confusion Matrix Controls</div>
             <div class="matrix-grid">
                 <div class="control-group">
                     <div class="control-label">False Negatives (FN) <span class="lock-toggle" data-param="fn">🔓</span>
@@ -45,15 +45,15 @@
 
         <div class="charts-container">
             <div class="chart-card">
-                <div class="chart-title">🎯 ROC Curve & AUC</div>
+                <div class="chart-title">ROC Curve & AUC</div>
                 <div class="chart-container"><canvas id="rocChart"></canvas></div>
             </div>
             <div class="chart-card">
-                <div class="chart-title">📈 Performance Metrics</div>
+                <div class="chart-title">Performance Metrics</div>
                 <div class="chart-container"><canvas id="metricsChart"></canvas></div>
             </div>
             <div class="chart-card">
-                <div class="chart-title">📋 Confusion Matrix</div>
+                <div class="chart-title">Confusion Matrix</div>
                 <div class="confusion-matrix-layout">
                     <div class="matrix-ylabel">TRUE class</div>
                     <div class="matrix-canvas-container">
@@ -63,7 +63,7 @@
                 </div>
             </div>
             <div class="chart-card">
-                <div class="chart-title">📊 Classifier Scores Distribution</div>
+                <div class="chart-title">Classifier Scores Distribution</div>
                 <div class="chart-container"><canvas id="scoresChart"></canvas></div>
             </div>
         </div>
@@ -75,6 +75,7 @@
             rel="noopener noreferrer">Project's GitHub</a>
     </footer>
 
+    <script src="src/js/common.js"></script>
     <script src="src/js/inverse_classifier.js"></script>
 </body>
 

linear_regression.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Linear Regression Playground</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
+    <link rel="stylesheet" href="src/css/style.css">
+    <link rel="stylesheet" href="src/css/linear_regression.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Linear Regression Playground</h1>
+
+        <div class="floating-controls" id="floatingControls">
+            <div class="controls-title" id="controlsTitle">Regression Controls</div>
+            <div class="controls-grid">
+                <div class="control-group">
+                    <label for="degreeSlider" class="control-label">Polynomial Degree</label>
+                    <input type="range" min="1" max="10" value="1" step="1" class="slider" id="degreeSlider">
+                    <div class="slider-value" id="degreeValue">1</div>
+                </div>
+                <div class="control-group">
+                    <label class="control-label">
+                        <input type="checkbox" id="showResiduals" class="checkbox-input">
+                        Show Residuals
+                    </label>
+                </div>
+                <div class="control-group">
+                    <label class="control-label">
+                        <input type="checkbox" id="showConfidence" class="checkbox-input">
+                        Show Confidence Band (±2σ)
+                    </label>
+                </div>
+                <div class="control-group">
+                    <button id="clearPointsBtn" class="button-start">Clear All Points</button>
+                </div>
+                <div class="control-group">
+                    <button id="addRandomBtn" class="button-start" style="background-color: var(--color-accent);">Add 5 Random Points</button>
+                </div>
+                <div class="control-group">
+                    <button id="resetZoomBtn" class="button-start" style="background-color: #757575;">↺ Reset Zoom</button>
+                </div>
+                <div class="chart-hint" style="margin-top: 8px; font-size: 0.7rem; color: var(--color-text-muted);">
+                    💡 Roulette souris : zoomer/dézoomer
+                </div>
+            </div>
+            <div class="chart-hint" style="margin-top: 16px; font-size: 0.75rem;">
+                <strong>How to use:</strong><br>
+                • Click on the main chart to add points<br>
+                • Right-click a point to remove it<br>
+                • Drag a point to move it
+            </div>
+        </div>
+
+        <div class="charts-container">
+            <div class="chart-card" style="grid-column: span 2;">
+                <div class="chart-title">Data & Regression Fit</div>
+                <div class="chart-container" style="height: 350px;">
+                    <canvas id="mainChart"></canvas>
+                </div>
+            </div>
+            <div class="chart-card">
+                <div class="chart-title">Residual Plot</div>
+                <div class="chart-container">
+                    <canvas id="residualChart"></canvas>
+                </div>
+            </div>
+            <div class="chart-card">
+                <div class="chart-title">Statistics</div>
+                <div class="metrics-display">
+                    <div class="metric-item" title="Proportion of variance explained by the model">
+                        <span class="metric-label">R² (Coefficient of Determination)</span>
+                        <span class="metric-value" id="r2Value">-</span>
+                    </div>
+                    <div class="metric-item" title="R² adjusted for the number of predictors">
+                        <span class="metric-label">Adjusted R²</span>
+                        <span class="metric-value" id="adjustedR2Value">-</span>
+                    </div>
+                    <div class="metric-item" title="Mean Squared Error">
+                        <span class="metric-label">MSE</span>
+                        <span class="metric-value" id="mseValue">-</span>
+                    </div>
+                    <div class="metric-item" title="Mean Absolute Error">
+                        <span class="metric-label">MAE</span>
+                        <span class="metric-value" id="maeValue">-</span>
+                    </div>
+                    <div class="metric-item" title="Number of data points">
+                        <span class="metric-label">Number of Points</span>
+                        <span class="metric-value" id="nPointsValue">-</span>
+                    </div>
+                    <div class="metric-item" title="Root Mean Squared Error">
+                        <span class="metric-label">RMSE</span>
+                        <span class="metric-value" id="rmseValue">-</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <footer>
+        <a href="https://github.com/berangerthomas/SchoolOfStatistics" target="_blank"
+            rel="noopener noreferrer">Project's GitHub</a>
+    </footer>
+
+    <script src="src/js/common.js"></script>
+    <script src="src/js/linear_regression.js"></script>
+</body>
+
+</html>

src/css/fourier_transform.css

@@ -0,0 +1,101 @@
+/* ============================================================
+   Fourier Transform Visualizer - Specific Styles
+   ============================================================ */
+
+/* Wave Section Styling */
+.wave-section {
+    background: var(--color-surface-alt);
+    border-radius: var(--radius-md);
+    padding: var(--space-md);
+    margin-bottom: var(--space-md);
+}
+
+.wave-section:last-child {
+    margin-bottom: 0;
+}
+
+.wave-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-sm);
+}
+
+.wave-header .control-label {
+    margin-bottom: 0;
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+
+.wave-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: inline-block;
+    border: 2px solid var(--color-surface);
+    box-shadow: var(--shadow-sm);
+}
+
+/* Checkbox input styling */
+.checkbox-input {
+    margin-right: var(--space-sm);
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--color-accent);
+}
+
+/* Disabled wave section styling */
+.wave-section.disabled {
+    opacity: 0.5;
+}
+
+.wave-section.disabled .slider {
+    pointer-events: none;
+}
+
+/* Control group spacing in wave sections */
+.wave-section .control-group {
+    margin-bottom: var(--space-sm);
+}
+
+.wave-section .control-group:last-child {
+    margin-bottom: 0;
+}
+
+/* Phase spectrum card transition */
+#phaseCard {
+    transition: opacity var(--transition-normal);
+}
+
+/* Metrics display enhancements */
+.metrics-display .metric-item {
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-surface);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border);
+}
+
+/* Frequency value styling */
+#freq1Value, #freq2Value, #freq3Value, #freq4Value {
+    color: var(--color-accent);
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .metrics-display {
+        grid-template-columns: 1fr !important;
+    }
+}
+
+@media (max-width: 600px) {
+    .wave-section {
+        padding: var(--space-sm);
+    }
+    
+    .metrics-display .metric-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-xs);
+    }
+}

src/css/inverse_style.css

@@ -1,237 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
-    padding: 20px;
-}
-
-.container {
-    max-width: 1400px;
-    margin: 0 auto;
-}
-
-h1 {
-    text-align: center;
-    color: white;
-    margin-bottom: 30px;
-    font-size: 2.5em;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.floating-controls {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    background: rgba(255, 255, 255, 0.65);
-    backdrop-filter: blur(20px);
-    border-radius: 15px;
-    padding: 20px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    z-index: 1000;
-    width: 320px;
-}
-
-.controls-title {
-    text-align: center;
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 15px;
-    color: #333;
-    cursor: grab;
-}
-
-.controls-title:active {
-    cursor: grabbing;
-}
-
-.matrix-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 15px;
-    margin-bottom: 15px;
-}
-
-.control-group {
-    text-align: center;
-}
-
-.control-label {
-    font-weight: bold;
-    margin-bottom: 5px;
-    font-size: 14px;
-    color: #555;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.lock-toggle {
-    cursor: pointer;
-    margin-left: 8px;
-    font-size: 16px;
-    transition: color 0.2s;
-}
-
-.lock-toggle.locked {
-    color: #d32f2f;
-}
-
-.slider-container {
-    position: relative;
-}
-
-.slider {
-    width: 100%;
-    height: 30px;
-    border-radius: 15px;
-    background: #ddd;
-    outline: none;
-    -webkit-appearance: none;
-    appearance: none;
-    transition: opacity 0.2s;
-}
-
-.slider:disabled {
-    opacity: 0.5;
-}
-
-.slider:disabled::-webkit-slider-thumb {
-    background: #9E9E9E;
-    cursor: not-allowed;
-}
-
-.slider:disabled::-moz-range-thumb {
-    background: #9E9E9E;
-    cursor: not-allowed;
-}
-
-.slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: #4CAF50;
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.slider::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: #4CAF50;
-    cursor: pointer;
-    border: none;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-.slider-value {
-    font-weight: bold;
-    color: #333;
-    margin-top: 5px;
-    font-size: 16px;
-}
-
-.charts-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 30px;
-}
-
-.chart-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
-    padding: 25px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-}
-
-.chart-title {
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 15px;
-    text-align: center;
-    color: #333;
-}
-
-.chart-container {
-    position: relative;
-    height: 300px;
-    margin-bottom: 20px;
-}
-
-.confusion-matrix-layout {
-    position: relative;
-    width: 250px;
-    height: 250px;
-    margin: 0 auto; /* Center the block horizontally */
-    top: 50%;       /* Center the block vertically */
-    transform: translateY(-50%);
-}
-
-.matrix-ylabel,
-.matrix-xlabel {
-    position: absolute;
-    font-weight: bold;
-    color: #555;
-    font-style: italic;
-    white-space: nowrap;
-}
-
-.matrix-ylabel {
-    top: 50%;
-    left: -20px; /* Position label just outside the container */
-    transform: translateY(-50%) rotate(-90deg);
-}
-
-.matrix-xlabel {
-    bottom: -25px; /* Position label just outside the container */
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.matrix-canvas-container {
-    width: 100%;
-    height: 100%;
-}
-
-#matrixChart {
-    max-width: 100%;
-    max-height: 100%;
-}
-
-footer {
-    text-align: center;
-    padding: 20px;
-    margin-top: 40px;
-}
-
-footer a {
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    font-weight: bold;
-    transition: color 0.3s;
-}
-
-footer a:hover {
-    color: white;
-}
-
-@media (max-width: 1200px) {
-    .charts-container {
-        grid-template-columns: 1fr;
-    }
-
-    .floating-controls {
-        position: static;
-        width: 100%;
-        margin-bottom: 20px;
-    }
-}

src/css/linear_regression.css

@@ -0,0 +1,99 @@
+/* ============================================================
+   Linear Regression Playground - Specific Styles
+   ============================================================ */
+
+/* Main chart takes full width */
+#mainChart {
+    height: 100% !important;
+    width: 100% !important;
+}
+
+/* Custom checkbox styling */
+.control-group label.control-label:has(input[type="checkbox"]) {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: var(--space-sm);
+    border-radius: var(--radius-sm);
+    transition: background-color var(--transition-fast);
+}
+
+.control-group label.control-label:has(input[type="checkbox"]):hover {
+    background-color: var(--color-surface-alt);
+}
+
+.checkbox-input {
+    margin-right: var(--space-sm);
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--color-accent);
+}
+
+/* Stats panel styling */
+.metrics-display {
+    padding: var(--space-md);
+}
+
+.metric-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-sm) 0;
+    border-bottom: 1px solid var(--color-border);
+}
+
+.metric-item:last-child {
+    border-bottom: none;
+}
+
+.metric-label {
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+}
+
+.metric-value {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--color-text-primary);
+}
+
+/* Dragging state for points */
+.canvas-container {
+    position: relative;
+}
+
+/* Button variations */
+.button-start {
+    width: 100%;
+    margin: var(--space-xs) 0;
+}
+
+/* Hint box styling */
+.chart-hint {
+    background: var(--color-accent-light);
+    border-left: 3px solid var(--color-accent);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+    line-height: 1.5;
+}
+
+.chart-hint strong {
+    color: var(--color-text-primary);
+}
+
+/* Canvas cursor states */
+#mainChart {
+    cursor: crosshair;
+}
+
+#mainChart.dragging {
+    cursor: grabbing;
+}
+
+#mainChart.hover-point {
+    cursor: grab;
+}

src/css/style.css

@@ -1,49 +1,112 @@
+/* ============================================================
+   School of Statistics - Design System
+   Professional, Clean, Unified Styles
+   ============================================================ */
+
+/* CSS Variables for consistent theming */
+:root {
+    /* Colors */
+    --color-bg: #f5f5f5;
+    --color-surface: #ffffff;
+    --color-surface-alt: #fafafa;
+    --color-border: #e0e0e0;
+    --color-text-primary: #212121;
+    --color-text-secondary: #616161;
+    --color-text-muted: #9e9e9e;
+    --color-accent: #1976d2;
+    --color-accent-light: #e3f2fd;
+    --color-success: #2e7d32;
+    --color-warning: #ed6c02;
+    --color-error: #d32f2f;
+    
+    /* Spacing */
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 16px;
+    --space-lg: 24px;
+    --space-xl: 32px;
+    
+    /* Border radius */
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
+    
+    /* Transitions */
+    --transition-fast: 0.15s ease;
+    --transition-normal: 0.2s ease;
+}
+
+/* Reset & Base */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
+html {
+    font-size: 16px;
+}
+
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background-color: var(--color-bg);
+    color: var(--color-text-primary);
+    line-height: 1.5;
     min-height: 100vh;
-    padding: 20px;
 }
 
+/* Layout Container */
 .container {
     max-width: 1400px;
     margin: 0 auto;
+    padding: var(--space-lg);
 }
 
+/* Header */
 h1 {
     text-align: center;
-    color: white;
-    margin-bottom: 30px;
-    font-size: 2.5em;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+    color: var(--color-text-primary);
+    margin-bottom: var(--space-xl);
+    font-size: 1.75rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+}
+
+.subtitle {
+    text-align: center;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--space-xl);
+    font-size: 0.95rem;
 }
 
+/* Floating Controls Panel */
 .floating-controls {
     position: fixed;
-    top: 20px;
-    right: 20px;
-    background: rgba(255, 255, 255, 0.65);
-    backdrop-filter: blur(20px);
-    border-radius: 15px;
-    padding: 20px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    top: var(--space-lg);
+    right: var(--space-lg);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    box-shadow: var(--shadow-md);
     z-index: 1000;
-    width: 320px;
+    width: 300px;
+    max-height: calc(100vh - var(--space-lg) * 2);
+    overflow-y: auto;
 }
 
 .controls-title {
-    text-align: center;
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 15px;
-    color: #333;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: var(--space-md);
+    color: var(--color-text-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: var(--space-sm);
     cursor: grab;
 }
 
@@ -54,84 +117,195 @@ h1 {
 .controls-grid {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 20px;
+    gap: var(--space-md);
+}
+
+.matrix-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-md);
 }
 
+/* Control Groups */
 .control-group {
-    text-align: center;
+    text-align: left;
 }
 
 .control-label {
-    font-weight: bold;
-    margin-bottom: 5px;
-    font-size: 14px;
-    color: #555;
+    font-weight: 500;
+    margin-bottom: var(--space-xs);
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+/* Lock Toggle */
+.lock-toggle {
+    cursor: pointer;
+    margin-left: var(--space-sm);
+    font-size: 0.875rem;
+    opacity: 0.6;
+    transition: opacity var(--transition-fast);
 }
 
+.lock-toggle:hover {
+    opacity: 1;
+}
+
+.lock-toggle.locked {
+    opacity: 1;
+    color: var(--color-error);
+}
+
+/* Sliders */
 .slider {
     width: 100%;
+    height: 4px;
+    border-radius: var(--radius-sm);
+    background: var(--color-border);
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+    margin: var(--space-sm) 0;
+}
+
+.slider:disabled {
+    opacity: 0.4;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--color-accent);
+    cursor: pointer;
+    border: 2px solid var(--color-surface);
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.slider::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 3px var(--color-accent-light);
+}
+
+.slider:disabled::-webkit-slider-thumb {
+    background: var(--color-text-muted);
+    cursor: not-allowed;
+}
+
+.slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--color-accent);
+    cursor: pointer;
+    border: 2px solid var(--color-surface);
+    box-shadow: var(--shadow-sm);
 }
 
 .slider-value {
-    font-weight: bold;
-    color: #333;
-    margin-top: 5px;
-    font-size: 16px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    font-size: 0.8125rem;
+    text-align: right;
+    font-family: 'SF Mono', Monaco, monospace;
+}
+
+/* Checkbox */
+.checkbox-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    padding: var(--space-sm);
+    border-radius: var(--radius-sm);
+    transition: background-color var(--transition-fast);
+}
+
+.checkbox-label:hover {
+    background-color: var(--color-surface-alt);
+}
+
+.checkbox-label input[type="checkbox"] {
+    margin-right: var(--space-sm);
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--color-accent);
 }
 
+/* Charts Container */
 .charts-container {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 30px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-lg);
+    margin-right: 340px; /* Space for floating controls */
 }
 
+/* Chart Cards */
 .chart-card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
-    padding: 25px;
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--space-lg);
+    box-shadow: var(--shadow-sm);
+    transition: box-shadow var(--transition-normal);
+}
+
+.chart-card:hover {
+    box-shadow: var(--shadow-md);
 }
 
 .chart-title {
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 15px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: var(--space-md);
     text-align: center;
-    color: #333;
+    color: var(--color-text-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
 }
 
 .chart-container {
     position: relative;
-    height: 300px;
-    margin-bottom: 20px;
+    height: 280px;
 }
 
+/* Confusion Matrix Layout */
 .confusion-matrix-layout {
     position: relative;
     width: 250px;
     height: 250px;
-    margin: 0 auto; /* Center the block horizontally */
-    top: 50%;       /* Center the block vertically */
+    margin: 0 auto;
+    top: 50%;
     transform: translateY(-50%);
 }
 
 .matrix-ylabel,
 .matrix-xlabel {
     position: absolute;
-    font-weight: bold;
-    color: #555;
-    font-style: italic;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
     white-space: nowrap;
 }
 
 .matrix-ylabel {
     top: 50%;
-    left: -20px; /* Position label just outside the container */
+    left: -24px;
     transform: translateY(-50%) rotate(-90deg);
 }
 
 .matrix-xlabel {
-    bottom: -25px; /* Position label just outside the container */
+    bottom: -28px;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -146,32 +320,194 @@ h1 {
     max-height: 100%;
 }
 
-/* [NOUVEAU] Style pour le footer */
+/* Metrics Display (for embedding_distances) */
+.metrics-display {
+    margin-top: var(--space-md);
+    padding: var(--space-md);
+    background: var(--color-surface-alt);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+}
+
+.metrics-title {
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: var(--space-sm);
+    color: var(--color-text-primary);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.metric-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--space-xs) 0;
+    border-bottom: 1px solid var(--color-border);
+    cursor: help;
+}
+
+.metric-item:last-child {
+    border-bottom: none;
+}
+
+.metric-label {
+    font-weight: 400;
+    color: var(--color-text-secondary);
+    font-size: 0.75rem;
+}
+
+.metric-value {
+    font-family: 'SF Mono', Monaco, monospace;
+    font-weight: 500;
+    color: var(--color-text-primary);
+    padding-left: var(--space-sm);
+    font-size: 0.8125rem;
+    text-align: right;
+    min-width: 60px;
+}
+
+.metrics-legend {
+    margin-top: var(--space-md);
+    padding: var(--space-sm);
+    background: var(--color-surface-alt);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    text-align: center;
+}
+
+.metrics-legend small {
+    font-size: 0.6875rem;
+    color: var(--color-text-secondary);
+}
+
+.metrics-legend span {
+    margin: 0 var(--space-xs);
+    white-space: nowrap;
+}
+
+/* Chart Hint */
+.chart-hint {
+    margin-top: var(--space-md);
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-accent-light);
+    border-left: 3px solid var(--color-accent);
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+}
+
+/* Footer */
 footer {
     text-align: center;
-    padding: 20px;
-    margin-top: 40px;
+    padding: var(--space-xl);
+    margin-top: var(--space-xl);
+    border-top: 1px solid var(--color-border);
+    margin-right: 340px;
 }
 
 footer a {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--color-text-secondary);
     text-decoration: none;
-    font-weight: bold;
-    transition: color 0.3s;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    transition: color var(--transition-fast);
 }
 
 footer a:hover {
+    color: var(--color-accent);
+}
+
+/* Buttons */
+.button-start {
+    background-color: var(--color-success);
+    border: none;
     color: white;
+    padding: var(--space-md) var(--space-lg);
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin: var(--space-xs) 0;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    width: 100%;
+    box-sizing: border-box;
+    transition: background-color var(--transition-fast);
+}
+
+.button-start:hover {
+    background-color: #1b5e20;
+}
+
+/* Scrollbar Styling */
+.floating-controls::-webkit-scrollbar {
+    width: 6px;
+}
+
+.floating-controls::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.floating-controls::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: var(--radius-sm);
 }
 
+.floating-controls::-webkit-scrollbar-thumb:hover {
+    background: var(--color-text-muted);
+}
+
+/* Responsive Design */
 @media (max-width: 1200px) {
     .charts-container {
         grid-template-columns: 1fr;
+        margin-right: 0;
     }
-
+    
+    footer {
+        margin-right: 0;
+    }
+    
     .floating-controls {
         position: static;
         width: 100%;
-        margin-bottom: 20px;
+        max-width: 600px;
+        margin: 0 auto var(--space-lg);
+        max-height: none;
+    }
+}
+
+@media (max-width: 600px) {
+    .container {
+        padding: var(--space-md);
+    }
+    
+    h1 {
+        font-size: 1.5rem;
+    }
+    
+    .chart-card {
+        padding: var(--space-md);
+    }
+    
+    .chart-container {
+        height: 250px;
+    }
+    
+    .matrix-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .metric-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--space-xs);
+    }
+    
+    .metric-value {
+        padding-left: 0;
+        text-align: left;
     }
 }

src/js/common.js

@@ -0,0 +1,205 @@
+// ============================================================
+// common.js — Shared utilities for School of Statistics
+// ============================================================
+
+// --- METRIC EXPLANATIONS (used in tooltip callbacks) ---
+const metricExplanations = {
+    'AUC': {
+        description: "Probability that a randomly chosen positive instance is ranked higher than a randomly chosen negative instance.",
+        range: "0 to 1. 0.5 corresponds to random chance.",
+        formula: "Area Under the ROC Curve"
+    },
+    'Accuracy': {
+        description: "Proportion of all predictions that are correct.",
+        range: "0 to 1.",
+        formula: "(TP + TN) / (TP + TN + FP + FN)"
+    },
+    'Precision': {
+        description: "Proportion of positive predictions that are correct. A high value indicates a low false positive rate.",
+        range: "0 to 1.",
+        formula: "TP / (TP + FP)"
+    },
+    'Recall': {
+        description: "Proportion of actual positives correctly identified. Also called Sensitivity or True Positive Rate.",
+        range: "0 to 1.",
+        formula: "TP / (TP + FN)"
+    },
+    'Specificity': {
+        description: "Proportion of actual negatives correctly identified. Also called True Negative Rate.",
+        range: "0 to 1.",
+        formula: "TN / (TN + FP)"
+    },
+    'F1-Score': {
+        description: "Harmonic mean of Precision and Recall. Balances both metrics in a single value.",
+        range: "0 to 1.",
+        formula: "2 * (Precision * Recall) / (Precision + Recall)"
+    }
+};
+
+// --- RANDOM GAUSSIAN (Box-Muller transform) ---
+function randomGaussian(mean = 0, stdDev = 1) {
+    let u = 0, v = 0;
+    while (u === 0) u = Math.random();
+    while (v === 0) v = Math.random();
+    return mean + stdDev * Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
+}
+
+// --- ROC CURVE & AUC CALCULATION ---
+function calculateRocAndAuc(labels, scores) {
+    const pairs = labels.map((label, i) => ({ label, score: scores[i] }));
+    pairs.sort((a, b) => b.score - a.score);
+    let tp = 0, fp = 0;
+    const total_pos = labels.filter(l => l === 1).length;
+    const total_neg = labels.length - total_pos;
+    if (total_pos === 0 || total_neg === 0) {
+        return { rocPoints: [{ x: 0, y: 0 }, { x: 1, y: 1 }], auc: 0.5 };
+    }
+    const rocPoints = [{ x: 0, y: 0 }];
+    let auc = 0, prev_tpr = 0, prev_fpr = 0;
+    for (const pair of pairs) {
+        if (pair.label === 1) tp++; else fp++;
+        const tpr = total_pos > 0 ? tp / total_pos : 0;
+        const fpr = total_neg > 0 ? fp / total_neg : 0;
+        auc += (tpr + prev_tpr) / 2 * (fpr - prev_fpr);
+        rocPoints.push({ x: fpr, y: tpr });
+        prev_tpr = tpr;
+        prev_fpr = fpr;
+    }
+    return { rocPoints, auc };
+}
+
+// --- CONFUSION MATRIX DRAWING (Canvas 2D) ---
+function drawConfusionMatrix(canvasId, tp, fp, tn, fn) {
+    const canvas = document.getElementById(canvasId);
+    const ctx = canvas.getContext('2d');
+    const w = canvas.width, h = canvas.height;
+    ctx.clearRect(0, 0, w, h);
+
+    const margin = 50;
+    const gridW = w - margin, gridH = h - margin;
+    const cellW = gridW / 2, cellH = gridH / 2;
+    const max_val = Math.max(tp, fp, tn, fn);
+    const baseColor = [8, 48, 107];
+
+    const cells = [
+        { label: 'TN', value: tn, x: 0, y: cellH },
+        { label: 'FP', value: fp, x: cellW, y: cellH },
+        { label: 'FN', value: fn, x: 0, y: 0 },
+        { label: 'TP', value: tp, x: cellW, y: 0 }
+    ];
+
+    cells.forEach(cell => {
+        const intensity = max_val > 0 ? cell.value / max_val : 0;
+        ctx.fillStyle = `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${intensity})`;
+        ctx.fillRect(margin + cell.x, cell.y, cellW, cellH);
+        ctx.fillStyle = intensity > 0.5 ? 'white' : 'black';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.font = 'bold 20px Segoe UI';
+        ctx.fillText(cell.label, margin + cell.x + cellW / 2, cell.y + cellH / 2 - 12);
+        ctx.font = '18px Segoe UI';
+        ctx.fillText(cell.value, margin + cell.x + cellW / 2, cell.y + cellH / 2 + 12);
+    });
+
+    ctx.fillStyle = '#333';
+    ctx.font = 'bold 14px Segoe UI';
+    ctx.fillText('Negative', margin + cellW / 2, gridH + 20);
+    ctx.fillText('Positive', margin + cellW + cellW / 2, gridH + 20);
+    ctx.save();
+    ctx.translate(20, gridH / 2);
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('Positive', -cellH / 2, 0);
+    ctx.fillText('Negative', cellH / 2, 0);
+    ctx.restore();
+}
+
+// --- CUSTOM DATALABELS PLUGIN (for bar charts) ---
+const customDatalabelsPlugin = {
+    id: 'customDatalabels',
+    afterDatasetsDraw: (chart) => {
+        const ctx = chart.ctx;
+        ctx.save();
+        ctx.font = 'bold 12px Segoe UI';
+        ctx.fillStyle = 'white';
+        ctx.textAlign = 'center';
+        chart.data.datasets.forEach((dataset, i) => {
+            const meta = chart.getDatasetMeta(i);
+            meta.data.forEach((bar, index) => {
+                const data = dataset.data[index];
+                if (bar.height > 15) {
+                    ctx.textBaseline = 'bottom';
+                    ctx.fillText(data.toFixed(3), bar.x, bar.y + bar.height - 5);
+                }
+            });
+        });
+        ctx.restore();
+    }
+};
+
+// --- DEBOUNCE UTILITY ---
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// --- DRAGGABLE CONTROLS PANEL ---
+function makeDraggable(element, handle) {
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    let isDragging = false;
+    
+    handle.onmousedown = (e) => {
+        // Don't drag if clicking on a form control (slider, input, etc.)
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || 
+            e.target.tagName === 'TEXTAREA' || e.target.classList.contains('slider')) {
+            return;
+        }
+        
+        isDragging = true;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        document.onmousemove = elementDrag;
+    };
+    
+    const elementDrag = (e) => {
+        if (!isDragging) return;
+        e.preventDefault();
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        element.style.top = (element.offsetTop - pos2) + "px";
+        element.style.left = (element.offsetLeft - pos1) + "px";
+    };
+    
+    const closeDragElement = () => {
+        isDragging = false;
+        document.onmouseup = null;
+        document.onmousemove = null;
+    };
+}
+
+// --- METRICS BAR CHART TOOLTIP CALLBACK ---
+function metricsTooltipCallback(context) {
+    const label = context.chart.data.labels[context.dataIndex];
+    const value = context.raw.toFixed(3);
+    const explanation = metricExplanations[label];
+    let tooltipText = [`${label}: ${value}`];
+    if (explanation) {
+        tooltipText.push('');
+        const roleLines = `${explanation.description}`.match(/.{1,50}(\s|$)/g) || [];
+        roleLines.forEach(line => tooltipText.push(line.trim()));
+        tooltipText.push(`Range: ${explanation.range}`);
+        tooltipText.push(`Formula: ${explanation.formula}`);
+    }
+    return tooltipText;
+}

src/js/direct_classifier.js

@@ -2,47 +2,6 @@
 let dataChart, rocChart, metricsChart;
 const N_SAMPLES_PER_CLASS = 100;
 
-const metricExplanations = {
-    'AUC': {
-        description: "Measures the model's ability to distinguish between positive and negative classes. It represents the probability that a random positive instance is ranked higher than a random negative instance.",
-        range: "Ranges from 0 (worst) to 1 (best). 0.5 is random chance.",
-        formula: "Area Under the ROC Curve"
-    },
-    'Accuracy': {
-        description: "The proportion of all predictions that are correct. It's a general measure of the model's performance.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "(TP + TN) / (TP + TN + FP + FN)"
-    },
-    'Precision': {
-        description: "Of all the positive predictions made by the model, how many were actually positive. High precision indicates a low false positive rate.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "TP / (TP + FP)"
-    },
-    'Recall': {
-        description: "Of all the actual positive instances, how many did the model correctly identify. Also known as Sensitivity or True Positive Rate.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "TP / (TP + FN)"
-    },
-    'Specificity': {
-        description: "Of all the actual negative instances, how many did the model correctly identify. Also known as True Negative Rate.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "TN / (TN + FP)"
-    },
-    'F1-Score': {
-        description: "The harmonic mean of Precision and Recall. It provides a single score that balances both concerns, useful for imbalanced classes.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "2 * (Precision * Recall) / (Precision + Recall)"
-    }
-};
-
-// --- DATA GENERATION ---
-function randomGaussian(mean = 0, stdDev = 1) {
-    let u = 0, v = 0;
-    while (u === 0) u = Math.random();
-    while (v === 0) v = Math.random();
-    return mean + stdDev * Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
-}
-
 function generateData(separation, stdDev) {
     const data = [], labels = [];
     for (let i = 0; i < N_SAMPLES_PER_CLASS; i++) { data.push({ x: randomGaussian(-separation / 2, stdDev), y: randomGaussian(0, stdDev) }); labels.push(0); }
@@ -86,67 +45,16 @@ class GaussianNB {
 }
 
 // --- METRICS CALCULATIONS ---
-function calculateRocAndAuc(labels, scores) {
-    const pairs = labels.map((label, i) => ({ label, score: scores[i] }));
-    pairs.sort((a, b) => b.score - a.score);
-    let tp = 0, fp = 0;
-    const total_pos = labels.filter(l => l === 1).length;
-    const total_neg = labels.length - total_pos;
-    if (total_pos === 0 || total_neg === 0) return { rocPoints: [{ x: 0, y: 0 }, { x: 1, y: 1 }], auc: 0.5 };
-    const rocPoints = [{ x: 0, y: 0 }];
-    let auc = 0, prev_tpr = 0, prev_fpr = 0;
-    for (const pair of pairs) {
-        if (pair.label === 1) tp++; else fp++;
-        const tpr = tp / total_pos;
-        const fpr = fp / total_neg;
-        auc += (tpr + prev_tpr) / 2 * (fpr - prev_fpr);
-        rocPoints.push({ x: fpr, y: tpr });
-        prev_tpr = tpr; prev_fpr = fpr;
-    }
-    return { rocPoints, auc };
-}
-
 function getConfusionMatrix(labels, scores, threshold) {
-    let vp = 0, fp = 0, vn = 0, fn = 0;
+    let tp = 0, fp = 0, tn = 0, fn = 0;
     labels.forEach((label, i) => {
         const prediction = scores[i] >= threshold ? 1 : 0;
-        if (prediction === 1 && label === 1) vp++;
+        if (prediction === 1 && label === 1) tp++;
         else if (prediction === 1 && label === 0) fp++;
-        else if (prediction === 0 && label === 0) vn++;
+        else if (prediction === 0 && label === 0) tn++;
         else if (prediction === 0 && label === 1) fn++;
     });
-    return { vp, fp, vn, fn };
-}
-
-function drawConfusionMatrix(canvasId, vp, fp, vn, fn) {
-    const canvas = document.getElementById(canvasId);
-    const ctx = canvas.getContext('2d');
-    const w = canvas.width, h = canvas.height;
-    ctx.clearRect(0, 0, w, h);
-    const margin = 50, gridW = w - margin, gridH = h - margin, cellW = gridW / 2, cellH = gridH / 2;
-    const max_val = Math.max(vp, fp, vn, fn);
-    const baseColor = [8, 48, 107];
-    const cells = [{ label: 'TN', value: vn, x: 0, y: cellH }, { label: 'FP', value: fp, x: cellW, y: cellH }, { label: 'FN', value: fn, x: 0, y: 0 }, { label: 'TP', value: vp, x: cellW, y: 0 }];
-    cells.forEach(cell => {
-        const intensity = max_val > 0 ? cell.value / max_val : 0;
-        ctx.fillStyle = `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${intensity})`;
-        ctx.fillRect(margin + cell.x, cell.y, cellW, cellH);
-        ctx.fillStyle = intensity > 0.5 ? 'white' : 'black';
-        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-        ctx.font = 'bold 20px Segoe UI'; ctx.fillText(cell.label, margin + cell.x + cellW / 2, cell.y + cellH / 2 - 12);
-        ctx.font = '18px Segoe UI'; ctx.fillText(cell.value, margin + cell.x + cellW / 2, cell.y + cellH / 2 + 12);
-    });
-    ctx.fillStyle = '#333'; ctx.font = 'bold 14px Segoe UI';
-    ctx.fillText('Negative', margin + cellW / 2, gridH + 20);
-    ctx.fillText('Positive', margin + cellW + cellW / 2, gridH + 20);
-    ctx.save();
-    ctx.translate(20, gridH / 2);
-    ctx.rotate(-Math.PI / 2);
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText('Positive', -cellH / 2, 0);
-    ctx.fillText('Negative', cellH / 2, 0);
-    ctx.restore();
+    return { tp, fp, tn, fn };
 }
 
 // --- UI UPDATE ---
@@ -161,15 +69,15 @@ function updateApplication() {
     model.fit(data, labels);
     const scores = model.predict_proba(data);
     const { rocPoints, auc } = calculateRocAndAuc(labels, scores);
-    const { vp, fp, vn, fn } = getConfusionMatrix(labels, scores, 0.5);
-    const total = vp + fp + vn + fn;
-    const precision = (vp + fp) > 0 ? vp / (vp + fp) : 0;
-    const recall = (vp + fn) > 0 ? vp / (vp + fn) : 0;
-    const specificity = (vn + fp) > 0 ? vn / (vn + fp) : 0;
+    const { tp, fp, tn, fn } = getConfusionMatrix(labels, scores, 0.5);
+    const total = tp + fp + tn + fn;
+    const precision = (tp + fp) > 0 ? tp / (tp + fp) : 0;
+    const recall = (tp + fn) > 0 ? tp / (tp + fn) : 0;
+    const specificity = (tn + fp) > 0 ? tn / (tn + fp) : 0;
     const f1score = (precision + recall) > 0 ? 2 * (precision * recall) / (precision + recall) : 0;
-    const accuracy = total > 0 ? (vp + vn) / total : 0;
+    const accuracy = total > 0 ? (tp + tn) / total : 0;
 
-    drawConfusionMatrix('matrixChart', vp, fp, vn, fn);
+    drawConfusionMatrix('matrixChart', tp, fp, tn, fn);
 
     dataChart.data.datasets[0].data = data.filter((_, i) => labels[i] === 0);
     dataChart.data.datasets[1].data = data.filter((_, i) => labels[i] === 1);
@@ -183,28 +91,6 @@ function updateApplication() {
 }
 
 // --- INITIALIZATION ---
-const customDatalabelsPlugin = {
-    id: 'customDatalabels',
-    afterDatasetsDraw: (chart) => {
-        const ctx = chart.ctx;
-        ctx.save();
-        ctx.font = 'bold 12px Segoe UI';
-        ctx.fillStyle = 'white';
-        ctx.textAlign = 'center';
-        chart.data.datasets.forEach((dataset, i) => {
-            const meta = chart.getDatasetMeta(i);
-            meta.data.forEach((bar, index) => {
-                const data = dataset.data[index];
-                if (bar.height > 15) {
-                    ctx.textBaseline = 'bottom';
-                    ctx.fillText(data.toFixed(3), bar.x, bar.y + bar.height - 5);
-                }
-            });
-        });
-        ctx.restore();
-    }
-};
-
 function initCharts() {
     const dataCtx = document.getElementById('dataChart').getContext('2d');
     dataChart = new Chart(dataCtx, { type: 'scatter', data: { datasets: [{ label: 'Negative Class', data: [], backgroundColor: '#0D47A1' }, { label: 'Positive Class', data: [], backgroundColor: '#B71C1C' }] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 0 } } });
@@ -232,20 +118,7 @@ function initCharts() {
                     padding: 15,
                     displayColors: false,
                     callbacks: {
-                        label: function (context) {
-                            const label = context.chart.data.labels[context.dataIndex];
-                            const value = context.raw.toFixed(3);
-                            const explanation = metricExplanations[label];
-                            let tooltipText = [`${label}: ${value}`];
-                            if (explanation) {
-                                tooltipText.push('');
-                                const roleLines = `Role: ${explanation.description}`.match(/.{1,50}(\s|$)/g) || [];
-                                roleLines.forEach(line => tooltipText.push(line.trim()));
-                                tooltipText.push(`Range: ${explanation.range}`);
-                                tooltipText.push(`Formula: ${explanation.formula}`);
-                            }
-                            return tooltipText;
-                        }
+                        label: metricsTooltipCallback
                     }
                 }
             },
@@ -254,13 +127,6 @@ function initCharts() {
     });
 }
 
-function makeDraggable(element, handle) {
-    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-    handle.onmousedown = (e) => { e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; };
-    const elementDrag = (e) => { e.preventDefault(); pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; element.style.top = (element.offsetTop - pos2) + "px"; element.style.left = (element.offsetLeft - pos1) + "px"; };
-    const closeDragElement = () => { document.onmouseup = null; document.onmousemove = null; };
-}
-
 window.addEventListener('load', function () {
     initCharts();
     const sliders = ['separationSlider', 'stdDevSlider'];

src/js/fourier_transform.js

@@ -0,0 +1,595 @@
+// ============================================================
+// fourier_transform.js — Fourier Transform Visualizer
+// ============================================================
+
+// --- GLOBAL VARIABLES ---
+let timeDomainChart, magnitudeChart, phaseChart;
+
+// Wave colors matching the HTML
+const WAVE_COLORS = ['#1976d2', '#d32f2f', '#388e3c', '#f57c00'];
+
+// Sampling parameters
+const SAMPLING_RATE = 256; // Hz - Fixed sampling rate for display
+const MAX_SAMPLES_FOR_DFT = 512; // Maximum samples for DFT to maintain performance
+
+// --- DFT IMPLEMENTATION ---
+
+/**
+ * Cooley-Tukey FFT algorithm for power-of-2 sizes
+ * Much faster than DFT for large N
+ * 
+ * @param {number[]} signal - Real-valued input signal
+ * @returns {Object} - Object with real (re) and imaginary (im) parts arrays
+ */
+function fft(signal) {
+    const N = signal.length;
+    
+    // Check if N is a power of 2
+    if (N & (N - 1)) {
+        // Not a power of 2, fall back to DFT
+        return dft(signal);
+    }
+    
+    // Bit-reverse copy
+    const re = new Array(N);
+    const im = new Array(N).fill(0);
+    
+    for (let i = 0; i < N; i++) {
+        let j = 0;
+        let bit = N >> 1;
+        let ii = i;
+        while (bit > 0) {
+            if (ii & 1) j |= bit;
+            ii >>= 1;
+            bit >>= 1;
+        }
+        re[j] = signal[i];
+    }
+    
+    // Butterfly operations
+    for (let step = 2; step <= N; step <<= 1) {
+        const halfStep = step >> 1;
+        const angleInc = -2 * Math.PI / step;
+        
+        for (let group = 0; group < N; group += step) {
+            for (let i = 0; i < halfStep; i++) {
+                const angle = angleInc * i;
+                const cos = Math.cos(angle);
+                const sin = Math.sin(angle);
+                
+                const evenRe = re[group + i];
+                const evenIm = im[group + i];
+                const oddRe = re[group + i + halfStep] * cos - im[group + i + halfStep] * sin;
+                const oddIm = re[group + i + halfStep] * sin + im[group + i + halfStep] * cos;
+                
+                re[group + i] = evenRe + oddRe;
+                im[group + i] = evenIm + oddIm;
+                re[group + i + halfStep] = evenRe - oddRe;
+                im[group + i + halfStep] = evenIm - oddIm;
+            }
+        }
+    }
+    
+    return { re, im };
+}
+
+/**
+ * Discrete Fourier Transform (DFT) - O(N²) implementation
+ * Input: real-valued time domain signal
+ * Output: complex frequency domain values
+ * 
+ * @param {number[]} signal - Real-valued input signal
+ * @returns {Object} - Object with real (re) and imaginary (im) parts arrays
+ */
+function dft(signal) {
+    const N = signal.length;
+    const re = new Array(N).fill(0);
+    const im = new Array(N).fill(0);
+    
+    for (let k = 0; k < N; k++) {
+        let sumRe = 0;
+        let sumIm = 0;
+        for (let n = 0; n < N; n++) {
+            const angle = -2 * Math.PI * k * n / N;
+            sumRe += signal[n] * Math.cos(angle);
+            sumIm += signal[n] * Math.sin(angle);
+        }
+        re[k] = sumRe;
+        im[k] = sumIm;
+    }
+    
+    return { re, im };
+}
+
+/**
+ * Compute magnitude spectrum from complex DFT output
+ * Returns single-sided spectrum (positive frequencies only)
+ * 
+ * @param {Object} dftResult - Object with re and im arrays
+ * @returns {number[]} - Magnitude values for positive frequencies
+ */
+function computeMagnitudeSpectrum(dftResult) {
+    const N = dftResult.re.length;
+    const magnitudes = [];
+    
+    // Only return positive frequencies (0 to N/2)
+    for (let k = 0; k <= N / 2; k++) {
+        const mag = Math.sqrt(dftResult.re[k] ** 2 + dftResult.im[k] ** 2);
+        // Normalize by N/2 for single-sided spectrum
+        magnitudes.push(2 * mag / N);
+    }
+    
+    // DC component should not be doubled
+    magnitudes[0] = magnitudes[0] / 2;
+    if (N % 2 === 0) {
+        magnitudes[magnitudes.length - 1] = magnitudes[magnitudes.length - 1] / 2;
+    }
+    
+    return magnitudes;
+}
+
+/**
+ * Compute phase spectrum from complex DFT output
+ * Returns single-sided spectrum (positive frequencies only)
+ * 
+ * @param {Object} dftResult - Object with re and im arrays
+ * @returns {number[]} - Phase values in degrees for positive frequencies
+ */
+function computePhaseSpectrum(dftResult) {
+    const N = dftResult.re.length;
+    const phases = [];
+    
+    for (let k = 0; k <= N / 2; k++) {
+        const phaseRad = Math.atan2(dftResult.im[k], dftResult.re[k]);
+        const phaseDeg = phaseRad * 180 / Math.PI;
+        phases.push(phaseDeg);
+    }
+    
+    return phases;
+}
+
+// --- SIGNAL GENERATION ---
+
+/**
+ * Generate a sine wave
+ * 
+ * @param {number} frequency - Frequency in Hz
+ * @param {number} amplitude - Peak amplitude
+ * @param {number} phaseDeg - Phase in degrees
+ * @param {number} samplingRate - Sampling rate in Hz
+ * @param {number} numSamples - Number of samples
+ * @returns {number[]} - Generated signal
+ */
+function generateSineWave(frequency, amplitude, phaseDeg, samplingRate, numSamples) {
+    const signal = [];
+    const phaseRad = phaseDeg * Math.PI / 180;
+    
+    for (let n = 0; n < numSamples; n++) {
+        const t = n / samplingRate;
+        const value = amplitude * Math.sin(2 * Math.PI * frequency * t + phaseRad);
+        signal.push(value);
+    }
+    
+    return signal;
+}
+
+/**
+ * Generate the composite signal from all enabled waves
+ * 
+ * @returns {Object} - Object with time array, signal array, and individual waves
+ */
+function generateCompositeSignal() {
+    const numSamples = parseInt(document.getElementById('numSamples').value);
+    const addNoise = document.getElementById('addNoise').checked;
+    const noiseLevel = parseFloat(document.getElementById('noiseLevel').value);
+    
+    // Initialize signal and time arrays
+    const time = [];
+    const signal = new Array(numSamples).fill(0);
+    const individualWaves = [];
+    
+    // Generate time array
+    for (let n = 0; n < numSamples; n++) {
+        time.push(n / SAMPLING_RATE);
+    }
+    
+    // Add each enabled wave
+    for (let i = 1; i <= 4; i++) {
+        const enabled = document.getElementById(`enableWave${i}`).checked;
+        if (!enabled) continue;
+        
+        const frequency = parseInt(document.getElementById(`freq${i}`).value);
+        const amplitude = parseFloat(document.getElementById(`amp${i}`).value);
+        const phase = parseInt(document.getElementById(`phase${i}`).value);
+        
+        if (amplitude > 0) {
+            const wave = generateSineWave(frequency, amplitude, phase, SAMPLING_RATE, numSamples);
+            individualWaves.push({
+                frequency,
+                amplitude,
+                phase,
+                color: WAVE_COLORS[i - 1],
+                data: wave
+            });
+            
+            // Add to composite signal
+            for (let n = 0; n < numSamples; n++) {
+                signal[n] += wave[n];
+            }
+        }
+    }
+    
+    // Add noise if enabled
+    if (addNoise) {
+        for (let n = 0; n < numSamples; n++) {
+            signal[n] += randomGaussian(0, noiseLevel);
+        }
+    }
+    
+    return { time, signal, individualWaves, numSamples };
+}
+
+// --- CHART INITIALIZATION ---
+
+function initCharts() {
+    // Time Domain Chart
+    const timeCtx = document.getElementById('timeDomainChart').getContext('2d');
+    timeDomainChart = new Chart(timeCtx, {
+        type: 'line',
+        data: {
+            datasets: [
+                {
+                    label: 'Composite Signal',
+                    data: [],
+                    borderColor: '#1976d2',
+                    backgroundColor: 'rgba(25, 118, 210, 0.1)',
+                    borderWidth: 2,
+                    pointRadius: 0,
+                    fill: true,
+                    tension: 0.1
+                },
+                {
+                    label: 'Wave 1',
+                    data: [],
+                    borderColor: WAVE_COLORS[0],
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    borderDash: [5, 5],
+                    fill: false,
+                    tension: 0.1,
+                    hidden: false
+                },
+                {
+                    label: 'Wave 2',
+                    data: [],
+                    borderColor: WAVE_COLORS[1],
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    borderDash: [5, 5],
+                    fill: false,
+                    tension: 0.1,
+                    hidden: false
+                },
+                {
+                    label: 'Wave 3',
+                    data: [],
+                    borderColor: WAVE_COLORS[2],
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    borderDash: [5, 5],
+                    fill: false,
+                    tension: 0.1,
+                    hidden: true
+                },
+                {
+                    label: 'Wave 4',
+                    data: [],
+                    borderColor: WAVE_COLORS[3],
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    borderDash: [5, 5],
+                    fill: false,
+                    tension: 0.1,
+                    hidden: true
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: { duration: 0 },
+            interaction: {
+                mode: 'index',
+                intersect: false
+            },
+            scales: {
+                x: {
+                    type: 'linear',
+                    title: { display: true, text: 'Time (s)' }
+                },
+                y: {
+                    title: { display: true, text: 'Amplitude' },
+                    min: -25,
+                    max: 25
+                }
+            },
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        filter: function(item, data) {
+                            // Only show legend for visible waves
+                            const dataset = data.datasets[item.datasetIndex];
+                            return !dataset.hidden;
+                        }
+                    }
+                },
+                tooltip: {
+                    callbacks: {
+                        title: function(context) {
+                            return `t = ${context[0].parsed.x.toFixed(4)} s`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Magnitude Spectrum Chart
+    const magCtx = document.getElementById('magnitudeChart').getContext('2d');
+    magnitudeChart = new Chart(magCtx, {
+        type: 'bar',
+        data: {
+            datasets: [{
+                label: 'Magnitude',
+                data: [],
+                backgroundColor: 'rgba(25, 118, 210, 0.7)',
+                borderColor: '#1976d2',
+                borderWidth: 1
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: { duration: 0 },
+            scales: {
+                x: {
+                    type: 'linear',
+                    title: { display: true, text: 'Frequency (Hz)' },
+                    min: 0
+                },
+                y: {
+                    title: { display: true, text: '|X(f)|' },
+                    beginAtZero: true
+                }
+            },
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    callbacks: {
+                        title: function(context) {
+                            return `f = ${context[0].parsed.x.toFixed(1)} Hz`;
+                        },
+                        label: function(context) {
+                            return `Magnitude: ${context.parsed.y.toFixed(3)}`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    // Phase Spectrum Chart
+    const phaseCtx = document.getElementById('phaseChart').getContext('2d');
+    phaseChart = new Chart(phaseCtx, {
+        type: 'scatter',
+        data: {
+            datasets: [{
+                label: 'Phase',
+                data: [],
+                backgroundColor: 'rgba(46, 125, 50, 0.7)',
+                borderColor: '#2e7d32',
+                borderWidth: 1,
+                pointRadius: 4
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: { duration: 0 },
+            scales: {
+                x: {
+                    type: 'linear',
+                    title: { display: true, text: 'Frequency (Hz)' },
+                    min: 0
+                },
+                y: {
+                    title: { display: true, text: 'Phase (degrees)' },
+                    min: -180,
+                    max: 180,
+                    ticks: {
+                        stepSize: 45
+                    }
+                }
+            },
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    callbacks: {
+                        title: function(context) {
+                            return `f = ${context[0].parsed.x.toFixed(1)} Hz`;
+                        },
+                        label: function(context) {
+                            return `Phase: ${context.parsed.y.toFixed(1)}°`;
+                        }
+                    }
+                }
+            }
+        }
+    });
+}
+
+// --- UPDATE FUNCTIONS ---
+
+function updateVisualizations() {
+    const { time, signal, individualWaves, numSamples } = generateCompositeSignal();
+    
+    // Update Time Domain Chart
+    timeDomainChart.data.datasets[0].data = signal.map((y, i) => ({ x: time[i], y }));
+    
+    // Update individual wave datasets
+    for (let i = 0; i < 4; i++) {
+        const waveData = individualWaves.find(w => w.color === WAVE_COLORS[i]);
+        if (waveData) {
+            timeDomainChart.data.datasets[i + 1].data = waveData.data.map((y, j) => ({ x: time[j], y }));
+            timeDomainChart.data.datasets[i + 1].hidden = false;
+        } else {
+            timeDomainChart.data.datasets[i + 1].data = [];
+            timeDomainChart.data.datasets[i + 1].hidden = true;
+        }
+    }
+    
+    // Compute FFT (falls back to DFT if not power of 2)
+    const dftResult = fft(signal);
+    const magnitudes = computeMagnitudeSpectrum(dftResult);
+    const phases = computePhaseSpectrum(dftResult);
+    
+    // Frequency bins
+    const freqResolution = SAMPLING_RATE / numSamples;
+    const frequencies = magnitudes.map((_, k) => k * freqResolution);
+    const nyquistFreq = SAMPLING_RATE / 2;
+    
+    // Update Magnitude Spectrum
+    // Only show frequencies up to Nyquist, and only show significant peaks
+    const maxFreq = Math.min(50, nyquistFreq); // Limit display to 50 Hz for better visualization
+    const filteredFreqIndices = frequencies
+        .map((f, i) => ({ f, i }))
+        .filter(item => item.f <= maxFreq);
+    
+    magnitudeChart.data.datasets[0].data = filteredFreqIndices.map(item => ({
+        x: item.f,
+        y: magnitudes[item.i]
+    }));
+    magnitudeChart.options.scales.x.max = maxFreq;
+    
+    // Update Phase Spectrum
+    const significantPhases = filteredFreqIndices
+        .filter(item => magnitudes[item.i] > 0.1) // Only show phase for significant frequencies
+        .map(item => ({
+            x: item.f,
+            y: phases[item.i]
+        }));
+    
+    phaseChart.data.datasets[0].data = significantPhases;
+    phaseChart.options.scales.x.max = maxFreq;
+    
+    // Update charts
+    timeDomainChart.update('none');
+    magnitudeChart.update('none');
+    phaseChart.update('none');
+    
+    // Update signal information
+    updateSignalInfo(numSamples, freqResolution, signal, magnitudes);
+}
+
+function updateSignalInfo(numSamples, freqResolution, signal, magnitudes) {
+    const nyquistFreq = SAMPLING_RATE / 2;
+    const duration = numSamples / SAMPLING_RATE;
+    
+    // Calculate total power (Parseval's theorem)
+    const totalPower = magnitudes.reduce((sum, mag, i) => {
+        // DC and Nyquist components are not doubled
+        const factor = (i === 0 || (i === magnitudes.length - 1 && numSamples % 2 === 0)) ? 1 : 0.5;
+        return sum + factor * mag * mag;
+    }, 0);
+    
+    // Calculate RMS amplitude
+    const rmsAmplitude = Math.sqrt(signal.reduce((sum, val) => sum + val * val, 0) / signal.length);
+    
+    document.getElementById('samplingRate').textContent = `${SAMPLING_RATE} Hz`;
+    document.getElementById('nyquistFreq').textContent = `${nyquistFreq} Hz`;
+    document.getElementById('freqResolution').textContent = `${freqResolution.toFixed(3)} Hz`;
+    document.getElementById('signalDuration').textContent = `${duration.toFixed(3)} s`;
+    document.getElementById('totalPower').textContent = totalPower.toFixed(3);
+    document.getElementById('rmsAmplitude').textContent = rmsAmplitude.toFixed(3);
+}
+
+// --- EVENT LISTENERS ---
+
+function setupEventListeners() {
+    // Wave enable checkboxes
+    for (let i = 1; i <= 4; i++) {
+        document.getElementById(`enableWave${i}`).addEventListener('change', function() {
+            const waveSection = this.closest('.wave-section');
+            if (this.checked) {
+                waveSection.classList.remove('disabled');
+            } else {
+                waveSection.classList.add('disabled');
+            }
+            updateVisualizations();
+        });
+    }
+    
+    // Wave parameter sliders
+    for (let i = 1; i <= 4; i++) {
+        document.getElementById(`freq${i}`).addEventListener('input', function() {
+            document.getElementById(`freq${i}Value`).textContent = `${this.value} Hz`;
+            updateVisualizations();
+        });
+        
+        document.getElementById(`amp${i}`).addEventListener('input', function() {
+            document.getElementById(`amp${i}Value`).textContent = parseFloat(this.value).toFixed(1);
+            updateVisualizations();
+        });
+        
+        document.getElementById(`phase${i}`).addEventListener('input', function() {
+            document.getElementById(`phase${i}Value`).textContent = `${this.value}°`;
+            updateVisualizations();
+        });
+    }
+    
+    // Number of samples slider
+    document.getElementById('numSamples').addEventListener('input', function() {
+        document.getElementById('numSamplesValue').textContent = this.value;
+        updateVisualizations();
+    });
+    
+    // Noise toggle
+    document.getElementById('addNoise').addEventListener('change', function() {
+        const noiseLevelGroup = document.getElementById('noiseLevelGroup');
+        const noiseLevelSlider = document.getElementById('noiseLevel');
+        
+        if (this.checked) {
+            noiseLevelGroup.style.opacity = '1';
+            noiseLevelSlider.disabled = false;
+        } else {
+            noiseLevelGroup.style.opacity = '0.4';
+            noiseLevelSlider.disabled = true;
+        }
+        updateVisualizations();
+    });
+    
+    // Noise level slider
+    document.getElementById('noiseLevel').addEventListener('input', function() {
+        document.getElementById('noiseLevelValue').textContent = parseFloat(this.value).toFixed(1);
+        updateVisualizations();
+    });
+    
+}
+
+// --- MAIN INITIALIZATION ---
+
+function main() {
+    initCharts();
+    setupEventListeners();
+    
+    // Make controls draggable on desktop
+    if (window.innerWidth > 1200) {
+        makeDraggable(document.getElementById('floatingControls'), document.getElementById('controlsTitle'));
+    }
+    
+    // Initial visualization
+    updateVisualizations();
+}
+
+window.addEventListener('load', main);

src/js/inverse_classifier.js

@@ -1,49 +1,10 @@
 // --- GLOBAL VARIABLES ---
 let scoresChart, rocChart, metricsChart;
-const metricExplanations = {
-    'AUC': {
-        description: "Measures the model's ability to distinguish between positive and negative classes. It represents the probability that a random positive instance is ranked higher than a random negative instance.",
-        range: "Ranges from 0 (worst) to 1 (best). 0.5 is random chance.",
-        formula: "Area Under the ROC Curve"
-    },
-    'Accuracy': {
-        description: "The proportion of all predictions that are correct. It's a general measure of the model's performance.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "(TP + TN) / (TP + TN + FP + FN)"
-    },
-    'Precision': {
-        description: "Of all the positive predictions made by the model, how many were actually positive. High precision indicates a low false positive rate.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "TP / (TP + FP)"
-    },
-    'Recall': {
-        description: "Of all the actual positive instances, how many did the model correctly identify. Also known as Sensitivity or True Positive Rate.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "TP / (TP + FN)"
-    },
-    'Specificity': {
-        description: "Of all the actual negative instances, how many did the model correctly identify. Also known as True Negative Rate.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "TN / (TN + FP)"
-    },
-    'F1-Score': {
-        description: "The harmonic mean of Precision and Recall. It provides a single score that balances both concerns, useful for imbalanced classes.",
-        range: "Ranges from 0 (worst) to 1 (best).",
-        formula: "2 * (Precision * Recall) / (Precision + Recall)"
-    }
-};
 let lockState = { tp: false, fp: false, tn: false, fn: false };
 let currentState = { tp: 40, fp: 10, tn: 45, fn: 5 };
 const TOTAL_SAMPLES = 100;
 
-// --- SIMULATION & CALCULATIONS ---
-function randomGaussian(mean = 0, stdDev = 1) {
-    let u = 0, v = 0;
-    while (u === 0) u = Math.random();
-    while (v === 0) v = Math.random();
-    return mean + stdDev * Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
-}
-
+// --- SIMULATION ---
 function generateScoresFromMatrix(tp, fp, tn, fn) {
     const total_pos_real = tp + fn;
     const total_neg_real = tn + fp;
@@ -59,26 +20,6 @@ function generateScoresFromMatrix(tp, fp, tn, fn) {
     return { scores, labels };
 }
 
-function calculateRocAndAuc(labels, scores) {
-    const pairs = labels.map((label, i) => ({ label, score: scores[i] }));
-    pairs.sort((a, b) => b.score - a.score);
-    let tp = 0, fp = 0;
-    const total_pos = labels.filter(l => l === 1).length;
-    const total_neg = labels.length - total_pos;
-    if (total_pos === 0 || total_neg === 0) return { rocPoints: [{ x: 0, y: 0 }, { x: 1, y: 1 }], auc: 0.5 };
-    const rocPoints = [{ x: 0, y: 0 }];
-    let auc = 0, prev_tpr = 0, prev_fpr = 0;
-    for (const pair of pairs) {
-        if (pair.label === 1) tp++; else fp++;
-        const tpr = tp / total_pos;
-        const fpr = fp / total_neg;
-        auc += (tpr + prev_tpr) / 2 * (fpr - prev_fpr);
-        rocPoints.push({ x: fpr, y: tpr });
-        prev_tpr = tpr; prev_fpr = fpr;
-    }
-    return { rocPoints, auc };
-}
-
 function createHistogramData(scores, labels, n_bins = 20) {
     const bins = Array(n_bins).fill(0).map(() => ({ pos: 0, neg: 0 }));
     const bin_labels = Array(n_bins).fill(0).map((_, i) => (i / n_bins).toFixed(2));
@@ -92,43 +33,6 @@ function createHistogramData(scores, labels, n_bins = 20) {
     return { labels: bin_labels, pos_data: bins.map(b => b.pos), neg_data: bins.map(b => b.neg) };
 }
 
-// [CORRIGÉ] Fonction de dessin utilisant la palette "Blues"
-function drawConfusionMatrix(canvasId, tp, fp, tn, fn) {
-    const canvas = document.getElementById(canvasId);
-    const ctx = canvas.getContext('2d');
-    const w = canvas.width, h = canvas.height;
-    ctx.clearRect(0, 0, w, h);
-    const margin = 50, gridW = w - margin, gridH = h - margin, cellW = gridW / 2, cellH = gridH / 2;
-    const max_val = Math.max(tp, fp, tn, fn);
-    const baseColor = [8, 48, 107]; // "Blues" palette base color
-    const cells = [
-        { label: 'TN', value: tn, x: 0, y: cellH },
-        { label: 'FP', value: fp, x: cellW, y: cellH },
-        { label: 'FN', value: fn, x: 0, y: 0 },
-        { label: 'TP', value: tp, x: cellW, y: 0 }
-    ];
-    cells.forEach(cell => {
-        const intensity = max_val > 0 ? cell.value / max_val : 0;
-        ctx.fillStyle = `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${intensity})`;
-        ctx.fillRect(margin + cell.x, cell.y, cellW, cellH);
-        ctx.fillStyle = intensity > 0.5 ? 'white' : 'black';
-        ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
-        ctx.font = 'bold 20px Segoe UI'; ctx.fillText(cell.label, margin + cell.x + cellW / 2, cell.y + cellH / 2 - 12);
-        ctx.font = '18px Segoe UI'; ctx.fillText(cell.value, margin + cell.x + cellW / 2, cell.y + cellH / 2 + 12);
-    });
-    ctx.fillStyle = '#333'; ctx.font = 'bold 14px Segoe UI';
-    ctx.fillText('Negative', margin + cellW / 2, gridH + 20);
-    ctx.fillText('Positive', margin + cellW + cellW / 2, gridH + 20);
-    ctx.save();
-    ctx.translate(20, gridH / 2);
-    ctx.rotate(-Math.PI / 2);
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText('Positive', -cellH / 2, 0);
-    ctx.fillText('Negative', cellH / 2, 0);
-    ctx.restore();
-}
-
 // --- UI MANAGEMENT ---
 function adjustValues(changedParam, newValue) {
     let values = { ...currentState };
@@ -182,28 +86,6 @@ function updateUI() {
 }
 
 // --- INITIALIZATION ---
-const customDatalabelsPlugin = {
-    id: 'customDatalabels',
-    afterDatasetsDraw: (chart) => {
-        const ctx = chart.ctx;
-        ctx.save();
-        ctx.font = 'bold 12px Segoe UI';
-        ctx.fillStyle = 'white';
-        ctx.textAlign = 'center';
-        chart.data.datasets.forEach((dataset, i) => {
-            const meta = chart.getDatasetMeta(i);
-            meta.data.forEach((bar, index) => {
-                const data = dataset.data[index];
-                if (bar.height > 15) {
-                    ctx.textBaseline = 'bottom';
-                    ctx.fillText(data.toFixed(3), bar.x, bar.y + bar.height - 5);
-                }
-            });
-        });
-        ctx.restore();
-    }
-};
-
 function initCharts() {
     const scoresCtx = document.getElementById('scoresChart').getContext('2d');
     scoresChart = new Chart(scoresCtx, { type: 'bar', data: { labels: [], datasets: [{ label: 'Scores (Negative Class)', data: [], backgroundColor: '#0D47A1', barPercentage: 1.0, categoryPercentage: 1.0 }, { label: 'Scores (Positive Class)', data: [], backgroundColor: '#B71C1C', barPercentage: 1.0, categoryPercentage: 1.0 }] }, options: { responsive: true, maintainAspectRatio: false, animation: { duration: 0 }, scales: { x: { stacked: true }, y: { stacked: true, title: { display: true, text: 'Number of Samples' } } } } });
@@ -232,20 +114,7 @@ function initCharts() {
                     padding: 15,
                     displayColors: false,
                     callbacks: {
-                        label: function (context) {
-                            const label = context.chart.data.labels[context.dataIndex];
-                            const value = context.raw.toFixed(3);
-                            const explanation = metricExplanations[label];
-                            let tooltipText = [`${label}: ${value}`];
-                            if (explanation) {
-                                tooltipText.push('');
-                                const roleLines = `Role: ${explanation.description}`.match(/.{1,50}(\s|$)/g) || [];
-                                roleLines.forEach(line => tooltipText.push(line.trim()));
-                                tooltipText.push(`Range: ${explanation.range}`);
-                                tooltipText.push(`Formula: ${explanation.formula}`);
-                            }
-                            return tooltipText;
-                        }
+                        label: metricsTooltipCallback
                     }
                 }
             },
@@ -260,13 +129,6 @@ function updateSliderDisabledState() {
     for (const param in lockState) { sliders[param].disabled = lockState[param] || lockedCount >= 3; }
 }
 
-function makeDraggable(element, handle) {
-    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-    handle.onmousedown = (e) => { e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; };
-    const elementDrag = (e) => { e.preventDefault(); pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; element.style.top = (element.offsetTop - pos2) + "px"; element.style.left = (element.offsetLeft - pos1) + "px"; };
-    const closeDragElement = () => { document.onmouseup = null; document.onmousemove = null; };
-}
-
 window.addEventListener('load', function () {
     initCharts();
     Object.keys(currentState).forEach(param => {

src/js/linear_regression.js

@@ -0,0 +1,730 @@
+// ============================================================
+// linear_regression.js — Linear Regression Playground
+// ============================================================
+
+// --- GLOBAL VARIABLES ---
+let mainChart, residualChart;
+let points = []; // Array of {x, y, id}
+let nextPointId = 0;
+let isDragging = false;
+let draggedPointId = null;
+let regressionCoefficients = null;
+
+// Chart scales
+const X_MIN = -10;
+const X_MAX = 10;
+const Y_MIN = -10;
+const Y_MAX = 10;
+
+// Zoom state
+let currentXMin = X_MIN;
+let currentXMax = X_MAX;
+let currentYMin = Y_MIN;
+let currentYMax = Y_MAX;
+const ZOOM_FACTOR = 0.1; // 10% zoom per wheel step
+
+// --- POLYNOMIAL REGRESSION IMPLEMENTATION ---
+
+/**
+ * Build Vandermonde matrix for polynomial regression
+ * X: array of x values
+ * degree: polynomial degree
+ */
+function buildVandermonde(X, degree) {
+    const n = X.length;
+    const V = [];
+    for (let i = 0; i < n; i++) {
+        const row = [];
+        for (let j = 0; j <= degree; j++) {
+            row.push(Math.pow(X[i], j));
+        }
+        V.push(row);
+    }
+    return V;
+}
+
+/**
+ * Transpose a matrix
+ */
+function transpose(matrix) {
+    const rows = matrix.length;
+    const cols = matrix[0].length;
+    const result = [];
+    for (let j = 0; j < cols; j++) {
+        const row = [];
+        for (let i = 0; i < rows; i++) {
+            row.push(matrix[i][j]);
+        }
+        result.push(row);
+    }
+    return result;
+}
+
+/**
+ * Matrix multiplication: A * B
+ */
+function multiply(A, B) {
+    const rowsA = A.length;
+    const colsA = A[0].length;
+    const colsB = B[0].length;
+    const result = [];
+    for (let i = 0; i < rowsA; i++) {
+        const row = [];
+        for (let j = 0; j < colsB; j++) {
+            let sum = 0;
+            for (let k = 0; k < colsA; k++) {
+                sum += A[i][k] * B[k][j];
+            }
+            row.push(sum);
+        }
+        result.push(row);
+    }
+    return result;
+}
+
+/**
+ * Solve linear system Ax = b using Gaussian elimination
+ */
+function solveLinearSystem(A, b) {
+    const n = A.length;
+    // Augmented matrix
+    const M = A.map((row, i) => [...row, b[i][0]]);
+    
+    // Forward elimination
+    for (let i = 0; i < n; i++) {
+        // Find pivot
+        let maxRow = i;
+        for (let k = i + 1; k < n; k++) {
+            if (Math.abs(M[k][i]) > Math.abs(M[maxRow][i])) {
+                maxRow = k;
+            }
+        }
+        // Swap rows
+        [M[i], M[maxRow]] = [M[maxRow], M[i]];
+        
+        // Make all rows below this one 0 in current column
+        for (let k = i + 1; k < n; k++) {
+            const factor = M[k][i] / M[i][i];
+            for (let j = i; j <= n; j++) {
+                M[k][j] -= factor * M[i][j];
+            }
+        }
+    }
+    
+    // Back substitution
+    const x = new Array(n).fill(0);
+    for (let i = n - 1; i >= 0; i--) {
+        x[i] = M[i][n] / M[i][i];
+        for (let k = i - 1; k >= 0; k--) {
+            M[k][n] -= M[k][i] * x[i];
+        }
+    }
+    
+    return x;
+}
+
+/**
+ * Fit polynomial regression model
+ * Returns coefficients [β0, β1, ..., βdegree]
+ */
+function fitPolynomialRegression(X, y, degree) {
+    if (X.length < degree + 1) {
+        return null; // Not enough points
+    }
+    
+    const V = buildVandermonde(X, degree);
+    const Vt = transpose(V);
+    const VtV = multiply(Vt, V);
+    const Vty = multiply(Vt, y.map(val => [val]));
+    
+    // Solve (V^T * V) * β = V^T * y
+    const coefficients = solveLinearSystem(VtV, Vty);
+    return coefficients;
+}
+
+/**
+ * Predict y values for given x values using fitted model
+ */
+function predict(X, coefficients) {
+    if (!coefficients) return X.map(() => 0);
+    return X.map(x => {
+        let y = 0;
+        for (let i = 0; i < coefficients.length; i++) {
+            y += coefficients[i] * Math.pow(x, i);
+        }
+        return y;
+    });
+}
+
+/**
+ * Calculate regression statistics
+ */
+function calculateStatistics(yTrue, yPred, n, degree) {
+    const residuals = yTrue.map((y, i) => y - yPred[i]);
+    const ssRes = residuals.reduce((sum, r) => sum + r * r, 0);
+    const yMean = yTrue.reduce((sum, y) => sum + y, 0) / yTrue.length;
+    const ssTot = yTrue.reduce((sum, y) => sum + Math.pow(y - yMean, 2), 0);
+    
+    const r2 = ssTot > 0 ? 1 - ssRes / ssTot : 0;
+    const adjustedR2 = n > degree + 1 ? 1 - (1 - r2) * (n - 1) / (n - degree - 1) : r2;
+    const mse = ssRes / n;
+    const rmse = Math.sqrt(mse);
+    const mae = residuals.reduce((sum, r) => sum + Math.abs(r), 0) / n;
+    
+    return { r2, adjustedR2, mse, rmse, mae, residuals };
+}
+
+/**
+ * Calculate confidence intervals for predictions (pointwise ±2σ)
+ */
+function calculateConfidenceInterval(X, coefficients, residuals, confidence = 0.95) {
+    if (!coefficients || X.length === 0) return X.map(() => ({ lower: 0, upper: 0 }));
+    
+    const n = residuals.length;
+    const degree = coefficients.length - 1;
+    
+    // Estimate standard deviation of residuals
+    const ssRes = residuals.reduce((sum, r) => sum + r * r, 0);
+    const sigma = Math.sqrt(ssRes / Math.max(1, n - degree - 1));
+    
+    // For simplicity, use ±2σ as approximate 95% confidence interval
+    const multiplier = 2;
+    
+    return X.map(x => {
+        const yPred = predict([x], coefficients)[0];
+        return {
+            lower: yPred - multiplier * sigma,
+            upper: yPred + multiplier * sigma
+        };
+    });
+}
+
+// --- CHART INITIALIZATION ---
+
+function initCharts() {
+    // Main chart (scatter + regression line)
+    const mainCtx = document.getElementById('mainChart').getContext('2d');
+    mainChart = new Chart(mainCtx, {
+        type: 'scatter',
+        data: {
+            datasets: [
+                {
+                    label: 'Data Points',
+                    data: [],
+                    backgroundColor: '#1976d2',
+                    borderColor: '#1976d2',
+                    borderWidth: 2,
+                    pointRadius: 6,
+                    pointHoverRadius: 8,
+                    pointHoverBorderWidth: 3
+                },
+                {
+                    label: 'Regression Line',
+                    data: [],
+                    type: 'line',
+                    borderColor: '#d32f2f',
+                    backgroundColor: 'transparent',
+                    borderWidth: 2,
+                    pointRadius: 0,
+                    fill: false,
+                    tension: 0.4
+                },
+                {
+                    label: 'Confidence Band Lower',
+                    data: [],
+                    type: 'line',
+                    borderColor: 'transparent',
+                    backgroundColor: 'rgba(211, 47, 47, 0.1)',
+                    borderWidth: 0,
+                    pointRadius: 0,
+                    fill: '+1'
+                },
+                {
+                    label: 'Confidence Band Upper',
+                    data: [],
+                    type: 'line',
+                    borderColor: 'transparent',
+                    backgroundColor: 'rgba(211, 47, 47, 0.1)',
+                    borderWidth: 0,
+                    pointRadius: 0,
+                    fill: false
+                },
+                {
+                    label: 'Residuals',
+                    data: [],
+                    type: 'line',
+                    borderColor: '#757575',
+                    backgroundColor: 'transparent',
+                    borderWidth: 1,
+                    borderDash: [3, 3],
+                    pointRadius: 0,
+                    showLine: true
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: { duration: 0 },
+            scales: {
+                x: {
+                    min: X_MIN,
+                    max: X_MAX,
+                    title: { display: true, text: 'X' }
+                },
+                y: {
+                    min: Y_MIN,
+                    max: Y_MAX,
+                    title: { display: true, text: 'Y' }
+                }
+            },
+            plugins: {
+                legend: {
+                    display: true,
+                    labels: {
+                        filter: function(item) {
+                            // Hide confidence band entries from legend
+                            return item.text !== 'Confidence Band Lower' && item.text !== 'Confidence Band Upper';
+                        }
+                    }
+                },
+                tooltip: {
+                    callbacks: {
+                        label: function(context) {
+                            if (context.dataset.label === 'Data Points') {
+                                return `Point (${context.parsed.x.toFixed(2)}, ${context.parsed.y.toFixed(2)})`;
+                            }
+                            return `${context.dataset.label}: ${context.parsed.y.toFixed(3)}`;
+                        }
+                    }
+                }
+            }
+            // Note: onClick and onHover removed - using native events instead
+        }
+    });
+
+    // Residual chart
+    const residualCtx = document.getElementById('residualChart').getContext('2d');
+    residualChart = new Chart(residualCtx, {
+        type: 'scatter',
+        data: {
+            datasets: [
+                {
+                    label: 'Residuals',
+                    data: [],
+                    backgroundColor: '#1976d2',
+                    pointRadius: 5
+                },
+                {
+                    label: 'Zero Line',
+                    data: [{ x: Y_MIN, y: 0 }, { x: Y_MAX, y: 0 }],
+                    type: 'line',
+                    borderColor: '#d32f2f',
+                    borderWidth: 2,
+                    pointRadius: 0,
+                    borderDash: [5, 5]
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: { duration: 0 },
+            scales: {
+                x: {
+                    title: { display: true, text: 'Predicted Values' }
+                },
+                y: {
+                    title: { display: true, text: 'Residuals' }
+                }
+            },
+            plugins: {
+                legend: { display: false }
+            }
+        }
+    });
+}
+
+// --- INTERACTION HANDLERS ---
+
+function findNearestPoint(x, y, threshold = 1.0) {
+    for (const point of points) {
+        const dist = Math.sqrt(Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2));
+        if (dist < threshold) {
+            return point;
+        }
+    }
+    return null;
+}
+
+function getMousePos(canvas, event) {
+    const rect = canvas.getBoundingClientRect();
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+    };
+}
+
+function getChartCoordinates(canvas, event) {
+    const pos = getMousePos(canvas, event);
+    return {
+        x: mainChart.scales.x.getValueForPixel(pos.x),
+        y: mainChart.scales.y.getValueForPixel(pos.y)
+    };
+}
+
+function addPoint(x, y) {
+    // Clamp values to current chart bounds (allows adding points outside initial view when zoomed out)
+    x = Math.max(currentXMin, Math.min(currentXMax, x));
+    y = Math.max(currentYMin, Math.min(currentYMax, y));
+    
+    points.push({ x, y, id: nextPointId++ });
+    updateRegression();
+}
+
+function removePoint(id) {
+    points = points.filter(p => p.id !== id);
+    updateRegression();
+}
+
+function updatePointPosition(id, x, y) {
+    const point = points.find(p => p.id === id);
+    if (point) {
+        point.x = Math.max(currentXMin, Math.min(currentXMax, x));
+        point.y = Math.max(currentYMin, Math.min(currentYMax, y));
+        updateRegression();
+    }
+}
+
+// --- ZOOM FUNCTIONS ---
+
+function zoom(factor, centerX, centerY) {
+    const xRange = currentXMax - currentXMin;
+    const yRange = currentYMax - currentYMin;
+    
+    // Calculate new ranges
+    const newXRange = xRange * factor;
+    const newYRange = yRange * factor;
+    
+    // Calculate ratios for center point
+    const xRatio = (centerX - currentXMin) / xRange;
+    const yRatio = (centerY - currentYMin) / yRange;
+    
+    // Calculate new bounds keeping the center point stable
+    currentXMin = centerX - newXRange * xRatio;
+    currentXMax = centerX + newXRange * (1 - xRatio);
+    currentYMin = centerY - newYRange * yRatio;
+    currentYMax = centerY + newYRange * (1 - yRatio);
+    
+    // Update chart scales
+    mainChart.options.scales.x.min = currentXMin;
+    mainChart.options.scales.x.max = currentXMax;
+    mainChart.options.scales.y.min = currentYMin;
+    mainChart.options.scales.y.max = currentYMax;
+    mainChart.update('none');
+}
+
+function resetZoom() {
+    if (points.length === 0) {
+        // No points: reset to default view
+        currentXMin = X_MIN;
+        currentXMax = X_MAX;
+        currentYMin = Y_MIN;
+        currentYMax = Y_MAX;
+    } else {
+        // Fit to content: show all points with padding
+        const xs = points.map(p => p.x);
+        const ys = points.map(p => p.y);
+        
+        const xMin = Math.min(...xs);
+        const xMax = Math.max(...xs);
+        const yMin = Math.min(...ys);
+        const yMax = Math.max(...ys);
+        
+        // Add padding (20% of range or minimum 2 units)
+        const xRange = xMax - xMin;
+        const yRange = yMax - yMin;
+        const xPadding = Math.max(xRange * 0.1, 1);
+        const yPadding = Math.max(yRange * 0.1, 1);
+        
+        currentXMin = xMin - xPadding;
+        currentXMax = xMax + xPadding;
+        currentYMin = yMin - yPadding;
+        currentYMax = yMax + yPadding;
+    }
+    
+    mainChart.options.scales.x.min = currentXMin;
+    mainChart.options.scales.x.max = currentXMax;
+    mainChart.options.scales.y.min = currentYMin;
+    mainChart.options.scales.y.max = currentYMax;
+    mainChart.update('none');
+}
+
+// --- UPDATE REGRESSION AND UI ---
+
+function updateRegression() {
+    const degree = parseInt(document.getElementById('degreeSlider').value);
+    const showResiduals = document.getElementById('showResiduals').checked;
+    const showConfidence = document.getElementById('showConfidence').checked;
+    
+    // Update main chart data points
+    mainChart.data.datasets[0].data = points.map(p => ({ x: p.x, y: p.y }));
+    
+    if (points.length < degree + 1) {
+        // Not enough points for regression
+        mainChart.data.datasets[1].data = [];
+        mainChart.data.datasets[2].data = [];
+        mainChart.data.datasets[3].data = [];
+        mainChart.data.datasets[4].data = [];
+        residualChart.data.datasets[0].data = [];
+        updateStatisticsDisplay({ r2: 0, adjustedR2: 0, mse: 0, rmse: 0, mae: 0 }, points.length);
+        mainChart.update('none');
+        residualChart.update('none');
+        return;
+    }
+    
+    // Fit regression model
+    const X = points.map(p => p.x);
+    const y = points.map(p => p.y);
+    regressionCoefficients = fitPolynomialRegression(X, y, degree);
+    
+    // Generate smooth curve for visualization
+    const xCurve = [];
+    for (let x = currentXMin; x <= currentXMax; x += 0.2) {
+        xCurve.push(x);
+    }
+    const yCurve = predict(xCurve, regressionCoefficients);
+    
+    // Update regression line
+    mainChart.data.datasets[1].data = xCurve.map((x, i) => ({ x, y: yCurve[i] }));
+    
+    // Calculate predictions for actual points
+    const yPred = predict(X, regressionCoefficients);
+    const stats = calculateStatistics(y, yPred, points.length, degree);
+    
+    // Update confidence band
+    if (showConfidence) {
+        const confidenceIntervals = calculateConfidenceInterval(xCurve, regressionCoefficients, stats.residuals);
+        mainChart.data.datasets[2].data = xCurve.map((x, i) => ({ x, y: confidenceIntervals[i].lower }));
+        mainChart.data.datasets[3].data = xCurve.map((x, i) => ({ x, y: confidenceIntervals[i].upper }));
+    } else {
+        mainChart.data.datasets[2].data = [];
+        mainChart.data.datasets[3].data = [];
+    }
+    
+    // Update residual lines
+    if (showResiduals) {
+        const residualLines = [];
+        for (let i = 0; i < points.length; i++) {
+            residualLines.push({ x: X[i], y: y[i] });
+            residualLines.push({ x: X[i], y: yPred[i] });
+            residualLines.push({ x: NaN, y: NaN }); // Break line
+        }
+        mainChart.data.datasets[4].data = residualLines;
+    } else {
+        mainChart.data.datasets[4].data = [];
+    }
+    
+    // Update residual chart
+    residualChart.data.datasets[0].data = yPred.map((yp, i) => ({ x: yp, y: stats.residuals[i] }));
+    
+    // Update statistics display
+    updateStatisticsDisplay(stats, points.length);
+    
+    mainChart.update('none');
+    residualChart.update('none');
+}
+
+function updateStatisticsDisplay(stats, n) {
+    document.getElementById('r2Value').textContent = n > 0 ? stats.r2.toFixed(4) : '-';
+    document.getElementById('adjustedR2Value').textContent = n > 0 ? stats.adjustedR2.toFixed(4) : '-';
+    document.getElementById('mseValue').textContent = n > 0 ? stats.mse.toFixed(4) : '-';
+    document.getElementById('maeValue').textContent = n > 0 ? stats.mae.toFixed(4) : '-';
+    document.getElementById('rmseValue').textContent = n > 0 ? stats.rmse.toFixed(4) : '-';
+    document.getElementById('nPointsValue').textContent = n;
+}
+
+// --- EVENT LISTENERS ---
+
+function setupEventListeners() {
+    // Degree slider
+    const degreeSlider = document.getElementById('degreeSlider');
+    degreeSlider.addEventListener('input', function() {
+        document.getElementById('degreeValue').textContent = this.value;
+        updateRegression();
+    });
+    
+    // Show residuals toggle
+    document.getElementById('showResiduals').addEventListener('change', updateRegression);
+    
+    // Show confidence toggle
+    document.getElementById('showConfidence').addEventListener('change', updateRegression);
+    
+    // Clear points button
+    document.getElementById('clearPointsBtn').addEventListener('click', function() {
+        points = [];
+        updateRegression();
+    });
+    
+    // Add random points button
+    document.getElementById('addRandomBtn').addEventListener('click', function() {
+        for (let i = 0; i < 5; i++) {
+            const x = currentXMin + Math.random() * (currentXMax - currentXMin);
+            const y = (currentYMin + Math.random() * (currentYMax - currentYMin)) + randomGaussian(0, 2);
+            addPoint(x, y);
+        }
+    });
+    
+    // Reset zoom button
+    document.getElementById('resetZoomBtn').addEventListener('click', resetZoom);
+    
+    // Canvas interactions
+    const canvas = document.getElementById('mainChart');
+    let hasDragged = false;
+    let clickedOnPoint = false;
+    
+    // Canvas for zoom with mouse wheel
+    canvas.addEventListener('wheel', function(event) {
+        event.preventDefault();
+        
+        const rect = canvas.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        
+        // Get chart coordinates of mouse position
+        const centerX = mainChart.scales.x.getValueForPixel(mouseX);
+        const centerY = mainChart.scales.y.getValueForPixel(mouseY);
+        
+        // Zoom in (scroll up, deltaY < 0) or zoom out (scroll down, deltaY > 0)
+        const zoomDirection = event.deltaY < 0 ? (1 - ZOOM_FACTOR) : (1 + ZOOM_FACTOR);
+        zoom(zoomDirection, centerX, centerY);
+    }, { passive: false });
+    
+    // Mouse down - start drag or prepare for click
+    canvas.addEventListener('mousedown', function(event) {
+        if (event.button !== 0) return; // Only left click
+        
+        event.preventDefault();
+        event.stopPropagation();
+        
+        const coords = getChartCoordinates(canvas, event);
+        const nearestPoint = findNearestPoint(coords.x, coords.y);
+        
+        hasDragged = false;
+        
+        if (nearestPoint) {
+            // Clicked on existing point - start dragging
+            isDragging = true;
+            draggedPointId = nearestPoint.id;
+            clickedOnPoint = true;
+            canvas.classList.add('dragging');
+        } else {
+            // Clicked on empty space - prepare for adding point
+            clickedOnPoint = false;
+        }
+    });
+    
+    // Mouse move - handle dragging
+    document.addEventListener('mousemove', function(event) {
+        // Update cursor style on hover when not dragging
+        if (!isDragging) {
+            const coords = getChartCoordinates(canvas, event);
+            if (coords.x >= X_MIN && coords.x <= X_MAX && coords.y >= Y_MIN && coords.y <= Y_MAX) {
+                const nearestPoint = findNearestPoint(coords.x, coords.y);
+                if (nearestPoint) {
+                    canvas.classList.add('hover-point');
+                } else {
+                    canvas.classList.remove('hover-point');
+                }
+            }
+            return;
+        }
+        
+        // We are dragging
+        hasDragged = true;
+        
+        const rect = canvas.getBoundingClientRect();
+        let canvasX = event.clientX - rect.left;
+        let canvasY = event.clientY - rect.top;
+        
+        // Clamp to canvas bounds
+        canvasX = Math.max(0, Math.min(canvasX, rect.width));
+        canvasY = Math.max(0, Math.min(canvasY, rect.height));
+        
+        const x = mainChart.scales.x.getValueForPixel(canvasX);
+        const y = mainChart.scales.y.getValueForPixel(canvasY);
+        
+        updatePointPosition(draggedPointId, x, y);
+    });
+    
+    // Mouse up - end drag or handle click
+    document.addEventListener('mouseup', function(event) {
+        if (event.button !== 0) return; // Only left click
+        
+        if (isDragging) {
+            // End drag
+            isDragging = false;
+            draggedPointId = null;
+            canvas.classList.remove('dragging');
+        } else if (!clickedOnPoint) {
+            // This was a click on empty space - add point
+            const coords = getChartCoordinates(canvas, event);
+            // Check if click is within current visible bounds (not just initial bounds)
+            if (coords.x >= currentXMin && coords.x <= currentXMax && coords.y >= currentYMin && coords.y <= currentYMax) {
+                addPoint(coords.x, coords.y);
+            }
+        }
+        
+        // Reset flags
+        hasDragged = false;
+        clickedOnPoint = false;
+    });
+    
+    // Right-click to remove point
+    canvas.addEventListener('contextmenu', function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        
+        if (isDragging) {
+            // Cancel drag
+            isDragging = false;
+            draggedPointId = null;
+            canvas.classList.remove('dragging');
+            return;
+        }
+        
+        const coords = getChartCoordinates(canvas, event);
+        const clickedPoint = findNearestPoint(coords.x, coords.y);
+        if (clickedPoint) {
+            removePoint(clickedPoint.id);
+        }
+    });
+    
+    // Prevent context menu on right-click
+    canvas.addEventListener('contextmenu', function(event) {
+        event.preventDefault();
+    });
+}
+
+// --- MAIN INITIALIZATION ---
+
+function main() {
+    initCharts();
+    setupEventListeners();
+    
+    // Make controls draggable on desktop
+    if (window.innerWidth > 1200) {
+        makeDraggable(document.getElementById('floatingControls'), document.getElementById('controlsTitle'));
+    }
+    
+    // Add some initial random points
+    for (let i = 0; i < 8; i++) {
+        const x = X_MIN + Math.random() * (X_MAX - X_MIN);
+        const y = 2 + 0.5 * x + randomGaussian(0, 1.5);
+        points.push({ x, y, id: nextPointId++ });
+    }
+    
+    updateRegression();
+}
+
+window.addEventListener('load', main);