StatLab

A statistics toolkit for Pearson Correlation and Confusion Matrix analysis — built with Vanilla HTML, CSS, and JavaScript.

---

Overview

StatLab is a single-page web application with two statistical tools:

1. Pearson Regression — calculates the Pearson Correlation Coefficient between two datasets, with scatter plot and regression line visualization.
2. Confusion Matrix — evaluates classification model performance with per-class and overall metrics (Accuracy, Precision, Recall, F1).

All math is implemented from scratch — no external libraries or packages used.

---

Features

Pearson Regression Tab

• Enter x/y observation pairs via input fields
• Live table display of all added data points
• Input validation with real-time error messages
• Calculate button disabled until valid data is present
• Computed results:
  • Arithmetic mean for x and y
  • Standard deviation for x and y
  • Pearson correlation coefficient (r)
  • Interpretation: No correlation / Weak / Some / Strong
• Scatter plot rendered on HTML5 Canvas
• Regression line overlay on the scatter plot

Confusion Matrix Tab

• Configurable matrix size: 2×2 up to 5×5
• Color-coded matrix display (green diagonal, red off-diagonal)
• Load Demo button for quick testing
• Computed metrics:
  • Accuracy
  • Macro Precision, Recall, F1
  • Weighted F1
  • Per-class Precision, Recall, F1, and Support

---

Getting Started

No build tools or dependencies needed.

# Clone the repo
git clone https://github.com/your-username/statlab.git

# Open in browser
cd statlab
open index.html

Or just double-click index.html — it runs entirely in the browser.

---

Project Structure

statlab/
├── index.html       # All HTML, CSS, and JS in a single file
└── README.md

---

How the Math Works

Pearson Correlation Coefficient

r = Σ((xᵢ - x̄)(yᵢ - ȳ)) / √[ Σ(xᵢ - x̄)² · Σ(yᵢ - ȳ)² ]

Where x̄ and ȳ are the arithmetic means of x and y respectively.

r value	Interpretation
0.0 – 0.29	No correlation
0.30 – 0.49	Weak / Neutral
0.50 – 0.69	Some correlation
0.70 – 1.00	Strong correlation

The sign of r indicates direction: positive = variables move together, negative = they move inversely.

Regression Line

slope (m) = Σ((xᵢ - x̄)(yᵢ - ȳ)) / Σ(xᵢ - x̄)²
intercept (b) = ȳ - m · x̄

Confusion Matrix Metrics

For each class c:

Precision  = TP / (TP + FP)
Recall     = TP / (TP + FN)
F1 Score   = 2 · Precision · Recall / (Precision + Recall)

Overall:

Accuracy        = Σ diagonal / total samples
Macro F1        = average F1 across all classes (equal weight)
Weighted F1     = average F1 weighted by class support

---

Usage Examples

Pearson — Temperature vs Ice Cream Sales

X (Temp °C)	Y (Sales)
20	120
25	145
30	180
35	210
15	90

Expected r ≈ 0.99 → Strong positive correlation

Confusion Matrix — Binary Classifier

	Pred: No	Pred: Yes
Actual: No	50	2
Actual: Yes	3	45

Expected Accuracy ≈ 95%

---

Bonus Features Implemented

• Scatter plot of observations
• Regression line overlaying the scatter plot
• Confusion matrix with color intensity scaled to values
• CSV file upload (planned)

---

Built With

• HTML5 Canvas — scatter plot rendering
• CSS custom properties — theming and layout
• Vanilla JavaScript — all logic and DOM manipulation
• Syne + DM Mono — Google Fonts

---

Author

Shreya

---

License

MIT License — free to use, modify, and distribute.

Live Website

https://stat-lab-shreya.vercel.app/