# Story 3.1: Matrice de Corrélation Interactive Status: review ## Story As a Julien (Analyst), I want to see a visual correlation map of my numeric variables, so that I can quickly identify which factors are related. ## Acceptance Criteria 1. **Correlation Tab:** A dedicated "Correlations" view or tab is accessible from the main workspace. 2. **Interactive Heatmap:** Displays a heatmap showing the Pearson correlation coefficients between all numeric columns. 3. **Data Tooltip:** Hovering over a heatmap cell shows the name of the two variables and the precise correlation value (e.g., "0.85"). 4. **Color Scale:** Uses a diverging color scale (e.g., Blue for negative, Red for positive, White for neutral) to highlight strong relationships. 5. **Clean Data Source:** The heatmap MUST only use data from rows that are NOT excluded. ## Tasks / Subtasks - [x] **Backend Analysis Engine** (AC: 2, 5) - [x] Implement `calculate_correlation_matrix(df, columns)` in `backend/app/core/engine/stats.py`. - [x] Add endpoint `POST /api/v1/analysis/correlation` that accepts data and column list. - [x] **Frontend Visualization** (AC: 1, 2, 3, 4) - [x] Create `frontend/src/features/analysis/components/CorrelationHeatmap.tsx`. - [x] Use `Recharts` or `Tremor` to render the matrix. - [x] Integrate with `getCleanData()` from the grid store. ## Dev Notes - **Data Integrity:** The heatmap uses the `getCleanData()` selector, ensuring that excluded outliers don't bias the correlation matrix. - **UI/UX:** Implemented a tab-switcher between "Data" and "Correlation" views. - **Visualization:** Used a customized Recharts ScatterChart to simulate a heatmap with dynamic opacity based on correlation strength. ### Project Structure Notes - Created `backend/app/core/engine/stats.py`. - Created `frontend/src/features/analysis/components/CorrelationHeatmap.tsx`. - Updated `frontend/src/app/page.tsx` with tab logic. ### References - [Source: epics.md#Story 3.1] - [Source: ux-design-specification.md#Design System Foundation] ## Dev Agent Record ### Agent Model Used {{agent_model_name_version}} ### Completion Notes List - Developed Pearson correlation logic in the Python backend. - Built an interactive heatmap in the React frontend. - Added informative tooltips showing detailed correlation metrics. - Ensured the view only processes "Clean" data (respecting user row exclusions). ### File List - /backend/app/core/engine/stats.py - /backend/app/api/v1/analysis.py - /frontend/src/features/analysis/components/CorrelationHeatmap.tsx - /frontend/src/app/page.tsx