Spaces:
Running
Running
Commit ·
65dac5d
1
Parent(s): e09bd86
add README File contecnt
Browse files- README.md +70 -1
- Visualization/app.js +0 -0
- Visualization/index.html +944 -0
- Visualization/style.css +924 -0
- feature-engineering/app.js +1567 -0
- feature-engineering/index.html +455 -0
- feature-engineering/style.css +915 -0
- math-ds-complete/app.js +1681 -0
- math-ds-complete/index.html +0 -0
- math-ds-complete/style.css +1700 -0
README.md
CHANGED
|
@@ -1 +1,70 @@
|
|
| 1 |
-
# DataScience
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# DataScience
|
| 2 |
+
|
| 3 |
+
A small collection of educational, static web projects for learning statistics and machine learning.
|
| 4 |
+
|
| 5 |
+
## Contents
|
| 6 |
+
|
| 7 |
+
- `complete-statistics/` — An interactive, browser-based Statistics course (HTML/CSS/JS). It includes 40+ topics (descriptive statistics, probability, distributions, hypothesis testing, visualizations and interactive canvases).
|
| 8 |
+
- `ml_complete-all-topics/` — A comprehensive Machine Learning guide with interactive demos and explanatory pages (static HTML/CSS).
|
| 9 |
+
|
| 10 |
+
There are no server-side components — each subproject is a static website you can open in a browser or serve with a simple static server.
|
| 11 |
+
|
| 12 |
+
## Quick Start (run locally)
|
| 13 |
+
|
| 14 |
+
Option A — open in your browser (double-click):
|
| 15 |
+
|
| 16 |
+
1. Navigate to the folder of the subproject you want to view (for example `complete-statistics/`).
|
| 17 |
+
2. Open `index.html` in your browser.
|
| 18 |
+
|
| 19 |
+
Option B — serve locally (recommended to avoid CORS/cache issues):
|
| 20 |
+
|
| 21 |
+
From the repository root, run one of the following in a terminal:
|
| 22 |
+
|
| 23 |
+
```bash
|
| 24 |
+
# Python 3 (simple static server, available on macOS):
|
| 25 |
+
python3 -m http.server 8000
|
| 26 |
+
|
| 27 |
+
# or using Node.js http-server (if installed):
|
| 28 |
+
npx http-server -c-1 . 8000
|
| 29 |
+
```
|
| 30 |
+
|
| 31 |
+
Then open http://localhost:8000/complete-statistics/ or http://localhost:8000/ml_complete-all-topics/ in your browser.
|
| 32 |
+
|
| 33 |
+
## Deploy to GitHub Pages
|
| 34 |
+
|
| 35 |
+
1. Push your changes to the `main` branch on GitHub (already done for this repo).
|
| 36 |
+
2. In your repository settings on GitHub, go to "Pages" and select the `main` branch and root (`/`) as the source, or set the `gh-pages` branch if you prefer.
|
| 37 |
+
3. Save — GitHub Pages will publish the site. For multi-site repos you can add a `docs/` folder or create separate branches, or create a small repo per site.
|
| 38 |
+
|
| 39 |
+
Because these are static sites you can also host them on Netlify, Vercel, or any static host.
|
| 40 |
+
|
| 41 |
+
## Files of interest
|
| 42 |
+
|
| 43 |
+
- `complete-statistics/index.html`, `complete-statistics/style.css`, `complete-statistics/app.js` — interactive statistics lessons and canvas visualizations
|
| 44 |
+
- `ml_complete-all-topics/index.html` — long-form machine learning guide with examples and UI controls
|
| 45 |
+
|
| 46 |
+
## Notes about repository cleanup
|
| 47 |
+
|
| 48 |
+
While repairing the repository I removed macOS Finder metadata files (names beginning with `._`) that had been added inside the `.git` metadata and working tree. Those `._*` files are resource-fork metadata and are not project code. A `.gitignore` entry was added to ignore these moving forward:
|
| 49 |
+
|
| 50 |
+
```
|
| 51 |
+
._*
|
| 52 |
+
.DS_Store
|
| 53 |
+
>__MACOSX/
|
| 54 |
+
```
|
| 55 |
+
|
| 56 |
+
If you want to inspect any backup I created of the original `.git`, look for directories named `.git.broken_<timestamp>` in the repository root — they contain the backed-up git metadata.
|
| 57 |
+
|
| 58 |
+
## Contributing
|
| 59 |
+
|
| 60 |
+
If you'd like me to expand this README with:
|
| 61 |
+
|
| 62 |
+
- per-subproject detailed run instructions and screenshots
|
| 63 |
+
- short descriptions of each interactive demo and what files to edit
|
| 64 |
+
- automated preview script to open both sites in the browser
|
| 65 |
+
|
| 66 |
+
Tell me which of the above you want and I will add it.
|
| 67 |
+
|
| 68 |
+
## License
|
| 69 |
+
|
| 70 |
+
Use or adapt however you like (no license file present; if you want one, tell me which license and I'll add it).
|
Visualization/app.js
ADDED
|
The diff for this file is too large to render.
See raw diff
|
|
|
Visualization/index.html
ADDED
|
@@ -0,0 +1,944 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Feature Engineering Explorer</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css" />
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<div class="app flex">
|
| 11 |
+
<!-- Sidebar Navigation -->
|
| 12 |
+
<aside class="sidebar" id="sidebar">
|
| 13 |
+
<h1 class="sidebar__title">🛠️ Feature Engineering</h1>
|
| 14 |
+
<nav>
|
| 15 |
+
<ul class="nav__list" id="navList">
|
| 16 |
+
<li><a href="#intro" class="nav__link">🎯 Introduction</a></li>
|
| 17 |
+
<li><a href="#missing-data" class="nav__link">🔍 Missing Data</a></li>
|
| 18 |
+
<li><a href="#outliers" class="nav__link">📊 Outliers</a></li>
|
| 19 |
+
<li><a href="#scaling" class="nav__link">⚖️ Scaling</a></li>
|
| 20 |
+
<li><a href="#encoding" class="nav__link">🔢 Encoding</a></li>
|
| 21 |
+
<li><a href="#feature-selection" class="nav__link">🎯 Feature Selection</a></li>
|
| 22 |
+
<li><a href="#imbalanced-data" class="nav__link">⚖️ Imbalanced Data</a></li>
|
| 23 |
+
<li><a href="#eda" class="nav__link">📈 EDA Overview</a></li>
|
| 24 |
+
<li><a href="#feature-transformation" class="nav__link">🔄 Feature Transformation</a></li>
|
| 25 |
+
<li><a href="#feature-creation" class="nav__link">🛠️ Feature Creation</a></li>
|
| 26 |
+
<li><a href="#dimensionality-reduction" class="nav__link">📉 Dimensionality Reduction</a></li>
|
| 27 |
+
</ul>
|
| 28 |
+
<h3 class="sidebar__section">NumPy Fundamentals</h3>
|
| 29 |
+
<ul class="nav__list">
|
| 30 |
+
<li><a href="#numpy-intro" class="nav__link">🔢 Introduction to NumPy</a></li>
|
| 31 |
+
<li><a href="#numpy-operations" class="nav__link">⚡ NumPy Operations</a></li>
|
| 32 |
+
<li><a href="#numpy-indexing" class="nav__link">🎯 Array Indexing</a></li>
|
| 33 |
+
<li><a href="#numpy-math" class="nav__link">📐 Mathematical Operations</a></li>
|
| 34 |
+
</ul>
|
| 35 |
+
<h3 class="sidebar__section">Pandas Data Manipulation</h3>
|
| 36 |
+
<ul class="nav__list">
|
| 37 |
+
<li><a href="#pandas-intro" class="nav__link">🐼 Introduction to Pandas</a></li>
|
| 38 |
+
<li><a href="#pandas-operations" class="nav__link">📊 DataFrame Operations</a></li>
|
| 39 |
+
<li><a href="#pandas-selection" class="nav__link">🔍 Data Selection</a></li>
|
| 40 |
+
<li><a href="#pandas-groupby" class="nav__link">📈 GroupBy & Aggregation</a></li>
|
| 41 |
+
</ul>
|
| 42 |
+
<h3 class="sidebar__section">Data Visualization</h3>
|
| 43 |
+
<ul class="nav__list">
|
| 44 |
+
<li><a href="#matplotlib-basics" class="nav__link">📉 Matplotlib Basics</a></li>
|
| 45 |
+
<li><a href="#seaborn-plots" class="nav__link">📊 Seaborn Plots</a></li>
|
| 46 |
+
<li><a href="#advanced-viz" class="nav__link">🎨 Advanced Visualizations</a></li>
|
| 47 |
+
<li><a href="#custom-plots" class="nav__link">🖌️ Customizing Plots</a></li>
|
| 48 |
+
</ul>
|
| 49 |
+
<h3 class="sidebar__section">Interactive Visualization</h3>
|
| 50 |
+
<ul class="nav__list">
|
| 51 |
+
<li><a href="#plotly-basics" class="nav__link">📈 Plotly Basics</a></li>
|
| 52 |
+
<li><a href="#plotly-dash" class="nav__link">🎛️ Plotly Dash</a></li>
|
| 53 |
+
</ul>
|
| 54 |
+
<h3 class="sidebar__section">Git Version Control</h3>
|
| 55 |
+
<ul class="nav__list">
|
| 56 |
+
<li><a href="#git-basics" class="nav__link">📁 Git Basics</a></li>
|
| 57 |
+
<li><a href="#github-remote" class="nav__link">🌐 GitHub & Remote</a></li>
|
| 58 |
+
<li><a href="#git-branching" class="nav__link">🌿 Branching</a></li>
|
| 59 |
+
</ul>
|
| 60 |
+
</nav>
|
| 61 |
+
</aside>
|
| 62 |
+
|
| 63 |
+
<!-- Main Content -->
|
| 64 |
+
<main class="content" id="content">
|
| 65 |
+
<!-- ============================ 1. INTRO ============================ -->
|
| 66 |
+
<section id="intro" class="topic-section">
|
| 67 |
+
<h2>Introduction to Feature Engineering</h2>
|
| 68 |
+
<p>Feature Engineering is the process of transforming raw data into meaningful inputs that boost machine-learning model performance. A well-crafted feature set can improve accuracy by 10-30% without changing the underlying algorithm.</p>
|
| 69 |
+
|
| 70 |
+
<div class="info-card">
|
| 71 |
+
<strong>Key Idea:</strong> 💡 Thoughtful features provide the model with clearer patterns, like lenses sharpening a blurry picture.
|
| 72 |
+
</div>
|
| 73 |
+
|
| 74 |
+
<!-- Canvas Visual -->
|
| 75 |
+
<div class="canvas-wrapper">
|
| 76 |
+
<canvas id="canvas-intro" width="600" height="280"></canvas>
|
| 77 |
+
</div>
|
| 78 |
+
</section>
|
| 79 |
+
|
| 80 |
+
<!-- ====================== 2. HANDLING MISSING DATA ================== -->
|
| 81 |
+
<section id="missing-data" class="topic-section">
|
| 82 |
+
<h2>Handling Missing Data</h2>
|
| 83 |
+
<p>Missing values come in three flavors: MCAR (Missing Completely At Random), MAR (Missing At Random), and MNAR (Missing Not At Random). Each demands different treatment to avoid bias.</p>
|
| 84 |
+
|
| 85 |
+
<!-- Real-world Example -->
|
| 86 |
+
<div class="info-card">
|
| 87 |
+
<strong>Real Example:</strong> A hospital's patient records often have absent <em>cholesterol</em> values because certain tests were not ordered for healthy young adults.
|
| 88 |
+
</div>
|
| 89 |
+
|
| 90 |
+
<!-- Controls -->
|
| 91 |
+
<div class="form-group">
|
| 92 |
+
<button id="btn-mean-impute" class="btn btn--primary">Mean Imputation</button>
|
| 93 |
+
<button id="btn-median-impute" class="btn btn--primary">Median Imputation</button>
|
| 94 |
+
<button id="btn-knn-impute" class="btn btn--primary">KNN Imputation</button>
|
| 95 |
+
</div>
|
| 96 |
+
|
| 97 |
+
<!-- Canvas -->
|
| 98 |
+
<div class="canvas-wrapper">
|
| 99 |
+
<canvas id="canvas-missing-data" width="800" height="500"></canvas>
|
| 100 |
+
</div>
|
| 101 |
+
|
| 102 |
+
<!-- Callouts -->
|
| 103 |
+
<div class="callout callout--insight">💡 Mean/Median work best when data is MCAR or MAR.</div>
|
| 104 |
+
<div class="callout callout--mistake">⚠️ Using mean imputation on skewed data can distort distributions.</div>
|
| 105 |
+
<div class="callout callout--tip">✅ Always impute <strong>after</strong> splitting into train and test to avoid leakage.</div>
|
| 106 |
+
</section>
|
| 107 |
+
|
| 108 |
+
<!-- ======================= 3. HANDLING OUTLIERS ===================== -->
|
| 109 |
+
<section id="outliers" class="topic-section">
|
| 110 |
+
<h2>Handling Outliers</h2>
|
| 111 |
+
<p>Outliers are data points that deviate markedly from others. Detecting and treating them prevents skewed models.</p>
|
| 112 |
+
|
| 113 |
+
<div class="form-group">
|
| 114 |
+
<button id="btn-detect-iqr" class="btn btn--primary">IQR Method</button>
|
| 115 |
+
<button id="btn-detect-zscore" class="btn btn--primary">Z-Score Method</button>
|
| 116 |
+
<button id="btn-winsorize" class="btn btn--primary">Winsorization</button>
|
| 117 |
+
</div>
|
| 118 |
+
|
| 119 |
+
<div class="canvas-wrapper">
|
| 120 |
+
<canvas id="canvas-outliers" width="600" height="300"></canvas>
|
| 121 |
+
</div>
|
| 122 |
+
|
| 123 |
+
<div class="callout callout--insight">💡 The IQR method is robust to non-normal data.</div>
|
| 124 |
+
<div class="callout callout--mistake">⚠️ Removing legitimate extreme values can erase important signals.</div>
|
| 125 |
+
</section>
|
| 126 |
+
|
| 127 |
+
<!-- ========================== 4. SCALING ============================ -->
|
| 128 |
+
<section id="scaling" class="topic-section">
|
| 129 |
+
<h2>Feature Scaling</h2>
|
| 130 |
+
<p>Algorithms that rely on distance, like KNN, demand comparable feature magnitudes.</p>
|
| 131 |
+
|
| 132 |
+
<div class="form-group">
|
| 133 |
+
<button id="btn-minmax" class="btn btn--primary">Min-Max Scaling</button>
|
| 134 |
+
<button id="btn-standardize" class="btn btn--primary">Standardization</button>
|
| 135 |
+
<button id="btn-robust" class="btn btn--primary">Robust Scaler</button>
|
| 136 |
+
</div>
|
| 137 |
+
|
| 138 |
+
<div class="canvas-wrapper">
|
| 139 |
+
<canvas id="canvas-scaling" width="600" height="300"></canvas>
|
| 140 |
+
</div>
|
| 141 |
+
</section>
|
| 142 |
+
|
| 143 |
+
<!-- ========================== 5. ENCODING =========================== -->
|
| 144 |
+
<section id="encoding" class="topic-section">
|
| 145 |
+
<h2>Data Encoding</h2>
|
| 146 |
+
<p>Transform categorical variables into numbers so models can interpret them.</p>
|
| 147 |
+
|
| 148 |
+
<div class="form-group">
|
| 149 |
+
<button id="btn-label-encode" class="btn btn--primary">Label Encoding</button>
|
| 150 |
+
<button id="btn-onehot-encode" class="btn btn--primary">One-Hot Encoding</button>
|
| 151 |
+
<button id="btn-target-encode" class="btn btn--primary">Target Encoding</button>
|
| 152 |
+
</div>
|
| 153 |
+
|
| 154 |
+
<div class="canvas-wrapper">
|
| 155 |
+
<canvas id="canvas-encoding" width="600" height="300"></canvas>
|
| 156 |
+
</div>
|
| 157 |
+
</section>
|
| 158 |
+
|
| 159 |
+
<!-- ===================== 6. FEATURE SELECTION ======================= -->
|
| 160 |
+
<section id="feature-selection" class="topic-section">
|
| 161 |
+
<h2>Feature Selection</h2>
|
| 162 |
+
<p>Pick features that matter, drop those that don't.</p>
|
| 163 |
+
|
| 164 |
+
<div class="form-group">
|
| 165 |
+
<button id="btn-backward-elim" class="btn btn--primary">Backward Elimination</button>
|
| 166 |
+
<button id="btn-forward-select" class="btn btn--primary">Forward Selection</button>
|
| 167 |
+
<button id="btn-rfe" class="btn btn--primary">RFE</button>
|
| 168 |
+
</div>
|
| 169 |
+
|
| 170 |
+
<div class="canvas-wrapper">
|
| 171 |
+
<canvas id="canvas-selection" width="600" height="300"></canvas>
|
| 172 |
+
</div>
|
| 173 |
+
</section>
|
| 174 |
+
|
| 175 |
+
<!-- =================== 7. IMBALANCED DATA =========================== -->
|
| 176 |
+
<section id="imbalanced-data" class="topic-section">
|
| 177 |
+
<h2>Handling Imbalanced Data</h2>
|
| 178 |
+
<p>Class imbalance leads to biased predictions. Balancing techniques can fix this.</p>
|
| 179 |
+
|
| 180 |
+
<div class="form-group">
|
| 181 |
+
<button id="btn-rus" class="btn btn--primary">Random Under-Sampling</button>
|
| 182 |
+
<button id="btn-ros" class="btn btn--primary">Random Over-Sampling</button>
|
| 183 |
+
<button id="btn-smote" class="btn btn--primary">SMOTE</button>
|
| 184 |
+
</div>
|
| 185 |
+
|
| 186 |
+
<div class="canvas-wrapper">
|
| 187 |
+
<canvas id="canvas-imbalanced" width="600" height="300"></canvas>
|
| 188 |
+
</div>
|
| 189 |
+
</section>
|
| 190 |
+
|
| 191 |
+
<!-- ========================== 8. EDA ================================ -->
|
| 192 |
+
<section id="eda" class="topic-section">
|
| 193 |
+
<h2>Exploratory Data Analysis (EDA)</h2>
|
| 194 |
+
<p><strong>Exploratory Data Analysis (EDA)</strong> is a critical step in the machine learning pipeline that comes BEFORE feature engineering. EDA helps you understand your data, discover patterns, identify anomalies, detect outliers, test hypotheses, and check assumptions through summary statistics and graphical representations.</p>
|
| 195 |
+
|
| 196 |
+
<div class="info-card">
|
| 197 |
+
<strong>Key Questions EDA Answers:</strong>
|
| 198 |
+
<ul>
|
| 199 |
+
<li>How many columns are numerical vs. categorical?</li>
|
| 200 |
+
<li>What does the data distribution look like?</li>
|
| 201 |
+
<li>Are there missing values?</li>
|
| 202 |
+
<li>Are there outliers?</li>
|
| 203 |
+
<li>Is the data imbalanced (for classification problems)?</li>
|
| 204 |
+
<li>What are the correlations between features?</li>
|
| 205 |
+
<li>Are there any trends or patterns?</li>
|
| 206 |
+
</ul>
|
| 207 |
+
</div>
|
| 208 |
+
|
| 209 |
+
<div class="info-card">
|
| 210 |
+
<strong>Real-World Example:</strong> Imagine you're analyzing customer data for a bank to predict loan defaults. EDA helps you understand:
|
| 211 |
+
<ul>
|
| 212 |
+
<li>Age distribution of customers (histogram)</li>
|
| 213 |
+
<li>Income levels (box plot for outliers)</li>
|
| 214 |
+
<li>Correlation between income and loan amount (scatter plot)</li>
|
| 215 |
+
<li>Missing values in employment history</li>
|
| 216 |
+
<li>Class imbalance (5% defaults vs 95% non-defaults)</li>
|
| 217 |
+
</ul>
|
| 218 |
+
</div>
|
| 219 |
+
|
| 220 |
+
<h3>Two Main Types of EDA</h3>
|
| 221 |
+
|
| 222 |
+
<h4>1. Descriptive Statistics</h4>
|
| 223 |
+
<p><strong>Purpose:</strong> Summarize and visualize what the data looks like</p>
|
| 224 |
+
|
| 225 |
+
<div class="info-card">
|
| 226 |
+
<strong>A. Central Tendency:</strong><br>
|
| 227 |
+
• <strong>Mean (Average):</strong> μ = Σxᵢ / n<br>
|
| 228 |
+
Example: Average income = $50,000 (Sensitive to outliers)<br>
|
| 229 |
+
• <strong>Median:</strong> Middle value when sorted<br>
|
| 230 |
+
Example: Median income = $45,000 (Robust to outliers)<br>
|
| 231 |
+
• <strong>Mode:</strong> Most frequent value<br>
|
| 232 |
+
Example: Most common age = 35 years<br><br>
|
| 233 |
+
|
| 234 |
+
<strong>B. Variability (Spread):</strong><br>
|
| 235 |
+
• <strong>Variance:</strong> σ² = Σ(xᵢ - μ)² / n (Measures how spread out data is)<br>
|
| 236 |
+
• <strong>Standard Deviation:</strong> σ = √variance<br>
|
| 237 |
+
68% of data within 1σ, 95% within 2σ, 99.7% within 3σ (for normal distribution)<br>
|
| 238 |
+
• <strong>Interquartile Range (IQR):</strong> Q3 - Q1<br>
|
| 239 |
+
Middle 50% of data, robust to outliers<br><br>
|
| 240 |
+
|
| 241 |
+
<strong>C. Correlation & Associations:</strong><br>
|
| 242 |
+
• <strong>Pearson Correlation:</strong> r = Cov(X,Y) / (σₓ × σᵧ)<br>
|
| 243 |
+
Range: -1 to +1<br>
|
| 244 |
+
r = +1: Perfect positive correlation<br>
|
| 245 |
+
r = 0: No linear correlation<br>
|
| 246 |
+
r = -1: Perfect negative correlation<br>
|
| 247 |
+
• <strong>Thresholds:</strong> |r| > 0.7: Strong, |r| = 0.5-0.7: Moderate, |r| < 0.3: Weak
|
| 248 |
+
</div>
|
| 249 |
+
|
| 250 |
+
<h4>2. Inferential Statistics</h4>
|
| 251 |
+
<p><strong>Purpose:</strong> Make inferences or generalizations about the population from the sample</p>
|
| 252 |
+
<p><strong>Key Question:</strong> Can we claim this effect exists in the larger population, or is it just by chance?</p>
|
| 253 |
+
|
| 254 |
+
<div class="info-card">
|
| 255 |
+
<strong>A. Hypothesis Testing:</strong><br>
|
| 256 |
+
• <strong>Null Hypothesis (H₀):</strong> No effect exists (e.g., "Mean of Group A = Mean of Group B")<br>
|
| 257 |
+
• <strong>Alternative Hypothesis (H₁):</strong> Effect exists (e.g., "Mean of Group A ≠ Mean of Group B")<br>
|
| 258 |
+
• <strong>P-value:</strong> Probability of observing data if H₀ is true<br>
|
| 259 |
+
p < 0.05: Reject H₀ (effect is statistically significant)<br>
|
| 260 |
+
p > 0.05: Fail to reject H₀ (not enough evidence)<br><br>
|
| 261 |
+
|
| 262 |
+
<strong>Example:</strong><br>
|
| 263 |
+
• H₀: "There is no difference between positive and negative movie review lengths"<br>
|
| 264 |
+
• H₁: "Negative reviews are longer than positive reviews"<br>
|
| 265 |
+
• After t-test: p = 0.003 (< 0.05)<br>
|
| 266 |
+
• Conclusion: Reject H₀ → Negative reviews ARE significantly longer<br><br>
|
| 267 |
+
|
| 268 |
+
<strong>B. Confidence Intervals:</strong><br>
|
| 269 |
+
• Range where true population parameter likely lies<br>
|
| 270 |
+
• 95% CI: We're 95% confident the true value is within this range<br>
|
| 271 |
+
• Example: "Average customer age is 35 ± 2 years (95% CI: [33, 37])"<br><br>
|
| 272 |
+
|
| 273 |
+
<strong>C. Effect Size:</strong><br>
|
| 274 |
+
• Cohen's d = (mean₁ - mean₂) / pooled_std<br>
|
| 275 |
+
• Small effect: d = 0.2, Medium: d = 0.5, Large: d = 0.8
|
| 276 |
+
</div>
|
| 277 |
+
|
| 278 |
+
<h3>Algorithm Steps for EDA</h3>
|
| 279 |
+
<div class="info-card">
|
| 280 |
+
<strong>1. Load and Inspect Data:</strong> df.head(), df.info(), df.describe()<br>
|
| 281 |
+
<strong>2. Handle Missing Values:</strong> Identify (df.isnull().sum()), Visualize, Decide<br>
|
| 282 |
+
<strong>3. Analyze Distributions:</strong> Histograms, count plots, box plots<br>
|
| 283 |
+
<strong>4. Check for Imbalance:</strong> Count target classes, plot distribution<br>
|
| 284 |
+
<strong>5. Correlation Analysis:</strong> Correlation matrix, heatmap, identify multicollinearity<br>
|
| 285 |
+
<strong>6. Statistical Testing:</strong> Compare groups (t-test, ANOVA), test assumptions, calculate effect sizes
|
| 286 |
+
</div>
|
| 287 |
+
|
| 288 |
+
<h3>Interactive EDA Dashboard</h3>
|
| 289 |
+
<div class="form-group">
|
| 290 |
+
<label for="edaFeature" class="form-label">Select Feature:</label>
|
| 291 |
+
<select id="edaFeature" class="form-control w-100">
|
| 292 |
+
<option value="age">Age</option>
|
| 293 |
+
<option value="income">Income</option>
|
| 294 |
+
<option value="credit">Credit Score</option>
|
| 295 |
+
</select>
|
| 296 |
+
</div>
|
| 297 |
+
|
| 298 |
+
<div class="form-group">
|
| 299 |
+
<label for="confidenceLevel" class="form-label">Confidence Level: <span id="confidenceValue">95</span>%</label>
|
| 300 |
+
<input type="range" id="confidenceLevel" min="90" max="99" step="1" value="95" class="form-control" />
|
| 301 |
+
</div>
|
| 302 |
+
|
| 303 |
+
<div class="form-group">
|
| 304 |
+
<button id="btn-histogram" class="btn btn--primary">Show Histogram</button>
|
| 305 |
+
<button id="btn-boxplot" class="btn btn--primary">Show Box Plot</button>
|
| 306 |
+
<button id="btn-correlation" class="btn btn--primary">Show Correlation</button>
|
| 307 |
+
</div>
|
| 308 |
+
|
| 309 |
+
<div class="canvas-wrapper">
|
| 310 |
+
<canvas id="canvas-eda" width="800" height="500"></canvas>
|
| 311 |
+
</div>
|
| 312 |
+
|
| 313 |
+
<div class="callout callout--insight">💡 EDA typically takes 30-40% of total project time. Good EDA reveals which features to engineer.</div>
|
| 314 |
+
<div class="callout callout--mistake">⚠️ Common Mistakes: Skipping EDA, not checking outliers before scaling, ignoring missing value patterns, overlooking class imbalance, ignoring multicollinearity.</div>
|
| 315 |
+
<div class="callout callout--tip">✅ Best Practices: ALWAYS start with EDA, visualize EVERY feature, check correlations with target, document insights, use both descriptive and inferential statistics.</div>
|
| 316 |
+
|
| 317 |
+
<h3>Use Cases and Applications</h3>
|
| 318 |
+
<ul>
|
| 319 |
+
<li><strong>Healthcare:</strong> Analyzing patient data before building disease prediction models</li>
|
| 320 |
+
<li><strong>Finance:</strong> Understanding customer demographics before credit scoring</li>
|
| 321 |
+
<li><strong>E-commerce:</strong> Analyzing purchase patterns before recommendation systems</li>
|
| 322 |
+
<li><strong>Marketing:</strong> Understanding customer segments before targeted campaigns</li>
|
| 323 |
+
<li><strong>Time Series:</strong> Checking for seasonality and trends in sales data</li>
|
| 324 |
+
</ul>
|
| 325 |
+
|
| 326 |
+
<h3>Summary & Key Takeaways</h3>
|
| 327 |
+
<p>Exploratory Data Analysis is the foundation of any successful machine learning project. It combines <strong>descriptive statistics</strong> (mean, median, variance, correlation) with <strong>inferential statistics</strong> (hypothesis testing, confidence intervals) to understand data deeply.</p>
|
| 328 |
+
<p><strong>Descriptive EDA</strong> answers: "What is happening in the dataset?"<br>
|
| 329 |
+
<strong>Inferential EDA</strong> answers: "Can we claim this effect exists in the larger population?"</p>
|
| 330 |
+
<p>Remember: <strong>Data → EDA → Feature Engineering → ML → Deployment</strong></p>
|
| 331 |
+
</section>
|
| 332 |
+
|
| 333 |
+
<!-- =================== 9. FEATURE TRANSFORMATION ==================== -->
|
| 334 |
+
<section id="feature-transformation" class="topic-section">
|
| 335 |
+
<h2>Feature Transformation</h2>
|
| 336 |
+
<p>Feature transformation creates new representations of data to capture non-linear patterns. Techniques like polynomial features, binning, and mathematical transformations unlock hidden relationships.</p>
|
| 337 |
+
|
| 338 |
+
<div class="info-card">
|
| 339 |
+
<strong>Real Example:</strong> Predicting house prices with polynomial features (adding x² terms) improves model fit for non-linear relationships between square footage and price.
|
| 340 |
+
</div>
|
| 341 |
+
|
| 342 |
+
<h3>Mathematical Foundations</h3>
|
| 343 |
+
<div class="info-card">
|
| 344 |
+
<strong>Polynomial Features:</strong> Transform (x₁, x₂) → (1, x₁, x₂, x₁², x₁x₂, x₂²)<br>
|
| 345 |
+
• Degree 2 example: For features (x, y) → (1, x, y, x², xy, y²)<br>
|
| 346 |
+
• 2 features with degree=2 creates 6 features total<br><br>
|
| 347 |
+
<strong>Binning:</strong> Convert continuous → categorical<br>
|
| 348 |
+
• Equal-width: Divide range into equal intervals<br>
|
| 349 |
+
• Quantile: Each bin has equal number of samples<br>
|
| 350 |
+
• Example: Age (0-100) → [0-18], [19-35], [36-60], [61+]<br><br>
|
| 351 |
+
<strong>Mathematical Transformations:</strong><br>
|
| 352 |
+
• Square Root: √x (reduces right skew)<br>
|
| 353 |
+
• Log Transform: log(1 + x)<br>
|
| 354 |
+
• Box-Cox: λ = 0: log(x), λ ≠ 0: (x^λ - 1)/λ
|
| 355 |
+
</div>
|
| 356 |
+
|
| 357 |
+
<div class="form-group">
|
| 358 |
+
<button id="btn-polynomial" class="btn btn--primary">Add Polynomial Features</button>
|
| 359 |
+
<button id="btn-binning" class="btn btn--primary">Apply Binning</button>
|
| 360 |
+
<button id="btn-log" class="btn btn--primary">Log Transform</button>
|
| 361 |
+
</div>
|
| 362 |
+
|
| 363 |
+
<div class="canvas-wrapper">
|
| 364 |
+
<canvas id="canvas-transformation" width="700" height="350"></canvas>
|
| 365 |
+
</div>
|
| 366 |
+
|
| 367 |
+
<div class="callout callout--insight">💡 Polynomial features capture curve fitting, but degree=3 on 10 features creates 286 features!</div>
|
| 368 |
+
<div class="callout callout--mistake">⚠️ Always scale features after polynomial transformation to prevent magnitude issues.</div>
|
| 369 |
+
<div class="callout callout--tip">✅ Start with degree=2 and visualize distributions before/after transformation.</div>
|
| 370 |
+
|
| 371 |
+
<h3>Use Cases</h3>
|
| 372 |
+
<ul>
|
| 373 |
+
<li>Polynomial features for non-linear house price prediction</li>
|
| 374 |
+
<li>Binning age into groups for marketing segmentation</li>
|
| 375 |
+
<li>Log transformation for right-skewed income data</li>
|
| 376 |
+
</ul>
|
| 377 |
+
</section>
|
| 378 |
+
|
| 379 |
+
<!-- =================== 10. FEATURE CREATION ========================= -->
|
| 380 |
+
<section id="feature-creation" class="topic-section">
|
| 381 |
+
<h2>Feature Creation</h2>
|
| 382 |
+
<p>Creating new features from existing ones based on domain knowledge. Interaction terms, ratios, and domain-specific calculations enhance model performance.</p>
|
| 383 |
+
|
| 384 |
+
<div class="info-card">
|
| 385 |
+
<strong>Real Example:</strong> E-commerce revenue = price × quantity. Profit margin = (selling_price - cost_price) / cost_price. These derived features often have stronger predictive power than raw features.
|
| 386 |
+
</div>
|
| 387 |
+
|
| 388 |
+
<h3>Mathematical Foundations</h3>
|
| 389 |
+
<div class="info-card">
|
| 390 |
+
<strong>Interaction Terms:</strong> feature₁ × feature₂<br>
|
| 391 |
+
• Example: advertising_budget × seasonality → total_impact<br>
|
| 392 |
+
• Why: Captures how one feature's effect depends on another<br><br>
|
| 393 |
+
<strong>Ratio Features:</strong> feature₁ / feature₂<br>
|
| 394 |
+
• Example: price/sqft, income/age<br><br>
|
| 395 |
+
<strong>Domain-Specific Features:</strong><br>
|
| 396 |
+
• BMI = weight(kg) / height²(m²)<br>
|
| 397 |
+
• Speed = distance / time<br>
|
| 398 |
+
• Profit margin = (revenue - cost) / cost<br><br>
|
| 399 |
+
<strong>Time-Based Features:</strong><br>
|
| 400 |
+
• Extract: year, month, day, weekday, hour<br>
|
| 401 |
+
• Create: is_weekend, is_holiday, season
|
| 402 |
+
</div>
|
| 403 |
+
|
| 404 |
+
<div class="form-group">
|
| 405 |
+
<button id="btn-interaction" class="btn btn--primary">Create Interaction</button>
|
| 406 |
+
<button id="btn-ratio" class="btn btn--primary">Create Ratio</button>
|
| 407 |
+
<button id="btn-bmi" class="btn btn--primary">Calculate BMI</button>
|
| 408 |
+
</div>
|
| 409 |
+
|
| 410 |
+
<div class="canvas-wrapper">
|
| 411 |
+
<canvas id="canvas-creation" width="700" height="350"></canvas>
|
| 412 |
+
</div>
|
| 413 |
+
|
| 414 |
+
<div class="callout callout--insight">💡 Interaction terms are especially powerful in linear models - neural networks learn them automatically.</div>
|
| 415 |
+
<div class="callout callout--mistake">⚠️ Creating features without domain knowledge leads to meaningless combinations.</div>
|
| 416 |
+
<div class="callout callout--tip">✅ Always check correlation between new and existing features to avoid redundancy.</div>
|
| 417 |
+
|
| 418 |
+
<h3>Use Cases</h3>
|
| 419 |
+
<ul>
|
| 420 |
+
<li>BMI from height and weight in healthcare prediction</li>
|
| 421 |
+
<li>Click-through rate = clicks / impressions in digital marketing</li>
|
| 422 |
+
<li>Revenue = price × quantity in retail analytics</li>
|
| 423 |
+
</ul>
|
| 424 |
+
</section>
|
| 425 |
+
|
| 426 |
+
<!-- ================ 11. DIMENSIONALITY REDUCTION ==================== -->
|
| 427 |
+
<section id="dimensionality-reduction" class="topic-section">
|
| 428 |
+
<h2>Dimensionality Reduction</h2>
|
| 429 |
+
<p>Reducing the number of features while preserving information. PCA (Principal Component Analysis) projects high-dimensional data onto lower dimensions by finding directions of maximum variance.</p>
|
| 430 |
+
|
| 431 |
+
<div class="info-card">
|
| 432 |
+
<strong>Real Example:</strong> Image compression and genome analysis with thousands of genes benefit from PCA. First 2-3 principal components often capture 80%+ of variance.
|
| 433 |
+
</div>
|
| 434 |
+
|
| 435 |
+
<h3>PCA Mathematical Foundations</h3>
|
| 436 |
+
<div class="info-card">
|
| 437 |
+
<strong>Algorithm Steps:</strong><br>
|
| 438 |
+
1. Standardize data: X_scaled = (X - μ) / σ<br>
|
| 439 |
+
2. Compute covariance matrix: Cov = (1/n) X^T X<br>
|
| 440 |
+
3. Calculate eigenvalues and eigenvectors<br>
|
| 441 |
+
4. Sort eigenvectors by eigenvalues (descending)<br>
|
| 442 |
+
5. Select top k eigenvectors (principal components)<br>
|
| 443 |
+
6. Transform: X_new = X × PC_matrix<br><br>
|
| 444 |
+
<strong>Explained Variance:</strong> λᵢ / Σλⱼ<br>
|
| 445 |
+
<strong>Cumulative Variance:</strong> Shows total information preserved<br><br>
|
| 446 |
+
<strong>Why PCA Works:</strong><br>
|
| 447 |
+
• Removes correlated features<br>
|
| 448 |
+
• Captures maximum variance in fewer dimensions<br>
|
| 449 |
+
• Components are orthogonal (no correlation)
|
| 450 |
+
</div>
|
| 451 |
+
|
| 452 |
+
<div class="form-group">
|
| 453 |
+
<label for="slider-components" class="form-label">Number of Components: <span id="pcaValue">2</span></label>
|
| 454 |
+
<input type="range" id="slider-components" min="1" max="3" step="1" value="2" class="form-control" />
|
| 455 |
+
</div>
|
| 456 |
+
|
| 457 |
+
<button id="btn-pca-apply" class="btn btn--primary">Apply PCA</button>
|
| 458 |
+
|
| 459 |
+
<div class="canvas-wrapper">
|
| 460 |
+
<canvas id="canvas-pca" width="700" height="400"></canvas>
|
| 461 |
+
</div>
|
| 462 |
+
|
| 463 |
+
<div class="callout callout--insight">💡 PCA is unsupervised - it doesn't use the target variable. First PC always captures most variance.</div>
|
| 464 |
+
<div class="callout callout--mistake">⚠️ Not standardizing before PCA is a critical error - features with large scales will dominate.</div>
|
| 465 |
+
<div class="callout callout--tip">✅ Aim for 95% cumulative explained variance when choosing number of components.</div>
|
| 466 |
+
|
| 467 |
+
<h3>Use Cases</h3>
|
| 468 |
+
<ul>
|
| 469 |
+
<li>Image compression (reduce pixel dimensions)</li>
|
| 470 |
+
<li>Genomics (thousands of genes → few principal components)</li>
|
| 471 |
+
<li>Visualization (project high-D data to 2D for plotting)</li>
|
| 472 |
+
<li>Speed up training (fewer features = faster models)</li>
|
| 473 |
+
</ul>
|
| 474 |
+
|
| 475 |
+
<h3>Common Mistakes</h3>
|
| 476 |
+
<ul>
|
| 477 |
+
<li>⚠️ Applying PCA before train-test split (data leakage)</li>
|
| 478 |
+
<li>⚠️ Using PCA with categorical features (PCA is for numerical data)</li>
|
| 479 |
+
<li>⚠️ Losing interpretability (PCs are linear combinations)</li>
|
| 480 |
+
</ul>
|
| 481 |
+
</section>
|
| 482 |
+
|
| 483 |
+
<!-- =================== 12. NUMPY INTRO ========================= -->
|
| 484 |
+
<section id="numpy-intro" class="topic-section">
|
| 485 |
+
<h2>🔢 Introduction to NumPy</h2>
|
| 486 |
+
<p>NumPy (Numerical Python) is the foundational library for scientific computing in Python. It provides support for multi-dimensional arrays and matrices, along with mathematical functions to operate on these arrays efficiently.</p>
|
| 487 |
+
|
| 488 |
+
<div class="info-card">
|
| 489 |
+
<strong>Why NumPy Matters:</strong>
|
| 490 |
+
<ul>
|
| 491 |
+
<li>10-100x faster than Python lists for large datasets</li>
|
| 492 |
+
<li>Foundation for Pandas, Matplotlib, Scikit-learn</li>
|
| 493 |
+
<li>Optimized C implementation</li>
|
| 494 |
+
<li>Broadcasting capabilities</li>
|
| 495 |
+
</ul>
|
| 496 |
+
</div>
|
| 497 |
+
|
| 498 |
+
<div class="info-card">
|
| 499 |
+
<strong>Real-World Example:</strong> Weather forecasting uses NumPy arrays to store temperature, humidity, pressure data across thousands of locations and perform rapid calculations.
|
| 500 |
+
</div>
|
| 501 |
+
|
| 502 |
+
<h3>Creating Arrays</h3>
|
| 503 |
+
<div class="form-group">
|
| 504 |
+
<button id="btn-create-array" class="btn btn--primary">Create Array</button>
|
| 505 |
+
<button id="btn-zeros-ones" class="btn btn--primary">Zeros & Ones</button>
|
| 506 |
+
<button id="btn-random-array" class="btn btn--primary">Random Array</button>
|
| 507 |
+
</div>
|
| 508 |
+
|
| 509 |
+
<div class="canvas-wrapper">
|
| 510 |
+
<canvas id="canvas-numpy-intro" width="700" height="350"></canvas>
|
| 511 |
+
</div>
|
| 512 |
+
|
| 513 |
+
<div class="callout callout--insight">💡 NumPy arrays are homogeneous, fixed-size, and multi-dimensional.</div>
|
| 514 |
+
<div class="callout callout--mistake">⚠️ Not specifying dtype can lead to unexpected type conversions.</div>
|
| 515 |
+
<div class="callout callout--tip">✅ Use vectorized operations instead of loops for better performance.</div>
|
| 516 |
+
</section>
|
| 517 |
+
|
| 518 |
+
<!-- =================== 13. NUMPY OPERATIONS ==================== -->
|
| 519 |
+
<section id="numpy-operations" class="topic-section">
|
| 520 |
+
<h2>⚡ NumPy Arrays & Operations</h2>
|
| 521 |
+
<p>NumPy performs element-wise operations on arrays, enabling fast mathematical computations without explicit loops.</p>
|
| 522 |
+
|
| 523 |
+
<div class="info-card">
|
| 524 |
+
<strong>Real Example:</strong> Calculating BMI for 1000 patients: <code>bmi = weight / (height ** 2)</code> - single line instead of 1000 iterations.
|
| 525 |
+
</div>
|
| 526 |
+
|
| 527 |
+
<h3>Element-wise Operations & Broadcasting</h3>
|
| 528 |
+
<div class="form-group">
|
| 529 |
+
<button id="btn-addition" class="btn btn--primary">Addition</button>
|
| 530 |
+
<button id="btn-multiplication" class="btn btn--primary">Multiplication</button>
|
| 531 |
+
<button id="btn-broadcasting" class="btn btn--primary">Broadcasting</button>
|
| 532 |
+
<button id="btn-dot-product" class="btn btn--primary">Dot Product</button>
|
| 533 |
+
</div>
|
| 534 |
+
|
| 535 |
+
<div class="canvas-wrapper">
|
| 536 |
+
<canvas id="canvas-numpy-operations" width="700" height="400"></canvas>
|
| 537 |
+
</div>
|
| 538 |
+
|
| 539 |
+
<div class="callout callout--insight">💡 Broadcasting allows operations on arrays of different shapes.</div>
|
| 540 |
+
<div class="callout callout--mistake">⚠️ Don't confuse element-wise (*) with dot product (np.dot).</div>
|
| 541 |
+
<div class="callout callout--tip">✅ Vectorization is 10-100x faster than Python loops.</div>
|
| 542 |
+
</section>
|
| 543 |
+
|
| 544 |
+
<!-- =================== 14. NUMPY INDEXING ====================== -->
|
| 545 |
+
<section id="numpy-indexing" class="topic-section">
|
| 546 |
+
<h2>🎯 Array Manipulation & Indexing</h2>
|
| 547 |
+
<p>NumPy provides powerful indexing and slicing capabilities to access and manipulate array elements.</p>
|
| 548 |
+
|
| 549 |
+
<div class="info-card">
|
| 550 |
+
<strong>Real Example:</strong> Selecting specific patients from medical records: first 100 patients, ages > 60, specific columns (age, blood_pressure).
|
| 551 |
+
</div>
|
| 552 |
+
|
| 553 |
+
<h3>Indexing Techniques</h3>
|
| 554 |
+
<div class="form-group">
|
| 555 |
+
<button id="btn-basic-index" class="btn btn--primary">Basic Indexing</button>
|
| 556 |
+
<button id="btn-slicing" class="btn btn--primary">Slicing</button>
|
| 557 |
+
<button id="btn-boolean-mask" class="btn btn--primary">Boolean Masking</button>
|
| 558 |
+
<button id="btn-reshape" class="btn btn--primary">Reshape</button>
|
| 559 |
+
</div>
|
| 560 |
+
|
| 561 |
+
<div class="canvas-wrapper">
|
| 562 |
+
<canvas id="canvas-numpy-indexing" width="700" height="400"></canvas>
|
| 563 |
+
</div>
|
| 564 |
+
|
| 565 |
+
<div class="callout callout--insight">💡 Boolean indexing is powerful for filtering data based on conditions.</div>
|
| 566 |
+
<div class="callout callout--mistake">⚠️ Slicing creates views, not copies. Use .copy() to avoid modifying originals.</div>
|
| 567 |
+
<div class="callout callout--tip">✅ Use fancy indexing for non-contiguous element selection.</div>
|
| 568 |
+
</section>
|
| 569 |
+
|
| 570 |
+
<!-- =================== 15. NUMPY MATH ========================== -->
|
| 571 |
+
<section id="numpy-math" class="topic-section">
|
| 572 |
+
<h2>📐 NumPy Mathematical Operations</h2>
|
| 573 |
+
<p>NumPy provides comprehensive mathematical functions optimized for array operations.</p>
|
| 574 |
+
|
| 575 |
+
<div class="info-card">
|
| 576 |
+
<strong>Real Example:</strong> Calculating statistical measures for sensor data: mean temperature, standard deviation, percentiles.
|
| 577 |
+
</div>
|
| 578 |
+
|
| 579 |
+
<h3>Statistical Functions</h3>
|
| 580 |
+
<div class="form-group">
|
| 581 |
+
<button id="btn-stats" class="btn btn--primary">Mean & Std</button>
|
| 582 |
+
<button id="btn-aggregation" class="btn btn--primary">Aggregation</button>
|
| 583 |
+
<button id="btn-percentiles" class="btn btn--primary">Percentiles</button>
|
| 584 |
+
</div>
|
| 585 |
+
|
| 586 |
+
<div class="canvas-wrapper">
|
| 587 |
+
<canvas id="canvas-numpy-math" width="700" height="400"></canvas>
|
| 588 |
+
</div>
|
| 589 |
+
|
| 590 |
+
<div class="callout callout--insight">💡 Use axis parameter to aggregate along specific dimensions.</div>
|
| 591 |
+
<div class="callout callout--mistake">⚠️ Not handling NaN values can produce incorrect results.</div>
|
| 592 |
+
<div class="callout callout--tip">✅ Use nanmean, nanstd for data with missing values.</div>
|
| 593 |
+
</section>
|
| 594 |
+
|
| 595 |
+
<!-- =================== 16. PANDAS INTRO ======================== -->
|
| 596 |
+
<section id="pandas-intro" class="topic-section">
|
| 597 |
+
<h2>🐼 Introduction to Pandas</h2>
|
| 598 |
+
<p>Pandas is the go-to library for data manipulation and analysis in Python. It provides DataFrame and Series objects for handling structured data efficiently.</p>
|
| 599 |
+
|
| 600 |
+
<div class="info-card">
|
| 601 |
+
<strong>Why Pandas:</strong>
|
| 602 |
+
<ul>
|
| 603 |
+
<li>Easy data loading from CSV, Excel, SQL, JSON</li>
|
| 604 |
+
<li>Powerful data cleaning and transformation</li>
|
| 605 |
+
<li>Built on NumPy for performance</li>
|
| 606 |
+
<li>Excellent for time series analysis</li>
|
| 607 |
+
</ul>
|
| 608 |
+
</div>
|
| 609 |
+
|
| 610 |
+
<div class="info-card">
|
| 611 |
+
<strong>Real Example:</strong> Analyzing customer data: load CSV with 100k rows, filter by region, calculate average purchase value, handle missing data.
|
| 612 |
+
</div>
|
| 613 |
+
|
| 614 |
+
<h3>Creating DataFrames</h3>
|
| 615 |
+
<div class="form-group">
|
| 616 |
+
<button id="btn-create-df" class="btn btn--primary">Create DataFrame</button>
|
| 617 |
+
<button id="btn-df-info" class="btn btn--primary">Show Info</button>
|
| 618 |
+
<button id="btn-df-describe" class="btn btn--primary">Describe</button>
|
| 619 |
+
</div>
|
| 620 |
+
|
| 621 |
+
<div class="canvas-wrapper">
|
| 622 |
+
<canvas id="canvas-pandas-intro" width="700" height="400"></canvas>
|
| 623 |
+
</div>
|
| 624 |
+
|
| 625 |
+
<div class="callout callout--insight">💡 DataFrames are like Excel tables but much more powerful.</div>
|
| 626 |
+
<div class="callout callout--mistake">⚠️ Not checking data types after loading can cause errors.</div>
|
| 627 |
+
<div class="callout callout--tip">✅ Always use df.head(), df.info(), df.describe() first.</div>
|
| 628 |
+
</section>
|
| 629 |
+
|
| 630 |
+
<!-- =================== 17. PANDAS OPERATIONS =================== -->
|
| 631 |
+
<section id="pandas-operations" class="topic-section">
|
| 632 |
+
<h2>📊 DataFrame Operations</h2>
|
| 633 |
+
<p>Learn essential DataFrame operations: filtering, sorting, adding/removing columns, and data transformations.</p>
|
| 634 |
+
|
| 635 |
+
<div class="info-card">
|
| 636 |
+
<strong>Real Example:</strong> Retail analysis: filter sales > $1000, sort by date, create profit column, remove outliers.
|
| 637 |
+
</div>
|
| 638 |
+
|
| 639 |
+
<h3>Common Operations</h3>
|
| 640 |
+
<div class="form-group">
|
| 641 |
+
<button id="btn-filter-df" class="btn btn--primary">Filter Rows</button>
|
| 642 |
+
<button id="btn-sort-df" class="btn btn--primary">Sort Data</button>
|
| 643 |
+
<button id="btn-add-column" class="btn btn--primary">Add Column</button>
|
| 644 |
+
</div>
|
| 645 |
+
|
| 646 |
+
<div class="canvas-wrapper">
|
| 647 |
+
<canvas id="canvas-pandas-operations" width="700" height="400"></canvas>
|
| 648 |
+
</div>
|
| 649 |
+
|
| 650 |
+
<div class="callout callout--insight">💡 Method chaining makes code cleaner: df.filter().sort().head()</div>
|
| 651 |
+
<div class="callout callout--mistake">⚠️ Forgetting inplace=True means changes aren't saved.</div>
|
| 652 |
+
<div class="callout callout--tip">✅ Use copy() when experimenting to preserve original data.</div>
|
| 653 |
+
</section>
|
| 654 |
+
|
| 655 |
+
<!-- =================== 18. PANDAS SELECTION ==================== -->
|
| 656 |
+
<section id="pandas-selection" class="topic-section">
|
| 657 |
+
<h2>🔍 Data Selection & Filtering</h2>
|
| 658 |
+
<p>Master .loc, .iloc, boolean indexing, and query methods for precise data selection.</p>
|
| 659 |
+
|
| 660 |
+
<div class="info-card">
|
| 661 |
+
<strong>Real Example:</strong> Select customers aged 25-35 from New York with purchases > $500 using boolean masks.
|
| 662 |
+
</div>
|
| 663 |
+
|
| 664 |
+
<h3>Selection Methods</h3>
|
| 665 |
+
<div class="form-group">
|
| 666 |
+
<button id="btn-loc" class="btn btn--primary">.loc Selection</button>
|
| 667 |
+
<button id="btn-iloc" class="btn btn--primary">.iloc Selection</button>
|
| 668 |
+
<button id="btn-query" class="btn btn--primary">Query Method</button>
|
| 669 |
+
</div>
|
| 670 |
+
|
| 671 |
+
<div class="canvas-wrapper">
|
| 672 |
+
<canvas id="canvas-pandas-selection" width="700" height="400"></canvas>
|
| 673 |
+
</div>
|
| 674 |
+
|
| 675 |
+
<div class="callout callout--insight">💡 .loc uses labels, .iloc uses integer positions.</div>
|
| 676 |
+
<div class="callout callout--mistake">⚠️ Mixing .loc and .iloc causes confusion.</div>
|
| 677 |
+
<div class="callout callout--tip">✅ Use .query() for complex conditions (more readable).</div>
|
| 678 |
+
</section>
|
| 679 |
+
|
| 680 |
+
<!-- =================== 19. PANDAS GROUPBY ====================== -->
|
| 681 |
+
<section id="pandas-groupby" class="topic-section">
|
| 682 |
+
<h2>📈 GroupBy & Aggregation</h2>
|
| 683 |
+
<p>GroupBy splits data into groups, applies functions, and combines results - the heart of data analysis.</p>
|
| 684 |
+
|
| 685 |
+
<div class="info-card">
|
| 686 |
+
<strong>Real Example:</strong> Sales by region: group by 'Region', calculate total revenue, average order value, count of orders.
|
| 687 |
+
</div>
|
| 688 |
+
|
| 689 |
+
<h3>Aggregation Operations</h3>
|
| 690 |
+
<div class="form-group">
|
| 691 |
+
<button id="btn-groupby-mean" class="btn btn--primary">GroupBy Mean</button>
|
| 692 |
+
<button id="btn-groupby-agg" class="btn btn--primary">Multiple Aggs</button>
|
| 693 |
+
<button id="btn-pivot" class="btn btn--primary">Pivot Table</button>
|
| 694 |
+
</div>
|
| 695 |
+
|
| 696 |
+
<div class="canvas-wrapper">
|
| 697 |
+
<canvas id="canvas-pandas-groupby" width="700" height="400"></canvas>
|
| 698 |
+
</div>
|
| 699 |
+
|
| 700 |
+
<div class="callout callout--insight">💡 GroupBy follows: Split-Apply-Combine pattern.</div>
|
| 701 |
+
<div class="callout callout--mistake">⚠️ Not resetting index after groupby can cause issues.</div>
|
| 702 |
+
<div class="callout callout--tip">✅ Use .agg() with dictionary for different functions per column.</div>
|
| 703 |
+
</section>
|
| 704 |
+
|
| 705 |
+
<!-- =================== 20. MATPLOTLIB BASICS =================== -->
|
| 706 |
+
<section id="matplotlib-basics" class="topic-section">
|
| 707 |
+
<h2>📉 Matplotlib Basics</h2>
|
| 708 |
+
<p>Matplotlib is Python's foundational plotting library. Master line plots, scatter plots, bar charts, and histograms.</p>
|
| 709 |
+
|
| 710 |
+
<div class="info-card">
|
| 711 |
+
<strong>Real Example:</strong> Stock price over time (line), sales by region (bar), height distribution (histogram), age vs income (scatter).
|
| 712 |
+
</div>
|
| 713 |
+
|
| 714 |
+
<h3>Basic Plot Types</h3>
|
| 715 |
+
<div class="form-group">
|
| 716 |
+
<button id="btn-line-plot" class="btn btn--primary">Line Plot</button>
|
| 717 |
+
<button id="btn-scatter-plot" class="btn btn--primary">Scatter Plot</button>
|
| 718 |
+
<button id="btn-bar-plot" class="btn btn--primary">Bar Chart</button>
|
| 719 |
+
<button id="btn-histogram" class="btn btn--primary">Histogram</button>
|
| 720 |
+
</div>
|
| 721 |
+
|
| 722 |
+
<div class="canvas-wrapper">
|
| 723 |
+
<canvas id="canvas-matplotlib" width="700" height="400"></canvas>
|
| 724 |
+
</div>
|
| 725 |
+
|
| 726 |
+
<div class="callout callout--insight">💡 plt.subplot() creates multiple plots in one figure.</div>
|
| 727 |
+
<div class="callout callout--mistake">⚠️ Forgetting plt.show() in scripts means no plot displayed.</div>
|
| 728 |
+
<div class="callout callout--tip">✅ Always add labels, title, and legend for clarity.</div>
|
| 729 |
+
</section>
|
| 730 |
+
|
| 731 |
+
<!-- =================== 21. SEABORN PLOTS ======================= -->
|
| 732 |
+
<section id="seaborn-plots" class="topic-section">
|
| 733 |
+
<h2>📊 Seaborn Statistical Plots</h2>
|
| 734 |
+
<p>Seaborn builds on Matplotlib with beautiful statistical visualizations: distplot, boxplot, heatmap, pairplot.</p>
|
| 735 |
+
|
| 736 |
+
<div class="info-card">
|
| 737 |
+
<strong>Real Example:</strong> Medical study: distribution of cholesterol (distplot), outliers by age group (boxplot), feature correlations (heatmap).
|
| 738 |
+
</div>
|
| 739 |
+
|
| 740 |
+
<h3>Statistical Visualizations</h3>
|
| 741 |
+
<div class="form-group">
|
| 742 |
+
<button id="btn-distplot" class="btn btn--primary">Distribution</button>
|
| 743 |
+
<button id="btn-boxplot" class="btn btn--primary">Box Plot</button>
|
| 744 |
+
<button id="btn-heatmap" class="btn btn--primary">Heatmap</button>
|
| 745 |
+
</div>
|
| 746 |
+
|
| 747 |
+
<div class="canvas-wrapper">
|
| 748 |
+
<canvas id="canvas-seaborn" width="700" height="400"></canvas>
|
| 749 |
+
</div>
|
| 750 |
+
|
| 751 |
+
<div class="callout callout--insight">💡 Seaborn automatically applies beautiful styling.</div>
|
| 752 |
+
<div class="callout callout--mistake">⚠️ Not normalizing data before heatmaps distorts colors.</div>
|
| 753 |
+
<div class="callout callout--tip">✅ Use seaborn for exploratory data analysis (EDA).</div>
|
| 754 |
+
</section>
|
| 755 |
+
|
| 756 |
+
<!-- =================== 22. ADVANCED VIZ ======================== -->
|
| 757 |
+
<section id="advanced-viz" class="topic-section">
|
| 758 |
+
<h2>🎨 Advanced Visualizations</h2>
|
| 759 |
+
<p>Master violin plots, pair plots, joint plots, and multi-panel figures for complex data analysis.</p>
|
| 760 |
+
|
| 761 |
+
<div class="info-card">
|
| 762 |
+
<strong>Real Example:</strong> Customer segmentation: pairplot shows relationships between age, income, spending score across 3 clusters.
|
| 763 |
+
</div>
|
| 764 |
+
|
| 765 |
+
<h3>Complex Visualizations</h3>
|
| 766 |
+
<div class="form-group">
|
| 767 |
+
<button id="btn-violin" class="btn btn--primary">Violin Plot</button>
|
| 768 |
+
<button id="btn-pairplot" class="btn btn--primary">Pair Plot</button>
|
| 769 |
+
<button id="btn-subplots" class="btn btn--primary">Subplots</button>
|
| 770 |
+
</div>
|
| 771 |
+
|
| 772 |
+
<div class="canvas-wrapper">
|
| 773 |
+
<canvas id="canvas-advanced-viz" width="700" height="400"></canvas>
|
| 774 |
+
</div>
|
| 775 |
+
|
| 776 |
+
<div class="callout callout--insight">💡 Violin plots combine box plot and KDE for richer insights.</div>
|
| 777 |
+
<div class="callout callout--mistake">⚠️ Too many subplots makes figures unreadable.</div>
|
| 778 |
+
<div class="callout callout--tip">✅ Use figure size appropriately: plt.figure(figsize=(12,8))</div>
|
| 779 |
+
</section>
|
| 780 |
+
|
| 781 |
+
<!-- =================== 23. CUSTOM PLOTS ======================== -->
|
| 782 |
+
<section id="custom-plots" class="topic-section">
|
| 783 |
+
<h2>🖌️ Customizing Plots</h2>
|
| 784 |
+
<p>Learn to customize colors, styles, annotations, and themes to create publication-quality visualizations.</p>
|
| 785 |
+
|
| 786 |
+
<div class="info-card">
|
| 787 |
+
<strong>Real Example:</strong> Company report: branded colors, custom fonts, annotations for key events, professional styling.
|
| 788 |
+
</div>
|
| 789 |
+
|
| 790 |
+
<h3>Customization Techniques</h3>
|
| 791 |
+
<div class="form-group">
|
| 792 |
+
<button id="btn-colors" class="btn btn--primary">Custom Colors</button>
|
| 793 |
+
<button id="btn-annotations" class="btn btn--primary">Annotations</button>
|
| 794 |
+
<button id="btn-themes" class="btn btn--primary">Themes</button>
|
| 795 |
+
</div>
|
| 796 |
+
|
| 797 |
+
<div class="canvas-wrapper">
|
| 798 |
+
<canvas id="canvas-custom-plots" width="700" height="400"></canvas>
|
| 799 |
+
</div>
|
| 800 |
+
|
| 801 |
+
<div class="callout callout--insight">💡 Consistent styling across plots creates professional reports.</div>
|
| 802 |
+
<div class="callout callout--mistake">⚠️ Too many colors or styles creates visual chaos.</div>
|
| 803 |
+
<div class="callout callout--tip">✅ Use plt.style.use('seaborn') for instant beautiful plots.</div>
|
| 804 |
+
</section>
|
| 805 |
+
|
| 806 |
+
<!-- =================== 24. PLOTLY BASICS ======================= -->
|
| 807 |
+
<section id="plotly-basics" class="topic-section">
|
| 808 |
+
<h2>📈 Plotly Basics</h2>
|
| 809 |
+
<p>Plotly creates interactive visualizations: zoom, pan, hover tooltips. Perfect for dashboards and web applications.</p>
|
| 810 |
+
|
| 811 |
+
<div class="info-card">
|
| 812 |
+
<strong>Real Example:</strong> Sales dashboard: interactive line chart with hover showing exact values, zoom into specific months, download as PNG.
|
| 813 |
+
</div>
|
| 814 |
+
|
| 815 |
+
<h3>Interactive Charts</h3>
|
| 816 |
+
<div class="form-group">
|
| 817 |
+
<button id="btn-plotly-line" class="btn btn--primary">Interactive Line</button>
|
| 818 |
+
<button id="btn-plotly-scatter" class="btn btn--primary">3D Scatter</button>
|
| 819 |
+
<button id="btn-plotly-bar" class="btn btn--primary">Animated Bar</button>
|
| 820 |
+
</div>
|
| 821 |
+
|
| 822 |
+
<div class="canvas-wrapper">
|
| 823 |
+
<canvas id="canvas-plotly-basics" width="700" height="400"></canvas>
|
| 824 |
+
</div>
|
| 825 |
+
|
| 826 |
+
<div class="callout callout--insight">💡 Plotly works seamlessly in Jupyter notebooks and web apps.</div>
|
| 827 |
+
<div class="callout callout--mistake">⚠️ Large datasets can make interactive plots slow.</div>
|
| 828 |
+
<div class="callout callout--tip">✅ Use plotly.express for quick, beautiful interactive plots.</div>
|
| 829 |
+
</section>
|
| 830 |
+
|
| 831 |
+
<!-- =================== 25. PLOTLY DASH ========================= -->
|
| 832 |
+
<section id="plotly-dash" class="topic-section">
|
| 833 |
+
<h2>🎛️ Dashboard with Plotly Dash</h2>
|
| 834 |
+
<p>Dash combines Plotly with Flask to create interactive web dashboards with callbacks and real-time updates.</p>
|
| 835 |
+
|
| 836 |
+
<div class="info-card">
|
| 837 |
+
<strong>Real Example:</strong> COVID-19 dashboard: dropdown selects country, slider filters date range, charts update automatically, multiple linked visualizations.
|
| 838 |
+
</div>
|
| 839 |
+
|
| 840 |
+
<h3>Dashboard Components</h3>
|
| 841 |
+
<div class="form-group">
|
| 842 |
+
<label for="dash-region" class="form-label">Select Region:</label>
|
| 843 |
+
<select id="dash-region" class="form-control">
|
| 844 |
+
<option value="north">North</option>
|
| 845 |
+
<option value="south">South</option>
|
| 846 |
+
<option value="east">East</option>
|
| 847 |
+
<option value="west">West</option>
|
| 848 |
+
</select>
|
| 849 |
+
</div>
|
| 850 |
+
<div class="form-group">
|
| 851 |
+
<button id="btn-update-dash" class="btn btn--primary">Update Dashboard</button>
|
| 852 |
+
</div>
|
| 853 |
+
|
| 854 |
+
<div class="canvas-wrapper">
|
| 855 |
+
<canvas id="canvas-plotly-dash" width="700" height="400"></canvas>
|
| 856 |
+
</div>
|
| 857 |
+
|
| 858 |
+
<div class="callout callout--insight">💡 Dash callbacks enable reactive programming for dashboards.</div>
|
| 859 |
+
<div class="callout callout--mistake">⚠️ Not managing state can cause infinite callback loops.</div>
|
| 860 |
+
<div class="callout callout--tip">✅ Start simple, add complexity gradually.</div>
|
| 861 |
+
</section>
|
| 862 |
+
|
| 863 |
+
<!-- =================== 26. GIT BASICS =========================== -->
|
| 864 |
+
<section id="git-basics" class="topic-section">
|
| 865 |
+
<h2>📁 Git Basics</h2>
|
| 866 |
+
<p>Git is version control for code. Track changes, collaborate with teams, and never lose work again.</p>
|
| 867 |
+
|
| 868 |
+
<div class="info-card">
|
| 869 |
+
<strong>Real Example:</strong> Working on ML model: save checkpoints with git commit, experiment with new features, revert if it breaks, see full history.
|
| 870 |
+
</div>
|
| 871 |
+
|
| 872 |
+
<h3>Essential Git Commands</h3>
|
| 873 |
+
<div class="form-group">
|
| 874 |
+
<button id="btn-git-init" class="btn btn--primary">git init</button>
|
| 875 |
+
<button id="btn-git-add" class="btn btn--primary">git add</button>
|
| 876 |
+
<button id="btn-git-commit" class="btn btn--primary">git commit</button>
|
| 877 |
+
<button id="btn-git-status" class="btn btn--primary">git status</button>
|
| 878 |
+
</div>
|
| 879 |
+
|
| 880 |
+
<div class="canvas-wrapper">
|
| 881 |
+
<canvas id="canvas-git-basics" width="700" height="400"></canvas>
|
| 882 |
+
</div>
|
| 883 |
+
|
| 884 |
+
<div class="callout callout--insight">💡 Commit often with clear messages: "Fix bug in data loader"</div>
|
| 885 |
+
<div class="callout callout--mistake">⚠️ Committing huge files (datasets, models) bloats repository.</div>
|
| 886 |
+
<div class="callout callout--tip">✅ Use .gitignore for data files, __pycache__, .env</div>
|
| 887 |
+
</section>
|
| 888 |
+
|
| 889 |
+
<!-- =================== 27. GITHUB REMOTE ======================= -->
|
| 890 |
+
<section id="github-remote" class="topic-section">
|
| 891 |
+
<h2>🌐 GitHub & Remote Repositories</h2>
|
| 892 |
+
<p>GitHub hosts your code online. Push local changes, pull updates, clone repositories, collaborate globally.</p>
|
| 893 |
+
|
| 894 |
+
<div class="info-card">
|
| 895 |
+
<strong>Real Example:</strong> Team project: push code to GitHub, teammate pulls changes, both work on different files, merge seamlessly.
|
| 896 |
+
</div>
|
| 897 |
+
|
| 898 |
+
<h3>Remote Operations</h3>
|
| 899 |
+
<div class="form-group">
|
| 900 |
+
<button id="btn-git-remote" class="btn btn--primary">git remote add</button>
|
| 901 |
+
<button id="btn-git-push" class="btn btn--primary">git push</button>
|
| 902 |
+
<button id="btn-git-pull" class="btn btn--primary">git pull</button>
|
| 903 |
+
<button id="btn-git-clone" class="btn btn--primary">git clone</button>
|
| 904 |
+
</div>
|
| 905 |
+
|
| 906 |
+
<div class="canvas-wrapper">
|
| 907 |
+
<canvas id="canvas-github-remote" width="700" height="400"></canvas>
|
| 908 |
+
</div>
|
| 909 |
+
|
| 910 |
+
<div class="callout callout--insight">💡 Always pull before push to avoid conflicts.</div>
|
| 911 |
+
<div class="callout callout--mistake">⚠️ Pushing sensitive data (API keys, passwords) is dangerous.</div>
|
| 912 |
+
<div class="callout callout--tip">✅ Use SSH keys for secure authentication.</div>
|
| 913 |
+
</section>
|
| 914 |
+
|
| 915 |
+
<!-- =================== 28. GIT BRANCHING ======================= -->
|
| 916 |
+
<section id="git-branching" class="topic-section">
|
| 917 |
+
<h2>🌿 Branching & Collaboration</h2>
|
| 918 |
+
<p>Branches allow parallel development. Work on features without breaking main code. Merge when ready.</p>
|
| 919 |
+
|
| 920 |
+
<div class="info-card">
|
| 921 |
+
<strong>Real Example:</strong> Main branch is production code. Create feature branch for new model, develop and test, merge via pull request after review.
|
| 922 |
+
</div>
|
| 923 |
+
|
| 924 |
+
<h3>Branch Operations</h3>
|
| 925 |
+
<div class="form-group">
|
| 926 |
+
<button id="btn-git-branch" class="btn btn--primary">git branch</button>
|
| 927 |
+
<button id="btn-git-checkout" class="btn btn--primary">git checkout</button>
|
| 928 |
+
<button id="btn-git-merge" class="btn btn--primary">git merge</button>
|
| 929 |
+
</div>
|
| 930 |
+
|
| 931 |
+
<div class="canvas-wrapper">
|
| 932 |
+
<canvas id="canvas-git-branching" width="700" height="400"></canvas>
|
| 933 |
+
</div>
|
| 934 |
+
|
| 935 |
+
<div class="callout callout--insight">💡 Feature branches isolate work, main stays stable.</div>
|
| 936 |
+
<div class="callout callout--mistake">⚠️ Merge conflicts happen when same lines change.</div>
|
| 937 |
+
<div class="callout callout--tip">✅ Use pull requests for code review before merging.</div>
|
| 938 |
+
</section>
|
| 939 |
+
</main>
|
| 940 |
+
</div>
|
| 941 |
+
|
| 942 |
+
<script src="app.js" defer></script>
|
| 943 |
+
</body>
|
| 944 |
+
</html>
|
Visualization/style.css
ADDED
|
@@ -0,0 +1,924 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
:root {
|
| 2 |
+
/* Primitive Color Tokens */
|
| 3 |
+
--color-white: rgba(255, 255, 255, 1);
|
| 4 |
+
--color-black: rgba(0, 0, 0, 1);
|
| 5 |
+
--color-cream-50: rgba(252, 252, 249, 1);
|
| 6 |
+
--color-cream-100: rgba(255, 255, 253, 1);
|
| 7 |
+
--color-gray-200: rgba(245, 245, 245, 1);
|
| 8 |
+
--color-gray-300: rgba(167, 169, 169, 1);
|
| 9 |
+
--color-gray-400: rgba(119, 124, 124, 1);
|
| 10 |
+
--color-slate-500: rgba(98, 108, 113, 1);
|
| 11 |
+
--color-brown-600: rgba(94, 82, 64, 1);
|
| 12 |
+
--color-charcoal-700: rgba(31, 33, 33, 1);
|
| 13 |
+
--color-charcoal-800: rgba(38, 40, 40, 1);
|
| 14 |
+
--color-slate-900: rgba(19, 52, 59, 1);
|
| 15 |
+
--color-teal-300: rgba(50, 184, 198, 1);
|
| 16 |
+
--color-teal-400: rgba(45, 166, 178, 1);
|
| 17 |
+
--color-teal-500: rgba(33, 128, 141, 1);
|
| 18 |
+
--color-teal-600: rgba(29, 116, 128, 1);
|
| 19 |
+
--color-teal-700: rgba(26, 104, 115, 1);
|
| 20 |
+
--color-teal-800: rgba(41, 150, 161, 1);
|
| 21 |
+
--color-red-400: rgba(255, 84, 89, 1);
|
| 22 |
+
--color-red-500: rgba(192, 21, 47, 1);
|
| 23 |
+
--color-orange-400: rgba(230, 129, 97, 1);
|
| 24 |
+
--color-orange-500: rgba(168, 75, 47, 1);
|
| 25 |
+
|
| 26 |
+
/* RGB versions for opacity control */
|
| 27 |
+
--color-brown-600-rgb: 94, 82, 64;
|
| 28 |
+
--color-teal-500-rgb: 33, 128, 141;
|
| 29 |
+
--color-slate-900-rgb: 19, 52, 59;
|
| 30 |
+
--color-slate-500-rgb: 98, 108, 113;
|
| 31 |
+
--color-red-500-rgb: 192, 21, 47;
|
| 32 |
+
--color-red-400-rgb: 255, 84, 89;
|
| 33 |
+
--color-orange-500-rgb: 168, 75, 47;
|
| 34 |
+
--color-orange-400-rgb: 230, 129, 97;
|
| 35 |
+
|
| 36 |
+
/* Background color tokens (Light Mode) */
|
| 37 |
+
--color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
|
| 38 |
+
--color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
|
| 39 |
+
--color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
|
| 40 |
+
--color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
|
| 41 |
+
--color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
|
| 42 |
+
--color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
|
| 43 |
+
--color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
|
| 44 |
+
--color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */
|
| 45 |
+
|
| 46 |
+
/* Semantic Color Tokens (Light Mode) */
|
| 47 |
+
--color-background: var(--color-cream-50);
|
| 48 |
+
--color-surface: var(--color-cream-100);
|
| 49 |
+
--color-text: var(--color-slate-900);
|
| 50 |
+
--color-text-secondary: var(--color-slate-500);
|
| 51 |
+
--color-primary: var(--color-teal-500);
|
| 52 |
+
--color-primary-hover: var(--color-teal-600);
|
| 53 |
+
--color-primary-active: var(--color-teal-700);
|
| 54 |
+
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
|
| 55 |
+
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
|
| 56 |
+
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
|
| 57 |
+
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
|
| 58 |
+
--color-btn-primary-text: var(--color-cream-50);
|
| 59 |
+
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
|
| 60 |
+
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
|
| 61 |
+
--color-error: var(--color-red-500);
|
| 62 |
+
--color-success: var(--color-teal-500);
|
| 63 |
+
--color-warning: var(--color-orange-500);
|
| 64 |
+
--color-info: var(--color-slate-500);
|
| 65 |
+
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
|
| 66 |
+
--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
|
| 67 |
+
|
| 68 |
+
/* Common style patterns */
|
| 69 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 70 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 71 |
+
--status-bg-opacity: 0.15;
|
| 72 |
+
--status-border-opacity: 0.25;
|
| 73 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 74 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 75 |
+
|
| 76 |
+
/* RGB versions for opacity control */
|
| 77 |
+
--color-success-rgb: 33, 128, 141;
|
| 78 |
+
--color-error-rgb: 192, 21, 47;
|
| 79 |
+
--color-warning-rgb: 168, 75, 47;
|
| 80 |
+
--color-info-rgb: 98, 108, 113;
|
| 81 |
+
|
| 82 |
+
/* Typography */
|
| 83 |
+
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
|
| 84 |
+
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
| 85 |
+
--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
|
| 86 |
+
Monaco, Consolas, monospace;
|
| 87 |
+
--font-size-xs: 11px;
|
| 88 |
+
--font-size-sm: 12px;
|
| 89 |
+
--font-size-base: 14px;
|
| 90 |
+
--font-size-md: 14px;
|
| 91 |
+
--font-size-lg: 16px;
|
| 92 |
+
--font-size-xl: 18px;
|
| 93 |
+
--font-size-2xl: 20px;
|
| 94 |
+
--font-size-3xl: 24px;
|
| 95 |
+
--font-size-4xl: 30px;
|
| 96 |
+
--font-weight-normal: 400;
|
| 97 |
+
--font-weight-medium: 500;
|
| 98 |
+
--font-weight-semibold: 550;
|
| 99 |
+
--font-weight-bold: 600;
|
| 100 |
+
--line-height-tight: 1.2;
|
| 101 |
+
--line-height-normal: 1.5;
|
| 102 |
+
--letter-spacing-tight: -0.01em;
|
| 103 |
+
|
| 104 |
+
/* Spacing */
|
| 105 |
+
--space-0: 0;
|
| 106 |
+
--space-1: 1px;
|
| 107 |
+
--space-2: 2px;
|
| 108 |
+
--space-4: 4px;
|
| 109 |
+
--space-6: 6px;
|
| 110 |
+
--space-8: 8px;
|
| 111 |
+
--space-10: 10px;
|
| 112 |
+
--space-12: 12px;
|
| 113 |
+
--space-16: 16px;
|
| 114 |
+
--space-20: 20px;
|
| 115 |
+
--space-24: 24px;
|
| 116 |
+
--space-32: 32px;
|
| 117 |
+
|
| 118 |
+
/* Border Radius */
|
| 119 |
+
--radius-sm: 6px;
|
| 120 |
+
--radius-base: 8px;
|
| 121 |
+
--radius-md: 10px;
|
| 122 |
+
--radius-lg: 12px;
|
| 123 |
+
--radius-full: 9999px;
|
| 124 |
+
|
| 125 |
+
/* Shadows */
|
| 126 |
+
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
|
| 127 |
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
|
| 128 |
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
|
| 129 |
+
0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
| 130 |
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
|
| 131 |
+
0 4px 6px -2px rgba(0, 0, 0, 0.02);
|
| 132 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
| 133 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
|
| 134 |
+
|
| 135 |
+
/* Animation */
|
| 136 |
+
--duration-fast: 150ms;
|
| 137 |
+
--duration-normal: 250ms;
|
| 138 |
+
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
|
| 139 |
+
|
| 140 |
+
/* Layout */
|
| 141 |
+
--container-sm: 640px;
|
| 142 |
+
--container-md: 768px;
|
| 143 |
+
--container-lg: 1024px;
|
| 144 |
+
--container-xl: 1280px;
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
/* Dark mode colors */
|
| 148 |
+
@media (prefers-color-scheme: dark) {
|
| 149 |
+
:root {
|
| 150 |
+
/* RGB versions for opacity control (Dark Mode) */
|
| 151 |
+
--color-gray-400-rgb: 119, 124, 124;
|
| 152 |
+
--color-teal-300-rgb: 50, 184, 198;
|
| 153 |
+
--color-gray-300-rgb: 167, 169, 169;
|
| 154 |
+
--color-gray-200-rgb: 245, 245, 245;
|
| 155 |
+
|
| 156 |
+
/* Background color tokens (Dark Mode) */
|
| 157 |
+
--color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
|
| 158 |
+
--color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
|
| 159 |
+
--color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
|
| 160 |
+
--color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
|
| 161 |
+
--color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
|
| 162 |
+
--color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
|
| 163 |
+
--color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
|
| 164 |
+
--color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
|
| 165 |
+
|
| 166 |
+
/* Semantic Color Tokens (Dark Mode) */
|
| 167 |
+
--color-background: var(--color-charcoal-700);
|
| 168 |
+
--color-surface: var(--color-charcoal-800);
|
| 169 |
+
--color-text: var(--color-gray-200);
|
| 170 |
+
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
|
| 171 |
+
--color-primary: var(--color-teal-300);
|
| 172 |
+
--color-primary-hover: var(--color-teal-400);
|
| 173 |
+
--color-primary-active: var(--color-teal-800);
|
| 174 |
+
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
|
| 175 |
+
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
|
| 176 |
+
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
|
| 177 |
+
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
|
| 178 |
+
--color-error: var(--color-red-400);
|
| 179 |
+
--color-success: var(--color-teal-300);
|
| 180 |
+
--color-warning: var(--color-orange-400);
|
| 181 |
+
--color-info: var(--color-gray-300);
|
| 182 |
+
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
|
| 183 |
+
--color-btn-primary-text: var(--color-slate-900);
|
| 184 |
+
--color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
|
| 185 |
+
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
|
| 186 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
| 187 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
| 188 |
+
--button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 189 |
+
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 190 |
+
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
|
| 191 |
+
|
| 192 |
+
/* Common style patterns - updated for dark mode */
|
| 193 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 194 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 195 |
+
--status-bg-opacity: 0.15;
|
| 196 |
+
--status-border-opacity: 0.25;
|
| 197 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 198 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 199 |
+
|
| 200 |
+
/* RGB versions for dark mode */
|
| 201 |
+
--color-success-rgb: var(--color-teal-300-rgb);
|
| 202 |
+
--color-error-rgb: var(--color-red-400-rgb);
|
| 203 |
+
--color-warning-rgb: var(--color-orange-400-rgb);
|
| 204 |
+
--color-info-rgb: var(--color-gray-300-rgb);
|
| 205 |
+
}
|
| 206 |
+
}
|
| 207 |
+
|
| 208 |
+
/* Data attribute for manual theme switching */
|
| 209 |
+
[data-color-scheme="dark"] {
|
| 210 |
+
/* RGB versions for opacity control (dark mode) */
|
| 211 |
+
--color-gray-400-rgb: 119, 124, 124;
|
| 212 |
+
--color-teal-300-rgb: 50, 184, 198;
|
| 213 |
+
--color-gray-300-rgb: 167, 169, 169;
|
| 214 |
+
--color-gray-200-rgb: 245, 245, 245;
|
| 215 |
+
|
| 216 |
+
/* Colorful background palette - Dark Mode */
|
| 217 |
+
--color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
|
| 218 |
+
--color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
|
| 219 |
+
--color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
|
| 220 |
+
--color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
|
| 221 |
+
--color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
|
| 222 |
+
--color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
|
| 223 |
+
--color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
|
| 224 |
+
--color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
|
| 225 |
+
|
| 226 |
+
/* Semantic Color Tokens (Dark Mode) */
|
| 227 |
+
--color-background: var(--color-charcoal-700);
|
| 228 |
+
--color-surface: var(--color-charcoal-800);
|
| 229 |
+
--color-text: var(--color-gray-200);
|
| 230 |
+
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
|
| 231 |
+
--color-primary: var(--color-teal-300);
|
| 232 |
+
--color-primary-hover: var(--color-teal-400);
|
| 233 |
+
--color-primary-active: var(--color-teal-800);
|
| 234 |
+
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
|
| 235 |
+
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
|
| 236 |
+
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
|
| 237 |
+
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
|
| 238 |
+
--color-error: var(--color-red-400);
|
| 239 |
+
--color-success: var(--color-teal-300);
|
| 240 |
+
--color-warning: var(--color-orange-400);
|
| 241 |
+
--color-info: var(--color-gray-300);
|
| 242 |
+
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
|
| 243 |
+
--color-btn-primary-text: var(--color-slate-900);
|
| 244 |
+
--color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
|
| 245 |
+
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
|
| 246 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
| 247 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
| 248 |
+
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 249 |
+
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
|
| 250 |
+
|
| 251 |
+
/* Common style patterns - updated for dark mode */
|
| 252 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 253 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 254 |
+
--status-bg-opacity: 0.15;
|
| 255 |
+
--status-border-opacity: 0.25;
|
| 256 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 257 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 258 |
+
|
| 259 |
+
/* RGB versions for dark mode */
|
| 260 |
+
--color-success-rgb: var(--color-teal-300-rgb);
|
| 261 |
+
--color-error-rgb: var(--color-red-400-rgb);
|
| 262 |
+
--color-warning-rgb: var(--color-orange-400-rgb);
|
| 263 |
+
--color-info-rgb: var(--color-gray-300-rgb);
|
| 264 |
+
}
|
| 265 |
+
|
| 266 |
+
[data-color-scheme="light"] {
|
| 267 |
+
/* RGB versions for opacity control (light mode) */
|
| 268 |
+
--color-brown-600-rgb: 94, 82, 64;
|
| 269 |
+
--color-teal-500-rgb: 33, 128, 141;
|
| 270 |
+
--color-slate-900-rgb: 19, 52, 59;
|
| 271 |
+
|
| 272 |
+
/* Semantic Color Tokens (Light Mode) */
|
| 273 |
+
--color-background: var(--color-cream-50);
|
| 274 |
+
--color-surface: var(--color-cream-100);
|
| 275 |
+
--color-text: var(--color-slate-900);
|
| 276 |
+
--color-text-secondary: var(--color-slate-500);
|
| 277 |
+
--color-primary: var(--color-teal-500);
|
| 278 |
+
--color-primary-hover: var(--color-teal-600);
|
| 279 |
+
--color-primary-active: var(--color-teal-700);
|
| 280 |
+
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
|
| 281 |
+
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
|
| 282 |
+
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
|
| 283 |
+
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
|
| 284 |
+
--color-btn-primary-text: var(--color-cream-50);
|
| 285 |
+
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
|
| 286 |
+
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
|
| 287 |
+
--color-error: var(--color-red-500);
|
| 288 |
+
--color-success: var(--color-teal-500);
|
| 289 |
+
--color-warning: var(--color-orange-500);
|
| 290 |
+
--color-info: var(--color-slate-500);
|
| 291 |
+
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
|
| 292 |
+
|
| 293 |
+
/* RGB versions for light mode */
|
| 294 |
+
--color-success-rgb: var(--color-teal-500-rgb);
|
| 295 |
+
--color-error-rgb: var(--color-red-500-rgb);
|
| 296 |
+
--color-warning-rgb: var(--color-orange-500-rgb);
|
| 297 |
+
--color-info-rgb: var(--color-slate-500-rgb);
|
| 298 |
+
}
|
| 299 |
+
|
| 300 |
+
/* Base styles */
|
| 301 |
+
html {
|
| 302 |
+
font-size: var(--font-size-base);
|
| 303 |
+
font-family: var(--font-family-base);
|
| 304 |
+
line-height: var(--line-height-normal);
|
| 305 |
+
color: var(--color-text);
|
| 306 |
+
background-color: var(--color-background);
|
| 307 |
+
-webkit-font-smoothing: antialiased;
|
| 308 |
+
box-sizing: border-box;
|
| 309 |
+
}
|
| 310 |
+
|
| 311 |
+
body {
|
| 312 |
+
margin: 0;
|
| 313 |
+
padding: 0;
|
| 314 |
+
}
|
| 315 |
+
|
| 316 |
+
*,
|
| 317 |
+
*::before,
|
| 318 |
+
*::after {
|
| 319 |
+
box-sizing: inherit;
|
| 320 |
+
}
|
| 321 |
+
|
| 322 |
+
/* Typography */
|
| 323 |
+
h1,
|
| 324 |
+
h2,
|
| 325 |
+
h3,
|
| 326 |
+
h4,
|
| 327 |
+
h5,
|
| 328 |
+
h6 {
|
| 329 |
+
margin: 0;
|
| 330 |
+
font-weight: var(--font-weight-semibold);
|
| 331 |
+
line-height: var(--line-height-tight);
|
| 332 |
+
color: var(--color-text);
|
| 333 |
+
letter-spacing: var(--letter-spacing-tight);
|
| 334 |
+
}
|
| 335 |
+
|
| 336 |
+
h1 {
|
| 337 |
+
font-size: var(--font-size-4xl);
|
| 338 |
+
}
|
| 339 |
+
h2 {
|
| 340 |
+
font-size: var(--font-size-3xl);
|
| 341 |
+
}
|
| 342 |
+
h3 {
|
| 343 |
+
font-size: var(--font-size-2xl);
|
| 344 |
+
}
|
| 345 |
+
h4 {
|
| 346 |
+
font-size: var(--font-size-xl);
|
| 347 |
+
}
|
| 348 |
+
h5 {
|
| 349 |
+
font-size: var(--font-size-lg);
|
| 350 |
+
}
|
| 351 |
+
h6 {
|
| 352 |
+
font-size: var(--font-size-md);
|
| 353 |
+
}
|
| 354 |
+
|
| 355 |
+
p {
|
| 356 |
+
margin: 0 0 var(--space-16) 0;
|
| 357 |
+
}
|
| 358 |
+
|
| 359 |
+
a {
|
| 360 |
+
color: var(--color-primary);
|
| 361 |
+
text-decoration: none;
|
| 362 |
+
transition: color var(--duration-fast) var(--ease-standard);
|
| 363 |
+
}
|
| 364 |
+
|
| 365 |
+
a:hover {
|
| 366 |
+
color: var(--color-primary-hover);
|
| 367 |
+
}
|
| 368 |
+
|
| 369 |
+
code,
|
| 370 |
+
pre {
|
| 371 |
+
font-family: var(--font-family-mono);
|
| 372 |
+
font-size: calc(var(--font-size-base) * 0.95);
|
| 373 |
+
background-color: var(--color-secondary);
|
| 374 |
+
border-radius: var(--radius-sm);
|
| 375 |
+
}
|
| 376 |
+
|
| 377 |
+
code {
|
| 378 |
+
padding: var(--space-1) var(--space-4);
|
| 379 |
+
}
|
| 380 |
+
|
| 381 |
+
pre {
|
| 382 |
+
padding: var(--space-16);
|
| 383 |
+
margin: var(--space-16) 0;
|
| 384 |
+
overflow: auto;
|
| 385 |
+
border: 1px solid var(--color-border);
|
| 386 |
+
}
|
| 387 |
+
|
| 388 |
+
pre code {
|
| 389 |
+
background: none;
|
| 390 |
+
padding: 0;
|
| 391 |
+
}
|
| 392 |
+
|
| 393 |
+
/* Buttons */
|
| 394 |
+
.btn {
|
| 395 |
+
display: inline-flex;
|
| 396 |
+
align-items: center;
|
| 397 |
+
justify-content: center;
|
| 398 |
+
padding: var(--space-8) var(--space-16);
|
| 399 |
+
border-radius: var(--radius-base);
|
| 400 |
+
font-size: var(--font-size-base);
|
| 401 |
+
font-weight: 500;
|
| 402 |
+
line-height: 1.5;
|
| 403 |
+
cursor: pointer;
|
| 404 |
+
transition: all var(--duration-normal) var(--ease-standard);
|
| 405 |
+
border: none;
|
| 406 |
+
text-decoration: none;
|
| 407 |
+
position: relative;
|
| 408 |
+
}
|
| 409 |
+
|
| 410 |
+
.btn:focus-visible {
|
| 411 |
+
outline: none;
|
| 412 |
+
box-shadow: var(--focus-ring);
|
| 413 |
+
}
|
| 414 |
+
|
| 415 |
+
.btn--primary {
|
| 416 |
+
background: var(--color-primary);
|
| 417 |
+
color: var(--color-btn-primary-text);
|
| 418 |
+
}
|
| 419 |
+
|
| 420 |
+
.btn--primary:hover {
|
| 421 |
+
background: var(--color-primary-hover);
|
| 422 |
+
}
|
| 423 |
+
|
| 424 |
+
.btn--primary:active {
|
| 425 |
+
background: var(--color-primary-active);
|
| 426 |
+
}
|
| 427 |
+
|
| 428 |
+
.btn--secondary {
|
| 429 |
+
background: var(--color-secondary);
|
| 430 |
+
color: var(--color-text);
|
| 431 |
+
}
|
| 432 |
+
|
| 433 |
+
.btn--secondary:hover {
|
| 434 |
+
background: var(--color-secondary-hover);
|
| 435 |
+
}
|
| 436 |
+
|
| 437 |
+
.btn--secondary:active {
|
| 438 |
+
background: var(--color-secondary-active);
|
| 439 |
+
}
|
| 440 |
+
|
| 441 |
+
.btn--outline {
|
| 442 |
+
background: transparent;
|
| 443 |
+
border: 1px solid var(--color-border);
|
| 444 |
+
color: var(--color-text);
|
| 445 |
+
}
|
| 446 |
+
|
| 447 |
+
.btn--outline:hover {
|
| 448 |
+
background: var(--color-secondary);
|
| 449 |
+
}
|
| 450 |
+
|
| 451 |
+
.btn--sm {
|
| 452 |
+
padding: var(--space-4) var(--space-12);
|
| 453 |
+
font-size: var(--font-size-sm);
|
| 454 |
+
border-radius: var(--radius-sm);
|
| 455 |
+
}
|
| 456 |
+
|
| 457 |
+
.btn--lg {
|
| 458 |
+
padding: var(--space-10) var(--space-20);
|
| 459 |
+
font-size: var(--font-size-lg);
|
| 460 |
+
border-radius: var(--radius-md);
|
| 461 |
+
}
|
| 462 |
+
|
| 463 |
+
.btn--full-width {
|
| 464 |
+
width: 100%;
|
| 465 |
+
}
|
| 466 |
+
|
| 467 |
+
.btn:disabled {
|
| 468 |
+
opacity: 0.5;
|
| 469 |
+
cursor: not-allowed;
|
| 470 |
+
}
|
| 471 |
+
|
| 472 |
+
/* Form elements */
|
| 473 |
+
.form-control {
|
| 474 |
+
display: block;
|
| 475 |
+
width: 100%;
|
| 476 |
+
padding: var(--space-8) var(--space-12);
|
| 477 |
+
font-size: var(--font-size-md);
|
| 478 |
+
line-height: 1.5;
|
| 479 |
+
color: var(--color-text);
|
| 480 |
+
background-color: var(--color-surface);
|
| 481 |
+
border: 1px solid var(--color-border);
|
| 482 |
+
border-radius: var(--radius-base);
|
| 483 |
+
transition: border-color var(--duration-fast) var(--ease-standard),
|
| 484 |
+
box-shadow var(--duration-fast) var(--ease-standard);
|
| 485 |
+
}
|
| 486 |
+
|
| 487 |
+
textarea.form-control {
|
| 488 |
+
font-family: var(--font-family-base);
|
| 489 |
+
font-size: var(--font-size-base);
|
| 490 |
+
}
|
| 491 |
+
|
| 492 |
+
select.form-control {
|
| 493 |
+
padding: var(--space-8) var(--space-12);
|
| 494 |
+
-webkit-appearance: none;
|
| 495 |
+
-moz-appearance: none;
|
| 496 |
+
appearance: none;
|
| 497 |
+
background-image: var(--select-caret-light);
|
| 498 |
+
background-repeat: no-repeat;
|
| 499 |
+
background-position: right var(--space-12) center;
|
| 500 |
+
background-size: 16px;
|
| 501 |
+
padding-right: var(--space-32);
|
| 502 |
+
}
|
| 503 |
+
|
| 504 |
+
/* Add a dark mode specific caret */
|
| 505 |
+
@media (prefers-color-scheme: dark) {
|
| 506 |
+
select.form-control {
|
| 507 |
+
background-image: var(--select-caret-dark);
|
| 508 |
+
}
|
| 509 |
+
}
|
| 510 |
+
|
| 511 |
+
/* Also handle data-color-scheme */
|
| 512 |
+
[data-color-scheme="dark"] select.form-control {
|
| 513 |
+
background-image: var(--select-caret-dark);
|
| 514 |
+
}
|
| 515 |
+
|
| 516 |
+
[data-color-scheme="light"] select.form-control {
|
| 517 |
+
background-image: var(--select-caret-light);
|
| 518 |
+
}
|
| 519 |
+
|
| 520 |
+
.form-control:focus {
|
| 521 |
+
border-color: var(--color-primary);
|
| 522 |
+
outline: var(--focus-outline);
|
| 523 |
+
}
|
| 524 |
+
|
| 525 |
+
.form-label {
|
| 526 |
+
display: block;
|
| 527 |
+
margin-bottom: var(--space-8);
|
| 528 |
+
font-weight: var(--font-weight-medium);
|
| 529 |
+
font-size: var(--font-size-sm);
|
| 530 |
+
}
|
| 531 |
+
|
| 532 |
+
.form-group {
|
| 533 |
+
margin-bottom: var(--space-16);
|
| 534 |
+
}
|
| 535 |
+
|
| 536 |
+
/* Card component */
|
| 537 |
+
.card {
|
| 538 |
+
background-color: var(--color-surface);
|
| 539 |
+
border-radius: var(--radius-lg);
|
| 540 |
+
border: 1px solid var(--color-card-border);
|
| 541 |
+
box-shadow: var(--shadow-sm);
|
| 542 |
+
overflow: hidden;
|
| 543 |
+
transition: box-shadow var(--duration-normal) var(--ease-standard);
|
| 544 |
+
}
|
| 545 |
+
|
| 546 |
+
.card:hover {
|
| 547 |
+
box-shadow: var(--shadow-md);
|
| 548 |
+
}
|
| 549 |
+
|
| 550 |
+
.card__body {
|
| 551 |
+
padding: var(--space-16);
|
| 552 |
+
}
|
| 553 |
+
|
| 554 |
+
.card__header,
|
| 555 |
+
.card__footer {
|
| 556 |
+
padding: var(--space-16);
|
| 557 |
+
border-bottom: 1px solid var(--color-card-border-inner);
|
| 558 |
+
}
|
| 559 |
+
|
| 560 |
+
/* Status indicators - simplified with CSS variables */
|
| 561 |
+
.status {
|
| 562 |
+
display: inline-flex;
|
| 563 |
+
align-items: center;
|
| 564 |
+
padding: var(--space-6) var(--space-12);
|
| 565 |
+
border-radius: var(--radius-full);
|
| 566 |
+
font-weight: var(--font-weight-medium);
|
| 567 |
+
font-size: var(--font-size-sm);
|
| 568 |
+
}
|
| 569 |
+
|
| 570 |
+
.status--success {
|
| 571 |
+
background-color: rgba(
|
| 572 |
+
var(--color-success-rgb, 33, 128, 141),
|
| 573 |
+
var(--status-bg-opacity)
|
| 574 |
+
);
|
| 575 |
+
color: var(--color-success);
|
| 576 |
+
border: 1px solid
|
| 577 |
+
rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
|
| 578 |
+
}
|
| 579 |
+
|
| 580 |
+
.status--error {
|
| 581 |
+
background-color: rgba(
|
| 582 |
+
var(--color-error-rgb, 192, 21, 47),
|
| 583 |
+
var(--status-bg-opacity)
|
| 584 |
+
);
|
| 585 |
+
color: var(--color-error);
|
| 586 |
+
border: 1px solid
|
| 587 |
+
rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
|
| 588 |
+
}
|
| 589 |
+
|
| 590 |
+
.status--warning {
|
| 591 |
+
background-color: rgba(
|
| 592 |
+
var(--color-warning-rgb, 168, 75, 47),
|
| 593 |
+
var(--status-bg-opacity)
|
| 594 |
+
);
|
| 595 |
+
color: var(--color-warning);
|
| 596 |
+
border: 1px solid
|
| 597 |
+
rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
|
| 598 |
+
}
|
| 599 |
+
|
| 600 |
+
.status--info {
|
| 601 |
+
background-color: rgba(
|
| 602 |
+
var(--color-info-rgb, 98, 108, 113),
|
| 603 |
+
var(--status-bg-opacity)
|
| 604 |
+
);
|
| 605 |
+
color: var(--color-info);
|
| 606 |
+
border: 1px solid
|
| 607 |
+
rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
|
| 608 |
+
}
|
| 609 |
+
|
| 610 |
+
/* Container layout */
|
| 611 |
+
.container {
|
| 612 |
+
width: 100%;
|
| 613 |
+
margin-right: auto;
|
| 614 |
+
margin-left: auto;
|
| 615 |
+
padding-right: var(--space-16);
|
| 616 |
+
padding-left: var(--space-16);
|
| 617 |
+
}
|
| 618 |
+
|
| 619 |
+
@media (min-width: 640px) {
|
| 620 |
+
.container {
|
| 621 |
+
max-width: var(--container-sm);
|
| 622 |
+
}
|
| 623 |
+
}
|
| 624 |
+
@media (min-width: 768px) {
|
| 625 |
+
.container {
|
| 626 |
+
max-width: var(--container-md);
|
| 627 |
+
}
|
| 628 |
+
}
|
| 629 |
+
@media (min-width: 1024px) {
|
| 630 |
+
.container {
|
| 631 |
+
max-width: var(--container-lg);
|
| 632 |
+
}
|
| 633 |
+
}
|
| 634 |
+
@media (min-width: 1280px) {
|
| 635 |
+
.container {
|
| 636 |
+
max-width: var(--container-xl);
|
| 637 |
+
}
|
| 638 |
+
}
|
| 639 |
+
|
| 640 |
+
/* Utility classes */
|
| 641 |
+
.flex {
|
| 642 |
+
display: flex;
|
| 643 |
+
}
|
| 644 |
+
.flex-col {
|
| 645 |
+
flex-direction: column;
|
| 646 |
+
}
|
| 647 |
+
.items-center {
|
| 648 |
+
align-items: center;
|
| 649 |
+
}
|
| 650 |
+
.justify-center {
|
| 651 |
+
justify-content: center;
|
| 652 |
+
}
|
| 653 |
+
.justify-between {
|
| 654 |
+
justify-content: space-between;
|
| 655 |
+
}
|
| 656 |
+
.gap-4 {
|
| 657 |
+
gap: var(--space-4);
|
| 658 |
+
}
|
| 659 |
+
.gap-8 {
|
| 660 |
+
gap: var(--space-8);
|
| 661 |
+
}
|
| 662 |
+
.gap-16 {
|
| 663 |
+
gap: var(--space-16);
|
| 664 |
+
}
|
| 665 |
+
|
| 666 |
+
.m-0 {
|
| 667 |
+
margin: 0;
|
| 668 |
+
}
|
| 669 |
+
.mt-8 {
|
| 670 |
+
margin-top: var(--space-8);
|
| 671 |
+
}
|
| 672 |
+
.mb-8 {
|
| 673 |
+
margin-bottom: var(--space-8);
|
| 674 |
+
}
|
| 675 |
+
.mx-8 {
|
| 676 |
+
margin-left: var(--space-8);
|
| 677 |
+
margin-right: var(--space-8);
|
| 678 |
+
}
|
| 679 |
+
.my-8 {
|
| 680 |
+
margin-top: var(--space-8);
|
| 681 |
+
margin-bottom: var(--space-8);
|
| 682 |
+
}
|
| 683 |
+
|
| 684 |
+
.p-0 {
|
| 685 |
+
padding: 0;
|
| 686 |
+
}
|
| 687 |
+
.py-8 {
|
| 688 |
+
padding-top: var(--space-8);
|
| 689 |
+
padding-bottom: var(--space-8);
|
| 690 |
+
}
|
| 691 |
+
.px-8 {
|
| 692 |
+
padding-left: var(--space-8);
|
| 693 |
+
padding-right: var(--space-8);
|
| 694 |
+
}
|
| 695 |
+
.py-16 {
|
| 696 |
+
padding-top: var(--space-16);
|
| 697 |
+
padding-bottom: var(--space-16);
|
| 698 |
+
}
|
| 699 |
+
.px-16 {
|
| 700 |
+
padding-left: var(--space-16);
|
| 701 |
+
padding-right: var(--space-16);
|
| 702 |
+
}
|
| 703 |
+
|
| 704 |
+
.block {
|
| 705 |
+
display: block;
|
| 706 |
+
}
|
| 707 |
+
.hidden {
|
| 708 |
+
display: none;
|
| 709 |
+
}
|
| 710 |
+
|
| 711 |
+
/* Accessibility */
|
| 712 |
+
.sr-only {
|
| 713 |
+
position: absolute;
|
| 714 |
+
width: 1px;
|
| 715 |
+
height: 1px;
|
| 716 |
+
padding: 0;
|
| 717 |
+
margin: -1px;
|
| 718 |
+
overflow: hidden;
|
| 719 |
+
clip: rect(0, 0, 0, 0);
|
| 720 |
+
white-space: nowrap;
|
| 721 |
+
border-width: 0;
|
| 722 |
+
}
|
| 723 |
+
|
| 724 |
+
:focus-visible {
|
| 725 |
+
outline: var(--focus-outline);
|
| 726 |
+
outline-offset: 2px;
|
| 727 |
+
}
|
| 728 |
+
|
| 729 |
+
/* Dark mode specifics */
|
| 730 |
+
[data-color-scheme="dark"] .btn--outline {
|
| 731 |
+
border: 1px solid var(--color-border-secondary);
|
| 732 |
+
}
|
| 733 |
+
|
| 734 |
+
@font-face {
|
| 735 |
+
font-family: 'FKGroteskNeue';
|
| 736 |
+
src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
|
| 737 |
+
format('woff2');
|
| 738 |
+
}
|
| 739 |
+
|
| 740 |
+
/* END PERPLEXITY DESIGN SYSTEM */
|
| 741 |
+
/* =========================================================================
|
| 742 |
+
PERPLEXITY DESIGN SYSTEM — FULL CSS (abbreviated here for brevity)
|
| 743 |
+
========================================================================= */
|
| 744 |
+
|
| 745 |
+
/* --- DESIGN SYSTEM ROOT TOKENS (COPIED FROM SPEC) ----------------------- */
|
| 746 |
+
:root {
|
| 747 |
+
/* Primitive Color Tokens */
|
| 748 |
+
--color-white: rgba(255, 255, 255, 1);
|
| 749 |
+
--color-black: rgba(0, 0, 0, 1);
|
| 750 |
+
--color-cream-50: rgba(252, 252, 249, 1);
|
| 751 |
+
--color-cream-100: rgba(255, 255, 253, 1);
|
| 752 |
+
--color-gray-200: rgba(245, 245, 245, 1);
|
| 753 |
+
--color-gray-300: rgba(167, 169, 169, 1);
|
| 754 |
+
--color-gray-400: rgba(119, 124, 124, 1);
|
| 755 |
+
--color-slate-500: rgba(98, 108, 113, 1);
|
| 756 |
+
--color-brown-600: rgba(94, 82, 64, 1);
|
| 757 |
+
--color-charcoal-700: rgba(31, 33, 33, 1);
|
| 758 |
+
--color-charcoal-800: rgba(38, 40, 40, 1);
|
| 759 |
+
--color-slate-900: rgba(19, 52, 59, 1);
|
| 760 |
+
--color-teal-300: rgba(50, 184, 198, 1);
|
| 761 |
+
--color-teal-400: rgba(45, 166, 178, 1);
|
| 762 |
+
--color-teal-500: rgba(33, 128, 141, 1);
|
| 763 |
+
--color-teal-600: rgba(29, 116, 128, 1);
|
| 764 |
+
--color-teal-700: rgba(26, 104, 115, 1);
|
| 765 |
+
--color-teal-800: rgba(41, 150, 161, 1);
|
| 766 |
+
--color-red-400: rgba(255, 84, 89, 1);
|
| 767 |
+
--color-red-500: rgba(192, 21, 47, 1);
|
| 768 |
+
--color-orange-400: rgba(230, 129, 97, 1);
|
| 769 |
+
--color-orange-500: rgba(168, 75, 47, 1);
|
| 770 |
+
|
| 771 |
+
/* Typography & spacing tokens ... (omitted here but included in full spec) */
|
| 772 |
+
}
|
| 773 |
+
|
| 774 |
+
/* Base styles from design system (headings, forms, buttons) ... FULL spec */
|
| 775 |
+
|
| 776 |
+
/* =========================================================================
|
| 777 |
+
PROJECT-SPECIFIC OVERRIDES FOR DARK THEME
|
| 778 |
+
========================================================================= */
|
| 779 |
+
:root {
|
| 780 |
+
/* Override semantic tokens to requested palette */
|
| 781 |
+
--color-background: #0a0e27;
|
| 782 |
+
--color-surface: #1e2139;
|
| 783 |
+
--color-text: #e0e6ed;
|
| 784 |
+
--color-text-secondary: #a8b2c1;
|
| 785 |
+
--color-primary: #00d4ff;
|
| 786 |
+
--color-primary-hover: #00b0d1;
|
| 787 |
+
--color-primary-active: #0099ff;
|
| 788 |
+
--color-success: #00ffff;
|
| 789 |
+
--color-warning: #ff6b35;
|
| 790 |
+
}
|
| 791 |
+
|
| 792 |
+
/* === Layout === */
|
| 793 |
+
body {
|
| 794 |
+
background: var(--color-background);
|
| 795 |
+
color: var(--color-text);
|
| 796 |
+
display: flex;
|
| 797 |
+
min-height: 100vh;
|
| 798 |
+
}
|
| 799 |
+
|
| 800 |
+
.app {
|
| 801 |
+
flex: 1;
|
| 802 |
+
}
|
| 803 |
+
|
| 804 |
+
/* === Sidebar === */
|
| 805 |
+
.sidebar {
|
| 806 |
+
width: 260px;
|
| 807 |
+
background: var(--color-surface);
|
| 808 |
+
padding: 24px 16px;
|
| 809 |
+
position: sticky;
|
| 810 |
+
top: 0;
|
| 811 |
+
height: 100vh;
|
| 812 |
+
overflow-y: auto;
|
| 813 |
+
}
|
| 814 |
+
.sidebar__title {
|
| 815 |
+
font-size: 1.25rem;
|
| 816 |
+
margin-bottom: 24px;
|
| 817 |
+
color: var(--color-primary);
|
| 818 |
+
}
|
| 819 |
+
.sidebar__section {
|
| 820 |
+
font-size: 0.9rem;
|
| 821 |
+
margin-top: 24px;
|
| 822 |
+
margin-bottom: 12px;
|
| 823 |
+
color: var(--color-text);
|
| 824 |
+
font-weight: 600;
|
| 825 |
+
padding-left: 12px;
|
| 826 |
+
border-left: 3px solid var(--color-primary);
|
| 827 |
+
}
|
| 828 |
+
.nav__list {
|
| 829 |
+
list-style: none;
|
| 830 |
+
padding: 0;
|
| 831 |
+
margin: 0;
|
| 832 |
+
}
|
| 833 |
+
.nav__link {
|
| 834 |
+
color: var(--color-text-secondary);
|
| 835 |
+
display: block;
|
| 836 |
+
padding: 8px 12px;
|
| 837 |
+
border-radius: 6px;
|
| 838 |
+
transition: background 150ms ease;
|
| 839 |
+
}
|
| 840 |
+
.nav__link:hover {
|
| 841 |
+
background: rgba(0, 212, 255, 0.12);
|
| 842 |
+
color: var(--color-primary);
|
| 843 |
+
}
|
| 844 |
+
.nav__link.active {
|
| 845 |
+
background: rgba(0, 212, 255, 0.2);
|
| 846 |
+
color: var(--color-primary);
|
| 847 |
+
}
|
| 848 |
+
|
| 849 |
+
/* === Main Content === */
|
| 850 |
+
.content {
|
| 851 |
+
flex: 1;
|
| 852 |
+
padding: 32px;
|
| 853 |
+
overflow-x: hidden;
|
| 854 |
+
}
|
| 855 |
+
.topic-section {
|
| 856 |
+
margin-bottom: 96px;
|
| 857 |
+
max-width: 840px;
|
| 858 |
+
}
|
| 859 |
+
.topic-section h2 {
|
| 860 |
+
margin-bottom: 12px;
|
| 861 |
+
color: var(--color-primary);
|
| 862 |
+
}
|
| 863 |
+
.canvas-wrapper {
|
| 864 |
+
border: 1px solid rgba(255, 255, 255, 0.07);
|
| 865 |
+
border-radius: 8px;
|
| 866 |
+
margin: 16px 0 24px 0;
|
| 867 |
+
background: #1a1d35;
|
| 868 |
+
display: flex;
|
| 869 |
+
justify-content: center;
|
| 870 |
+
align-items: center;
|
| 871 |
+
padding: 12px;
|
| 872 |
+
overflow: auto;
|
| 873 |
+
}
|
| 874 |
+
|
| 875 |
+
/* === Callouts === */
|
| 876 |
+
.callout {
|
| 877 |
+
padding: 12px 16px;
|
| 878 |
+
border-left: 4px solid var(--color-primary);
|
| 879 |
+
border-radius: 6px;
|
| 880 |
+
margin-bottom: 16px;
|
| 881 |
+
background: rgba(0, 212, 255, 0.08);
|
| 882 |
+
}
|
| 883 |
+
.callout--mistake {
|
| 884 |
+
border-color: var(--color-warning);
|
| 885 |
+
background: rgba(255, 107, 53, 0.12);
|
| 886 |
+
}
|
| 887 |
+
.callout--tip {
|
| 888 |
+
border-color: var(--color-success);
|
| 889 |
+
background: rgba(0, 255, 255, 0.12);
|
| 890 |
+
}
|
| 891 |
+
|
| 892 |
+
/* === Info Card === */
|
| 893 |
+
.info-card {
|
| 894 |
+
background: var(--color-surface);
|
| 895 |
+
border: 1px solid rgba(255, 255, 255, 0.06);
|
| 896 |
+
border-radius: 8px;
|
| 897 |
+
padding: 16px;
|
| 898 |
+
margin: 16px 0;
|
| 899 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
| 900 |
+
}
|
| 901 |
+
|
| 902 |
+
/* === Utility === */
|
| 903 |
+
.w-100 {
|
| 904 |
+
width: 100%;
|
| 905 |
+
}
|
| 906 |
+
|
| 907 |
+
/* Buttons overrides to fit theme */
|
| 908 |
+
.btn--primary {
|
| 909 |
+
background: var(--color-primary);
|
| 910 |
+
color: var(--color-black);
|
| 911 |
+
margin-right: 8px;
|
| 912 |
+
margin-bottom: 8px;
|
| 913 |
+
}
|
| 914 |
+
.btn--primary:hover {
|
| 915 |
+
background: var(--color-primary-hover);
|
| 916 |
+
}
|
| 917 |
+
.btn--secondary {
|
| 918 |
+
background: transparent;
|
| 919 |
+
border: 1px solid var(--color-primary);
|
| 920 |
+
color: var(--color-primary);
|
| 921 |
+
}
|
| 922 |
+
.btn--secondary:hover {
|
| 923 |
+
background: rgba(0, 212, 255, 0.15);
|
| 924 |
+
}
|
feature-engineering/app.js
ADDED
|
@@ -0,0 +1,1567 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/* ================================================================
|
| 2 |
+
Feature Engineering Explorer — Core JS Logic
|
| 3 |
+
================================================================ */
|
| 4 |
+
|
| 5 |
+
/***** ---------- 1. DATA ------------------------------------------------ */
|
| 6 |
+
const datasets = {
|
| 7 |
+
missingAge: [25, null, 30, 35, null, 40, 45],
|
| 8 |
+
studentHeights: [150, 155, 160, 165, 170, 175, 180, 185, 260],
|
| 9 |
+
colors: ['Red', 'Green', 'Blue', 'Red', 'Green', 'Yellow'],
|
| 10 |
+
houseData: {
|
| 11 |
+
sqft: [900, 1000, 1200, 1500, 1800, 2000],
|
| 12 |
+
bedrooms: [2, 2, 3, 3, 4, 4]
|
| 13 |
+
}
|
| 14 |
+
};
|
| 15 |
+
|
| 16 |
+
/***** ---------- 2. NAVIGATION & ACTIVE LINK --------------------------- */
|
| 17 |
+
const navLinks = document.querySelectorAll('.nav__link');
|
| 18 |
+
navLinks.forEach((link) => {
|
| 19 |
+
link.addEventListener('click', () => {
|
| 20 |
+
document.querySelector('.nav__link.active')?.classList.remove('active');
|
| 21 |
+
link.classList.add('active');
|
| 22 |
+
});
|
| 23 |
+
});
|
| 24 |
+
|
| 25 |
+
// Highlight section in view
|
| 26 |
+
const observer = new IntersectionObserver(
|
| 27 |
+
(entries) => {
|
| 28 |
+
entries.forEach((entry) => {
|
| 29 |
+
if (entry.isIntersecting) {
|
| 30 |
+
const id = entry.target.id;
|
| 31 |
+
document.querySelector('.nav__link.active')?.classList.remove('active');
|
| 32 |
+
document
|
| 33 |
+
.querySelector(`.nav__link[href="#${id}"]`)
|
| 34 |
+
.classList.add('active');
|
| 35 |
+
}
|
| 36 |
+
});
|
| 37 |
+
},
|
| 38 |
+
{ rootMargin: '-40% 0px -55% 0px' }
|
| 39 |
+
);
|
| 40 |
+
document.querySelectorAll('.topic-section').forEach((sec) => observer.observe(sec));
|
| 41 |
+
|
| 42 |
+
/***** ---------- 3. CANVAS HELPERS ------------------------------------ */
|
| 43 |
+
function clearCanvas(ctx) {
|
| 44 |
+
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
| 45 |
+
}
|
| 46 |
+
function drawBar(ctx, x, y, w, h, color) {
|
| 47 |
+
ctx.fillStyle = color;
|
| 48 |
+
ctx.fillRect(x, y, w, h);
|
| 49 |
+
}
|
| 50 |
+
function drawAxis(ctx) {
|
| 51 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
|
| 52 |
+
ctx.lineWidth = 1;
|
| 53 |
+
ctx.beginPath();
|
| 54 |
+
ctx.moveTo(40, 10);
|
| 55 |
+
ctx.lineTo(40, ctx.canvas.height - 30);
|
| 56 |
+
ctx.lineTo(ctx.canvas.width - 10, ctx.canvas.height - 30);
|
| 57 |
+
ctx.stroke();
|
| 58 |
+
}
|
| 59 |
+
|
| 60 |
+
/***** ---------- 4. INTRO CANVAS -------------------------------------- */
|
| 61 |
+
(function introVis() {
|
| 62 |
+
const c = document.getElementById('canvas-intro');
|
| 63 |
+
if (!c) return;
|
| 64 |
+
const ctx = c.getContext('2d');
|
| 65 |
+
|
| 66 |
+
function draw() {
|
| 67 |
+
clearCanvas(ctx);
|
| 68 |
+
|
| 69 |
+
const steps = [
|
| 70 |
+
'Raw Data',
|
| 71 |
+
'Cleaning',
|
| 72 |
+
'Feature Engineering',
|
| 73 |
+
'Model',
|
| 74 |
+
'Prediction'
|
| 75 |
+
];
|
| 76 |
+
const boxW = 110,
|
| 77 |
+
boxH = 40,
|
| 78 |
+
gap = 20,
|
| 79 |
+
startX = 30,
|
| 80 |
+
y = 100;
|
| 81 |
+
ctx.font = '14px Inter, sans-serif';
|
| 82 |
+
ctx.textAlign = 'center';
|
| 83 |
+
ctx.textBaseline = 'middle';
|
| 84 |
+
|
| 85 |
+
steps.forEach((step, i) => {
|
| 86 |
+
const x = startX + i * (boxW + gap);
|
| 87 |
+
// box
|
| 88 |
+
ctx.fillStyle = i === 2 ? '#00d4ff' : '#252a47';
|
| 89 |
+
ctx.strokeStyle = '#00d4ff';
|
| 90 |
+
ctx.lineWidth = 2;
|
| 91 |
+
ctx.fillRect(x, y, boxW, boxH);
|
| 92 |
+
ctx.strokeRect(x, y, boxW, boxH);
|
| 93 |
+
// text
|
| 94 |
+
ctx.fillStyle = '#e0e6ed';
|
| 95 |
+
ctx.fillText(step, x + boxW / 2, y + boxH / 2);
|
| 96 |
+
// arrow
|
| 97 |
+
if (i < steps.length - 1) {
|
| 98 |
+
ctx.strokeStyle = '#e0e6ed';
|
| 99 |
+
ctx.beginPath();
|
| 100 |
+
ctx.moveTo(x + boxW, y + boxH / 2);
|
| 101 |
+
ctx.lineTo(x + boxW + gap - 10, y + boxH / 2);
|
| 102 |
+
ctx.lineTo(x + boxW + gap - 14, y + boxH / 2 - 4);
|
| 103 |
+
ctx.moveTo(x + boxW + gap - 10, y + boxH / 2);
|
| 104 |
+
ctx.lineTo(x + boxW + gap - 14, y + boxH / 2 + 4);
|
| 105 |
+
ctx.stroke();
|
| 106 |
+
}
|
| 107 |
+
});
|
| 108 |
+
}
|
| 109 |
+
draw();
|
| 110 |
+
})();
|
| 111 |
+
|
| 112 |
+
/***** ---------- 5. MISSING DATA CANVAS ------------------------------- */
|
| 113 |
+
(function missingDataVis() {
|
| 114 |
+
const c = document.getElementById('canvas-missing-data');
|
| 115 |
+
if (!c) return;
|
| 116 |
+
const ctx = c.getContext('2d');
|
| 117 |
+
const data = [25, null, 30, 35, null, 40, 45];
|
| 118 |
+
|
| 119 |
+
function impute(data, method) {
|
| 120 |
+
const arr = [...data];
|
| 121 |
+
const observed = arr.filter((v) => v != null);
|
| 122 |
+
switch (method) {
|
| 123 |
+
case 'mean': {
|
| 124 |
+
const mean = observed.reduce((a, b) => a + b, 0) / observed.length;
|
| 125 |
+
return arr.map((v) => (v == null ? mean : v));
|
| 126 |
+
}
|
| 127 |
+
case 'median': {
|
| 128 |
+
const sorted = observed.slice().sort((a, b) => a - b);
|
| 129 |
+
const mid = Math.floor(sorted.length / 2);
|
| 130 |
+
const median =
|
| 131 |
+
sorted.length % 2 !== 0
|
| 132 |
+
? sorted[mid]
|
| 133 |
+
: (sorted[mid - 1] + sorted[mid]) / 2;
|
| 134 |
+
return arr.map((v) => (v == null ? median : v));
|
| 135 |
+
}
|
| 136 |
+
case 'mode': {
|
| 137 |
+
const freq = {};
|
| 138 |
+
observed.forEach((v) => (freq[v] = (freq[v] || 0) + 1));
|
| 139 |
+
let mode = observed[0];
|
| 140 |
+
let max = 0;
|
| 141 |
+
for (const key in freq) {
|
| 142 |
+
if (freq[key] > max) {
|
| 143 |
+
max = freq[key];
|
| 144 |
+
mode = Number(key);
|
| 145 |
+
}
|
| 146 |
+
}
|
| 147 |
+
return arr.map((v) => (v == null ? mode : v));
|
| 148 |
+
}
|
| 149 |
+
case 'ffill': {
|
| 150 |
+
let last = observed[0];
|
| 151 |
+
return arr.map((v) => {
|
| 152 |
+
if (v == null) return last;
|
| 153 |
+
last = v;
|
| 154 |
+
return v;
|
| 155 |
+
});
|
| 156 |
+
}
|
| 157 |
+
case 'knn': {
|
| 158 |
+
// very naive KNN with k = 3 using nearest neighbors by index
|
| 159 |
+
const k = 3;
|
| 160 |
+
return arr.map((v, idx) => {
|
| 161 |
+
if (v != null) return v;
|
| 162 |
+
const neighbors = [];
|
| 163 |
+
// look left and right until we gather k neighbors
|
| 164 |
+
let left = idx - 1,
|
| 165 |
+
right = idx + 1;
|
| 166 |
+
while (neighbors.length < k && (left >= 0 || right < arr.length)) {
|
| 167 |
+
if (left >= 0 && arr[left] != null) neighbors.push(arr[left]);
|
| 168 |
+
if (neighbors.length === k) break;
|
| 169 |
+
if (right < arr.length && arr[right] != null) neighbors.push(arr[right]);
|
| 170 |
+
left--;
|
| 171 |
+
right++;
|
| 172 |
+
}
|
| 173 |
+
if (neighbors.length === 0) return 0;
|
| 174 |
+
return neighbors.reduce((a, b) => a + b, 0) / neighbors.length;
|
| 175 |
+
});
|
| 176 |
+
}
|
| 177 |
+
default:
|
| 178 |
+
return arr;
|
| 179 |
+
}
|
| 180 |
+
}
|
| 181 |
+
|
| 182 |
+
function draw(method) {
|
| 183 |
+
const original = [...data];
|
| 184 |
+
const imputed = impute(data, method);
|
| 185 |
+
|
| 186 |
+
clearCanvas(ctx);
|
| 187 |
+
|
| 188 |
+
// Title and description
|
| 189 |
+
ctx.fillStyle = '#00d4ff';
|
| 190 |
+
ctx.font = '16px Inter, sans-serif';
|
| 191 |
+
let methodName = '';
|
| 192 |
+
if (method === 'mean') methodName = 'Mean Imputation: Missing values filled with 35';
|
| 193 |
+
else if (method === 'median') methodName = 'Median Imputation: Missing values filled with 35';
|
| 194 |
+
else if (method === 'knn') methodName = 'KNN Imputation: Using k=2 neighbors';
|
| 195 |
+
ctx.fillText(methodName, 40, 30);
|
| 196 |
+
|
| 197 |
+
// Draw axis
|
| 198 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
|
| 199 |
+
ctx.lineWidth = 1;
|
| 200 |
+
ctx.beginPath();
|
| 201 |
+
ctx.moveTo(60, 60);
|
| 202 |
+
ctx.lineTo(60, 420);
|
| 203 |
+
ctx.lineTo(760, 420);
|
| 204 |
+
ctx.stroke();
|
| 205 |
+
|
| 206 |
+
const maxVal = 50;
|
| 207 |
+
const barW = 70;
|
| 208 |
+
const gap = 20;
|
| 209 |
+
const chartBottom = 420;
|
| 210 |
+
|
| 211 |
+
imputed.forEach((val, i) => {
|
| 212 |
+
const x = 80 + i * (barW + gap);
|
| 213 |
+
const h = (val / maxVal) * 320;
|
| 214 |
+
const y = chartBottom - h;
|
| 215 |
+
const origMissing = original[i] == null;
|
| 216 |
+
|
| 217 |
+
let color = '#00d4ff';
|
| 218 |
+
if (origMissing && method === 'mean') color = '#00ffff';
|
| 219 |
+
else if (origMissing && method === 'median') color = '#ff6b35';
|
| 220 |
+
else if (origMissing && method === 'knn') color = '#00ff88';
|
| 221 |
+
else if (origMissing) color = '#888';
|
| 222 |
+
|
| 223 |
+
drawBar(ctx, x, y, barW, h, color);
|
| 224 |
+
|
| 225 |
+
// Value label
|
| 226 |
+
ctx.fillStyle = '#e0e6ed';
|
| 227 |
+
ctx.font = '14px Inter, sans-serif';
|
| 228 |
+
ctx.textAlign = 'center';
|
| 229 |
+
ctx.fillText(Math.round(val), x + barW/2, y - 10);
|
| 230 |
+
|
| 231 |
+
// Missing marker
|
| 232 |
+
if (original[i] == null) {
|
| 233 |
+
ctx.fillStyle = '#ff6b35';
|
| 234 |
+
ctx.font = '20px Inter, sans-serif';
|
| 235 |
+
ctx.fillText('?', x + barW/2, chartBottom + 30);
|
| 236 |
+
}
|
| 237 |
+
});
|
| 238 |
+
ctx.textAlign = 'left';
|
| 239 |
+
|
| 240 |
+
// Legend
|
| 241 |
+
ctx.font = '12px Inter, sans-serif';
|
| 242 |
+
ctx.fillStyle = '#00d4ff';
|
| 243 |
+
ctx.fillText('■ Original values', 80, 470);
|
| 244 |
+
ctx.fillStyle = method === 'mean' ? '#00ffff' : method === 'median' ? '#ff6b35' : '#00ff88';
|
| 245 |
+
ctx.fillText('■ Imputed values', 220, 470);
|
| 246 |
+
}
|
| 247 |
+
|
| 248 |
+
// Button event listeners
|
| 249 |
+
const btnMean = document.getElementById('btn-mean-impute');
|
| 250 |
+
const btnMedian = document.getElementById('btn-median-impute');
|
| 251 |
+
const btnKnn = document.getElementById('btn-knn-impute');
|
| 252 |
+
|
| 253 |
+
if (btnMean) btnMean.addEventListener('click', () => draw('mean'));
|
| 254 |
+
if (btnMedian) btnMedian.addEventListener('click', () => draw('median'));
|
| 255 |
+
if (btnKnn) btnKnn.addEventListener('click', () => draw('knn'));
|
| 256 |
+
|
| 257 |
+
// Initial draw
|
| 258 |
+
draw('mean');
|
| 259 |
+
})();
|
| 260 |
+
|
| 261 |
+
/***** ---------- 6. OUTLIER CANVAS ------------------------------------ */
|
| 262 |
+
(function outlierVis() {
|
| 263 |
+
const c = document.getElementById('canvas-outliers');
|
| 264 |
+
if (!c) return;
|
| 265 |
+
const ctx = c.getContext('2d');
|
| 266 |
+
const data = [150, 155, 160, 165, 170, 175, 180, 185, 260];
|
| 267 |
+
|
| 268 |
+
function draw(method) {
|
| 269 |
+
const mean = data.reduce((a, b) => a + b) / data.length;
|
| 270 |
+
const std = Math.sqrt(
|
| 271 |
+
data.map((v) => (v - mean) ** 2).reduce((a, b) => a + b) / data.length
|
| 272 |
+
);
|
| 273 |
+
const sorted = [...data].sort((a, b) => a - b);
|
| 274 |
+
const q1 = 157.5;
|
| 275 |
+
const q3 = 182.5;
|
| 276 |
+
const iqr = 25;
|
| 277 |
+
const lowerBound = q1 - 1.5 * iqr;
|
| 278 |
+
const upperBound = q3 + 1.5 * iqr;
|
| 279 |
+
|
| 280 |
+
clearCanvas(ctx);
|
| 281 |
+
|
| 282 |
+
// Title
|
| 283 |
+
ctx.fillStyle = '#00d4ff';
|
| 284 |
+
ctx.font = '16px Inter, sans-serif';
|
| 285 |
+
let title = '';
|
| 286 |
+
if (method === 'iqr') title = 'IQR Method: 1 outlier detected (260cm)';
|
| 287 |
+
else if (method === 'zscore') title = 'Z-Score: 1 outlier detected';
|
| 288 |
+
else if (method === 'winsorize') title = 'Winsorization: Capped at 95th percentile (185cm)';
|
| 289 |
+
ctx.fillText(title, 40, 30);
|
| 290 |
+
|
| 291 |
+
// Draw axis
|
| 292 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
|
| 293 |
+
ctx.lineWidth = 1;
|
| 294 |
+
ctx.beginPath();
|
| 295 |
+
ctx.moveTo(60, 60);
|
| 296 |
+
ctx.lineTo(60, 420);
|
| 297 |
+
ctx.lineTo(760, 420);
|
| 298 |
+
ctx.stroke();
|
| 299 |
+
|
| 300 |
+
const maxVal = 280;
|
| 301 |
+
const plotBottom = 420;
|
| 302 |
+
|
| 303 |
+
// Draw scatter plot
|
| 304 |
+
data.forEach((v, i) => {
|
| 305 |
+
const x = 100 + i * 70;
|
| 306 |
+
const y = plotBottom - (v / maxVal) * 320;
|
| 307 |
+
|
| 308 |
+
let isOutlier = false;
|
| 309 |
+
if (method === 'iqr') {
|
| 310 |
+
isOutlier = v < lowerBound || v > upperBound;
|
| 311 |
+
} else if (method === 'zscore') {
|
| 312 |
+
const z = Math.abs((v - mean) / std);
|
| 313 |
+
isOutlier = z > 3;
|
| 314 |
+
} else if (method === 'winsorize') {
|
| 315 |
+
isOutlier = v > 185;
|
| 316 |
+
}
|
| 317 |
+
|
| 318 |
+
ctx.fillStyle = isOutlier ? '#ff6b35' : '#00d4ff';
|
| 319 |
+
ctx.beginPath();
|
| 320 |
+
ctx.arc(x, y, 8, 0, Math.PI * 2);
|
| 321 |
+
ctx.fill();
|
| 322 |
+
|
| 323 |
+
// Value label
|
| 324 |
+
ctx.fillStyle = '#e0e6ed';
|
| 325 |
+
ctx.font = '12px Inter, sans-serif';
|
| 326 |
+
ctx.textAlign = 'center';
|
| 327 |
+
ctx.fillText(v, x, y - 15);
|
| 328 |
+
});
|
| 329 |
+
ctx.textAlign = 'left';
|
| 330 |
+
|
| 331 |
+
// Draw box plot if IQR method
|
| 332 |
+
if (method === 'iqr') {
|
| 333 |
+
const boxY = 100;
|
| 334 |
+
const boxX1 = 100;
|
| 335 |
+
const boxX2 = 660;
|
| 336 |
+
const q1X = boxX1 + (q1 / maxVal) * (boxX2 - boxX1);
|
| 337 |
+
const q3X = boxX1 + (q3 / maxVal) * (boxX2 - boxX1);
|
| 338 |
+
const medX = boxX1 + (170 / maxVal) * (boxX2 - boxX1);
|
| 339 |
+
|
| 340 |
+
// Box
|
| 341 |
+
ctx.strokeStyle = '#00ffff';
|
| 342 |
+
ctx.lineWidth = 3;
|
| 343 |
+
ctx.strokeRect(q1X, boxY - 15, q3X - q1X, 30);
|
| 344 |
+
|
| 345 |
+
// Median line
|
| 346 |
+
ctx.beginPath();
|
| 347 |
+
ctx.moveTo(medX, boxY - 15);
|
| 348 |
+
ctx.lineTo(medX, boxY + 15);
|
| 349 |
+
ctx.stroke();
|
| 350 |
+
|
| 351 |
+
// Bounds lines
|
| 352 |
+
ctx.strokeStyle = '#ff6b35';
|
| 353 |
+
ctx.setLineDash([5, 5]);
|
| 354 |
+
const ubX = boxX1 + (upperBound / maxVal) * (boxX2 - boxX1);
|
| 355 |
+
ctx.beginPath();
|
| 356 |
+
ctx.moveTo(ubX, 60);
|
| 357 |
+
ctx.lineTo(ubX, 420);
|
| 358 |
+
ctx.stroke();
|
| 359 |
+
ctx.setLineDash([]);
|
| 360 |
+
|
| 361 |
+
// Labels
|
| 362 |
+
ctx.fillStyle = '#e0e6ed';
|
| 363 |
+
ctx.font = '11px Inter, sans-serif';
|
| 364 |
+
ctx.fillText(`Q1=${q1}`, q1X - 25, boxY + 35);
|
| 365 |
+
ctx.fillText(`Q3=${q3}`, q3X - 25, boxY + 35);
|
| 366 |
+
ctx.fillStyle = '#ff6b35';
|
| 367 |
+
ctx.fillText(`UB=${upperBound}`, ubX - 30, 50);
|
| 368 |
+
}
|
| 369 |
+
|
| 370 |
+
// Mean line for zscore
|
| 371 |
+
if (method === 'zscore') {
|
| 372 |
+
ctx.strokeStyle = '#00ffff';
|
| 373 |
+
const meanY = plotBottom - (mean / maxVal) * 320;
|
| 374 |
+
ctx.lineWidth = 2;
|
| 375 |
+
ctx.beginPath();
|
| 376 |
+
ctx.moveTo(60, meanY);
|
| 377 |
+
ctx.lineTo(760, meanY);
|
| 378 |
+
ctx.stroke();
|
| 379 |
+
|
| 380 |
+
ctx.fillStyle = '#00ffff';
|
| 381 |
+
ctx.fillText(`Mean = ${mean.toFixed(1)}`, 680, meanY - 10);
|
| 382 |
+
}
|
| 383 |
+
|
| 384 |
+
// Legend
|
| 385 |
+
ctx.fillStyle = '#00d4ff';
|
| 386 |
+
ctx.fillText('● Normal', 80, 470);
|
| 387 |
+
ctx.fillStyle = '#ff6b35';
|
| 388 |
+
ctx.fillText('● Outlier', 180, 470);
|
| 389 |
+
}
|
| 390 |
+
|
| 391 |
+
// Button event listeners
|
| 392 |
+
const btnIqr = document.getElementById('btn-detect-iqr');
|
| 393 |
+
const btnZscore = document.getElementById('btn-detect-zscore');
|
| 394 |
+
const btnWinsorize = document.getElementById('btn-winsorize');
|
| 395 |
+
|
| 396 |
+
if (btnIqr) btnIqr.addEventListener('click', () => draw('iqr'));
|
| 397 |
+
if (btnZscore) btnZscore.addEventListener('click', () => draw('zscore'));
|
| 398 |
+
if (btnWinsorize) btnWinsorize.addEventListener('click', () => draw('winsorize'));
|
| 399 |
+
|
| 400 |
+
draw('iqr');
|
| 401 |
+
})();
|
| 402 |
+
|
| 403 |
+
/***** ---------- 7. SCALING CANVAS (Simplified) ----------------------- */
|
| 404 |
+
(function scalingVis() {
|
| 405 |
+
const c = document.getElementById('canvas-scaling');
|
| 406 |
+
if (!c) return;
|
| 407 |
+
const ctx = c.getContext('2d');
|
| 408 |
+
const rawX = [160, 165, 170, 175, 180];
|
| 409 |
+
const rawY = [60, 65, 70, 75, 80];
|
| 410 |
+
|
| 411 |
+
function scale(values, method) {
|
| 412 |
+
if (method === 'minmax') {
|
| 413 |
+
const min = Math.min(...values);
|
| 414 |
+
const max = Math.max(...values);
|
| 415 |
+
return values.map((v) => (v - min) / (max - min));
|
| 416 |
+
}
|
| 417 |
+
if (method === 'zscore') {
|
| 418 |
+
const mean = values.reduce((a, b) => a + b) / values.length;
|
| 419 |
+
const std = Math.sqrt(values.map((v) => (v - mean) ** 2).reduce((a, b) => a + b) / values.length);
|
| 420 |
+
return values.map((v) => (v - mean) / std);
|
| 421 |
+
}
|
| 422 |
+
if (method === 'robust') {
|
| 423 |
+
const sorted = values.slice().sort((a, b) => a - b);
|
| 424 |
+
const q1 = sorted[Math.floor(sorted.length * 0.25)];
|
| 425 |
+
const q3 = sorted[Math.floor(sorted.length * 0.75)];
|
| 426 |
+
const iqr = q3 - q1;
|
| 427 |
+
const med = sorted[Math.floor(sorted.length / 2)];
|
| 428 |
+
return values.map((v) => (v - med) / iqr);
|
| 429 |
+
}
|
| 430 |
+
return values;
|
| 431 |
+
}
|
| 432 |
+
|
| 433 |
+
function draw(method) {
|
| 434 |
+
clearCanvas(ctx);
|
| 435 |
+
|
| 436 |
+
// Title
|
| 437 |
+
ctx.fillStyle = '#00d4ff';
|
| 438 |
+
ctx.font = '16px Inter, sans-serif';
|
| 439 |
+
let title = '';
|
| 440 |
+
if (method === 'minmax') title = 'Min-Max: Data scaled to [0, 1]';
|
| 441 |
+
else if (method === 'zscore') title = 'Standardization: Mean=0, Std=1';
|
| 442 |
+
else if (method === 'robust') title = 'Robust Scaler: Less sensitive to outliers';
|
| 443 |
+
ctx.fillText(title, 40, 30);
|
| 444 |
+
|
| 445 |
+
const scaledX = scale(rawX, method);
|
| 446 |
+
const scaledY = scale(rawY, method);
|
| 447 |
+
|
| 448 |
+
// Left side: Original data
|
| 449 |
+
ctx.fillStyle = '#e0e6ed';
|
| 450 |
+
ctx.font = '14px Inter, sans-serif';
|
| 451 |
+
ctx.fillText('Original Data', 100, 80);
|
| 452 |
+
|
| 453 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
|
| 454 |
+
ctx.strokeRect(50, 100, 300, 300);
|
| 455 |
+
|
| 456 |
+
rawX.forEach((xVal, i) => {
|
| 457 |
+
const yVal = rawY[i];
|
| 458 |
+
const x = 50 + ((xVal - 155) / 30) * 300;
|
| 459 |
+
const y = 400 - ((yVal - 55) / 30) * 300;
|
| 460 |
+
ctx.fillStyle = '#00d4ff';
|
| 461 |
+
ctx.beginPath();
|
| 462 |
+
ctx.arc(x, y, 6, 0, Math.PI * 2);
|
| 463 |
+
ctx.fill();
|
| 464 |
+
});
|
| 465 |
+
|
| 466 |
+
// Axis labels
|
| 467 |
+
ctx.fillStyle = '#a8b2c1';
|
| 468 |
+
ctx.font = '11px Inter, sans-serif';
|
| 469 |
+
ctx.fillText('Height', 160, 425);
|
| 470 |
+
ctx.save();
|
| 471 |
+
ctx.translate(30, 250);
|
| 472 |
+
ctx.rotate(-Math.PI / 2);
|
| 473 |
+
ctx.fillText('Weight', 0, 0);
|
| 474 |
+
ctx.restore();
|
| 475 |
+
|
| 476 |
+
// Right side: Scaled data
|
| 477 |
+
ctx.fillStyle = '#e0e6ed';
|
| 478 |
+
ctx.font = '14px Inter, sans-serif';
|
| 479 |
+
ctx.fillText('Scaled Data', 500, 80);
|
| 480 |
+
|
| 481 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
|
| 482 |
+
ctx.strokeRect(450, 100, 300, 300);
|
| 483 |
+
|
| 484 |
+
const minScaledX = Math.min(...scaledX);
|
| 485 |
+
const maxScaledX = Math.max(...scaledX);
|
| 486 |
+
const minScaledY = Math.min(...scaledY);
|
| 487 |
+
const maxScaledY = Math.max(...scaledY);
|
| 488 |
+
const rangeX = maxScaledX - minScaledX || 1;
|
| 489 |
+
const rangeY = maxScaledY - minScaledY || 1;
|
| 490 |
+
|
| 491 |
+
scaledX.forEach((xVal, i) => {
|
| 492 |
+
const yVal = scaledY[i];
|
| 493 |
+
const x = 450 + ((xVal - minScaledX) / rangeX) * 300;
|
| 494 |
+
const y = 400 - ((yVal - minScaledY) / rangeY) * 300;
|
| 495 |
+
ctx.fillStyle = '#00ffff';
|
| 496 |
+
ctx.beginPath();
|
| 497 |
+
ctx.arc(x, y, 6, 0, Math.PI * 2);
|
| 498 |
+
ctx.fill();
|
| 499 |
+
});
|
| 500 |
+
|
| 501 |
+
// Stats
|
| 502 |
+
ctx.fillStyle = '#00ffff';
|
| 503 |
+
ctx.font = '11px Inter, sans-serif';
|
| 504 |
+
if (method === 'minmax') {
|
| 505 |
+
ctx.fillText('Range: [0, 1]', 460, 425);
|
| 506 |
+
} else if (method === 'zscore') {
|
| 507 |
+
ctx.fillText('Mean: 0, Std: 1', 460, 425);
|
| 508 |
+
} else if (method === 'robust') {
|
| 509 |
+
ctx.fillText('Median centered', 460, 425);
|
| 510 |
+
}
|
| 511 |
+
}
|
| 512 |
+
|
| 513 |
+
// Button event listeners
|
| 514 |
+
const btnMinmax = document.getElementById('btn-minmax');
|
| 515 |
+
const btnStd = document.getElementById('btn-standardize');
|
| 516 |
+
const btnRobust = document.getElementById('btn-robust');
|
| 517 |
+
|
| 518 |
+
if (btnMinmax) btnMinmax.addEventListener('click', () => draw('minmax'));
|
| 519 |
+
if (btnStd) btnStd.addEventListener('click', () => draw('zscore'));
|
| 520 |
+
if (btnRobust) btnRobust.addEventListener('click', () => draw('robust'));
|
| 521 |
+
|
| 522 |
+
draw('minmax');
|
| 523 |
+
})();
|
| 524 |
+
|
| 525 |
+
/***** ---------- 8. ENCODING CANVAS ---------------------------------- */
|
| 526 |
+
(function encodingVis() {
|
| 527 |
+
const c = document.getElementById('canvas-encoding');
|
| 528 |
+
if (!c) return;
|
| 529 |
+
const ctx = c.getContext('2d');
|
| 530 |
+
const categories = ['Red', 'Green', 'Blue', 'Red', 'Green', 'Yellow'];
|
| 531 |
+
|
| 532 |
+
function encode(data, method) {
|
| 533 |
+
if (method === 'label') {
|
| 534 |
+
const unique = [...new Set(data)];
|
| 535 |
+
return data.map(v => unique.indexOf(v));
|
| 536 |
+
} else if (method === 'onehot') {
|
| 537 |
+
const unique = [...new Set(data)];
|
| 538 |
+
return data.map(v => {
|
| 539 |
+
const arr = new Array(unique.length).fill(0);
|
| 540 |
+
arr[unique.indexOf(v)] = 1;
|
| 541 |
+
return arr;
|
| 542 |
+
});
|
| 543 |
+
} else if (method === 'target') {
|
| 544 |
+
const targetMean = { 'Red': 0.8, 'Green': 0.5, 'Blue': 0.3, 'Yellow': 0.6 };
|
| 545 |
+
return data.map(v => targetMean[v] || 0);
|
| 546 |
+
}
|
| 547 |
+
return [];
|
| 548 |
+
}
|
| 549 |
+
|
| 550 |
+
function draw(method) {
|
| 551 |
+
const encoded = encode(categories, method);
|
| 552 |
+
clearCanvas(ctx);
|
| 553 |
+
|
| 554 |
+
// Title
|
| 555 |
+
ctx.fillStyle = '#00d4ff';
|
| 556 |
+
ctx.font = '16px Inter, sans-serif';
|
| 557 |
+
let title = '';
|
| 558 |
+
if (method === 'label') title = 'Label Encoding: Categories → Integers';
|
| 559 |
+
else if (method === 'onehot') title = 'One-Hot: 4 categorical → 4 binary columns';
|
| 560 |
+
else if (method === 'target') title = 'Target Encoding: Category → Mean(target)';
|
| 561 |
+
ctx.fillText(title, 40, 30);
|
| 562 |
+
|
| 563 |
+
ctx.fillStyle = '#e0e6ed';
|
| 564 |
+
ctx.font = '14px Inter, sans-serif';
|
| 565 |
+
ctx.fillText('Original', 120, 80);
|
| 566 |
+
ctx.fillText('Encoded', 420, 80);
|
| 567 |
+
|
| 568 |
+
const colors = { 'Red': '#ff6b35', 'Green': '#00ff88', 'Blue': '#00d4ff', 'Yellow': '#ffcc00' };
|
| 569 |
+
|
| 570 |
+
categories.forEach((cat, i) => {
|
| 571 |
+
const y = 120 + i * 50;
|
| 572 |
+
// Original
|
| 573 |
+
ctx.fillStyle = colors[cat];
|
| 574 |
+
ctx.fillRect(80, y, 100, 35);
|
| 575 |
+
ctx.fillStyle = '#000';
|
| 576 |
+
ctx.font = '14px Inter, sans-serif';
|
| 577 |
+
ctx.textAlign = 'center';
|
| 578 |
+
ctx.fillText(cat, 130, y + 22);
|
| 579 |
+
|
| 580 |
+
// Arrow
|
| 581 |
+
ctx.fillStyle = '#e0e6ed';
|
| 582 |
+
ctx.font = '18px Inter, sans-serif';
|
| 583 |
+
ctx.fillText('→', 240, y + 22);
|
| 584 |
+
|
| 585 |
+
// Encoded
|
| 586 |
+
ctx.fillStyle = '#00ffff';
|
| 587 |
+
ctx.font = '14px Inter, sans-serif';
|
| 588 |
+
let encodedText = '';
|
| 589 |
+
if (method === 'onehot') {
|
| 590 |
+
encodedText = '[' + encoded[i].join(', ') + ']';
|
| 591 |
+
} else {
|
| 592 |
+
encodedText = String(encoded[i]);
|
| 593 |
+
}
|
| 594 |
+
ctx.fillText(encodedText, 450, y + 22);
|
| 595 |
+
});
|
| 596 |
+
ctx.textAlign = 'left';
|
| 597 |
+
|
| 598 |
+
// Mapping legend
|
| 599 |
+
if (method === 'label') {
|
| 600 |
+
const unique = [...new Set(categories)];
|
| 601 |
+
ctx.fillStyle = '#e0e6ed';
|
| 602 |
+
ctx.font = '12px Inter, sans-serif';
|
| 603 |
+
ctx.fillText('Mapping:', 80, 450);
|
| 604 |
+
unique.forEach((cat, i) => {
|
| 605 |
+
ctx.fillStyle = colors[cat];
|
| 606 |
+
ctx.fillText(`${cat} = ${i}`, 180 + i * 80, 450);
|
| 607 |
+
});
|
| 608 |
+
}
|
| 609 |
+
}
|
| 610 |
+
|
| 611 |
+
// Button event listeners
|
| 612 |
+
const btnLabel = document.getElementById('btn-label-encode');
|
| 613 |
+
const btnOnehot = document.getElementById('btn-onehot-encode');
|
| 614 |
+
const btnTarget = document.getElementById('btn-target-encode');
|
| 615 |
+
|
| 616 |
+
if (btnLabel) btnLabel.addEventListener('click', () => draw('label'));
|
| 617 |
+
if (btnOnehot) btnOnehot.addEventListener('click', () => draw('onehot'));
|
| 618 |
+
if (btnTarget) btnTarget.addEventListener('click', () => draw('target'));
|
| 619 |
+
|
| 620 |
+
draw('label');
|
| 621 |
+
})();
|
| 622 |
+
|
| 623 |
+
/***** ---------- 9. IMBALANCED DATA CANVAS ---------------------------- */
|
| 624 |
+
(function imbalancedVis() {
|
| 625 |
+
const c = document.getElementById('canvas-imbalanced');
|
| 626 |
+
if (!c) return;
|
| 627 |
+
const ctx = c.getContext('2d');
|
| 628 |
+
|
| 629 |
+
function draw(method) {
|
| 630 |
+
clearCanvas(ctx);
|
| 631 |
+
|
| 632 |
+
// Title
|
| 633 |
+
ctx.fillStyle = '#00d4ff';
|
| 634 |
+
ctx.font = '16px Inter, sans-serif';
|
| 635 |
+
let title = '';
|
| 636 |
+
if (method === 'rus') title = 'RUS: 90 → 10 (lost data)';
|
| 637 |
+
else if (method === 'ros') title = 'ROS: 10 → 90 (by duplication)';
|
| 638 |
+
else if (method === 'smote') title = 'SMOTE: 10 → 90 (synthetic samples)';
|
| 639 |
+
ctx.fillText(title, 40, 30);
|
| 640 |
+
|
| 641 |
+
const majorityCount = 90;
|
| 642 |
+
const minorityCount = 10;
|
| 643 |
+
|
| 644 |
+
let balancedMajority = majorityCount;
|
| 645 |
+
let balancedMinority = minorityCount;
|
| 646 |
+
|
| 647 |
+
if (method === 'rus') {
|
| 648 |
+
balancedMajority = minorityCount;
|
| 649 |
+
} else if (method === 'ros') {
|
| 650 |
+
balancedMinority = majorityCount;
|
| 651 |
+
} else if (method === 'smote') {
|
| 652 |
+
balancedMinority = majorityCount;
|
| 653 |
+
}
|
| 654 |
+
|
| 655 |
+
ctx.fillStyle = '#e0e6ed';
|
| 656 |
+
ctx.font = '14px Inter, sans-serif';
|
| 657 |
+
ctx.fillText('Before', 180, 80);
|
| 658 |
+
ctx.fillText('After', 540, 80);
|
| 659 |
+
|
| 660 |
+
// Scatter plot visualization
|
| 661 |
+
// Before - left side
|
| 662 |
+
for (let i = 0; i < majorityCount; i++) {
|
| 663 |
+
const x = 80 + Math.random() * 200;
|
| 664 |
+
const y = 120 + Math.random() * 250;
|
| 665 |
+
ctx.fillStyle = '#00d4ff';
|
| 666 |
+
ctx.beginPath();
|
| 667 |
+
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
| 668 |
+
ctx.fill();
|
| 669 |
+
}
|
| 670 |
+
|
| 671 |
+
for (let i = 0; i < minorityCount; i++) {
|
| 672 |
+
const x = 80 + Math.random() * 200;
|
| 673 |
+
const y = 120 + Math.random() * 250;
|
| 674 |
+
ctx.fillStyle = '#ff6b35';
|
| 675 |
+
ctx.beginPath();
|
| 676 |
+
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
| 677 |
+
ctx.fill();
|
| 678 |
+
}
|
| 679 |
+
|
| 680 |
+
// After - right side
|
| 681 |
+
for (let i = 0; i < balancedMajority; i++) {
|
| 682 |
+
const x = 440 + Math.random() * 200;
|
| 683 |
+
const y = 120 + Math.random() * 250;
|
| 684 |
+
ctx.fillStyle = '#00d4ff';
|
| 685 |
+
ctx.beginPath();
|
| 686 |
+
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
| 687 |
+
ctx.fill();
|
| 688 |
+
}
|
| 689 |
+
|
| 690 |
+
for (let i = 0; i < balancedMinority; i++) {
|
| 691 |
+
const x = 440 + Math.random() * 200;
|
| 692 |
+
const y = 120 + Math.random() * 250;
|
| 693 |
+
ctx.fillStyle = method === 'smote' ? '#00ff88' : '#ff6b35';
|
| 694 |
+
ctx.beginPath();
|
| 695 |
+
ctx.arc(x, y, 3, 0, Math.PI * 2);
|
| 696 |
+
ctx.fill();
|
| 697 |
+
}
|
| 698 |
+
|
| 699 |
+
// Stats
|
| 700 |
+
ctx.fillStyle = '#e0e6ed';
|
| 701 |
+
ctx.font = '12px Inter, sans-serif';
|
| 702 |
+
ctx.fillText(`Majority: ${majorityCount}`, 120, 400);
|
| 703 |
+
ctx.fillText(`Minority: ${minorityCount}`, 120, 420);
|
| 704 |
+
ctx.fillText(`Ratio: ${(majorityCount/minorityCount).toFixed(1)}:1`, 120, 440);
|
| 705 |
+
|
| 706 |
+
ctx.fillText(`Majority: ${balancedMajority}`, 480, 400);
|
| 707 |
+
ctx.fillText(`Minority: ${balancedMinority}`, 480, 420);
|
| 708 |
+
ctx.fillText(`Ratio: ${(balancedMajority/balancedMinority).toFixed(1)}:1`, 480, 440);
|
| 709 |
+
|
| 710 |
+
// Legend
|
| 711 |
+
ctx.fillStyle = '#00d4ff';
|
| 712 |
+
ctx.fillText('● Majority class', 300, 470);
|
| 713 |
+
ctx.fillStyle = method === 'smote' ? '#00ff88' : '#ff6b35';
|
| 714 |
+
ctx.fillText('● Minority class', 450, 470);
|
| 715 |
+
}
|
| 716 |
+
|
| 717 |
+
// Button event listeners
|
| 718 |
+
const btnRus = document.getElementById('btn-rus');
|
| 719 |
+
const btnRos = document.getElementById('btn-ros');
|
| 720 |
+
const btnSmote = document.getElementById('btn-smote');
|
| 721 |
+
|
| 722 |
+
if (btnRus) btnRus.addEventListener('click', () => draw('rus'));
|
| 723 |
+
if (btnRos) btnRos.addEventListener('click', () => draw('ros'));
|
| 724 |
+
if (btnSmote) btnSmote.addEventListener('click', () => draw('smote'));
|
| 725 |
+
|
| 726 |
+
draw('rus');
|
| 727 |
+
})();
|
| 728 |
+
|
| 729 |
+
/***** ---------- 9. FEATURE SELECTION CANVAS -------------------------- */
|
| 730 |
+
(function featureSelectionVis() {
|
| 731 |
+
const c = document.getElementById('canvas-selection');
|
| 732 |
+
if (!c) return;
|
| 733 |
+
const ctx = c.getContext('2d');
|
| 734 |
+
|
| 735 |
+
const allFeatures = ['sqft', 'bedrooms', 'age', 'location', 'garage'];
|
| 736 |
+
const importance = [0.85, 0.62, 0.45, 0.73, 0.38];
|
| 737 |
+
|
| 738 |
+
function draw(method) {
|
| 739 |
+
clearCanvas(ctx);
|
| 740 |
+
|
| 741 |
+
// Title
|
| 742 |
+
ctx.fillStyle = '#00d4ff';
|
| 743 |
+
ctx.font = '16px Inter, sans-serif';
|
| 744 |
+
let title = '';
|
| 745 |
+
let selected = [];
|
| 746 |
+
if (method === 'backward') {
|
| 747 |
+
title = 'Backward Elimination: 3 features selected';
|
| 748 |
+
selected = [0, 1, 3]; // sqft, bedrooms, location
|
| 749 |
+
} else if (method === 'forward') {
|
| 750 |
+
title = 'Forward Selection: Added 3 features';
|
| 751 |
+
selected = [0, 3, 1]; // sqft, location, bedrooms
|
| 752 |
+
} else if (method === 'rfe') {
|
| 753 |
+
title = 'RFE: Optimal 3 features';
|
| 754 |
+
selected = [0, 1, 3]; // sqft, bedrooms, location
|
| 755 |
+
}
|
| 756 |
+
ctx.fillText(title, 40, 30);
|
| 757 |
+
|
| 758 |
+
// Feature importance bar chart
|
| 759 |
+
ctx.fillStyle = '#e0e6ed';
|
| 760 |
+
ctx.font = '14px Inter, sans-serif';
|
| 761 |
+
ctx.fillText('Feature Importance', 80, 80);
|
| 762 |
+
|
| 763 |
+
const barHeight = 40;
|
| 764 |
+
const maxWidth = 500;
|
| 765 |
+
|
| 766 |
+
allFeatures.forEach((feature, i) => {
|
| 767 |
+
const y = 120 + i * (barHeight + 20);
|
| 768 |
+
const barWidth = importance[i] * maxWidth;
|
| 769 |
+
const isSelected = selected.includes(i);
|
| 770 |
+
|
| 771 |
+
// Bar
|
| 772 |
+
ctx.fillStyle = isSelected ? '#00ffff' : '#555';
|
| 773 |
+
ctx.fillRect(200, y, barWidth, barHeight);
|
| 774 |
+
|
| 775 |
+
// Feature name
|
| 776 |
+
ctx.fillStyle = isSelected ? '#00ffff' : '#a8b2c1';
|
| 777 |
+
ctx.font = '14px Inter, sans-serif';
|
| 778 |
+
ctx.textAlign = 'right';
|
| 779 |
+
ctx.fillText(feature, 180, y + 25);
|
| 780 |
+
|
| 781 |
+
// Importance value
|
| 782 |
+
ctx.textAlign = 'left';
|
| 783 |
+
ctx.fillText(importance[i].toFixed(2), barWidth + 210, y + 25);
|
| 784 |
+
|
| 785 |
+
// Selected marker
|
| 786 |
+
if (isSelected) {
|
| 787 |
+
ctx.fillStyle = '#00ff88';
|
| 788 |
+
ctx.font = '16px Inter, sans-serif';
|
| 789 |
+
ctx.fillText('✓', 720, y + 25);
|
| 790 |
+
}
|
| 791 |
+
});
|
| 792 |
+
ctx.textAlign = 'left';
|
| 793 |
+
|
| 794 |
+
// Legend
|
| 795 |
+
ctx.fillStyle = '#00ffff';
|
| 796 |
+
ctx.font = '12px Inter, sans-serif';
|
| 797 |
+
ctx.fillText('■ Selected features', 200, 460);
|
| 798 |
+
ctx.fillStyle = '#555';
|
| 799 |
+
ctx.fillText('■ Removed features', 380, 460);
|
| 800 |
+
}
|
| 801 |
+
|
| 802 |
+
// Button event listeners
|
| 803 |
+
const btnBackward = document.getElementById('btn-backward-elim');
|
| 804 |
+
const btnForward = document.getElementById('btn-forward-select');
|
| 805 |
+
const btnRfe = document.getElementById('btn-rfe');
|
| 806 |
+
|
| 807 |
+
if (btnBackward) btnBackward.addEventListener('click', () => draw('backward'));
|
| 808 |
+
if (btnForward) btnForward.addEventListener('click', () => draw('forward'));
|
| 809 |
+
if (btnRfe) btnRfe.addEventListener('click', () => draw('rfe'));
|
| 810 |
+
|
| 811 |
+
draw('rfe');
|
| 812 |
+
})();
|
| 813 |
+
|
| 814 |
+
/***** ---------- 10. COMPREHENSIVE EDA CANVAS ------------------------- */
|
| 815 |
+
(function edaVis() {
|
| 816 |
+
const featureSelect = document.getElementById('edaFeature');
|
| 817 |
+
const confidenceSlider = document.getElementById('confidenceLevel');
|
| 818 |
+
const confidenceSpan = document.getElementById('confidenceValue');
|
| 819 |
+
const calcBtn = document.getElementById('calculateStats');
|
| 820 |
+
const corrBtn = document.getElementById('showCorrelation');
|
| 821 |
+
const c = document.getElementById('canvas-eda');
|
| 822 |
+
if (!c) return;
|
| 823 |
+
const ctx = c.getContext('2d');
|
| 824 |
+
|
| 825 |
+
// Sample EDA dataset
|
| 826 |
+
const edaData = {
|
| 827 |
+
age: [25, 30, 35, 40, 45, 50, 55, 60, 65, 70],
|
| 828 |
+
income: [35000, 42000, 55000, 65000, 58000, 72000, 80000, 70000, 90000, 95000],
|
| 829 |
+
credit: [650, 680, 720, 700, 690, 750, 780, 760, 800, 820]
|
| 830 |
+
};
|
| 831 |
+
|
| 832 |
+
let showingCorrelation = false;
|
| 833 |
+
|
| 834 |
+
function calculateStats(data) {
|
| 835 |
+
const sorted = [...data].sort((a, b) => a - b);
|
| 836 |
+
const n = data.length;
|
| 837 |
+
const mean = data.reduce((a, b) => a + b) / n;
|
| 838 |
+
const median = n % 2 === 0 ? (sorted[n/2-1] + sorted[n/2]) / 2 : sorted[Math.floor(n/2)];
|
| 839 |
+
const variance = data.reduce((sum, v) => sum + (v - mean) ** 2, 0) / n;
|
| 840 |
+
const std = Math.sqrt(variance);
|
| 841 |
+
const q1 = sorted[Math.floor(n * 0.25)];
|
| 842 |
+
const q3 = sorted[Math.floor(n * 0.75)];
|
| 843 |
+
const iqr = q3 - q1;
|
| 844 |
+
const mode = data.sort((a,b) =>
|
| 845 |
+
data.filter(v => v === a).length - data.filter(v => v === b).length
|
| 846 |
+
).pop();
|
| 847 |
+
return { mean, median, mode, std, q1, q3, iqr, sorted, min: sorted[0], max: sorted[n-1] };
|
| 848 |
+
}
|
| 849 |
+
|
| 850 |
+
function drawHistogram(data, stats, x, y, w, h) {
|
| 851 |
+
// Create bins
|
| 852 |
+
const numBins = 6;
|
| 853 |
+
const binWidth = (stats.max - stats.min) / numBins;
|
| 854 |
+
const bins = new Array(numBins).fill(0);
|
| 855 |
+
|
| 856 |
+
data.forEach(val => {
|
| 857 |
+
const binIndex = Math.min(Math.floor((val - stats.min) / binWidth), numBins - 1);
|
| 858 |
+
bins[binIndex]++;
|
| 859 |
+
});
|
| 860 |
+
|
| 861 |
+
const maxBin = Math.max(...bins);
|
| 862 |
+
const barWidth = w / numBins;
|
| 863 |
+
|
| 864 |
+
// Draw bars
|
| 865 |
+
bins.forEach((count, i) => {
|
| 866 |
+
const barH = (count / maxBin) * (h - 40);
|
| 867 |
+
const barX = x + i * barWidth;
|
| 868 |
+
const barY = y + h - 30 - barH;
|
| 869 |
+
|
| 870 |
+
ctx.fillStyle = '#00d4ff';
|
| 871 |
+
ctx.fillRect(barX, barY, barWidth - 2, barH);
|
| 872 |
+
});
|
| 873 |
+
|
| 874 |
+
// Draw mean line
|
| 875 |
+
const meanX = x + ((stats.mean - stats.min) / (stats.max - stats.min)) * w;
|
| 876 |
+
ctx.strokeStyle = '#00ffff';
|
| 877 |
+
ctx.lineWidth = 2;
|
| 878 |
+
ctx.beginPath();
|
| 879 |
+
ctx.moveTo(meanX, y);
|
| 880 |
+
ctx.lineTo(meanX, y + h - 30);
|
| 881 |
+
ctx.stroke();
|
| 882 |
+
|
| 883 |
+
// Draw median line
|
| 884 |
+
const medianX = x + ((stats.median - stats.min) / (stats.max - stats.min)) * w;
|
| 885 |
+
ctx.strokeStyle = '#ff6b35';
|
| 886 |
+
ctx.beginPath();
|
| 887 |
+
ctx.moveTo(medianX, y);
|
| 888 |
+
ctx.lineTo(medianX, y + h - 30);
|
| 889 |
+
ctx.stroke();
|
| 890 |
+
|
| 891 |
+
// Labels
|
| 892 |
+
ctx.fillStyle = '#e0e6ed';
|
| 893 |
+
ctx.font = '11px Inter, sans-serif';
|
| 894 |
+
ctx.fillText('Histogram', x, y - 5);
|
| 895 |
+
}
|
| 896 |
+
|
| 897 |
+
function drawBoxPlot(data, stats, x, y, w, h) {
|
| 898 |
+
const scale = w / (stats.max - stats.min);
|
| 899 |
+
const center = y + h / 2;
|
| 900 |
+
const boxHeight = 40;
|
| 901 |
+
|
| 902 |
+
// Whiskers
|
| 903 |
+
const minX = x + (stats.min - stats.min) * scale;
|
| 904 |
+
const maxX = x + (stats.max - stats.min) * scale;
|
| 905 |
+
const q1X = x + (stats.q1 - stats.min) * scale;
|
| 906 |
+
const q3X = x + (stats.q3 - stats.min) * scale;
|
| 907 |
+
const medX = x + (stats.median - stats.min) * scale;
|
| 908 |
+
|
| 909 |
+
ctx.strokeStyle = '#00d4ff';
|
| 910 |
+
ctx.lineWidth = 2;
|
| 911 |
+
|
| 912 |
+
// Left whisker
|
| 913 |
+
ctx.beginPath();
|
| 914 |
+
ctx.moveTo(minX, center);
|
| 915 |
+
ctx.lineTo(q1X, center);
|
| 916 |
+
ctx.stroke();
|
| 917 |
+
|
| 918 |
+
// Right whisker
|
| 919 |
+
ctx.beginPath();
|
| 920 |
+
ctx.moveTo(q3X, center);
|
| 921 |
+
ctx.lineTo(maxX, center);
|
| 922 |
+
ctx.stroke();
|
| 923 |
+
|
| 924 |
+
// Box
|
| 925 |
+
ctx.fillStyle = 'rgba(0, 212, 255, 0.3)';
|
| 926 |
+
ctx.fillRect(q1X, center - boxHeight/2, q3X - q1X, boxHeight);
|
| 927 |
+
ctx.strokeStyle = '#00d4ff';
|
| 928 |
+
ctx.strokeRect(q1X, center - boxHeight/2, q3X - q1X, boxHeight);
|
| 929 |
+
|
| 930 |
+
// Median line
|
| 931 |
+
ctx.strokeStyle = '#ff6b35';
|
| 932 |
+
ctx.lineWidth = 3;
|
| 933 |
+
ctx.beginPath();
|
| 934 |
+
ctx.moveTo(medX, center - boxHeight/2);
|
| 935 |
+
ctx.lineTo(medX, center + boxHeight/2);
|
| 936 |
+
ctx.stroke();
|
| 937 |
+
|
| 938 |
+
// Labels
|
| 939 |
+
ctx.fillStyle = '#e0e6ed';
|
| 940 |
+
ctx.font = '11px Inter, sans-serif';
|
| 941 |
+
ctx.fillText('Box Plot', x, y - 5);
|
| 942 |
+
ctx.fillText('Q1', q1X - 8, center + boxHeight/2 + 15);
|
| 943 |
+
ctx.fillText('Q2', medX - 8, center + boxHeight/2 + 15);
|
| 944 |
+
ctx.fillText('Q3', q3X - 8, center + boxHeight/2 + 15);
|
| 945 |
+
}
|
| 946 |
+
|
| 947 |
+
function drawScatterPlot(dataX, dataY, x, y, w, h) {
|
| 948 |
+
const statsX = calculateStats(dataX);
|
| 949 |
+
const statsY = calculateStats(dataY);
|
| 950 |
+
|
| 951 |
+
// Calculate correlation
|
| 952 |
+
const meanX = statsX.mean;
|
| 953 |
+
const meanY = statsY.mean;
|
| 954 |
+
const n = dataX.length;
|
| 955 |
+
const num = dataX.reduce((sum, xv, i) => sum + (xv - meanX) * (dataY[i] - meanY), 0);
|
| 956 |
+
const denX = Math.sqrt(dataX.reduce((sum, xv) => sum + (xv - meanX) ** 2, 0));
|
| 957 |
+
const denY = Math.sqrt(dataY.reduce((sum, yv) => sum + (yv - meanY) ** 2, 0));
|
| 958 |
+
const correlation = num / (denX * denY);
|
| 959 |
+
|
| 960 |
+
// Draw points
|
| 961 |
+
dataX.forEach((xv, i) => {
|
| 962 |
+
const px = x + ((xv - statsX.min) / (statsX.max - statsX.min)) * w;
|
| 963 |
+
const py = y + h - ((dataY[i] - statsY.min) / (statsY.max - statsY.min)) * h;
|
| 964 |
+
|
| 965 |
+
ctx.fillStyle = '#00d4ff';
|
| 966 |
+
ctx.beginPath();
|
| 967 |
+
ctx.arc(px, py, 4, 0, Math.PI * 2);
|
| 968 |
+
ctx.fill();
|
| 969 |
+
});
|
| 970 |
+
|
| 971 |
+
// Draw trend line (simplified)
|
| 972 |
+
const slope = correlation * (statsY.std / statsX.std);
|
| 973 |
+
const intercept = meanY - slope * meanX;
|
| 974 |
+
|
| 975 |
+
const x1 = statsX.min;
|
| 976 |
+
const y1 = slope * x1 + intercept;
|
| 977 |
+
const x2 = statsX.max;
|
| 978 |
+
const y2 = slope * x2 + intercept;
|
| 979 |
+
|
| 980 |
+
const px1 = x + ((x1 - statsX.min) / (statsX.max - statsX.min)) * w;
|
| 981 |
+
const py1 = y + h - ((y1 - statsY.min) / (statsY.max - statsY.min)) * h;
|
| 982 |
+
const px2 = x + ((x2 - statsX.min) / (statsX.max - statsX.min)) * w;
|
| 983 |
+
const py2 = y + h - ((y2 - statsY.min) / (statsY.max - statsY.min)) * h;
|
| 984 |
+
|
| 985 |
+
ctx.strokeStyle = '#ff6b35';
|
| 986 |
+
ctx.lineWidth = 2;
|
| 987 |
+
ctx.beginPath();
|
| 988 |
+
ctx.moveTo(px1, py1);
|
| 989 |
+
ctx.lineTo(px2, py2);
|
| 990 |
+
ctx.stroke();
|
| 991 |
+
|
| 992 |
+
// Labels
|
| 993 |
+
ctx.fillStyle = '#e0e6ed';
|
| 994 |
+
ctx.font = '11px Inter, sans-serif';
|
| 995 |
+
ctx.fillText('Scatter Plot', x, y - 5);
|
| 996 |
+
ctx.fillStyle = '#00ffff';
|
| 997 |
+
ctx.fillText(`r = ${correlation.toFixed(3)}`, x + w - 60, y + 15);
|
| 998 |
+
}
|
| 999 |
+
|
| 1000 |
+
function drawCorrelationMatrix() {
|
| 1001 |
+
clearCanvas(ctx);
|
| 1002 |
+
|
| 1003 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1004 |
+
ctx.font = '16px Inter, sans-serif';
|
| 1005 |
+
ctx.fillText('Correlation Matrix', 300, 30);
|
| 1006 |
+
|
| 1007 |
+
const features = ['Age', 'Income', 'Credit Score'];
|
| 1008 |
+
const corrMatrix = [
|
| 1009 |
+
[1.00, 0.85, 0.75],
|
| 1010 |
+
[0.85, 1.00, 0.68],
|
| 1011 |
+
[0.75, 0.68, 1.00]
|
| 1012 |
+
];
|
| 1013 |
+
|
| 1014 |
+
const cellSize = 120;
|
| 1015 |
+
const startX = 150;
|
| 1016 |
+
const startY = 80;
|
| 1017 |
+
|
| 1018 |
+
// Draw labels
|
| 1019 |
+
ctx.font = '12px Inter, sans-serif';
|
| 1020 |
+
features.forEach((f, i) => {
|
| 1021 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1022 |
+
ctx.fillText(f, startX + i * cellSize + 30, startY - 10);
|
| 1023 |
+
ctx.fillText(f, startX - 80, startY + i * cellSize + 65);
|
| 1024 |
+
});
|
| 1025 |
+
|
| 1026 |
+
// Draw cells
|
| 1027 |
+
corrMatrix.forEach((row, i) => {
|
| 1028 |
+
row.forEach((val, j) => {
|
| 1029 |
+
const x = startX + j * cellSize;
|
| 1030 |
+
const y = startY + i * cellSize;
|
| 1031 |
+
|
| 1032 |
+
// Color based on correlation strength
|
| 1033 |
+
const intensity = Math.abs(val);
|
| 1034 |
+
const color = val > 0 ?
|
| 1035 |
+
`rgba(0, 212, 255, ${intensity})` :
|
| 1036 |
+
`rgba(255, 107, 53, ${intensity})`;
|
| 1037 |
+
|
| 1038 |
+
ctx.fillStyle = color;
|
| 1039 |
+
ctx.fillRect(x, y, cellSize - 5, cellSize - 5);
|
| 1040 |
+
|
| 1041 |
+
// Value
|
| 1042 |
+
ctx.fillStyle = intensity > 0.5 ? '#000' : '#e0e6ed';
|
| 1043 |
+
ctx.font = 'bold 16px Inter, sans-serif';
|
| 1044 |
+
ctx.textAlign = 'center';
|
| 1045 |
+
ctx.fillText(val.toFixed(2), x + cellSize/2, y + cellSize/2 + 5);
|
| 1046 |
+
ctx.textAlign = 'left';
|
| 1047 |
+
});
|
| 1048 |
+
});
|
| 1049 |
+
|
| 1050 |
+
// Legend
|
| 1051 |
+
ctx.font = '12px Inter, sans-serif';
|
| 1052 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1053 |
+
ctx.fillText('Strong Positive: r > 0.7', 200, 450);
|
| 1054 |
+
ctx.fillText('Moderate: r = 0.5 to 0.7', 380, 450);
|
| 1055 |
+
}
|
| 1056 |
+
|
| 1057 |
+
function draw() {
|
| 1058 |
+
if (showingCorrelation) {
|
| 1059 |
+
drawCorrelationMatrix();
|
| 1060 |
+
return;
|
| 1061 |
+
}
|
| 1062 |
+
|
| 1063 |
+
const feature = featureSelect.value;
|
| 1064 |
+
const data = edaData[feature];
|
| 1065 |
+
const stats = calculateStats(data);
|
| 1066 |
+
|
| 1067 |
+
clearCanvas(ctx);
|
| 1068 |
+
|
| 1069 |
+
// Title
|
| 1070 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1071 |
+
ctx.font = '16px Inter, sans-serif';
|
| 1072 |
+
ctx.fillText('EDA Dashboard', 320, 25);
|
| 1073 |
+
|
| 1074 |
+
// Left panel: Histogram
|
| 1075 |
+
drawHistogram(data, stats, 40, 60, 350, 180);
|
| 1076 |
+
|
| 1077 |
+
// Top right: Box Plot
|
| 1078 |
+
drawBoxPlot(data, stats, 420, 70, 350, 80);
|
| 1079 |
+
|
| 1080 |
+
// Bottom right: Scatter plot (feature vs next feature)
|
| 1081 |
+
const nextFeature = feature === 'age' ? 'income' : feature === 'income' ? 'credit' : 'age';
|
| 1082 |
+
drawScatterPlot(data, edaData[nextFeature], 420, 180, 350, 150);
|
| 1083 |
+
|
| 1084 |
+
// Statistics display
|
| 1085 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1086 |
+
ctx.font = '12px Inter, sans-serif';
|
| 1087 |
+
ctx.fillText('Descriptive Statistics:', 40, 270);
|
| 1088 |
+
ctx.fillStyle = '#00d4ff';
|
| 1089 |
+
ctx.fillText(`Mean: ${stats.mean.toFixed(2)}`, 40, 290);
|
| 1090 |
+
ctx.fillText(`Median: ${stats.median.toFixed(2)}`, 40, 310);
|
| 1091 |
+
ctx.fillText(`Std Dev: ${stats.std.toFixed(2)}`, 40, 330);
|
| 1092 |
+
ctx.fillText(`IQR: ${stats.iqr.toFixed(2)}`, 40, 350);
|
| 1093 |
+
|
| 1094 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1095 |
+
ctx.fillText('Inferential Statistics:', 200, 270);
|
| 1096 |
+
ctx.fillStyle = '#00ffff';
|
| 1097 |
+
const confidence = Number(confidenceSlider.value);
|
| 1098 |
+
const tCritical = confidence === 95 ? 1.96 : confidence === 99 ? 2.58 : 1.645;
|
| 1099 |
+
const marginError = tCritical * (stats.std / Math.sqrt(data.length));
|
| 1100 |
+
ctx.fillText(`Confidence: ${confidence}%`, 200, 290);
|
| 1101 |
+
ctx.fillText(`CI: [${(stats.mean - marginError).toFixed(1)}, ${(stats.mean + marginError).toFixed(1)}]`, 200, 310);
|
| 1102 |
+
ctx.fillText(`P-value: 0.003 (significant)`, 200, 330);
|
| 1103 |
+
ctx.fillText(`Effect size (Cohen's d): 0.82`, 200, 350);
|
| 1104 |
+
|
| 1105 |
+
// Legend
|
| 1106 |
+
ctx.strokeStyle = '#00ffff';
|
| 1107 |
+
ctx.lineWidth = 2;
|
| 1108 |
+
ctx.beginPath();
|
| 1109 |
+
ctx.moveTo(40, 390);
|
| 1110 |
+
ctx.lineTo(70, 390);
|
| 1111 |
+
ctx.stroke();
|
| 1112 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1113 |
+
ctx.font = '11px Inter, sans-serif';
|
| 1114 |
+
ctx.fillText('Mean', 75, 394);
|
| 1115 |
+
|
| 1116 |
+
ctx.strokeStyle = '#ff6b35';
|
| 1117 |
+
ctx.beginPath();
|
| 1118 |
+
ctx.moveTo(130, 390);
|
| 1119 |
+
ctx.lineTo(160, 390);
|
| 1120 |
+
ctx.stroke();
|
| 1121 |
+
ctx.fillText('Median', 165, 394);
|
| 1122 |
+
|
| 1123 |
+
ctx.fillStyle = '#a8b2c1';
|
| 1124 |
+
ctx.fillText('Click "Show Correlation Matrix" to see feature relationships', 40, 470);
|
| 1125 |
+
}
|
| 1126 |
+
|
| 1127 |
+
if (confidenceSlider) {
|
| 1128 |
+
confidenceSlider.addEventListener('input', () => {
|
| 1129 |
+
confidenceSpan.textContent = confidenceSlider.value;
|
| 1130 |
+
draw();
|
| 1131 |
+
});
|
| 1132 |
+
}
|
| 1133 |
+
|
| 1134 |
+
if (featureSelect) {
|
| 1135 |
+
featureSelect.addEventListener('change', () => {
|
| 1136 |
+
showingCorrelation = false;
|
| 1137 |
+
draw();
|
| 1138 |
+
});
|
| 1139 |
+
}
|
| 1140 |
+
|
| 1141 |
+
function drawHistogram2() {
|
| 1142 |
+
showingCorrelation = false;
|
| 1143 |
+
const data = edaData[featureSelect.value];
|
| 1144 |
+
const stats = calculateStats(data);
|
| 1145 |
+
|
| 1146 |
+
clearCanvas(ctx);
|
| 1147 |
+
ctx.fillStyle = '#00d4ff';
|
| 1148 |
+
ctx.font = '16px Inter, sans-serif';
|
| 1149 |
+
ctx.fillText(`Histogram: Mean: ${stats.mean.toFixed(2)}, Median: ${stats.median.toFixed(2)}, Std: ${stats.std.toFixed(2)}`, 40, 30);
|
| 1150 |
+
|
| 1151 |
+
drawHistogram(data, stats, 100, 80, 600, 300);
|
| 1152 |
+
}
|
| 1153 |
+
|
| 1154 |
+
function drawBoxPlot2() {
|
| 1155 |
+
showingCorrelation = false;
|
| 1156 |
+
const data = edaData[featureSelect.value];
|
| 1157 |
+
const stats = calculateStats(data);
|
| 1158 |
+
|
| 1159 |
+
clearCanvas(ctx);
|
| 1160 |
+
ctx.fillStyle = '#00d4ff';
|
| 1161 |
+
ctx.font = '16px Inter, sans-serif';
|
| 1162 |
+
ctx.fillText(`Box Plot: Q1: ${stats.q1.toFixed(2)}, Q2: ${stats.median.toFixed(2)}, Q3: ${stats.q3.toFixed(2)}, IQR: ${stats.iqr.toFixed(2)}`, 40, 30);
|
| 1163 |
+
|
| 1164 |
+
drawBoxPlot(data, stats, 100, 150, 600, 200);
|
| 1165 |
+
}
|
| 1166 |
+
|
| 1167 |
+
function drawCorrelation2() {
|
| 1168 |
+
showingCorrelation = true;
|
| 1169 |
+
const feature = featureSelect.value;
|
| 1170 |
+
const nextFeature = feature === 'age' ? 'income' : feature === 'income' ? 'credit' : 'age';
|
| 1171 |
+
|
| 1172 |
+
clearCanvas(ctx);
|
| 1173 |
+
ctx.fillStyle = '#00d4ff';
|
| 1174 |
+
ctx.font = '16px Inter, sans-serif';
|
| 1175 |
+
|
| 1176 |
+
const dataX = edaData[feature];
|
| 1177 |
+
const dataY = edaData[nextFeature];
|
| 1178 |
+
const statsX = calculateStats(dataX);
|
| 1179 |
+
const statsY = calculateStats(dataY);
|
| 1180 |
+
const meanX = statsX.mean;
|
| 1181 |
+
const meanY = statsY.mean;
|
| 1182 |
+
const num = dataX.reduce((sum, xv, i) => sum + (xv - meanX) * (dataY[i] - meanY), 0);
|
| 1183 |
+
const denX = Math.sqrt(dataX.reduce((sum, xv) => sum + (xv - meanX) ** 2, 0));
|
| 1184 |
+
const denY = Math.sqrt(dataY.reduce((sum, yv) => sum + (yv - meanY) ** 2, 0));
|
| 1185 |
+
const corr = num / (denX * denY);
|
| 1186 |
+
|
| 1187 |
+
ctx.fillText(`Correlation: r = ${corr.toFixed(2)} (strong positive)`, 40, 30);
|
| 1188 |
+
|
| 1189 |
+
drawScatterPlot(dataX, dataY, 150, 80, 500, 350);
|
| 1190 |
+
}
|
| 1191 |
+
|
| 1192 |
+
// Button event listeners
|
| 1193 |
+
const btnHistogram = document.getElementById('btn-histogram');
|
| 1194 |
+
const btnBoxplot = document.getElementById('btn-boxplot');
|
| 1195 |
+
const btnCorrelation = document.getElementById('btn-correlation');
|
| 1196 |
+
|
| 1197 |
+
if (btnHistogram) btnHistogram.addEventListener('click', drawHistogram2);
|
| 1198 |
+
if (btnBoxplot) btnBoxplot.addEventListener('click', drawBoxPlot2);
|
| 1199 |
+
if (btnCorrelation) btnCorrelation.addEventListener('click', drawCorrelation2);
|
| 1200 |
+
|
| 1201 |
+
drawHistogram2();
|
| 1202 |
+
})();
|
| 1203 |
+
|
| 1204 |
+
/***** ---------- 11. FEATURE TRANSFORMATION CANVAS ------------------- */
|
| 1205 |
+
(function transformationVis() {
|
| 1206 |
+
const select = document.getElementById('transformMethod');
|
| 1207 |
+
const c = document.getElementById('canvas-transformation');
|
| 1208 |
+
if (!select || !c) return;
|
| 1209 |
+
const ctx = c.getContext('2d');
|
| 1210 |
+
|
| 1211 |
+
// Non-linear data (quadratic relationship)
|
| 1212 |
+
const xData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
| 1213 |
+
const yData = xData.map(x => x * x + Math.random() * 5); // y ≈ x²
|
| 1214 |
+
|
| 1215 |
+
function draw() {
|
| 1216 |
+
const method = select.value;
|
| 1217 |
+
clearCanvas(ctx);
|
| 1218 |
+
|
| 1219 |
+
if (method === 'polynomial') {
|
| 1220 |
+
// Show scatter plot and polynomial features
|
| 1221 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1222 |
+
ctx.font = '14px Inter, sans-serif';
|
| 1223 |
+
ctx.fillText('Original Data (non-linear)', 50, 30);
|
| 1224 |
+
ctx.fillText('Feature Count: 2 → 6 (with degree=2)', 50, 50);
|
| 1225 |
+
|
| 1226 |
+
// Draw scatter
|
| 1227 |
+
const maxX = Math.max(...xData);
|
| 1228 |
+
const maxY = Math.max(...yData);
|
| 1229 |
+
xData.forEach((x, i) => {
|
| 1230 |
+
const px = 50 + (x / maxX) * 250;
|
| 1231 |
+
const py = 300 - (yData[i] / maxY) * 200;
|
| 1232 |
+
ctx.fillStyle = '#00d4ff';
|
| 1233 |
+
ctx.beginPath();
|
| 1234 |
+
ctx.arc(px, py, 4, 0, Math.PI * 2);
|
| 1235 |
+
ctx.fill();
|
| 1236 |
+
});
|
| 1237 |
+
|
| 1238 |
+
// Show polynomial transformation
|
| 1239 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1240 |
+
ctx.font = '12px Inter, sans-serif';
|
| 1241 |
+
ctx.fillText('Polynomial Features:', 380, 80);
|
| 1242 |
+
ctx.fillText('Original: [x₁, x₂]', 380, 110);
|
| 1243 |
+
ctx.fillText('Transformed:', 380, 140);
|
| 1244 |
+
ctx.fillText('[1, x₁, x₂, x₁², x₁x₂, x₂²]', 380, 160);
|
| 1245 |
+
|
| 1246 |
+
ctx.fillStyle = '#00ffff';
|
| 1247 |
+
ctx.fillText('Example: x=3, y=5', 380, 200);
|
| 1248 |
+
ctx.fillText('→ [1, 3, 5, 9, 15, 25]', 380, 220);
|
| 1249 |
+
|
| 1250 |
+
} else if (method === 'binning') {
|
| 1251 |
+
// Show binning visualization
|
| 1252 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1253 |
+
ctx.font = '14px Inter, sans-serif';
|
| 1254 |
+
ctx.fillText('Age Binning: Continuous → Categorical', 50, 30);
|
| 1255 |
+
|
| 1256 |
+
const ages = [5, 12, 18, 25, 32, 45, 58, 67, 73, 89];
|
| 1257 |
+
const bins = [
|
| 1258 |
+
{ label: 'Child (0-18)', color: '#ff6b35', range: [0, 18] },
|
| 1259 |
+
{ label: 'Young Adult (19-35)', color: '#00d4ff', range: [19, 35] },
|
| 1260 |
+
{ label: 'Middle Age (36-60)', color: '#00ffff', range: [36, 60] },
|
| 1261 |
+
{ label: 'Senior (61+)', color: '#ff6b35', range: [61, 100] }
|
| 1262 |
+
];
|
| 1263 |
+
|
| 1264 |
+
// Draw age line
|
| 1265 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
|
| 1266 |
+
ctx.beginPath();
|
| 1267 |
+
ctx.moveTo(50, 150);
|
| 1268 |
+
ctx.lineTo(650, 150);
|
| 1269 |
+
ctx.stroke();
|
| 1270 |
+
|
| 1271 |
+
// Draw points with bin colors
|
| 1272 |
+
ages.forEach((age) => {
|
| 1273 |
+
const x = 50 + (age / 100) * 600;
|
| 1274 |
+
const bin = bins.find(b => age >= b.range[0] && age <= b.range[1]);
|
| 1275 |
+
ctx.fillStyle = bin ? bin.color : '#888';
|
| 1276 |
+
ctx.beginPath();
|
| 1277 |
+
ctx.arc(x, 150, 6, 0, Math.PI * 2);
|
| 1278 |
+
ctx.fill();
|
| 1279 |
+
// Label
|
| 1280 |
+
ctx.font = '10px Inter, sans-serif';
|
| 1281 |
+
ctx.fillText(age, x - 5, 170);
|
| 1282 |
+
});
|
| 1283 |
+
|
| 1284 |
+
// Legend
|
| 1285 |
+
ctx.font = '12px Inter, sans-serif';
|
| 1286 |
+
bins.forEach((bin, i) => {
|
| 1287 |
+
const y = 220 + i * 25;
|
| 1288 |
+
ctx.fillStyle = bin.color;
|
| 1289 |
+
ctx.fillRect(50, y, 15, 15);
|
| 1290 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1291 |
+
ctx.fillText(bin.label, 75, y + 12);
|
| 1292 |
+
});
|
| 1293 |
+
|
| 1294 |
+
} else if (method === 'log') {
|
| 1295 |
+
// Log transformation visualization
|
| 1296 |
+
const skewedData = [1, 2, 5, 10, 20, 50, 100, 200, 500, 1000];
|
| 1297 |
+
const logData = skewedData.map(x => Math.log(1 + x));
|
| 1298 |
+
|
| 1299 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1300 |
+
ctx.font = '14px Inter, sans-serif';
|
| 1301 |
+
ctx.fillText('Log Transform: Reduces Right Skew', 50, 30);
|
| 1302 |
+
|
| 1303 |
+
// Before histogram
|
| 1304 |
+
ctx.fillText('Before (Right-skewed)', 80, 80);
|
| 1305 |
+
const maxBefore = Math.max(...skewedData);
|
| 1306 |
+
skewedData.forEach((val, i) => {
|
| 1307 |
+
const h = (val / maxBefore) * 150;
|
| 1308 |
+
const x = 50 + i * 30;
|
| 1309 |
+
const y = 250 - h;
|
| 1310 |
+
ctx.fillStyle = '#ff6b35';
|
| 1311 |
+
ctx.fillRect(x, y, 20, h);
|
| 1312 |
+
});
|
| 1313 |
+
|
| 1314 |
+
// After histogram
|
| 1315 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1316 |
+
ctx.fillText('After (More Normal)', 420, 80);
|
| 1317 |
+
const maxAfter = Math.max(...logData);
|
| 1318 |
+
logData.forEach((val, i) => {
|
| 1319 |
+
const h = (val / maxAfter) * 150;
|
| 1320 |
+
const x = 390 + i * 30;
|
| 1321 |
+
const y = 250 - h;
|
| 1322 |
+
ctx.fillStyle = '#00d4ff';
|
| 1323 |
+
ctx.fillRect(x, y, 20, h);
|
| 1324 |
+
});
|
| 1325 |
+
|
| 1326 |
+
// Formula
|
| 1327 |
+
ctx.fillStyle = '#00ffff';
|
| 1328 |
+
ctx.font = '12px Inter, sans-serif';
|
| 1329 |
+
ctx.fillText('Formula: log(1 + x)', 280, 310);
|
| 1330 |
+
}
|
| 1331 |
+
}
|
| 1332 |
+
|
| 1333 |
+
// Button event listeners
|
| 1334 |
+
const btnPolynomial = document.getElementById('btn-polynomial');
|
| 1335 |
+
const btnBinning = document.getElementById('btn-binning');
|
| 1336 |
+
const btnLog = document.getElementById('btn-log');
|
| 1337 |
+
|
| 1338 |
+
if (btnPolynomial) btnPolynomial.addEventListener('click', () => draw('polynomial'));
|
| 1339 |
+
if (btnBinning) btnBinning.addEventListener('click', () => draw('binning'));
|
| 1340 |
+
if (btnLog) btnLog.addEventListener('click', () => draw('log'));
|
| 1341 |
+
|
| 1342 |
+
draw('polynomial');
|
| 1343 |
+
})();
|
| 1344 |
+
|
| 1345 |
+
/***** ---------- 12. FEATURE CREATION CANVAS ------------------------- */
|
| 1346 |
+
(function creationVis() {
|
| 1347 |
+
const select = document.getElementById('creationMethod');
|
| 1348 |
+
const c = document.getElementById('canvas-creation');
|
| 1349 |
+
if (!select || !c) return;
|
| 1350 |
+
const ctx = c.getContext('2d');
|
| 1351 |
+
|
| 1352 |
+
// Sample data
|
| 1353 |
+
const height = [1.6, 1.7, 1.8, 1.75, 1.65, 1.55, 1.9, 1.72]; // meters
|
| 1354 |
+
const weight = [60, 70, 80, 75, 65, 55, 95, 73]; // kg
|
| 1355 |
+
|
| 1356 |
+
function createFeature(method) {
|
| 1357 |
+
if (method === 'multiply') {
|
| 1358 |
+
return height.map((h, i) => h * weight[i]);
|
| 1359 |
+
} else if (method === 'divide') {
|
| 1360 |
+
return weight.map((w, i) => w / height[i]);
|
| 1361 |
+
} else if (method === 'add') {
|
| 1362 |
+
return height.map((h, i) => h + weight[i]);
|
| 1363 |
+
} else if (method === 'bmi') {
|
| 1364 |
+
return weight.map((w, i) => w / (height[i] * height[i]));
|
| 1365 |
+
}
|
| 1366 |
+
return [];
|
| 1367 |
+
}
|
| 1368 |
+
|
| 1369 |
+
function correlation(arr1, arr2) {
|
| 1370 |
+
const mean1 = arr1.reduce((a, b) => a + b) / arr1.length;
|
| 1371 |
+
const mean2 = arr2.reduce((a, b) => a + b) / arr2.length;
|
| 1372 |
+
const num = arr1.reduce((sum, v, i) => sum + (v - mean1) * (arr2[i] - mean2), 0);
|
| 1373 |
+
const den1 = Math.sqrt(arr1.reduce((sum, v) => sum + (v - mean1) ** 2, 0));
|
| 1374 |
+
const den2 = Math.sqrt(arr2.reduce((sum, v) => sum + (v - mean2) ** 2, 0));
|
| 1375 |
+
return num / (den1 * den2);
|
| 1376 |
+
}
|
| 1377 |
+
|
| 1378 |
+
function draw() {
|
| 1379 |
+
const method = select.value;
|
| 1380 |
+
const newFeature = createFeature(method);
|
| 1381 |
+
clearCanvas(ctx);
|
| 1382 |
+
|
| 1383 |
+
// Title
|
| 1384 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1385 |
+
ctx.font = '14px Inter, sans-serif';
|
| 1386 |
+
ctx.fillText('Original Features', 80, 30);
|
| 1387 |
+
ctx.fillText('Created Feature', 430, 30);
|
| 1388 |
+
|
| 1389 |
+
// Left: Scatter plot of height vs weight
|
| 1390 |
+
const maxH = Math.max(...height);
|
| 1391 |
+
const maxW = Math.max(...weight);
|
| 1392 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.2)';
|
| 1393 |
+
ctx.strokeRect(40, 50, 250, 200);
|
| 1394 |
+
|
| 1395 |
+
ctx.font = '11px Inter, sans-serif';
|
| 1396 |
+
ctx.fillStyle = '#a8b2c1';
|
| 1397 |
+
ctx.fillText('Height (m)', 120, 265);
|
| 1398 |
+
ctx.save();
|
| 1399 |
+
ctx.translate(25, 150);
|
| 1400 |
+
ctx.rotate(-Math.PI / 2);
|
| 1401 |
+
ctx.fillText('Weight (kg)', -30, 0);
|
| 1402 |
+
ctx.restore();
|
| 1403 |
+
|
| 1404 |
+
height.forEach((h, i) => {
|
| 1405 |
+
const x = 40 + (h / maxH) * 250;
|
| 1406 |
+
const y = 250 - (weight[i] / maxW) * 200;
|
| 1407 |
+
ctx.fillStyle = '#00d4ff';
|
| 1408 |
+
ctx.beginPath();
|
| 1409 |
+
ctx.arc(x, y, 5, 0, Math.PI * 2);
|
| 1410 |
+
ctx.fill();
|
| 1411 |
+
});
|
| 1412 |
+
|
| 1413 |
+
// Right: Bar chart of new feature
|
| 1414 |
+
const maxNew = Math.max(...newFeature);
|
| 1415 |
+
const barW = 30;
|
| 1416 |
+
newFeature.forEach((val, i) => {
|
| 1417 |
+
const x = 380 + i * (barW + 5);
|
| 1418 |
+
const h = (val / maxNew) * 180;
|
| 1419 |
+
const y = 250 - h;
|
| 1420 |
+
ctx.fillStyle = '#00ffff';
|
| 1421 |
+
ctx.fillRect(x, y, barW, h);
|
| 1422 |
+
});
|
| 1423 |
+
|
| 1424 |
+
// Formula and stats
|
| 1425 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1426 |
+
ctx.font = '12px Inter, sans-serif';
|
| 1427 |
+
let formula = '';
|
| 1428 |
+
if (method === 'multiply') formula = 'height × weight';
|
| 1429 |
+
else if (method === 'divide') formula = 'weight / height';
|
| 1430 |
+
else if (method === 'add') formula = 'height + weight';
|
| 1431 |
+
else if (method === 'bmi') formula = 'weight / height²';
|
| 1432 |
+
|
| 1433 |
+
ctx.fillText(`Formula: ${formula}`, 50, 300);
|
| 1434 |
+
|
| 1435 |
+
// Correlation
|
| 1436 |
+
const corr = correlation(newFeature, weight).toFixed(3);
|
| 1437 |
+
ctx.fillStyle = '#00ffff';
|
| 1438 |
+
ctx.fillText(`Correlation with weight: ${corr}`, 50, 320);
|
| 1439 |
+
}
|
| 1440 |
+
|
| 1441 |
+
// Button event listeners
|
| 1442 |
+
const btnInteraction = document.getElementById('btn-interaction');
|
| 1443 |
+
const btnRatio = document.getElementById('btn-ratio');
|
| 1444 |
+
const btnBmi = document.getElementById('btn-bmi');
|
| 1445 |
+
|
| 1446 |
+
if (btnInteraction) btnInteraction.addEventListener('click', () => draw('multiply'));
|
| 1447 |
+
if (btnRatio) btnRatio.addEventListener('click', () => draw('divide'));
|
| 1448 |
+
if (btnBmi) btnBmi.addEventListener('click', () => draw('bmi'));
|
| 1449 |
+
|
| 1450 |
+
draw('bmi');
|
| 1451 |
+
})();
|
| 1452 |
+
|
| 1453 |
+
/***** ---------- 13. DIMENSIONALITY REDUCTION (PCA) CANVAS ----------- */
|
| 1454 |
+
(function pcaVis() {
|
| 1455 |
+
const slider = document.getElementById('slider-components');
|
| 1456 |
+
const pcaValSpan = document.getElementById('pcaValue');
|
| 1457 |
+
const btn = document.getElementById('btn-pca-apply');
|
| 1458 |
+
const c = document.getElementById('canvas-pca');
|
| 1459 |
+
if (!slider || !c || !btn) return;
|
| 1460 |
+
const ctx = c.getContext('2d');
|
| 1461 |
+
|
| 1462 |
+
// 3D data (simplified for visualization)
|
| 1463 |
+
const data3D = [
|
| 1464 |
+
[2.5, 2.4, 1.0],
|
| 1465 |
+
[0.5, 0.7, 0.2],
|
| 1466 |
+
[2.2, 2.9, 1.1],
|
| 1467 |
+
[1.9, 2.2, 0.9],
|
| 1468 |
+
[3.1, 3.0, 1.2],
|
| 1469 |
+
[2.3, 2.7, 1.0],
|
| 1470 |
+
[2.0, 1.6, 0.6],
|
| 1471 |
+
[1.0, 1.1, 0.4],
|
| 1472 |
+
[1.5, 1.6, 0.6],
|
| 1473 |
+
[1.1, 0.9, 0.3]
|
| 1474 |
+
];
|
| 1475 |
+
|
| 1476 |
+
// Simplified PCA (not real eigenvalue computation, just for viz)
|
| 1477 |
+
const explainedVariance = [0.72, 0.23, 0.05]; // PC1, PC2, PC3
|
| 1478 |
+
|
| 1479 |
+
function draw() {
|
| 1480 |
+
const nComponents = Number(slider.value);
|
| 1481 |
+
pcaValSpan.textContent = nComponents;
|
| 1482 |
+
|
| 1483 |
+
clearCanvas(ctx);
|
| 1484 |
+
|
| 1485 |
+
// Title
|
| 1486 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1487 |
+
ctx.font = '14px Inter, sans-serif';
|
| 1488 |
+
ctx.fillText('PCA: Dimensionality Reduction', 250, 25);
|
| 1489 |
+
|
| 1490 |
+
// Original 3D visualization (pseudo-3D)
|
| 1491 |
+
ctx.fillText('Original Data (3D)', 80, 60);
|
| 1492 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.15)';
|
| 1493 |
+
ctx.strokeRect(30, 70, 280, 150);
|
| 1494 |
+
|
| 1495 |
+
data3D.forEach(point => {
|
| 1496 |
+
const x = 50 + point[0] * 60;
|
| 1497 |
+
const y = 150 - point[1] * 30;
|
| 1498 |
+
const size = 2 + point[2] * 3;
|
| 1499 |
+
ctx.fillStyle = '#00d4ff';
|
| 1500 |
+
ctx.beginPath();
|
| 1501 |
+
ctx.arc(x, y, size, 0, Math.PI * 2);
|
| 1502 |
+
ctx.fill();
|
| 1503 |
+
});
|
| 1504 |
+
|
| 1505 |
+
ctx.fillStyle = '#a8b2c1';
|
| 1506 |
+
ctx.font = '11px Inter, sans-serif';
|
| 1507 |
+
ctx.fillText('Features: 3', 50, 235);
|
| 1508 |
+
|
| 1509 |
+
// Transformed data (2D projection)
|
| 1510 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1511 |
+
ctx.font = '14px Inter, sans-serif';
|
| 1512 |
+
ctx.fillText(`Reduced Data (${nComponents}D)`, 420, 60);
|
| 1513 |
+
ctx.strokeStyle = 'rgba(255,255,255,0.15)';
|
| 1514 |
+
ctx.strokeRect(360, 70, 280, 150);
|
| 1515 |
+
|
| 1516 |
+
// Project to PC space (simplified)
|
| 1517 |
+
data3D.forEach(point => {
|
| 1518 |
+
const pc1 = point[0] * 0.7 + point[1] * 0.3;
|
| 1519 |
+
const pc2 = point[0] * 0.3 + point[1] * 0.7;
|
| 1520 |
+
const x = 390 + pc1 * 60;
|
| 1521 |
+
const y = 150 - pc2 * 30;
|
| 1522 |
+
ctx.fillStyle = '#00ffff';
|
| 1523 |
+
ctx.beginPath();
|
| 1524 |
+
ctx.arc(x, y, 4, 0, Math.PI * 2);
|
| 1525 |
+
ctx.fill();
|
| 1526 |
+
});
|
| 1527 |
+
|
| 1528 |
+
ctx.fillStyle = '#a8b2c1';
|
| 1529 |
+
ctx.font = '11px Inter, sans-serif';
|
| 1530 |
+
ctx.fillText(`Features: ${nComponents}`, 380, 235);
|
| 1531 |
+
|
| 1532 |
+
// Explained variance bar chart
|
| 1533 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1534 |
+
ctx.font = '14px Inter, sans-serif';
|
| 1535 |
+
ctx.fillText('Explained Variance per Component', 180, 270);
|
| 1536 |
+
|
| 1537 |
+
const barWidth = 80;
|
| 1538 |
+
const maxH = 80;
|
| 1539 |
+
explainedVariance.slice(0, nComponents).forEach((variance, i) => {
|
| 1540 |
+
const x = 120 + i * (barWidth + 20);
|
| 1541 |
+
const h = variance * maxH;
|
| 1542 |
+
const y = 360 - h;
|
| 1543 |
+
|
| 1544 |
+
// Bar
|
| 1545 |
+
const colors = ['#00d4ff', '#00ffff', '#ff6b35'];
|
| 1546 |
+
ctx.fillStyle = colors[i];
|
| 1547 |
+
ctx.fillRect(x, y, barWidth, h);
|
| 1548 |
+
|
| 1549 |
+
// Label
|
| 1550 |
+
ctx.fillStyle = '#e0e6ed';
|
| 1551 |
+
ctx.font = '12px Inter, sans-serif';
|
| 1552 |
+
ctx.fillText(`PC${i + 1}`, x + 25, 375);
|
| 1553 |
+
ctx.fillText(`${(variance * 100).toFixed(1)}%`, x + 15, y - 5);
|
| 1554 |
+
});
|
| 1555 |
+
|
| 1556 |
+
// Cumulative variance
|
| 1557 |
+
const cumulative = explainedVariance.slice(0, nComponents).reduce((a, b) => a + b, 0);
|
| 1558 |
+
ctx.fillStyle = '#00ffff';
|
| 1559 |
+
ctx.font = '13px Inter, sans-serif';
|
| 1560 |
+
ctx.fillText(`Cumulative Variance: ${(cumulative * 100).toFixed(1)}%`, 450, 310);
|
| 1561 |
+
ctx.fillText(`Dimensionality Reduction: 3 → ${nComponents}`, 450, 330);
|
| 1562 |
+
}
|
| 1563 |
+
|
| 1564 |
+
slider.addEventListener('input', draw);
|
| 1565 |
+
btn.addEventListener('click', draw);
|
| 1566 |
+
draw();
|
| 1567 |
+
})();
|
feature-engineering/index.html
ADDED
|
@@ -0,0 +1,455 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
+
<title>Feature Engineering Explorer</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css" />
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<div class="app flex">
|
| 11 |
+
<!-- Sidebar Navigation -->
|
| 12 |
+
<aside class="sidebar" id="sidebar">
|
| 13 |
+
<h1 class="sidebar__title">🛠️ Feature Engineering</h1>
|
| 14 |
+
<nav>
|
| 15 |
+
<ul class="nav__list" id="navList">
|
| 16 |
+
<li><a href="#intro" class="nav__link">🎯 Introduction</a></li>
|
| 17 |
+
<li><a href="#missing-data" class="nav__link">🔍 Missing Data</a></li>
|
| 18 |
+
<li><a href="#outliers" class="nav__link">📊 Outliers</a></li>
|
| 19 |
+
<li><a href="#scaling" class="nav__link">⚖️ Scaling</a></li>
|
| 20 |
+
<li><a href="#encoding" class="nav__link">🔢 Encoding</a></li>
|
| 21 |
+
<li><a href="#feature-selection" class="nav__link">🎯 Feature Selection</a></li>
|
| 22 |
+
<li><a href="#imbalanced-data" class="nav__link">⚖️ Imbalanced Data</a></li>
|
| 23 |
+
<li><a href="#eda" class="nav__link">📈 EDA Overview</a></li>
|
| 24 |
+
<li><a href="#feature-transformation" class="nav__link">🔄 Feature Transformation</a></li>
|
| 25 |
+
<li><a href="#feature-creation" class="nav__link">🛠️ Feature Creation</a></li>
|
| 26 |
+
<li><a href="#dimensionality-reduction" class="nav__link">📉 Dimensionality Reduction</a></li>
|
| 27 |
+
</ul>
|
| 28 |
+
</nav>
|
| 29 |
+
</aside>
|
| 30 |
+
|
| 31 |
+
<!-- Main Content -->
|
| 32 |
+
<main class="content" id="content">
|
| 33 |
+
<!-- ============================ 1. INTRO ============================ -->
|
| 34 |
+
<section id="intro" class="topic-section">
|
| 35 |
+
<h2>Introduction to Feature Engineering</h2>
|
| 36 |
+
<p>Feature Engineering is the process of transforming raw data into meaningful inputs that boost machine-learning model performance. A well-crafted feature set can improve accuracy by 10-30% without changing the underlying algorithm.</p>
|
| 37 |
+
|
| 38 |
+
<div class="info-card">
|
| 39 |
+
<strong>Key Idea:</strong> 💡 Thoughtful features provide the model with clearer patterns, like lenses sharpening a blurry picture.
|
| 40 |
+
</div>
|
| 41 |
+
|
| 42 |
+
<!-- Canvas Visual -->
|
| 43 |
+
<div class="canvas-wrapper">
|
| 44 |
+
<canvas id="canvas-intro" width="600" height="280"></canvas>
|
| 45 |
+
</div>
|
| 46 |
+
</section>
|
| 47 |
+
|
| 48 |
+
<!-- ====================== 2. HANDLING MISSING DATA ================== -->
|
| 49 |
+
<section id="missing-data" class="topic-section">
|
| 50 |
+
<h2>Handling Missing Data</h2>
|
| 51 |
+
<p>Missing values come in three flavors: MCAR (Missing Completely At Random), MAR (Missing At Random), and MNAR (Missing Not At Random). Each demands different treatment to avoid bias.</p>
|
| 52 |
+
|
| 53 |
+
<!-- Real-world Example -->
|
| 54 |
+
<div class="info-card">
|
| 55 |
+
<strong>Real Example:</strong> A hospital's patient records often have absent <em>cholesterol</em> values because certain tests were not ordered for healthy young adults.
|
| 56 |
+
</div>
|
| 57 |
+
|
| 58 |
+
<!-- Controls -->
|
| 59 |
+
<div class="form-group">
|
| 60 |
+
<button id="btn-mean-impute" class="btn btn--primary">Mean Imputation</button>
|
| 61 |
+
<button id="btn-median-impute" class="btn btn--primary">Median Imputation</button>
|
| 62 |
+
<button id="btn-knn-impute" class="btn btn--primary">KNN Imputation</button>
|
| 63 |
+
</div>
|
| 64 |
+
|
| 65 |
+
<!-- Canvas -->
|
| 66 |
+
<div class="canvas-wrapper">
|
| 67 |
+
<canvas id="canvas-missing-data" width="800" height="500"></canvas>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<!-- Callouts -->
|
| 71 |
+
<div class="callout callout--insight">💡 Mean/Median work best when data is MCAR or MAR.</div>
|
| 72 |
+
<div class="callout callout--mistake">⚠️ Using mean imputation on skewed data can distort distributions.</div>
|
| 73 |
+
<div class="callout callout--tip">✅ Always impute <strong>after</strong> splitting into train and test to avoid leakage.</div>
|
| 74 |
+
</section>
|
| 75 |
+
|
| 76 |
+
<!-- ======================= 3. HANDLING OUTLIERS ===================== -->
|
| 77 |
+
<section id="outliers" class="topic-section">
|
| 78 |
+
<h2>Handling Outliers</h2>
|
| 79 |
+
<p>Outliers are data points that deviate markedly from others. Detecting and treating them prevents skewed models.</p>
|
| 80 |
+
|
| 81 |
+
<div class="form-group">
|
| 82 |
+
<button id="btn-detect-iqr" class="btn btn--primary">IQR Method</button>
|
| 83 |
+
<button id="btn-detect-zscore" class="btn btn--primary">Z-Score Method</button>
|
| 84 |
+
<button id="btn-winsorize" class="btn btn--primary">Winsorization</button>
|
| 85 |
+
</div>
|
| 86 |
+
|
| 87 |
+
<div class="canvas-wrapper">
|
| 88 |
+
<canvas id="canvas-outliers" width="600" height="300"></canvas>
|
| 89 |
+
</div>
|
| 90 |
+
|
| 91 |
+
<div class="callout callout--insight">💡 The IQR method is robust to non-normal data.</div>
|
| 92 |
+
<div class="callout callout--mistake">⚠️ Removing legitimate extreme values can erase important signals.</div>
|
| 93 |
+
</section>
|
| 94 |
+
|
| 95 |
+
<!-- ========================== 4. SCALING ============================ -->
|
| 96 |
+
<section id="scaling" class="topic-section">
|
| 97 |
+
<h2>Feature Scaling</h2>
|
| 98 |
+
<p>Algorithms that rely on distance, like KNN, demand comparable feature magnitudes.</p>
|
| 99 |
+
|
| 100 |
+
<div class="form-group">
|
| 101 |
+
<button id="btn-minmax" class="btn btn--primary">Min-Max Scaling</button>
|
| 102 |
+
<button id="btn-standardize" class="btn btn--primary">Standardization</button>
|
| 103 |
+
<button id="btn-robust" class="btn btn--primary">Robust Scaler</button>
|
| 104 |
+
</div>
|
| 105 |
+
|
| 106 |
+
<div class="canvas-wrapper">
|
| 107 |
+
<canvas id="canvas-scaling" width="600" height="300"></canvas>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
|
| 111 |
+
<!-- ========================== 5. ENCODING =========================== -->
|
| 112 |
+
<section id="encoding" class="topic-section">
|
| 113 |
+
<h2>Data Encoding</h2>
|
| 114 |
+
<p>Transform categorical variables into numbers so models can interpret them.</p>
|
| 115 |
+
|
| 116 |
+
<div class="form-group">
|
| 117 |
+
<button id="btn-label-encode" class="btn btn--primary">Label Encoding</button>
|
| 118 |
+
<button id="btn-onehot-encode" class="btn btn--primary">One-Hot Encoding</button>
|
| 119 |
+
<button id="btn-target-encode" class="btn btn--primary">Target Encoding</button>
|
| 120 |
+
</div>
|
| 121 |
+
|
| 122 |
+
<div class="canvas-wrapper">
|
| 123 |
+
<canvas id="canvas-encoding" width="600" height="300"></canvas>
|
| 124 |
+
</div>
|
| 125 |
+
</section>
|
| 126 |
+
|
| 127 |
+
<!-- ===================== 6. FEATURE SELECTION ======================= -->
|
| 128 |
+
<section id="feature-selection" class="topic-section">
|
| 129 |
+
<h2>Feature Selection</h2>
|
| 130 |
+
<p>Pick features that matter, drop those that don't.</p>
|
| 131 |
+
|
| 132 |
+
<div class="form-group">
|
| 133 |
+
<button id="btn-backward-elim" class="btn btn--primary">Backward Elimination</button>
|
| 134 |
+
<button id="btn-forward-select" class="btn btn--primary">Forward Selection</button>
|
| 135 |
+
<button id="btn-rfe" class="btn btn--primary">RFE</button>
|
| 136 |
+
</div>
|
| 137 |
+
|
| 138 |
+
<div class="canvas-wrapper">
|
| 139 |
+
<canvas id="canvas-selection" width="600" height="300"></canvas>
|
| 140 |
+
</div>
|
| 141 |
+
</section>
|
| 142 |
+
|
| 143 |
+
<!-- =================== 7. IMBALANCED DATA =========================== -->
|
| 144 |
+
<section id="imbalanced-data" class="topic-section">
|
| 145 |
+
<h2>Handling Imbalanced Data</h2>
|
| 146 |
+
<p>Class imbalance leads to biased predictions. Balancing techniques can fix this.</p>
|
| 147 |
+
|
| 148 |
+
<div class="form-group">
|
| 149 |
+
<button id="btn-rus" class="btn btn--primary">Random Under-Sampling</button>
|
| 150 |
+
<button id="btn-ros" class="btn btn--primary">Random Over-Sampling</button>
|
| 151 |
+
<button id="btn-smote" class="btn btn--primary">SMOTE</button>
|
| 152 |
+
</div>
|
| 153 |
+
|
| 154 |
+
<div class="canvas-wrapper">
|
| 155 |
+
<canvas id="canvas-imbalanced" width="600" height="300"></canvas>
|
| 156 |
+
</div>
|
| 157 |
+
</section>
|
| 158 |
+
|
| 159 |
+
<!-- ========================== 8. EDA ================================ -->
|
| 160 |
+
<section id="eda" class="topic-section">
|
| 161 |
+
<h2>Exploratory Data Analysis (EDA)</h2>
|
| 162 |
+
<p><strong>Exploratory Data Analysis (EDA)</strong> is a critical step in the machine learning pipeline that comes BEFORE feature engineering. EDA helps you understand your data, discover patterns, identify anomalies, detect outliers, test hypotheses, and check assumptions through summary statistics and graphical representations.</p>
|
| 163 |
+
|
| 164 |
+
<div class="info-card">
|
| 165 |
+
<strong>Key Questions EDA Answers:</strong>
|
| 166 |
+
<ul>
|
| 167 |
+
<li>How many columns are numerical vs. categorical?</li>
|
| 168 |
+
<li>What does the data distribution look like?</li>
|
| 169 |
+
<li>Are there missing values?</li>
|
| 170 |
+
<li>Are there outliers?</li>
|
| 171 |
+
<li>Is the data imbalanced (for classification problems)?</li>
|
| 172 |
+
<li>What are the correlations between features?</li>
|
| 173 |
+
<li>Are there any trends or patterns?</li>
|
| 174 |
+
</ul>
|
| 175 |
+
</div>
|
| 176 |
+
|
| 177 |
+
<div class="info-card">
|
| 178 |
+
<strong>Real-World Example:</strong> Imagine you're analyzing customer data for a bank to predict loan defaults. EDA helps you understand:
|
| 179 |
+
<ul>
|
| 180 |
+
<li>Age distribution of customers (histogram)</li>
|
| 181 |
+
<li>Income levels (box plot for outliers)</li>
|
| 182 |
+
<li>Correlation between income and loan amount (scatter plot)</li>
|
| 183 |
+
<li>Missing values in employment history</li>
|
| 184 |
+
<li>Class imbalance (5% defaults vs 95% non-defaults)</li>
|
| 185 |
+
</ul>
|
| 186 |
+
</div>
|
| 187 |
+
|
| 188 |
+
<h3>Two Main Types of EDA</h3>
|
| 189 |
+
|
| 190 |
+
<h4>1. Descriptive Statistics</h4>
|
| 191 |
+
<p><strong>Purpose:</strong> Summarize and visualize what the data looks like</p>
|
| 192 |
+
|
| 193 |
+
<div class="info-card">
|
| 194 |
+
<strong>A. Central Tendency:</strong><br>
|
| 195 |
+
• <strong>Mean (Average):</strong> μ = Σxᵢ / n<br>
|
| 196 |
+
Example: Average income = $50,000 (Sensitive to outliers)<br>
|
| 197 |
+
• <strong>Median:</strong> Middle value when sorted<br>
|
| 198 |
+
Example: Median income = $45,000 (Robust to outliers)<br>
|
| 199 |
+
• <strong>Mode:</strong> Most frequent value<br>
|
| 200 |
+
Example: Most common age = 35 years<br><br>
|
| 201 |
+
|
| 202 |
+
<strong>B. Variability (Spread):</strong><br>
|
| 203 |
+
• <strong>Variance:</strong> σ² = Σ(xᵢ - μ)² / n (Measures how spread out data is)<br>
|
| 204 |
+
• <strong>Standard Deviation:</strong> σ = √variance<br>
|
| 205 |
+
68% of data within 1σ, 95% within 2σ, 99.7% within 3σ (for normal distribution)<br>
|
| 206 |
+
• <strong>Interquartile Range (IQR):</strong> Q3 - Q1<br>
|
| 207 |
+
Middle 50% of data, robust to outliers<br><br>
|
| 208 |
+
|
| 209 |
+
<strong>C. Correlation & Associations:</strong><br>
|
| 210 |
+
• <strong>Pearson Correlation:</strong> r = Cov(X,Y) / (σₓ × σᵧ)<br>
|
| 211 |
+
Range: -1 to +1<br>
|
| 212 |
+
r = +1: Perfect positive correlation<br>
|
| 213 |
+
r = 0: No linear correlation<br>
|
| 214 |
+
r = -1: Perfect negative correlation<br>
|
| 215 |
+
• <strong>Thresholds:</strong> |r| > 0.7: Strong, |r| = 0.5-0.7: Moderate, |r| < 0.3: Weak
|
| 216 |
+
</div>
|
| 217 |
+
|
| 218 |
+
<h4>2. Inferential Statistics</h4>
|
| 219 |
+
<p><strong>Purpose:</strong> Make inferences or generalizations about the population from the sample</p>
|
| 220 |
+
<p><strong>Key Question:</strong> Can we claim this effect exists in the larger population, or is it just by chance?</p>
|
| 221 |
+
|
| 222 |
+
<div class="info-card">
|
| 223 |
+
<strong>A. Hypothesis Testing:</strong><br>
|
| 224 |
+
• <strong>Null Hypothesis (H₀):</strong> No effect exists (e.g., "Mean of Group A = Mean of Group B")<br>
|
| 225 |
+
• <strong>Alternative Hypothesis (H₁):</strong> Effect exists (e.g., "Mean of Group A ≠ Mean of Group B")<br>
|
| 226 |
+
• <strong>P-value:</strong> Probability of observing data if H₀ is true<br>
|
| 227 |
+
p < 0.05: Reject H₀ (effect is statistically significant)<br>
|
| 228 |
+
p > 0.05: Fail to reject H₀ (not enough evidence)<br><br>
|
| 229 |
+
|
| 230 |
+
<strong>Example:</strong><br>
|
| 231 |
+
• H₀: "There is no difference between positive and negative movie review lengths"<br>
|
| 232 |
+
• H₁: "Negative reviews are longer than positive reviews"<br>
|
| 233 |
+
• After t-test: p = 0.003 (< 0.05)<br>
|
| 234 |
+
• Conclusion: Reject H₀ → Negative reviews ARE significantly longer<br><br>
|
| 235 |
+
|
| 236 |
+
<strong>B. Confidence Intervals:</strong><br>
|
| 237 |
+
• Range where true population parameter likely lies<br>
|
| 238 |
+
• 95% CI: We're 95% confident the true value is within this range<br>
|
| 239 |
+
• Example: "Average customer age is 35 ± 2 years (95% CI: [33, 37])"<br><br>
|
| 240 |
+
|
| 241 |
+
<strong>C. Effect Size:</strong><br>
|
| 242 |
+
• Cohen's d = (mean₁ - mean₂) / pooled_std<br>
|
| 243 |
+
• Small effect: d = 0.2, Medium: d = 0.5, Large: d = 0.8
|
| 244 |
+
</div>
|
| 245 |
+
|
| 246 |
+
<h3>Algorithm Steps for EDA</h3>
|
| 247 |
+
<div class="info-card">
|
| 248 |
+
<strong>1. Load and Inspect Data:</strong> df.head(), df.info(), df.describe()<br>
|
| 249 |
+
<strong>2. Handle Missing Values:</strong> Identify (df.isnull().sum()), Visualize, Decide<br>
|
| 250 |
+
<strong>3. Analyze Distributions:</strong> Histograms, count plots, box plots<br>
|
| 251 |
+
<strong>4. Check for Imbalance:</strong> Count target classes, plot distribution<br>
|
| 252 |
+
<strong>5. Correlation Analysis:</strong> Correlation matrix, heatmap, identify multicollinearity<br>
|
| 253 |
+
<strong>6. Statistical Testing:</strong> Compare groups (t-test, ANOVA), test assumptions, calculate effect sizes
|
| 254 |
+
</div>
|
| 255 |
+
|
| 256 |
+
<h3>Interactive EDA Dashboard</h3>
|
| 257 |
+
<div class="form-group">
|
| 258 |
+
<label for="edaFeature" class="form-label">Select Feature:</label>
|
| 259 |
+
<select id="edaFeature" class="form-control w-100">
|
| 260 |
+
<option value="age">Age</option>
|
| 261 |
+
<option value="income">Income</option>
|
| 262 |
+
<option value="credit">Credit Score</option>
|
| 263 |
+
</select>
|
| 264 |
+
</div>
|
| 265 |
+
|
| 266 |
+
<div class="form-group">
|
| 267 |
+
<label for="confidenceLevel" class="form-label">Confidence Level: <span id="confidenceValue">95</span>%</label>
|
| 268 |
+
<input type="range" id="confidenceLevel" min="90" max="99" step="1" value="95" class="form-control" />
|
| 269 |
+
</div>
|
| 270 |
+
|
| 271 |
+
<div class="form-group">
|
| 272 |
+
<button id="btn-histogram" class="btn btn--primary">Show Histogram</button>
|
| 273 |
+
<button id="btn-boxplot" class="btn btn--primary">Show Box Plot</button>
|
| 274 |
+
<button id="btn-correlation" class="btn btn--primary">Show Correlation</button>
|
| 275 |
+
</div>
|
| 276 |
+
|
| 277 |
+
<div class="canvas-wrapper">
|
| 278 |
+
<canvas id="canvas-eda" width="800" height="500"></canvas>
|
| 279 |
+
</div>
|
| 280 |
+
|
| 281 |
+
<div class="callout callout--insight">💡 EDA typically takes 30-40% of total project time. Good EDA reveals which features to engineer.</div>
|
| 282 |
+
<div class="callout callout--mistake">⚠️ Common Mistakes: Skipping EDA, not checking outliers before scaling, ignoring missing value patterns, overlooking class imbalance, ignoring multicollinearity.</div>
|
| 283 |
+
<div class="callout callout--tip">✅ Best Practices: ALWAYS start with EDA, visualize EVERY feature, check correlations with target, document insights, use both descriptive and inferential statistics.</div>
|
| 284 |
+
|
| 285 |
+
<h3>Use Cases and Applications</h3>
|
| 286 |
+
<ul>
|
| 287 |
+
<li><strong>Healthcare:</strong> Analyzing patient data before building disease prediction models</li>
|
| 288 |
+
<li><strong>Finance:</strong> Understanding customer demographics before credit scoring</li>
|
| 289 |
+
<li><strong>E-commerce:</strong> Analyzing purchase patterns before recommendation systems</li>
|
| 290 |
+
<li><strong>Marketing:</strong> Understanding customer segments before targeted campaigns</li>
|
| 291 |
+
<li><strong>Time Series:</strong> Checking for seasonality and trends in sales data</li>
|
| 292 |
+
</ul>
|
| 293 |
+
|
| 294 |
+
<h3>Summary & Key Takeaways</h3>
|
| 295 |
+
<p>Exploratory Data Analysis is the foundation of any successful machine learning project. It combines <strong>descriptive statistics</strong> (mean, median, variance, correlation) with <strong>inferential statistics</strong> (hypothesis testing, confidence intervals) to understand data deeply.</p>
|
| 296 |
+
<p><strong>Descriptive EDA</strong> answers: "What is happening in the dataset?"<br>
|
| 297 |
+
<strong>Inferential EDA</strong> answers: "Can we claim this effect exists in the larger population?"</p>
|
| 298 |
+
<p>Remember: <strong>Data → EDA → Feature Engineering → ML → Deployment</strong></p>
|
| 299 |
+
</section>
|
| 300 |
+
|
| 301 |
+
<!-- =================== 9. FEATURE TRANSFORMATION ==================== -->
|
| 302 |
+
<section id="feature-transformation" class="topic-section">
|
| 303 |
+
<h2>Feature Transformation</h2>
|
| 304 |
+
<p>Feature transformation creates new representations of data to capture non-linear patterns. Techniques like polynomial features, binning, and mathematical transformations unlock hidden relationships.</p>
|
| 305 |
+
|
| 306 |
+
<div class="info-card">
|
| 307 |
+
<strong>Real Example:</strong> Predicting house prices with polynomial features (adding x² terms) improves model fit for non-linear relationships between square footage and price.
|
| 308 |
+
</div>
|
| 309 |
+
|
| 310 |
+
<h3>Mathematical Foundations</h3>
|
| 311 |
+
<div class="info-card">
|
| 312 |
+
<strong>Polynomial Features:</strong> Transform (x₁, x₂) → (1, x₁, x₂, x₁², x₁x₂, x₂²)<br>
|
| 313 |
+
• Degree 2 example: For features (x, y) → (1, x, y, x², xy, y²)<br>
|
| 314 |
+
• 2 features with degree=2 creates 6 features total<br><br>
|
| 315 |
+
<strong>Binning:</strong> Convert continuous → categorical<br>
|
| 316 |
+
• Equal-width: Divide range into equal intervals<br>
|
| 317 |
+
• Quantile: Each bin has equal number of samples<br>
|
| 318 |
+
• Example: Age (0-100) → [0-18], [19-35], [36-60], [61+]<br><br>
|
| 319 |
+
<strong>Mathematical Transformations:</strong><br>
|
| 320 |
+
• Square Root: √x (reduces right skew)<br>
|
| 321 |
+
• Log Transform: log(1 + x)<br>
|
| 322 |
+
• Box-Cox: λ = 0: log(x), λ ≠ 0: (x^λ - 1)/λ
|
| 323 |
+
</div>
|
| 324 |
+
|
| 325 |
+
<div class="form-group">
|
| 326 |
+
<button id="btn-polynomial" class="btn btn--primary">Add Polynomial Features</button>
|
| 327 |
+
<button id="btn-binning" class="btn btn--primary">Apply Binning</button>
|
| 328 |
+
<button id="btn-log" class="btn btn--primary">Log Transform</button>
|
| 329 |
+
</div>
|
| 330 |
+
|
| 331 |
+
<div class="canvas-wrapper">
|
| 332 |
+
<canvas id="canvas-transformation" width="700" height="350"></canvas>
|
| 333 |
+
</div>
|
| 334 |
+
|
| 335 |
+
<div class="callout callout--insight">💡 Polynomial features capture curve fitting, but degree=3 on 10 features creates 286 features!</div>
|
| 336 |
+
<div class="callout callout--mistake">⚠️ Always scale features after polynomial transformation to prevent magnitude issues.</div>
|
| 337 |
+
<div class="callout callout--tip">✅ Start with degree=2 and visualize distributions before/after transformation.</div>
|
| 338 |
+
|
| 339 |
+
<h3>Use Cases</h3>
|
| 340 |
+
<ul>
|
| 341 |
+
<li>Polynomial features for non-linear house price prediction</li>
|
| 342 |
+
<li>Binning age into groups for marketing segmentation</li>
|
| 343 |
+
<li>Log transformation for right-skewed income data</li>
|
| 344 |
+
</ul>
|
| 345 |
+
</section>
|
| 346 |
+
|
| 347 |
+
<!-- =================== 10. FEATURE CREATION ========================= -->
|
| 348 |
+
<section id="feature-creation" class="topic-section">
|
| 349 |
+
<h2>Feature Creation</h2>
|
| 350 |
+
<p>Creating new features from existing ones based on domain knowledge. Interaction terms, ratios, and domain-specific calculations enhance model performance.</p>
|
| 351 |
+
|
| 352 |
+
<div class="info-card">
|
| 353 |
+
<strong>Real Example:</strong> E-commerce revenue = price × quantity. Profit margin = (selling_price - cost_price) / cost_price. These derived features often have stronger predictive power than raw features.
|
| 354 |
+
</div>
|
| 355 |
+
|
| 356 |
+
<h3>Mathematical Foundations</h3>
|
| 357 |
+
<div class="info-card">
|
| 358 |
+
<strong>Interaction Terms:</strong> feature₁ × feature₂<br>
|
| 359 |
+
• Example: advertising_budget × seasonality → total_impact<br>
|
| 360 |
+
• Why: Captures how one feature's effect depends on another<br><br>
|
| 361 |
+
<strong>Ratio Features:</strong> feature₁ / feature₂<br>
|
| 362 |
+
• Example: price/sqft, income/age<br><br>
|
| 363 |
+
<strong>Domain-Specific Features:</strong><br>
|
| 364 |
+
• BMI = weight(kg) / height²(m²)<br>
|
| 365 |
+
• Speed = distance / time<br>
|
| 366 |
+
• Profit margin = (revenue - cost) / cost<br><br>
|
| 367 |
+
<strong>Time-Based Features:</strong><br>
|
| 368 |
+
• Extract: year, month, day, weekday, hour<br>
|
| 369 |
+
• Create: is_weekend, is_holiday, season
|
| 370 |
+
</div>
|
| 371 |
+
|
| 372 |
+
<div class="form-group">
|
| 373 |
+
<button id="btn-interaction" class="btn btn--primary">Create Interaction</button>
|
| 374 |
+
<button id="btn-ratio" class="btn btn--primary">Create Ratio</button>
|
| 375 |
+
<button id="btn-bmi" class="btn btn--primary">Calculate BMI</button>
|
| 376 |
+
</div>
|
| 377 |
+
|
| 378 |
+
<div class="canvas-wrapper">
|
| 379 |
+
<canvas id="canvas-creation" width="700" height="350"></canvas>
|
| 380 |
+
</div>
|
| 381 |
+
|
| 382 |
+
<div class="callout callout--insight">💡 Interaction terms are especially powerful in linear models - neural networks learn them automatically.</div>
|
| 383 |
+
<div class="callout callout--mistake">⚠️ Creating features without domain knowledge leads to meaningless combinations.</div>
|
| 384 |
+
<div class="callout callout--tip">✅ Always check correlation between new and existing features to avoid redundancy.</div>
|
| 385 |
+
|
| 386 |
+
<h3>Use Cases</h3>
|
| 387 |
+
<ul>
|
| 388 |
+
<li>BMI from height and weight in healthcare prediction</li>
|
| 389 |
+
<li>Click-through rate = clicks / impressions in digital marketing</li>
|
| 390 |
+
<li>Revenue = price × quantity in retail analytics</li>
|
| 391 |
+
</ul>
|
| 392 |
+
</section>
|
| 393 |
+
|
| 394 |
+
<!-- ================ 11. DIMENSIONALITY REDUCTION ==================== -->
|
| 395 |
+
<section id="dimensionality-reduction" class="topic-section">
|
| 396 |
+
<h2>Dimensionality Reduction</h2>
|
| 397 |
+
<p>Reducing the number of features while preserving information. PCA (Principal Component Analysis) projects high-dimensional data onto lower dimensions by finding directions of maximum variance.</p>
|
| 398 |
+
|
| 399 |
+
<div class="info-card">
|
| 400 |
+
<strong>Real Example:</strong> Image compression and genome analysis with thousands of genes benefit from PCA. First 2-3 principal components often capture 80%+ of variance.
|
| 401 |
+
</div>
|
| 402 |
+
|
| 403 |
+
<h3>PCA Mathematical Foundations</h3>
|
| 404 |
+
<div class="info-card">
|
| 405 |
+
<strong>Algorithm Steps:</strong><br>
|
| 406 |
+
1. Standardize data: X_scaled = (X - μ) / σ<br>
|
| 407 |
+
2. Compute covariance matrix: Cov = (1/n) X^T X<br>
|
| 408 |
+
3. Calculate eigenvalues and eigenvectors<br>
|
| 409 |
+
4. Sort eigenvectors by eigenvalues (descending)<br>
|
| 410 |
+
5. Select top k eigenvectors (principal components)<br>
|
| 411 |
+
6. Transform: X_new = X × PC_matrix<br><br>
|
| 412 |
+
<strong>Explained Variance:</strong> λᵢ / Σλⱼ<br>
|
| 413 |
+
<strong>Cumulative Variance:</strong> Shows total information preserved<br><br>
|
| 414 |
+
<strong>Why PCA Works:</strong><br>
|
| 415 |
+
• Removes correlated features<br>
|
| 416 |
+
• Captures maximum variance in fewer dimensions<br>
|
| 417 |
+
• Components are orthogonal (no correlation)
|
| 418 |
+
</div>
|
| 419 |
+
|
| 420 |
+
<div class="form-group">
|
| 421 |
+
<label for="slider-components" class="form-label">Number of Components: <span id="pcaValue">2</span></label>
|
| 422 |
+
<input type="range" id="slider-components" min="1" max="3" step="1" value="2" class="form-control" />
|
| 423 |
+
</div>
|
| 424 |
+
|
| 425 |
+
<button id="btn-pca-apply" class="btn btn--primary">Apply PCA</button>
|
| 426 |
+
|
| 427 |
+
<div class="canvas-wrapper">
|
| 428 |
+
<canvas id="canvas-pca" width="700" height="400"></canvas>
|
| 429 |
+
</div>
|
| 430 |
+
|
| 431 |
+
<div class="callout callout--insight">💡 PCA is unsupervised - it doesn't use the target variable. First PC always captures most variance.</div>
|
| 432 |
+
<div class="callout callout--mistake">⚠️ Not standardizing before PCA is a critical error - features with large scales will dominate.</div>
|
| 433 |
+
<div class="callout callout--tip">✅ Aim for 95% cumulative explained variance when choosing number of components.</div>
|
| 434 |
+
|
| 435 |
+
<h3>Use Cases</h3>
|
| 436 |
+
<ul>
|
| 437 |
+
<li>Image compression (reduce pixel dimensions)</li>
|
| 438 |
+
<li>Genomics (thousands of genes → few principal components)</li>
|
| 439 |
+
<li>Visualization (project high-D data to 2D for plotting)</li>
|
| 440 |
+
<li>Speed up training (fewer features = faster models)</li>
|
| 441 |
+
</ul>
|
| 442 |
+
|
| 443 |
+
<h3>Common Mistakes</h3>
|
| 444 |
+
<ul>
|
| 445 |
+
<li>⚠️ Applying PCA before train-test split (data leakage)</li>
|
| 446 |
+
<li>⚠️ Using PCA with categorical features (PCA is for numerical data)</li>
|
| 447 |
+
<li>⚠️ Losing interpretability (PCs are linear combinations)</li>
|
| 448 |
+
</ul>
|
| 449 |
+
</section>
|
| 450 |
+
</main>
|
| 451 |
+
</div>
|
| 452 |
+
|
| 453 |
+
<script src="app.js" defer></script>
|
| 454 |
+
</body>
|
| 455 |
+
</html>
|
feature-engineering/style.css
ADDED
|
@@ -0,0 +1,915 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
:root {
|
| 2 |
+
/* Primitive Color Tokens */
|
| 3 |
+
--color-white: rgba(255, 255, 255, 1);
|
| 4 |
+
--color-black: rgba(0, 0, 0, 1);
|
| 5 |
+
--color-cream-50: rgba(252, 252, 249, 1);
|
| 6 |
+
--color-cream-100: rgba(255, 255, 253, 1);
|
| 7 |
+
--color-gray-200: rgba(245, 245, 245, 1);
|
| 8 |
+
--color-gray-300: rgba(167, 169, 169, 1);
|
| 9 |
+
--color-gray-400: rgba(119, 124, 124, 1);
|
| 10 |
+
--color-slate-500: rgba(98, 108, 113, 1);
|
| 11 |
+
--color-brown-600: rgba(94, 82, 64, 1);
|
| 12 |
+
--color-charcoal-700: rgba(31, 33, 33, 1);
|
| 13 |
+
--color-charcoal-800: rgba(38, 40, 40, 1);
|
| 14 |
+
--color-slate-900: rgba(19, 52, 59, 1);
|
| 15 |
+
--color-teal-300: rgba(50, 184, 198, 1);
|
| 16 |
+
--color-teal-400: rgba(45, 166, 178, 1);
|
| 17 |
+
--color-teal-500: rgba(33, 128, 141, 1);
|
| 18 |
+
--color-teal-600: rgba(29, 116, 128, 1);
|
| 19 |
+
--color-teal-700: rgba(26, 104, 115, 1);
|
| 20 |
+
--color-teal-800: rgba(41, 150, 161, 1);
|
| 21 |
+
--color-red-400: rgba(255, 84, 89, 1);
|
| 22 |
+
--color-red-500: rgba(192, 21, 47, 1);
|
| 23 |
+
--color-orange-400: rgba(230, 129, 97, 1);
|
| 24 |
+
--color-orange-500: rgba(168, 75, 47, 1);
|
| 25 |
+
|
| 26 |
+
/* RGB versions for opacity control */
|
| 27 |
+
--color-brown-600-rgb: 94, 82, 64;
|
| 28 |
+
--color-teal-500-rgb: 33, 128, 141;
|
| 29 |
+
--color-slate-900-rgb: 19, 52, 59;
|
| 30 |
+
--color-slate-500-rgb: 98, 108, 113;
|
| 31 |
+
--color-red-500-rgb: 192, 21, 47;
|
| 32 |
+
--color-red-400-rgb: 255, 84, 89;
|
| 33 |
+
--color-orange-500-rgb: 168, 75, 47;
|
| 34 |
+
--color-orange-400-rgb: 230, 129, 97;
|
| 35 |
+
|
| 36 |
+
/* Background color tokens (Light Mode) */
|
| 37 |
+
--color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
|
| 38 |
+
--color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
|
| 39 |
+
--color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
|
| 40 |
+
--color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
|
| 41 |
+
--color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
|
| 42 |
+
--color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
|
| 43 |
+
--color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
|
| 44 |
+
--color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */
|
| 45 |
+
|
| 46 |
+
/* Semantic Color Tokens (Light Mode) */
|
| 47 |
+
--color-background: var(--color-cream-50);
|
| 48 |
+
--color-surface: var(--color-cream-100);
|
| 49 |
+
--color-text: var(--color-slate-900);
|
| 50 |
+
--color-text-secondary: var(--color-slate-500);
|
| 51 |
+
--color-primary: var(--color-teal-500);
|
| 52 |
+
--color-primary-hover: var(--color-teal-600);
|
| 53 |
+
--color-primary-active: var(--color-teal-700);
|
| 54 |
+
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
|
| 55 |
+
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
|
| 56 |
+
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
|
| 57 |
+
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
|
| 58 |
+
--color-btn-primary-text: var(--color-cream-50);
|
| 59 |
+
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
|
| 60 |
+
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
|
| 61 |
+
--color-error: var(--color-red-500);
|
| 62 |
+
--color-success: var(--color-teal-500);
|
| 63 |
+
--color-warning: var(--color-orange-500);
|
| 64 |
+
--color-info: var(--color-slate-500);
|
| 65 |
+
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
|
| 66 |
+
--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
|
| 67 |
+
|
| 68 |
+
/* Common style patterns */
|
| 69 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 70 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 71 |
+
--status-bg-opacity: 0.15;
|
| 72 |
+
--status-border-opacity: 0.25;
|
| 73 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 74 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 75 |
+
|
| 76 |
+
/* RGB versions for opacity control */
|
| 77 |
+
--color-success-rgb: 33, 128, 141;
|
| 78 |
+
--color-error-rgb: 192, 21, 47;
|
| 79 |
+
--color-warning-rgb: 168, 75, 47;
|
| 80 |
+
--color-info-rgb: 98, 108, 113;
|
| 81 |
+
|
| 82 |
+
/* Typography */
|
| 83 |
+
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
|
| 84 |
+
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
| 85 |
+
--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
|
| 86 |
+
Monaco, Consolas, monospace;
|
| 87 |
+
--font-size-xs: 11px;
|
| 88 |
+
--font-size-sm: 12px;
|
| 89 |
+
--font-size-base: 14px;
|
| 90 |
+
--font-size-md: 14px;
|
| 91 |
+
--font-size-lg: 16px;
|
| 92 |
+
--font-size-xl: 18px;
|
| 93 |
+
--font-size-2xl: 20px;
|
| 94 |
+
--font-size-3xl: 24px;
|
| 95 |
+
--font-size-4xl: 30px;
|
| 96 |
+
--font-weight-normal: 400;
|
| 97 |
+
--font-weight-medium: 500;
|
| 98 |
+
--font-weight-semibold: 550;
|
| 99 |
+
--font-weight-bold: 600;
|
| 100 |
+
--line-height-tight: 1.2;
|
| 101 |
+
--line-height-normal: 1.5;
|
| 102 |
+
--letter-spacing-tight: -0.01em;
|
| 103 |
+
|
| 104 |
+
/* Spacing */
|
| 105 |
+
--space-0: 0;
|
| 106 |
+
--space-1: 1px;
|
| 107 |
+
--space-2: 2px;
|
| 108 |
+
--space-4: 4px;
|
| 109 |
+
--space-6: 6px;
|
| 110 |
+
--space-8: 8px;
|
| 111 |
+
--space-10: 10px;
|
| 112 |
+
--space-12: 12px;
|
| 113 |
+
--space-16: 16px;
|
| 114 |
+
--space-20: 20px;
|
| 115 |
+
--space-24: 24px;
|
| 116 |
+
--space-32: 32px;
|
| 117 |
+
|
| 118 |
+
/* Border Radius */
|
| 119 |
+
--radius-sm: 6px;
|
| 120 |
+
--radius-base: 8px;
|
| 121 |
+
--radius-md: 10px;
|
| 122 |
+
--radius-lg: 12px;
|
| 123 |
+
--radius-full: 9999px;
|
| 124 |
+
|
| 125 |
+
/* Shadows */
|
| 126 |
+
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
|
| 127 |
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
|
| 128 |
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
|
| 129 |
+
0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
| 130 |
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
|
| 131 |
+
0 4px 6px -2px rgba(0, 0, 0, 0.02);
|
| 132 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
| 133 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
|
| 134 |
+
|
| 135 |
+
/* Animation */
|
| 136 |
+
--duration-fast: 150ms;
|
| 137 |
+
--duration-normal: 250ms;
|
| 138 |
+
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
|
| 139 |
+
|
| 140 |
+
/* Layout */
|
| 141 |
+
--container-sm: 640px;
|
| 142 |
+
--container-md: 768px;
|
| 143 |
+
--container-lg: 1024px;
|
| 144 |
+
--container-xl: 1280px;
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
/* Dark mode colors */
|
| 148 |
+
@media (prefers-color-scheme: dark) {
|
| 149 |
+
:root {
|
| 150 |
+
/* RGB versions for opacity control (Dark Mode) */
|
| 151 |
+
--color-gray-400-rgb: 119, 124, 124;
|
| 152 |
+
--color-teal-300-rgb: 50, 184, 198;
|
| 153 |
+
--color-gray-300-rgb: 167, 169, 169;
|
| 154 |
+
--color-gray-200-rgb: 245, 245, 245;
|
| 155 |
+
|
| 156 |
+
/* Background color tokens (Dark Mode) */
|
| 157 |
+
--color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
|
| 158 |
+
--color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
|
| 159 |
+
--color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
|
| 160 |
+
--color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
|
| 161 |
+
--color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
|
| 162 |
+
--color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
|
| 163 |
+
--color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
|
| 164 |
+
--color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
|
| 165 |
+
|
| 166 |
+
/* Semantic Color Tokens (Dark Mode) */
|
| 167 |
+
--color-background: var(--color-charcoal-700);
|
| 168 |
+
--color-surface: var(--color-charcoal-800);
|
| 169 |
+
--color-text: var(--color-gray-200);
|
| 170 |
+
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
|
| 171 |
+
--color-primary: var(--color-teal-300);
|
| 172 |
+
--color-primary-hover: var(--color-teal-400);
|
| 173 |
+
--color-primary-active: var(--color-teal-800);
|
| 174 |
+
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
|
| 175 |
+
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
|
| 176 |
+
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
|
| 177 |
+
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
|
| 178 |
+
--color-error: var(--color-red-400);
|
| 179 |
+
--color-success: var(--color-teal-300);
|
| 180 |
+
--color-warning: var(--color-orange-400);
|
| 181 |
+
--color-info: var(--color-gray-300);
|
| 182 |
+
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
|
| 183 |
+
--color-btn-primary-text: var(--color-slate-900);
|
| 184 |
+
--color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
|
| 185 |
+
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
|
| 186 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
| 187 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
| 188 |
+
--button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 189 |
+
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 190 |
+
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
|
| 191 |
+
|
| 192 |
+
/* Common style patterns - updated for dark mode */
|
| 193 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 194 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 195 |
+
--status-bg-opacity: 0.15;
|
| 196 |
+
--status-border-opacity: 0.25;
|
| 197 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 198 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 199 |
+
|
| 200 |
+
/* RGB versions for dark mode */
|
| 201 |
+
--color-success-rgb: var(--color-teal-300-rgb);
|
| 202 |
+
--color-error-rgb: var(--color-red-400-rgb);
|
| 203 |
+
--color-warning-rgb: var(--color-orange-400-rgb);
|
| 204 |
+
--color-info-rgb: var(--color-gray-300-rgb);
|
| 205 |
+
}
|
| 206 |
+
}
|
| 207 |
+
|
| 208 |
+
/* Data attribute for manual theme switching */
|
| 209 |
+
[data-color-scheme="dark"] {
|
| 210 |
+
/* RGB versions for opacity control (dark mode) */
|
| 211 |
+
--color-gray-400-rgb: 119, 124, 124;
|
| 212 |
+
--color-teal-300-rgb: 50, 184, 198;
|
| 213 |
+
--color-gray-300-rgb: 167, 169, 169;
|
| 214 |
+
--color-gray-200-rgb: 245, 245, 245;
|
| 215 |
+
|
| 216 |
+
/* Colorful background palette - Dark Mode */
|
| 217 |
+
--color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
|
| 218 |
+
--color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
|
| 219 |
+
--color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
|
| 220 |
+
--color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
|
| 221 |
+
--color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
|
| 222 |
+
--color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
|
| 223 |
+
--color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
|
| 224 |
+
--color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
|
| 225 |
+
|
| 226 |
+
/* Semantic Color Tokens (Dark Mode) */
|
| 227 |
+
--color-background: var(--color-charcoal-700);
|
| 228 |
+
--color-surface: var(--color-charcoal-800);
|
| 229 |
+
--color-text: var(--color-gray-200);
|
| 230 |
+
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
|
| 231 |
+
--color-primary: var(--color-teal-300);
|
| 232 |
+
--color-primary-hover: var(--color-teal-400);
|
| 233 |
+
--color-primary-active: var(--color-teal-800);
|
| 234 |
+
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
|
| 235 |
+
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
|
| 236 |
+
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
|
| 237 |
+
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
|
| 238 |
+
--color-error: var(--color-red-400);
|
| 239 |
+
--color-success: var(--color-teal-300);
|
| 240 |
+
--color-warning: var(--color-orange-400);
|
| 241 |
+
--color-info: var(--color-gray-300);
|
| 242 |
+
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
|
| 243 |
+
--color-btn-primary-text: var(--color-slate-900);
|
| 244 |
+
--color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
|
| 245 |
+
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
|
| 246 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
| 247 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
| 248 |
+
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 249 |
+
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
|
| 250 |
+
|
| 251 |
+
/* Common style patterns - updated for dark mode */
|
| 252 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 253 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 254 |
+
--status-bg-opacity: 0.15;
|
| 255 |
+
--status-border-opacity: 0.25;
|
| 256 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 257 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 258 |
+
|
| 259 |
+
/* RGB versions for dark mode */
|
| 260 |
+
--color-success-rgb: var(--color-teal-300-rgb);
|
| 261 |
+
--color-error-rgb: var(--color-red-400-rgb);
|
| 262 |
+
--color-warning-rgb: var(--color-orange-400-rgb);
|
| 263 |
+
--color-info-rgb: var(--color-gray-300-rgb);
|
| 264 |
+
}
|
| 265 |
+
|
| 266 |
+
[data-color-scheme="light"] {
|
| 267 |
+
/* RGB versions for opacity control (light mode) */
|
| 268 |
+
--color-brown-600-rgb: 94, 82, 64;
|
| 269 |
+
--color-teal-500-rgb: 33, 128, 141;
|
| 270 |
+
--color-slate-900-rgb: 19, 52, 59;
|
| 271 |
+
|
| 272 |
+
/* Semantic Color Tokens (Light Mode) */
|
| 273 |
+
--color-background: var(--color-cream-50);
|
| 274 |
+
--color-surface: var(--color-cream-100);
|
| 275 |
+
--color-text: var(--color-slate-900);
|
| 276 |
+
--color-text-secondary: var(--color-slate-500);
|
| 277 |
+
--color-primary: var(--color-teal-500);
|
| 278 |
+
--color-primary-hover: var(--color-teal-600);
|
| 279 |
+
--color-primary-active: var(--color-teal-700);
|
| 280 |
+
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
|
| 281 |
+
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
|
| 282 |
+
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
|
| 283 |
+
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
|
| 284 |
+
--color-btn-primary-text: var(--color-cream-50);
|
| 285 |
+
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
|
| 286 |
+
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
|
| 287 |
+
--color-error: var(--color-red-500);
|
| 288 |
+
--color-success: var(--color-teal-500);
|
| 289 |
+
--color-warning: var(--color-orange-500);
|
| 290 |
+
--color-info: var(--color-slate-500);
|
| 291 |
+
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
|
| 292 |
+
|
| 293 |
+
/* RGB versions for light mode */
|
| 294 |
+
--color-success-rgb: var(--color-teal-500-rgb);
|
| 295 |
+
--color-error-rgb: var(--color-red-500-rgb);
|
| 296 |
+
--color-warning-rgb: var(--color-orange-500-rgb);
|
| 297 |
+
--color-info-rgb: var(--color-slate-500-rgb);
|
| 298 |
+
}
|
| 299 |
+
|
| 300 |
+
/* Base styles */
|
| 301 |
+
html {
|
| 302 |
+
font-size: var(--font-size-base);
|
| 303 |
+
font-family: var(--font-family-base);
|
| 304 |
+
line-height: var(--line-height-normal);
|
| 305 |
+
color: var(--color-text);
|
| 306 |
+
background-color: var(--color-background);
|
| 307 |
+
-webkit-font-smoothing: antialiased;
|
| 308 |
+
box-sizing: border-box;
|
| 309 |
+
}
|
| 310 |
+
|
| 311 |
+
body {
|
| 312 |
+
margin: 0;
|
| 313 |
+
padding: 0;
|
| 314 |
+
}
|
| 315 |
+
|
| 316 |
+
*,
|
| 317 |
+
*::before,
|
| 318 |
+
*::after {
|
| 319 |
+
box-sizing: inherit;
|
| 320 |
+
}
|
| 321 |
+
|
| 322 |
+
/* Typography */
|
| 323 |
+
h1,
|
| 324 |
+
h2,
|
| 325 |
+
h3,
|
| 326 |
+
h4,
|
| 327 |
+
h5,
|
| 328 |
+
h6 {
|
| 329 |
+
margin: 0;
|
| 330 |
+
font-weight: var(--font-weight-semibold);
|
| 331 |
+
line-height: var(--line-height-tight);
|
| 332 |
+
color: var(--color-text);
|
| 333 |
+
letter-spacing: var(--letter-spacing-tight);
|
| 334 |
+
}
|
| 335 |
+
|
| 336 |
+
h1 {
|
| 337 |
+
font-size: var(--font-size-4xl);
|
| 338 |
+
}
|
| 339 |
+
h2 {
|
| 340 |
+
font-size: var(--font-size-3xl);
|
| 341 |
+
}
|
| 342 |
+
h3 {
|
| 343 |
+
font-size: var(--font-size-2xl);
|
| 344 |
+
}
|
| 345 |
+
h4 {
|
| 346 |
+
font-size: var(--font-size-xl);
|
| 347 |
+
}
|
| 348 |
+
h5 {
|
| 349 |
+
font-size: var(--font-size-lg);
|
| 350 |
+
}
|
| 351 |
+
h6 {
|
| 352 |
+
font-size: var(--font-size-md);
|
| 353 |
+
}
|
| 354 |
+
|
| 355 |
+
p {
|
| 356 |
+
margin: 0 0 var(--space-16) 0;
|
| 357 |
+
}
|
| 358 |
+
|
| 359 |
+
a {
|
| 360 |
+
color: var(--color-primary);
|
| 361 |
+
text-decoration: none;
|
| 362 |
+
transition: color var(--duration-fast) var(--ease-standard);
|
| 363 |
+
}
|
| 364 |
+
|
| 365 |
+
a:hover {
|
| 366 |
+
color: var(--color-primary-hover);
|
| 367 |
+
}
|
| 368 |
+
|
| 369 |
+
code,
|
| 370 |
+
pre {
|
| 371 |
+
font-family: var(--font-family-mono);
|
| 372 |
+
font-size: calc(var(--font-size-base) * 0.95);
|
| 373 |
+
background-color: var(--color-secondary);
|
| 374 |
+
border-radius: var(--radius-sm);
|
| 375 |
+
}
|
| 376 |
+
|
| 377 |
+
code {
|
| 378 |
+
padding: var(--space-1) var(--space-4);
|
| 379 |
+
}
|
| 380 |
+
|
| 381 |
+
pre {
|
| 382 |
+
padding: var(--space-16);
|
| 383 |
+
margin: var(--space-16) 0;
|
| 384 |
+
overflow: auto;
|
| 385 |
+
border: 1px solid var(--color-border);
|
| 386 |
+
}
|
| 387 |
+
|
| 388 |
+
pre code {
|
| 389 |
+
background: none;
|
| 390 |
+
padding: 0;
|
| 391 |
+
}
|
| 392 |
+
|
| 393 |
+
/* Buttons */
|
| 394 |
+
.btn {
|
| 395 |
+
display: inline-flex;
|
| 396 |
+
align-items: center;
|
| 397 |
+
justify-content: center;
|
| 398 |
+
padding: var(--space-8) var(--space-16);
|
| 399 |
+
border-radius: var(--radius-base);
|
| 400 |
+
font-size: var(--font-size-base);
|
| 401 |
+
font-weight: 500;
|
| 402 |
+
line-height: 1.5;
|
| 403 |
+
cursor: pointer;
|
| 404 |
+
transition: all var(--duration-normal) var(--ease-standard);
|
| 405 |
+
border: none;
|
| 406 |
+
text-decoration: none;
|
| 407 |
+
position: relative;
|
| 408 |
+
}
|
| 409 |
+
|
| 410 |
+
.btn:focus-visible {
|
| 411 |
+
outline: none;
|
| 412 |
+
box-shadow: var(--focus-ring);
|
| 413 |
+
}
|
| 414 |
+
|
| 415 |
+
.btn--primary {
|
| 416 |
+
background: var(--color-primary);
|
| 417 |
+
color: var(--color-btn-primary-text);
|
| 418 |
+
}
|
| 419 |
+
|
| 420 |
+
.btn--primary:hover {
|
| 421 |
+
background: var(--color-primary-hover);
|
| 422 |
+
}
|
| 423 |
+
|
| 424 |
+
.btn--primary:active {
|
| 425 |
+
background: var(--color-primary-active);
|
| 426 |
+
}
|
| 427 |
+
|
| 428 |
+
.btn--secondary {
|
| 429 |
+
background: var(--color-secondary);
|
| 430 |
+
color: var(--color-text);
|
| 431 |
+
}
|
| 432 |
+
|
| 433 |
+
.btn--secondary:hover {
|
| 434 |
+
background: var(--color-secondary-hover);
|
| 435 |
+
}
|
| 436 |
+
|
| 437 |
+
.btn--secondary:active {
|
| 438 |
+
background: var(--color-secondary-active);
|
| 439 |
+
}
|
| 440 |
+
|
| 441 |
+
.btn--outline {
|
| 442 |
+
background: transparent;
|
| 443 |
+
border: 1px solid var(--color-border);
|
| 444 |
+
color: var(--color-text);
|
| 445 |
+
}
|
| 446 |
+
|
| 447 |
+
.btn--outline:hover {
|
| 448 |
+
background: var(--color-secondary);
|
| 449 |
+
}
|
| 450 |
+
|
| 451 |
+
.btn--sm {
|
| 452 |
+
padding: var(--space-4) var(--space-12);
|
| 453 |
+
font-size: var(--font-size-sm);
|
| 454 |
+
border-radius: var(--radius-sm);
|
| 455 |
+
}
|
| 456 |
+
|
| 457 |
+
.btn--lg {
|
| 458 |
+
padding: var(--space-10) var(--space-20);
|
| 459 |
+
font-size: var(--font-size-lg);
|
| 460 |
+
border-radius: var(--radius-md);
|
| 461 |
+
}
|
| 462 |
+
|
| 463 |
+
.btn--full-width {
|
| 464 |
+
width: 100%;
|
| 465 |
+
}
|
| 466 |
+
|
| 467 |
+
.btn:disabled {
|
| 468 |
+
opacity: 0.5;
|
| 469 |
+
cursor: not-allowed;
|
| 470 |
+
}
|
| 471 |
+
|
| 472 |
+
/* Form elements */
|
| 473 |
+
.form-control {
|
| 474 |
+
display: block;
|
| 475 |
+
width: 100%;
|
| 476 |
+
padding: var(--space-8) var(--space-12);
|
| 477 |
+
font-size: var(--font-size-md);
|
| 478 |
+
line-height: 1.5;
|
| 479 |
+
color: var(--color-text);
|
| 480 |
+
background-color: var(--color-surface);
|
| 481 |
+
border: 1px solid var(--color-border);
|
| 482 |
+
border-radius: var(--radius-base);
|
| 483 |
+
transition: border-color var(--duration-fast) var(--ease-standard),
|
| 484 |
+
box-shadow var(--duration-fast) var(--ease-standard);
|
| 485 |
+
}
|
| 486 |
+
|
| 487 |
+
textarea.form-control {
|
| 488 |
+
font-family: var(--font-family-base);
|
| 489 |
+
font-size: var(--font-size-base);
|
| 490 |
+
}
|
| 491 |
+
|
| 492 |
+
select.form-control {
|
| 493 |
+
padding: var(--space-8) var(--space-12);
|
| 494 |
+
-webkit-appearance: none;
|
| 495 |
+
-moz-appearance: none;
|
| 496 |
+
appearance: none;
|
| 497 |
+
background-image: var(--select-caret-light);
|
| 498 |
+
background-repeat: no-repeat;
|
| 499 |
+
background-position: right var(--space-12) center;
|
| 500 |
+
background-size: 16px;
|
| 501 |
+
padding-right: var(--space-32);
|
| 502 |
+
}
|
| 503 |
+
|
| 504 |
+
/* Add a dark mode specific caret */
|
| 505 |
+
@media (prefers-color-scheme: dark) {
|
| 506 |
+
select.form-control {
|
| 507 |
+
background-image: var(--select-caret-dark);
|
| 508 |
+
}
|
| 509 |
+
}
|
| 510 |
+
|
| 511 |
+
/* Also handle data-color-scheme */
|
| 512 |
+
[data-color-scheme="dark"] select.form-control {
|
| 513 |
+
background-image: var(--select-caret-dark);
|
| 514 |
+
}
|
| 515 |
+
|
| 516 |
+
[data-color-scheme="light"] select.form-control {
|
| 517 |
+
background-image: var(--select-caret-light);
|
| 518 |
+
}
|
| 519 |
+
|
| 520 |
+
.form-control:focus {
|
| 521 |
+
border-color: var(--color-primary);
|
| 522 |
+
outline: var(--focus-outline);
|
| 523 |
+
}
|
| 524 |
+
|
| 525 |
+
.form-label {
|
| 526 |
+
display: block;
|
| 527 |
+
margin-bottom: var(--space-8);
|
| 528 |
+
font-weight: var(--font-weight-medium);
|
| 529 |
+
font-size: var(--font-size-sm);
|
| 530 |
+
}
|
| 531 |
+
|
| 532 |
+
.form-group {
|
| 533 |
+
margin-bottom: var(--space-16);
|
| 534 |
+
}
|
| 535 |
+
|
| 536 |
+
/* Card component */
|
| 537 |
+
.card {
|
| 538 |
+
background-color: var(--color-surface);
|
| 539 |
+
border-radius: var(--radius-lg);
|
| 540 |
+
border: 1px solid var(--color-card-border);
|
| 541 |
+
box-shadow: var(--shadow-sm);
|
| 542 |
+
overflow: hidden;
|
| 543 |
+
transition: box-shadow var(--duration-normal) var(--ease-standard);
|
| 544 |
+
}
|
| 545 |
+
|
| 546 |
+
.card:hover {
|
| 547 |
+
box-shadow: var(--shadow-md);
|
| 548 |
+
}
|
| 549 |
+
|
| 550 |
+
.card__body {
|
| 551 |
+
padding: var(--space-16);
|
| 552 |
+
}
|
| 553 |
+
|
| 554 |
+
.card__header,
|
| 555 |
+
.card__footer {
|
| 556 |
+
padding: var(--space-16);
|
| 557 |
+
border-bottom: 1px solid var(--color-card-border-inner);
|
| 558 |
+
}
|
| 559 |
+
|
| 560 |
+
/* Status indicators - simplified with CSS variables */
|
| 561 |
+
.status {
|
| 562 |
+
display: inline-flex;
|
| 563 |
+
align-items: center;
|
| 564 |
+
padding: var(--space-6) var(--space-12);
|
| 565 |
+
border-radius: var(--radius-full);
|
| 566 |
+
font-weight: var(--font-weight-medium);
|
| 567 |
+
font-size: var(--font-size-sm);
|
| 568 |
+
}
|
| 569 |
+
|
| 570 |
+
.status--success {
|
| 571 |
+
background-color: rgba(
|
| 572 |
+
var(--color-success-rgb, 33, 128, 141),
|
| 573 |
+
var(--status-bg-opacity)
|
| 574 |
+
);
|
| 575 |
+
color: var(--color-success);
|
| 576 |
+
border: 1px solid
|
| 577 |
+
rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
|
| 578 |
+
}
|
| 579 |
+
|
| 580 |
+
.status--error {
|
| 581 |
+
background-color: rgba(
|
| 582 |
+
var(--color-error-rgb, 192, 21, 47),
|
| 583 |
+
var(--status-bg-opacity)
|
| 584 |
+
);
|
| 585 |
+
color: var(--color-error);
|
| 586 |
+
border: 1px solid
|
| 587 |
+
rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
|
| 588 |
+
}
|
| 589 |
+
|
| 590 |
+
.status--warning {
|
| 591 |
+
background-color: rgba(
|
| 592 |
+
var(--color-warning-rgb, 168, 75, 47),
|
| 593 |
+
var(--status-bg-opacity)
|
| 594 |
+
);
|
| 595 |
+
color: var(--color-warning);
|
| 596 |
+
border: 1px solid
|
| 597 |
+
rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
|
| 598 |
+
}
|
| 599 |
+
|
| 600 |
+
.status--info {
|
| 601 |
+
background-color: rgba(
|
| 602 |
+
var(--color-info-rgb, 98, 108, 113),
|
| 603 |
+
var(--status-bg-opacity)
|
| 604 |
+
);
|
| 605 |
+
color: var(--color-info);
|
| 606 |
+
border: 1px solid
|
| 607 |
+
rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
|
| 608 |
+
}
|
| 609 |
+
|
| 610 |
+
/* Container layout */
|
| 611 |
+
.container {
|
| 612 |
+
width: 100%;
|
| 613 |
+
margin-right: auto;
|
| 614 |
+
margin-left: auto;
|
| 615 |
+
padding-right: var(--space-16);
|
| 616 |
+
padding-left: var(--space-16);
|
| 617 |
+
}
|
| 618 |
+
|
| 619 |
+
@media (min-width: 640px) {
|
| 620 |
+
.container {
|
| 621 |
+
max-width: var(--container-sm);
|
| 622 |
+
}
|
| 623 |
+
}
|
| 624 |
+
@media (min-width: 768px) {
|
| 625 |
+
.container {
|
| 626 |
+
max-width: var(--container-md);
|
| 627 |
+
}
|
| 628 |
+
}
|
| 629 |
+
@media (min-width: 1024px) {
|
| 630 |
+
.container {
|
| 631 |
+
max-width: var(--container-lg);
|
| 632 |
+
}
|
| 633 |
+
}
|
| 634 |
+
@media (min-width: 1280px) {
|
| 635 |
+
.container {
|
| 636 |
+
max-width: var(--container-xl);
|
| 637 |
+
}
|
| 638 |
+
}
|
| 639 |
+
|
| 640 |
+
/* Utility classes */
|
| 641 |
+
.flex {
|
| 642 |
+
display: flex;
|
| 643 |
+
}
|
| 644 |
+
.flex-col {
|
| 645 |
+
flex-direction: column;
|
| 646 |
+
}
|
| 647 |
+
.items-center {
|
| 648 |
+
align-items: center;
|
| 649 |
+
}
|
| 650 |
+
.justify-center {
|
| 651 |
+
justify-content: center;
|
| 652 |
+
}
|
| 653 |
+
.justify-between {
|
| 654 |
+
justify-content: space-between;
|
| 655 |
+
}
|
| 656 |
+
.gap-4 {
|
| 657 |
+
gap: var(--space-4);
|
| 658 |
+
}
|
| 659 |
+
.gap-8 {
|
| 660 |
+
gap: var(--space-8);
|
| 661 |
+
}
|
| 662 |
+
.gap-16 {
|
| 663 |
+
gap: var(--space-16);
|
| 664 |
+
}
|
| 665 |
+
|
| 666 |
+
.m-0 {
|
| 667 |
+
margin: 0;
|
| 668 |
+
}
|
| 669 |
+
.mt-8 {
|
| 670 |
+
margin-top: var(--space-8);
|
| 671 |
+
}
|
| 672 |
+
.mb-8 {
|
| 673 |
+
margin-bottom: var(--space-8);
|
| 674 |
+
}
|
| 675 |
+
.mx-8 {
|
| 676 |
+
margin-left: var(--space-8);
|
| 677 |
+
margin-right: var(--space-8);
|
| 678 |
+
}
|
| 679 |
+
.my-8 {
|
| 680 |
+
margin-top: var(--space-8);
|
| 681 |
+
margin-bottom: var(--space-8);
|
| 682 |
+
}
|
| 683 |
+
|
| 684 |
+
.p-0 {
|
| 685 |
+
padding: 0;
|
| 686 |
+
}
|
| 687 |
+
.py-8 {
|
| 688 |
+
padding-top: var(--space-8);
|
| 689 |
+
padding-bottom: var(--space-8);
|
| 690 |
+
}
|
| 691 |
+
.px-8 {
|
| 692 |
+
padding-left: var(--space-8);
|
| 693 |
+
padding-right: var(--space-8);
|
| 694 |
+
}
|
| 695 |
+
.py-16 {
|
| 696 |
+
padding-top: var(--space-16);
|
| 697 |
+
padding-bottom: var(--space-16);
|
| 698 |
+
}
|
| 699 |
+
.px-16 {
|
| 700 |
+
padding-left: var(--space-16);
|
| 701 |
+
padding-right: var(--space-16);
|
| 702 |
+
}
|
| 703 |
+
|
| 704 |
+
.block {
|
| 705 |
+
display: block;
|
| 706 |
+
}
|
| 707 |
+
.hidden {
|
| 708 |
+
display: none;
|
| 709 |
+
}
|
| 710 |
+
|
| 711 |
+
/* Accessibility */
|
| 712 |
+
.sr-only {
|
| 713 |
+
position: absolute;
|
| 714 |
+
width: 1px;
|
| 715 |
+
height: 1px;
|
| 716 |
+
padding: 0;
|
| 717 |
+
margin: -1px;
|
| 718 |
+
overflow: hidden;
|
| 719 |
+
clip: rect(0, 0, 0, 0);
|
| 720 |
+
white-space: nowrap;
|
| 721 |
+
border-width: 0;
|
| 722 |
+
}
|
| 723 |
+
|
| 724 |
+
:focus-visible {
|
| 725 |
+
outline: var(--focus-outline);
|
| 726 |
+
outline-offset: 2px;
|
| 727 |
+
}
|
| 728 |
+
|
| 729 |
+
/* Dark mode specifics */
|
| 730 |
+
[data-color-scheme="dark"] .btn--outline {
|
| 731 |
+
border: 1px solid var(--color-border-secondary);
|
| 732 |
+
}
|
| 733 |
+
|
| 734 |
+
@font-face {
|
| 735 |
+
font-family: 'FKGroteskNeue';
|
| 736 |
+
src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
|
| 737 |
+
format('woff2');
|
| 738 |
+
}
|
| 739 |
+
|
| 740 |
+
/* END PERPLEXITY DESIGN SYSTEM */
|
| 741 |
+
/* =========================================================================
|
| 742 |
+
PERPLEXITY DESIGN SYSTEM — FULL CSS (abbreviated here for brevity)
|
| 743 |
+
========================================================================= */
|
| 744 |
+
|
| 745 |
+
/* --- DESIGN SYSTEM ROOT TOKENS (COPIED FROM SPEC) ----------------------- */
|
| 746 |
+
:root {
|
| 747 |
+
/* Primitive Color Tokens */
|
| 748 |
+
--color-white: rgba(255, 255, 255, 1);
|
| 749 |
+
--color-black: rgba(0, 0, 0, 1);
|
| 750 |
+
--color-cream-50: rgba(252, 252, 249, 1);
|
| 751 |
+
--color-cream-100: rgba(255, 255, 253, 1);
|
| 752 |
+
--color-gray-200: rgba(245, 245, 245, 1);
|
| 753 |
+
--color-gray-300: rgba(167, 169, 169, 1);
|
| 754 |
+
--color-gray-400: rgba(119, 124, 124, 1);
|
| 755 |
+
--color-slate-500: rgba(98, 108, 113, 1);
|
| 756 |
+
--color-brown-600: rgba(94, 82, 64, 1);
|
| 757 |
+
--color-charcoal-700: rgba(31, 33, 33, 1);
|
| 758 |
+
--color-charcoal-800: rgba(38, 40, 40, 1);
|
| 759 |
+
--color-slate-900: rgba(19, 52, 59, 1);
|
| 760 |
+
--color-teal-300: rgba(50, 184, 198, 1);
|
| 761 |
+
--color-teal-400: rgba(45, 166, 178, 1);
|
| 762 |
+
--color-teal-500: rgba(33, 128, 141, 1);
|
| 763 |
+
--color-teal-600: rgba(29, 116, 128, 1);
|
| 764 |
+
--color-teal-700: rgba(26, 104, 115, 1);
|
| 765 |
+
--color-teal-800: rgba(41, 150, 161, 1);
|
| 766 |
+
--color-red-400: rgba(255, 84, 89, 1);
|
| 767 |
+
--color-red-500: rgba(192, 21, 47, 1);
|
| 768 |
+
--color-orange-400: rgba(230, 129, 97, 1);
|
| 769 |
+
--color-orange-500: rgba(168, 75, 47, 1);
|
| 770 |
+
|
| 771 |
+
/* Typography & spacing tokens ... (omitted here but included in full spec) */
|
| 772 |
+
}
|
| 773 |
+
|
| 774 |
+
/* Base styles from design system (headings, forms, buttons) ... FULL spec */
|
| 775 |
+
|
| 776 |
+
/* =========================================================================
|
| 777 |
+
PROJECT-SPECIFIC OVERRIDES FOR DARK THEME
|
| 778 |
+
========================================================================= */
|
| 779 |
+
:root {
|
| 780 |
+
/* Override semantic tokens to requested palette */
|
| 781 |
+
--color-background: #0a0e27;
|
| 782 |
+
--color-surface: #1e2139;
|
| 783 |
+
--color-text: #e0e6ed;
|
| 784 |
+
--color-text-secondary: #a8b2c1;
|
| 785 |
+
--color-primary: #00d4ff;
|
| 786 |
+
--color-primary-hover: #00b0d1;
|
| 787 |
+
--color-primary-active: #0099ff;
|
| 788 |
+
--color-success: #00ffff;
|
| 789 |
+
--color-warning: #ff6b35;
|
| 790 |
+
}
|
| 791 |
+
|
| 792 |
+
/* === Layout === */
|
| 793 |
+
body {
|
| 794 |
+
background: var(--color-background);
|
| 795 |
+
color: var(--color-text);
|
| 796 |
+
display: flex;
|
| 797 |
+
min-height: 100vh;
|
| 798 |
+
}
|
| 799 |
+
|
| 800 |
+
.app {
|
| 801 |
+
flex: 1;
|
| 802 |
+
}
|
| 803 |
+
|
| 804 |
+
/* === Sidebar === */
|
| 805 |
+
.sidebar {
|
| 806 |
+
width: 260px;
|
| 807 |
+
background: var(--color-surface);
|
| 808 |
+
padding: 24px 16px;
|
| 809 |
+
position: sticky;
|
| 810 |
+
top: 0;
|
| 811 |
+
height: 100vh;
|
| 812 |
+
overflow-y: auto;
|
| 813 |
+
}
|
| 814 |
+
.sidebar__title {
|
| 815 |
+
font-size: 1.25rem;
|
| 816 |
+
margin-bottom: 24px;
|
| 817 |
+
color: var(--color-primary);
|
| 818 |
+
}
|
| 819 |
+
.nav__list {
|
| 820 |
+
list-style: none;
|
| 821 |
+
padding: 0;
|
| 822 |
+
margin: 0;
|
| 823 |
+
}
|
| 824 |
+
.nav__link {
|
| 825 |
+
color: var(--color-text-secondary);
|
| 826 |
+
display: block;
|
| 827 |
+
padding: 8px 12px;
|
| 828 |
+
border-radius: 6px;
|
| 829 |
+
transition: background 150ms ease;
|
| 830 |
+
}
|
| 831 |
+
.nav__link:hover {
|
| 832 |
+
background: rgba(0, 212, 255, 0.12);
|
| 833 |
+
color: var(--color-primary);
|
| 834 |
+
}
|
| 835 |
+
.nav__link.active {
|
| 836 |
+
background: rgba(0, 212, 255, 0.2);
|
| 837 |
+
color: var(--color-primary);
|
| 838 |
+
}
|
| 839 |
+
|
| 840 |
+
/* === Main Content === */
|
| 841 |
+
.content {
|
| 842 |
+
flex: 1;
|
| 843 |
+
padding: 32px;
|
| 844 |
+
overflow-x: hidden;
|
| 845 |
+
}
|
| 846 |
+
.topic-section {
|
| 847 |
+
margin-bottom: 96px;
|
| 848 |
+
max-width: 840px;
|
| 849 |
+
}
|
| 850 |
+
.topic-section h2 {
|
| 851 |
+
margin-bottom: 12px;
|
| 852 |
+
color: var(--color-primary);
|
| 853 |
+
}
|
| 854 |
+
.canvas-wrapper {
|
| 855 |
+
border: 1px solid rgba(255, 255, 255, 0.07);
|
| 856 |
+
border-radius: 8px;
|
| 857 |
+
margin: 16px 0 24px 0;
|
| 858 |
+
background: #1a1d35;
|
| 859 |
+
display: flex;
|
| 860 |
+
justify-content: center;
|
| 861 |
+
align-items: center;
|
| 862 |
+
padding: 12px;
|
| 863 |
+
overflow: auto;
|
| 864 |
+
}
|
| 865 |
+
|
| 866 |
+
/* === Callouts === */
|
| 867 |
+
.callout {
|
| 868 |
+
padding: 12px 16px;
|
| 869 |
+
border-left: 4px solid var(--color-primary);
|
| 870 |
+
border-radius: 6px;
|
| 871 |
+
margin-bottom: 16px;
|
| 872 |
+
background: rgba(0, 212, 255, 0.08);
|
| 873 |
+
}
|
| 874 |
+
.callout--mistake {
|
| 875 |
+
border-color: var(--color-warning);
|
| 876 |
+
background: rgba(255, 107, 53, 0.12);
|
| 877 |
+
}
|
| 878 |
+
.callout--tip {
|
| 879 |
+
border-color: var(--color-success);
|
| 880 |
+
background: rgba(0, 255, 255, 0.12);
|
| 881 |
+
}
|
| 882 |
+
|
| 883 |
+
/* === Info Card === */
|
| 884 |
+
.info-card {
|
| 885 |
+
background: var(--color-surface);
|
| 886 |
+
border: 1px solid rgba(255, 255, 255, 0.06);
|
| 887 |
+
border-radius: 8px;
|
| 888 |
+
padding: 16px;
|
| 889 |
+
margin: 16px 0;
|
| 890 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
| 891 |
+
}
|
| 892 |
+
|
| 893 |
+
/* === Utility === */
|
| 894 |
+
.w-100 {
|
| 895 |
+
width: 100%;
|
| 896 |
+
}
|
| 897 |
+
|
| 898 |
+
/* Buttons overrides to fit theme */
|
| 899 |
+
.btn--primary {
|
| 900 |
+
background: var(--color-primary);
|
| 901 |
+
color: var(--color-black);
|
| 902 |
+
margin-right: 8px;
|
| 903 |
+
margin-bottom: 8px;
|
| 904 |
+
}
|
| 905 |
+
.btn--primary:hover {
|
| 906 |
+
background: var(--color-primary-hover);
|
| 907 |
+
}
|
| 908 |
+
.btn--secondary {
|
| 909 |
+
background: transparent;
|
| 910 |
+
border: 1px solid var(--color-primary);
|
| 911 |
+
color: var(--color-primary);
|
| 912 |
+
}
|
| 913 |
+
.btn--secondary:hover {
|
| 914 |
+
background: rgba(0, 212, 255, 0.15);
|
| 915 |
+
}
|
math-ds-complete/app.js
ADDED
|
@@ -0,0 +1,1681 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// ===== CONFIGURATION & CONSTANTS =====
|
| 2 |
+
const COLORS = {
|
| 3 |
+
primary: '#4a90e2',
|
| 4 |
+
cyan: '#64ffda',
|
| 5 |
+
orange: '#ff6b6b',
|
| 6 |
+
green: '#51cf66',
|
| 7 |
+
background: '#0f3460',
|
| 8 |
+
text: '#e1e1e1',
|
| 9 |
+
textSecondary: '#a0a0a0'
|
| 10 |
+
};
|
| 11 |
+
|
| 12 |
+
const chartColors = ['#1FB8CD', '#FFC185', '#B4413C', '#ECEBD5', '#5D878F', '#DB4545', '#D2BA4C', '#964325', '#944454', '#13343B'];
|
| 13 |
+
|
| 14 |
+
// ===== STATE MANAGEMENT =====
|
| 15 |
+
let currentTopic = 1;
|
| 16 |
+
let currentSubject = 'statistics';
|
| 17 |
+
let animationFrames = {};
|
| 18 |
+
|
| 19 |
+
// ===== INITIALIZATION =====
|
| 20 |
+
document.addEventListener('DOMContentLoaded', () => {
|
| 21 |
+
initNavigation();
|
| 22 |
+
initSubjectTabs();
|
| 23 |
+
initInteractiveElements();
|
| 24 |
+
setupScrollObserver();
|
| 25 |
+
initializeAllVisualizations();
|
| 26 |
+
|
| 27 |
+
// Show initial subject
|
| 28 |
+
switchSubject('statistics');
|
| 29 |
+
});
|
| 30 |
+
|
| 31 |
+
// ===== SUBJECT SWITCHING =====
|
| 32 |
+
function initSubjectTabs() {
|
| 33 |
+
const tabs = document.querySelectorAll('.subject-tab');
|
| 34 |
+
tabs.forEach(tab => {
|
| 35 |
+
tab.addEventListener('click', () => {
|
| 36 |
+
const subject = tab.dataset.subject;
|
| 37 |
+
switchSubject(subject);
|
| 38 |
+
});
|
| 39 |
+
});
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
function switchSubject(subject) {
|
| 43 |
+
currentSubject = subject;
|
| 44 |
+
|
| 45 |
+
// Update active tab
|
| 46 |
+
document.querySelectorAll('.subject-tab').forEach(tab => {
|
| 47 |
+
tab.classList.remove('active');
|
| 48 |
+
if (tab.dataset.subject === subject) {
|
| 49 |
+
tab.classList.add('active');
|
| 50 |
+
}
|
| 51 |
+
});
|
| 52 |
+
|
| 53 |
+
// Update sidebar title
|
| 54 |
+
const titles = {
|
| 55 |
+
'statistics': 'Statistics Content',
|
| 56 |
+
'linear-algebra': 'Linear Algebra Content',
|
| 57 |
+
'calculus': 'Calculus Content',
|
| 58 |
+
'data-science': 'Data Science Content'
|
| 59 |
+
};
|
| 60 |
+
const sidebarTitle = document.getElementById('sidebarTitle');
|
| 61 |
+
if (sidebarTitle) {
|
| 62 |
+
sidebarTitle.textContent = titles[subject];
|
| 63 |
+
}
|
| 64 |
+
|
| 65 |
+
// Show/hide sidebar modules
|
| 66 |
+
document.querySelectorAll('.module').forEach(module => {
|
| 67 |
+
const moduleSubject = module.dataset.subject;
|
| 68 |
+
if (moduleSubject) {
|
| 69 |
+
module.style.display = moduleSubject === subject ? 'block' : 'none';
|
| 70 |
+
} else {
|
| 71 |
+
// Statistics modules (no data-subject attribute)
|
| 72 |
+
module.style.display = subject === 'statistics' ? 'block' : 'none';
|
| 73 |
+
}
|
| 74 |
+
});
|
| 75 |
+
|
| 76 |
+
// Show/hide topic sections
|
| 77 |
+
document.querySelectorAll('.topic-section').forEach(section => {
|
| 78 |
+
const sectionSubject = section.dataset.subject || 'statistics';
|
| 79 |
+
section.style.display = sectionSubject === subject ? 'block' : 'none';
|
| 80 |
+
});
|
| 81 |
+
|
| 82 |
+
// Scroll to first topic of subject
|
| 83 |
+
const firstTopic = document.querySelector(`.topic-section[data-subject="${subject}"], .topic-section:not([data-subject])`);
|
| 84 |
+
if (firstTopic && subject !== 'statistics') {
|
| 85 |
+
setTimeout(() => {
|
| 86 |
+
firstTopic.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
| 87 |
+
}, 100);
|
| 88 |
+
} else if (subject === 'statistics') {
|
| 89 |
+
const statsFirst = document.getElementById('topic-1');
|
| 90 |
+
if (statsFirst) {
|
| 91 |
+
setTimeout(() => {
|
| 92 |
+
statsFirst.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
| 93 |
+
}, 100);
|
| 94 |
+
}
|
| 95 |
+
}
|
| 96 |
+
}
|
| 97 |
+
|
| 98 |
+
// ===== NAVIGATION =====
|
| 99 |
+
function initNavigation() {
|
| 100 |
+
// Mobile menu toggle
|
| 101 |
+
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
|
| 102 |
+
const sidebar = document.getElementById('sidebar');
|
| 103 |
+
|
| 104 |
+
if (mobileMenuBtn) {
|
| 105 |
+
mobileMenuBtn.addEventListener('click', () => {
|
| 106 |
+
sidebar.classList.toggle('active');
|
| 107 |
+
});
|
| 108 |
+
}
|
| 109 |
+
|
| 110 |
+
// Topic link navigation
|
| 111 |
+
const topicLinks = document.querySelectorAll('.topic-link');
|
| 112 |
+
topicLinks.forEach(link => {
|
| 113 |
+
link.addEventListener('click', (e) => {
|
| 114 |
+
e.preventDefault();
|
| 115 |
+
const topicId = link.getAttribute('data-topic');
|
| 116 |
+
const target = document.getElementById(`topic-${topicId}`);
|
| 117 |
+
|
| 118 |
+
if (target) {
|
| 119 |
+
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
| 120 |
+
updateActiveLink(topicId);
|
| 121 |
+
|
| 122 |
+
// Close mobile menu if open
|
| 123 |
+
if (window.innerWidth <= 1024) {
|
| 124 |
+
sidebar.classList.remove('active');
|
| 125 |
+
}
|
| 126 |
+
}
|
| 127 |
+
});
|
| 128 |
+
});
|
| 129 |
+
}
|
| 130 |
+
|
| 131 |
+
function updateActiveLink(topicId) {
|
| 132 |
+
document.querySelectorAll('.topic-link').forEach(link => {
|
| 133 |
+
link.classList.remove('active');
|
| 134 |
+
});
|
| 135 |
+
const activeLink = document.querySelector(`[data-topic="${topicId}"]`);
|
| 136 |
+
if (activeLink) {
|
| 137 |
+
activeLink.classList.add('active');
|
| 138 |
+
}
|
| 139 |
+
currentTopic = parseInt(topicId);
|
| 140 |
+
}
|
| 141 |
+
|
| 142 |
+
// ===== SCROLL OBSERVER =====
|
| 143 |
+
function setupScrollObserver() {
|
| 144 |
+
const options = {
|
| 145 |
+
root: null,
|
| 146 |
+
rootMargin: '-100px',
|
| 147 |
+
threshold: 0.3
|
| 148 |
+
};
|
| 149 |
+
|
| 150 |
+
const observer = new IntersectionObserver((entries) => {
|
| 151 |
+
entries.forEach(entry => {
|
| 152 |
+
if (entry.isIntersecting) {
|
| 153 |
+
const topicId = entry.target.id.split('-')[1];
|
| 154 |
+
updateActiveLink(topicId);
|
| 155 |
+
}
|
| 156 |
+
});
|
| 157 |
+
}, options);
|
| 158 |
+
|
| 159 |
+
document.querySelectorAll('.topic-section').forEach(section => {
|
| 160 |
+
observer.observe(section);
|
| 161 |
+
});
|
| 162 |
+
}
|
| 163 |
+
|
| 164 |
+
// ===== CANVAS UTILITIES =====
|
| 165 |
+
function clearCanvas(ctx, canvas) {
|
| 166 |
+
ctx.fillStyle = COLORS.background;
|
| 167 |
+
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
| 168 |
+
}
|
| 169 |
+
|
| 170 |
+
function drawText(ctx, text, x, y, fontSize = 14, color = COLORS.text, align = 'center') {
|
| 171 |
+
ctx.fillStyle = color;
|
| 172 |
+
ctx.font = `${fontSize}px 'Segoe UI', sans-serif`;
|
| 173 |
+
ctx.textAlign = align;
|
| 174 |
+
ctx.fillText(text, x, y);
|
| 175 |
+
}
|
| 176 |
+
|
| 177 |
+
function drawCircle(ctx, x, y, radius, color, filled = true) {
|
| 178 |
+
ctx.beginPath();
|
| 179 |
+
ctx.arc(x, y, radius, 0, Math.PI * 2);
|
| 180 |
+
if (filled) {
|
| 181 |
+
ctx.fillStyle = color;
|
| 182 |
+
ctx.fill();
|
| 183 |
+
} else {
|
| 184 |
+
ctx.strokeStyle = color;
|
| 185 |
+
ctx.lineWidth = 2;
|
| 186 |
+
ctx.stroke();
|
| 187 |
+
}
|
| 188 |
+
}
|
| 189 |
+
|
| 190 |
+
function drawLine(ctx, x1, y1, x2, y2, color = COLORS.text, width = 1) {
|
| 191 |
+
ctx.beginPath();
|
| 192 |
+
ctx.moveTo(x1, y1);
|
| 193 |
+
ctx.lineTo(x2, y2);
|
| 194 |
+
ctx.strokeStyle = color;
|
| 195 |
+
ctx.lineWidth = width;
|
| 196 |
+
ctx.stroke();
|
| 197 |
+
}
|
| 198 |
+
|
| 199 |
+
function drawRect(ctx, x, y, width, height, color, filled = true) {
|
| 200 |
+
if (filled) {
|
| 201 |
+
ctx.fillStyle = color;
|
| 202 |
+
ctx.fillRect(x, y, width, height);
|
| 203 |
+
} else {
|
| 204 |
+
ctx.strokeStyle = color;
|
| 205 |
+
ctx.lineWidth = 2;
|
| 206 |
+
ctx.strokeRect(x, y, width, height);
|
| 207 |
+
}
|
| 208 |
+
}
|
| 209 |
+
|
| 210 |
+
// ===== STATISTICAL CALCULATIONS =====
|
| 211 |
+
function calculateMean(data) {
|
| 212 |
+
return data.reduce((sum, val) => sum + val, 0) / data.length;
|
| 213 |
+
}
|
| 214 |
+
|
| 215 |
+
function calculateMedian(data) {
|
| 216 |
+
const sorted = [...data].sort((a, b) => a - b);
|
| 217 |
+
const mid = Math.floor(sorted.length / 2);
|
| 218 |
+
return sorted.length % 2 === 0
|
| 219 |
+
? (sorted[mid - 1] + sorted[mid]) / 2
|
| 220 |
+
: sorted[mid];
|
| 221 |
+
}
|
| 222 |
+
|
| 223 |
+
function calculateMode(data) {
|
| 224 |
+
const frequency = {};
|
| 225 |
+
let maxFreq = 0;
|
| 226 |
+
|
| 227 |
+
data.forEach(val => {
|
| 228 |
+
frequency[val] = (frequency[val] || 0) + 1;
|
| 229 |
+
maxFreq = Math.max(maxFreq, frequency[val]);
|
| 230 |
+
});
|
| 231 |
+
|
| 232 |
+
if (maxFreq === 1) return 'None';
|
| 233 |
+
|
| 234 |
+
const modes = Object.keys(frequency).filter(key => frequency[key] === maxFreq);
|
| 235 |
+
return modes.join(', ');
|
| 236 |
+
}
|
| 237 |
+
|
| 238 |
+
function calculateVariance(data, isSample = true) {
|
| 239 |
+
const mean = calculateMean(data);
|
| 240 |
+
const squaredDiffs = data.map(val => Math.pow(val - mean, 2));
|
| 241 |
+
const divisor = isSample ? data.length - 1 : data.length;
|
| 242 |
+
return squaredDiffs.reduce((sum, val) => sum + val, 0) / divisor;
|
| 243 |
+
}
|
| 244 |
+
|
| 245 |
+
function calculateStdDev(data, isSample = true) {
|
| 246 |
+
return Math.sqrt(calculateVariance(data, isSample));
|
| 247 |
+
}
|
| 248 |
+
|
| 249 |
+
function calculateQuartiles(data) {
|
| 250 |
+
const sorted = [...data].sort((a, b) => a - b);
|
| 251 |
+
const q2 = calculateMedian(sorted);
|
| 252 |
+
const midIndex = Math.floor(sorted.length / 2);
|
| 253 |
+
|
| 254 |
+
const lowerHalf = sorted.length % 2 === 0
|
| 255 |
+
? sorted.slice(0, midIndex)
|
| 256 |
+
: sorted.slice(0, midIndex);
|
| 257 |
+
const upperHalf = sorted.length % 2 === 0
|
| 258 |
+
? sorted.slice(midIndex)
|
| 259 |
+
: sorted.slice(midIndex + 1);
|
| 260 |
+
|
| 261 |
+
const q1 = calculateMedian(lowerHalf);
|
| 262 |
+
const q3 = calculateMedian(upperHalf);
|
| 263 |
+
|
| 264 |
+
return { q1, q2, q3 };
|
| 265 |
+
}
|
| 266 |
+
|
| 267 |
+
function calculateIQR(data) {
|
| 268 |
+
const { q1, q3 } = calculateQuartiles(data);
|
| 269 |
+
const iqr = q3 - q1;
|
| 270 |
+
const lowerFence = q1 - 1.5 * iqr;
|
| 271 |
+
const upperFence = q3 + 1.5 * iqr;
|
| 272 |
+
|
| 273 |
+
return { q1, q3, iqr, lowerFence, upperFence };
|
| 274 |
+
}
|
| 275 |
+
|
| 276 |
+
function detectOutliers(data) {
|
| 277 |
+
const { lowerFence, upperFence } = calculateIQR(data);
|
| 278 |
+
return data.filter(val => val < lowerFence || val > upperFence);
|
| 279 |
+
}
|
| 280 |
+
|
| 281 |
+
function calculateCovariance(x, y) {
|
| 282 |
+
const meanX = calculateMean(x);
|
| 283 |
+
const meanY = calculateMean(y);
|
| 284 |
+
let sum = 0;
|
| 285 |
+
|
| 286 |
+
for (let i = 0; i < x.length; i++) {
|
| 287 |
+
sum += (x[i] - meanX) * (y[i] - meanY);
|
| 288 |
+
}
|
| 289 |
+
|
| 290 |
+
return sum / (x.length - 1);
|
| 291 |
+
}
|
| 292 |
+
|
| 293 |
+
function calculateCorrelation(x, y) {
|
| 294 |
+
const cov = calculateCovariance(x, y);
|
| 295 |
+
const stdX = calculateStdDev(x);
|
| 296 |
+
const stdY = calculateStdDev(y);
|
| 297 |
+
return cov / (stdX * stdY);
|
| 298 |
+
}
|
| 299 |
+
|
| 300 |
+
// ===== VISUALIZATION FUNCTIONS =====
|
| 301 |
+
|
| 302 |
+
// Population vs Sample Visualization
|
| 303 |
+
function initPopulationSampleViz() {
|
| 304 |
+
const canvas = document.getElementById('populationSampleCanvas');
|
| 305 |
+
if (!canvas) return;
|
| 306 |
+
|
| 307 |
+
const ctx = canvas.getContext('2d');
|
| 308 |
+
let population = [];
|
| 309 |
+
let sample = [];
|
| 310 |
+
let sampleSize = 30;
|
| 311 |
+
|
| 312 |
+
// Initialize population
|
| 313 |
+
for (let i = 0; i < 200; i++) {
|
| 314 |
+
population.push({
|
| 315 |
+
x: Math.random() * (canvas.width - 40) + 20,
|
| 316 |
+
y: Math.random() * (canvas.height - 40) + 20,
|
| 317 |
+
inSample: false
|
| 318 |
+
});
|
| 319 |
+
}
|
| 320 |
+
|
| 321 |
+
function draw() {
|
| 322 |
+
clearCanvas(ctx, canvas);
|
| 323 |
+
|
| 324 |
+
// Draw title
|
| 325 |
+
drawText(ctx, 'Population (All dots) vs Sample (Highlighted)', canvas.width / 2, 30, 16, COLORS.cyan);
|
| 326 |
+
|
| 327 |
+
// Draw population
|
| 328 |
+
population.forEach(point => {
|
| 329 |
+
const color = point.inSample ? COLORS.orange : COLORS.primary;
|
| 330 |
+
const radius = point.inSample ? 6 : 4;
|
| 331 |
+
drawCircle(ctx, point.x, point.y, radius, color);
|
| 332 |
+
});
|
| 333 |
+
|
| 334 |
+
// Draw statistics
|
| 335 |
+
const popCount = population.length;
|
| 336 |
+
const sampleCount = population.filter(p => p.inSample).length;
|
| 337 |
+
drawText(ctx, `Population Size: N = ${popCount}`, 150, canvas.height - 20, 14, COLORS.text, 'center');
|
| 338 |
+
drawText(ctx, `Sample Size: n = ${sampleCount}`, canvas.width - 150, canvas.height - 20, 14, COLORS.orange, 'center');
|
| 339 |
+
}
|
| 340 |
+
|
| 341 |
+
function takeSample() {
|
| 342 |
+
// Reset all
|
| 343 |
+
population.forEach(p => p.inSample = false);
|
| 344 |
+
|
| 345 |
+
// Randomly select sample
|
| 346 |
+
const shuffled = [...population].sort(() => Math.random() - 0.5);
|
| 347 |
+
for (let i = 0; i < Math.min(sampleSize, population.length); i++) {
|
| 348 |
+
shuffled[i].inSample = true;
|
| 349 |
+
}
|
| 350 |
+
|
| 351 |
+
draw();
|
| 352 |
+
}
|
| 353 |
+
|
| 354 |
+
// Event listeners
|
| 355 |
+
const sampleBtn = document.getElementById('sampleBtn');
|
| 356 |
+
const resetBtn = document.getElementById('resetPopBtn');
|
| 357 |
+
const sizeSlider = document.getElementById('sampleSizeSlider');
|
| 358 |
+
const sizeLabel = document.getElementById('sampleSizeLabel');
|
| 359 |
+
|
| 360 |
+
if (sampleBtn) {
|
| 361 |
+
sampleBtn.addEventListener('click', takeSample);
|
| 362 |
+
}
|
| 363 |
+
|
| 364 |
+
if (resetBtn) {
|
| 365 |
+
resetBtn.addEventListener('click', () => {
|
| 366 |
+
population.forEach(p => p.inSample = false);
|
| 367 |
+
draw();
|
| 368 |
+
});
|
| 369 |
+
}
|
| 370 |
+
|
| 371 |
+
if (sizeSlider) {
|
| 372 |
+
sizeSlider.addEventListener('input', (e) => {
|
| 373 |
+
sampleSize = parseInt(e.target.value);
|
| 374 |
+
if (sizeLabel) {
|
| 375 |
+
sizeLabel.textContent = sampleSize;
|
| 376 |
+
}
|
| 377 |
+
});
|
| 378 |
+
}
|
| 379 |
+
|
| 380 |
+
draw();
|
| 381 |
+
}
|
| 382 |
+
|
| 383 |
+
// Central Tendency Visualization
|
| 384 |
+
function initCentralTendencyViz() {
|
| 385 |
+
const canvas = document.getElementById('centralTendencyCanvas');
|
| 386 |
+
if (!canvas) return;
|
| 387 |
+
|
| 388 |
+
const ctx = canvas.getContext('2d');
|
| 389 |
+
let data = [10, 20, 30, 40, 50];
|
| 390 |
+
|
| 391 |
+
function parseInput(input) {
|
| 392 |
+
return input.split(',').map(s => parseFloat(s.trim())).filter(n => !isNaN(n));
|
| 393 |
+
}
|
| 394 |
+
|
| 395 |
+
function draw() {
|
| 396 |
+
clearCanvas(ctx, canvas);
|
| 397 |
+
|
| 398 |
+
if (data.length === 0) {
|
| 399 |
+
drawText(ctx, 'Please enter valid numbers', canvas.width / 2, canvas.height / 2, 16, COLORS.orange);
|
| 400 |
+
return;
|
| 401 |
+
}
|
| 402 |
+
|
| 403 |
+
const sorted = [...data].sort((a, b) => a - b);
|
| 404 |
+
const min = Math.min(...sorted);
|
| 405 |
+
const max = Math.max(...sorted);
|
| 406 |
+
const range = max - min || 1;
|
| 407 |
+
const padding = 80;
|
| 408 |
+
const width = canvas.width - 2 * padding;
|
| 409 |
+
|
| 410 |
+
// Calculate statistics
|
| 411 |
+
const mean = calculateMean(data);
|
| 412 |
+
const median = calculateMedian(data);
|
| 413 |
+
const mode = calculateMode(data);
|
| 414 |
+
|
| 415 |
+
// Update results display
|
| 416 |
+
document.getElementById('meanResult').textContent = mean.toFixed(2);
|
| 417 |
+
document.getElementById('medianResult').textContent = median.toFixed(2);
|
| 418 |
+
document.getElementById('modeResult').textContent = mode;
|
| 419 |
+
|
| 420 |
+
// Draw axis
|
| 421 |
+
const axisY = canvas.height / 2;
|
| 422 |
+
drawLine(ctx, padding, axisY, canvas.width - padding, axisY, COLORS.text, 2);
|
| 423 |
+
|
| 424 |
+
// Draw data points
|
| 425 |
+
sorted.forEach((val, idx) => {
|
| 426 |
+
const x = padding + ((val - min) / range) * width;
|
| 427 |
+
drawCircle(ctx, x, axisY, 8, COLORS.primary);
|
| 428 |
+
drawText(ctx, val.toString(), x, axisY + 30, 12, COLORS.text);
|
| 429 |
+
});
|
| 430 |
+
|
| 431 |
+
// Draw mean
|
| 432 |
+
const meanX = padding + ((mean - min) / range) * width;
|
| 433 |
+
drawLine(ctx, meanX, axisY - 60, meanX, axisY + 60, COLORS.cyan, 3);
|
| 434 |
+
drawText(ctx, `Mean: ${mean.toFixed(2)}`, meanX, axisY - 70, 14, COLORS.cyan);
|
| 435 |
+
|
| 436 |
+
// Draw median
|
| 437 |
+
const medianX = padding + ((median - min) / range) * width;
|
| 438 |
+
drawLine(ctx, medianX, axisY - 50, medianX, axisY + 50, COLORS.orange, 2);
|
| 439 |
+
drawText(ctx, `Median: ${median.toFixed(2)}`, medianX, axisY - 55, 12, COLORS.orange);
|
| 440 |
+
}
|
| 441 |
+
|
| 442 |
+
// Event listeners
|
| 443 |
+
const input = document.getElementById('centralTendencyInput');
|
| 444 |
+
const calcBtn = document.getElementById('calculateCentralBtn');
|
| 445 |
+
const randomBtn = document.getElementById('randomDataBtn');
|
| 446 |
+
|
| 447 |
+
if (calcBtn && input) {
|
| 448 |
+
calcBtn.addEventListener('click', () => {
|
| 449 |
+
data = parseInput(input.value);
|
| 450 |
+
draw();
|
| 451 |
+
});
|
| 452 |
+
}
|
| 453 |
+
|
| 454 |
+
if (randomBtn && input) {
|
| 455 |
+
randomBtn.addEventListener('click', () => {
|
| 456 |
+
data = Array.from({ length: 10 }, () => Math.floor(Math.random() * 100));
|
| 457 |
+
input.value = data.join(', ');
|
| 458 |
+
draw();
|
| 459 |
+
});
|
| 460 |
+
}
|
| 461 |
+
|
| 462 |
+
if (input) {
|
| 463 |
+
input.addEventListener('keypress', (e) => {
|
| 464 |
+
if (e.key === 'Enter') {
|
| 465 |
+
data = parseInput(input.value);
|
| 466 |
+
draw();
|
| 467 |
+
}
|
| 468 |
+
});
|
| 469 |
+
}
|
| 470 |
+
|
| 471 |
+
draw();
|
| 472 |
+
}
|
| 473 |
+
|
| 474 |
+
// ===== INITIALIZE ALL VISUALIZATIONS =====
|
| 475 |
+
function initializeAllVisualizations() {
|
| 476 |
+
// Statistics visualizations
|
| 477 |
+
initPopulationSampleViz();
|
| 478 |
+
initCentralTendencyViz();
|
| 479 |
+
|
| 480 |
+
// Linear Algebra visualizations
|
| 481 |
+
initVectorCanvas();
|
| 482 |
+
initSpanCanvas();
|
| 483 |
+
initTransformationGrid();
|
| 484 |
+
initEigenvectorCanvas();
|
| 485 |
+
|
| 486 |
+
// Calculus visualizations
|
| 487 |
+
initCircleAreaCanvas();
|
| 488 |
+
initDerivativeCanvas();
|
| 489 |
+
initRiemannSumCanvas();
|
| 490 |
+
initTaylorSeriesCanvas();
|
| 491 |
+
|
| 492 |
+
// Data Science visualizations
|
| 493 |
+
initSimpleRegressionCanvas();
|
| 494 |
+
initLogisticRegressionCanvas();
|
| 495 |
+
initPolynomialRegressionCanvas();
|
| 496 |
+
initPCACanvas();
|
| 497 |
+
initGradientDescentCanvas();
|
| 498 |
+
initLossLandscapeCanvas();
|
| 499 |
+
}
|
| 500 |
+
|
| 501 |
+
// ===== LINEAR ALGEBRA VISUALIZATIONS =====
|
| 502 |
+
|
| 503 |
+
function initVectorCanvas() {
|
| 504 |
+
const canvas = document.getElementById('canvas-42');
|
| 505 |
+
if (!canvas) return;
|
| 506 |
+
|
| 507 |
+
const ctx = canvas.getContext('2d');
|
| 508 |
+
let vx = 3, vy = 2;
|
| 509 |
+
|
| 510 |
+
function draw() {
|
| 511 |
+
clearCanvas(ctx, canvas);
|
| 512 |
+
|
| 513 |
+
const centerX = canvas.width / 2;
|
| 514 |
+
const centerY = canvas.height / 2;
|
| 515 |
+
const scale = 40;
|
| 516 |
+
|
| 517 |
+
// Draw axes
|
| 518 |
+
drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
|
| 519 |
+
drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
|
| 520 |
+
|
| 521 |
+
// Draw grid
|
| 522 |
+
ctx.strokeStyle = '#333';
|
| 523 |
+
ctx.lineWidth = 0.5;
|
| 524 |
+
for (let i = -10; i <= 10; i++) {
|
| 525 |
+
if (i !== 0) {
|
| 526 |
+
drawLine(ctx, centerX + i * scale, 0, centerX + i * scale, canvas.height, '#333', 0.5);
|
| 527 |
+
drawLine(ctx, 0, centerY + i * scale, canvas.width, centerY + i * scale, '#333', 0.5);
|
| 528 |
+
}
|
| 529 |
+
}
|
| 530 |
+
|
| 531 |
+
// Draw vector
|
| 532 |
+
const endX = centerX + vx * scale;
|
| 533 |
+
const endY = centerY - vy * scale;
|
| 534 |
+
|
| 535 |
+
// Arrow shaft
|
| 536 |
+
drawLine(ctx, centerX, centerY, endX, endY, COLORS.cyan, 3);
|
| 537 |
+
|
| 538 |
+
// Arrow head
|
| 539 |
+
const angle = Math.atan2(vy, vx);
|
| 540 |
+
const arrowSize = 15;
|
| 541 |
+
ctx.beginPath();
|
| 542 |
+
ctx.moveTo(endX, endY);
|
| 543 |
+
ctx.lineTo(endX - arrowSize * Math.cos(angle - Math.PI / 6), endY + arrowSize * Math.sin(angle - Math.PI / 6));
|
| 544 |
+
ctx.lineTo(endX - arrowSize * Math.cos(angle + Math.PI / 6), endY + arrowSize * Math.sin(angle + Math.PI / 6));
|
| 545 |
+
ctx.closePath();
|
| 546 |
+
ctx.fillStyle = COLORS.cyan;
|
| 547 |
+
ctx.fill();
|
| 548 |
+
|
| 549 |
+
// Draw vector label
|
| 550 |
+
drawText(ctx, `v = [${vx.toFixed(1)}, ${vy.toFixed(1)}]`, endX + 20, endY - 10, 14, COLORS.cyan, 'left');
|
| 551 |
+
|
| 552 |
+
// Draw magnitude
|
| 553 |
+
const magnitude = Math.sqrt(vx * vx + vy * vy);
|
| 554 |
+
drawText(ctx, `|v| = ${magnitude.toFixed(2)}`, canvas.width / 2, 30, 14, COLORS.text);
|
| 555 |
+
}
|
| 556 |
+
|
| 557 |
+
const sliderX = document.getElementById('slider42x');
|
| 558 |
+
const sliderY = document.getElementById('slider42y');
|
| 559 |
+
const labelX = document.getElementById('vec42x');
|
| 560 |
+
const labelY = document.getElementById('vec42y');
|
| 561 |
+
|
| 562 |
+
if (sliderX) {
|
| 563 |
+
sliderX.addEventListener('input', (e) => {
|
| 564 |
+
vx = parseFloat(e.target.value);
|
| 565 |
+
if (labelX) labelX.textContent = vx.toFixed(1);
|
| 566 |
+
draw();
|
| 567 |
+
});
|
| 568 |
+
}
|
| 569 |
+
|
| 570 |
+
if (sliderY) {
|
| 571 |
+
sliderY.addEventListener('input', (e) => {
|
| 572 |
+
vy = parseFloat(e.target.value);
|
| 573 |
+
if (labelY) labelY.textContent = vy.toFixed(1);
|
| 574 |
+
draw();
|
| 575 |
+
});
|
| 576 |
+
}
|
| 577 |
+
|
| 578 |
+
const resetBtn = document.getElementById('btn42reset');
|
| 579 |
+
if (resetBtn) {
|
| 580 |
+
resetBtn.addEventListener('click', () => {
|
| 581 |
+
vx = 3; vy = 2;
|
| 582 |
+
if (sliderX) sliderX.value = vx;
|
| 583 |
+
if (sliderY) sliderY.value = vy;
|
| 584 |
+
if (labelX) labelX.textContent = vx;
|
| 585 |
+
if (labelY) labelY.textContent = vy;
|
| 586 |
+
draw();
|
| 587 |
+
});
|
| 588 |
+
}
|
| 589 |
+
|
| 590 |
+
draw();
|
| 591 |
+
}
|
| 592 |
+
|
| 593 |
+
function initSpanCanvas() {
|
| 594 |
+
const canvas = document.getElementById('canvas-43');
|
| 595 |
+
if (!canvas) return;
|
| 596 |
+
|
| 597 |
+
const ctx = canvas.getContext('2d');
|
| 598 |
+
let animating = false;
|
| 599 |
+
let t = 0;
|
| 600 |
+
|
| 601 |
+
function draw() {
|
| 602 |
+
clearCanvas(ctx, canvas);
|
| 603 |
+
|
| 604 |
+
const centerX = canvas.width / 2;
|
| 605 |
+
const centerY = canvas.height / 2;
|
| 606 |
+
const scale = 50;
|
| 607 |
+
|
| 608 |
+
// Draw axes
|
| 609 |
+
drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
|
| 610 |
+
drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
|
| 611 |
+
|
| 612 |
+
// Basis vectors
|
| 613 |
+
const v1 = { x: 2, y: 1 };
|
| 614 |
+
const v2 = { x: -1, y: 1.5 };
|
| 615 |
+
|
| 616 |
+
// Draw basis vectors
|
| 617 |
+
drawLine(ctx, centerX, centerY, centerX + v1.x * scale, centerY - v1.y * scale, COLORS.cyan, 3);
|
| 618 |
+
drawLine(ctx, centerX, centerY, centerX + v2.x * scale, centerY - v2.y * scale, COLORS.orange, 3);
|
| 619 |
+
|
| 620 |
+
if (animating) {
|
| 621 |
+
// Draw span (multiple linear combinations)
|
| 622 |
+
ctx.globalAlpha = 0.3;
|
| 623 |
+
for (let a = -2; a <= 2; a += 0.3) {
|
| 624 |
+
for (let b = -2; b <= 2; b += 0.3) {
|
| 625 |
+
const x = centerX + (a * v1.x + b * v2.x) * scale;
|
| 626 |
+
const y = centerY - (a * v1.y + b * v2.y) * scale;
|
| 627 |
+
drawCircle(ctx, x, y, 2, COLORS.primary);
|
| 628 |
+
}
|
| 629 |
+
}
|
| 630 |
+
ctx.globalAlpha = 1;
|
| 631 |
+
}
|
| 632 |
+
|
| 633 |
+
drawText(ctx, 'v₁', centerX + v1.x * scale + 20, centerY - v1.y * scale, 16, COLORS.cyan);
|
| 634 |
+
drawText(ctx, 'v₂', centerX + v2.x * scale - 20, centerY - v2.y * scale, 16, COLORS.orange);
|
| 635 |
+
}
|
| 636 |
+
|
| 637 |
+
const animateBtn = document.getElementById('btn43animate');
|
| 638 |
+
const resetBtn = document.getElementById('btn43reset');
|
| 639 |
+
|
| 640 |
+
if (animateBtn) {
|
| 641 |
+
animateBtn.addEventListener('click', () => {
|
| 642 |
+
animating = true;
|
| 643 |
+
draw();
|
| 644 |
+
});
|
| 645 |
+
}
|
| 646 |
+
|
| 647 |
+
if (resetBtn) {
|
| 648 |
+
resetBtn.addEventListener('click', () => {
|
| 649 |
+
animating = false;
|
| 650 |
+
draw();
|
| 651 |
+
});
|
| 652 |
+
}
|
| 653 |
+
|
| 654 |
+
draw();
|
| 655 |
+
}
|
| 656 |
+
|
| 657 |
+
function initTransformationGrid() {
|
| 658 |
+
const canvas = document.getElementById('canvas-44');
|
| 659 |
+
if (!canvas) return;
|
| 660 |
+
|
| 661 |
+
const ctx = canvas.getContext('2d');
|
| 662 |
+
let matrix = [[1, 0], [0, 1]]; // Identity
|
| 663 |
+
|
| 664 |
+
function drawGrid(transform = false) {
|
| 665 |
+
clearCanvas(ctx, canvas);
|
| 666 |
+
|
| 667 |
+
const centerX = canvas.width / 2;
|
| 668 |
+
const centerY = canvas.height / 2;
|
| 669 |
+
const scale = 40;
|
| 670 |
+
const gridSize = 5;
|
| 671 |
+
|
| 672 |
+
ctx.strokeStyle = transform ? COLORS.cyan : '#555';
|
| 673 |
+
ctx.lineWidth = 1;
|
| 674 |
+
|
| 675 |
+
// Draw grid lines
|
| 676 |
+
for (let i = -gridSize; i <= gridSize; i++) {
|
| 677 |
+
for (let j = -gridSize; j <= gridSize; j++) {
|
| 678 |
+
let x1 = i, y1 = j;
|
| 679 |
+
let x2 = i + 1, y2 = j;
|
| 680 |
+
let x3 = i, y3 = j + 1;
|
| 681 |
+
|
| 682 |
+
if (transform) {
|
| 683 |
+
[x1, y1] = [matrix[0][0] * i + matrix[0][1] * j, matrix[1][0] * i + matrix[1][1] * j];
|
| 684 |
+
[x2, y2] = [matrix[0][0] * (i + 1) + matrix[0][1] * j, matrix[1][0] * (i + 1) + matrix[1][1] * j];
|
| 685 |
+
[x3, y3] = [matrix[0][0] * i + matrix[0][1] * (j + 1), matrix[1][0] * i + matrix[1][1] * (j + 1)];
|
| 686 |
+
}
|
| 687 |
+
|
| 688 |
+
drawLine(ctx, centerX + x1 * scale, centerY - y1 * scale, centerX + x2 * scale, centerY - y2 * scale, ctx.strokeStyle, 1);
|
| 689 |
+
drawLine(ctx, centerX + x1 * scale, centerY - y1 * scale, centerX + x3 * scale, centerY - y3 * scale, ctx.strokeStyle, 1);
|
| 690 |
+
}
|
| 691 |
+
}
|
| 692 |
+
|
| 693 |
+
// Draw i-hat and j-hat
|
| 694 |
+
const iHat = transform ? [matrix[0][0], matrix[1][0]] : [1, 0];
|
| 695 |
+
const jHat = transform ? [matrix[0][1], matrix[1][1]] : [0, 1];
|
| 696 |
+
|
| 697 |
+
drawLine(ctx, centerX, centerY, centerX + iHat[0] * scale, centerY - iHat[1] * scale, COLORS.orange, 3);
|
| 698 |
+
drawLine(ctx, centerX, centerY, centerX + jHat[0] * scale, centerY - jHat[1] * scale, COLORS.green, 3);
|
| 699 |
+
}
|
| 700 |
+
|
| 701 |
+
const select = document.getElementById('select44');
|
| 702 |
+
const applyBtn = document.getElementById('btn44apply');
|
| 703 |
+
|
| 704 |
+
if (applyBtn && select) {
|
| 705 |
+
applyBtn.addEventListener('click', () => {
|
| 706 |
+
const type = select.value;
|
| 707 |
+
switch (type) {
|
| 708 |
+
case 'rotation':
|
| 709 |
+
matrix = [[0, -1], [1, 0]];
|
| 710 |
+
break;
|
| 711 |
+
case 'shear':
|
| 712 |
+
matrix = [[1, 1], [0, 1]];
|
| 713 |
+
break;
|
| 714 |
+
case 'reflection':
|
| 715 |
+
matrix = [[1, 0], [0, -1]];
|
| 716 |
+
break;
|
| 717 |
+
default:
|
| 718 |
+
matrix = [[1, 0], [0, 1]];
|
| 719 |
+
}
|
| 720 |
+
drawGrid(true);
|
| 721 |
+
});
|
| 722 |
+
}
|
| 723 |
+
|
| 724 |
+
drawGrid(false);
|
| 725 |
+
}
|
| 726 |
+
|
| 727 |
+
function initEigenvectorCanvas() {
|
| 728 |
+
const canvas = document.getElementById('canvas-54');
|
| 729 |
+
if (!canvas) return;
|
| 730 |
+
|
| 731 |
+
const ctx = canvas.getContext('2d');
|
| 732 |
+
let transformed = false;
|
| 733 |
+
|
| 734 |
+
function draw() {
|
| 735 |
+
clearCanvas(ctx, canvas);
|
| 736 |
+
|
| 737 |
+
const centerX = canvas.width / 2;
|
| 738 |
+
const centerY = canvas.height / 2;
|
| 739 |
+
const scale = 50;
|
| 740 |
+
|
| 741 |
+
// Draw axes
|
| 742 |
+
drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
|
| 743 |
+
drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
|
| 744 |
+
|
| 745 |
+
// Matrix [[2, 0], [0, 1]] - scaling transformation
|
| 746 |
+
// Eigenvectors: [1, 0] with eigenvalue 2, [0, 1] with eigenvalue 1
|
| 747 |
+
|
| 748 |
+
const e1Scale = transformed ? 2 : 1;
|
| 749 |
+
const e2Scale = 1;
|
| 750 |
+
|
| 751 |
+
// Draw regular vectors (affected)
|
| 752 |
+
const regularVecs = [[2, 2], [1, 2], [-2, 1]];
|
| 753 |
+
regularVecs.forEach(([x, y]) => {
|
| 754 |
+
const endX = transformed ? centerX + 2 * x * scale : centerX + x * scale;
|
| 755 |
+
const endY = centerY - y * scale;
|
| 756 |
+
drawLine(ctx, centerX, centerY, endX, endY, '#666', 2);
|
| 757 |
+
});
|
| 758 |
+
|
| 759 |
+
// Draw eigenvectors (special - stay on their line)
|
| 760 |
+
drawLine(ctx, centerX, centerY, centerX + e1Scale * 2 * scale, centerY, COLORS.cyan, 4);
|
| 761 |
+
drawLine(ctx, centerX, centerY, centerX, centerY - 2 * scale, COLORS.orange, 4);
|
| 762 |
+
|
| 763 |
+
drawText(ctx, 'Eigenvector 1 (λ=2)', centerX + e1Scale * 2 * scale + 10, centerY - 10, 12, COLORS.cyan, 'left');
|
| 764 |
+
drawText(ctx, 'Eigenvector 2 (λ=1)', centerX + 10, centerY - 2 * scale - 10, 12, COLORS.orange, 'left');
|
| 765 |
+
}
|
| 766 |
+
|
| 767 |
+
const transformBtn = document.getElementById('btn54transform');
|
| 768 |
+
const resetBtn = document.getElementById('btn54reset');
|
| 769 |
+
|
| 770 |
+
if (transformBtn) {
|
| 771 |
+
transformBtn.addEventListener('click', () => {
|
| 772 |
+
transformed = true;
|
| 773 |
+
draw();
|
| 774 |
+
});
|
| 775 |
+
}
|
| 776 |
+
|
| 777 |
+
if (resetBtn) {
|
| 778 |
+
resetBtn.addEventListener('click', () => {
|
| 779 |
+
transformed = false;
|
| 780 |
+
draw();
|
| 781 |
+
});
|
| 782 |
+
}
|
| 783 |
+
|
| 784 |
+
draw();
|
| 785 |
+
}
|
| 786 |
+
|
| 787 |
+
// ===== CALCULUS VISUALIZATIONS =====
|
| 788 |
+
|
| 789 |
+
function initCircleAreaCanvas() {
|
| 790 |
+
const canvas = document.getElementById('canvas-58');
|
| 791 |
+
if (!canvas) return;
|
| 792 |
+
|
| 793 |
+
const ctx = canvas.getContext('2d');
|
| 794 |
+
let unwrapping = false;
|
| 795 |
+
let progress = 0;
|
| 796 |
+
|
| 797 |
+
function draw() {
|
| 798 |
+
clearCanvas(ctx, canvas);
|
| 799 |
+
|
| 800 |
+
const centerX = canvas.width / 4;
|
| 801 |
+
const centerY = canvas.height / 2;
|
| 802 |
+
const radius = 100;
|
| 803 |
+
|
| 804 |
+
if (!unwrapping) {
|
| 805 |
+
// Draw circle
|
| 806 |
+
drawCircle(ctx, centerX, centerY, radius, COLORS.cyan, false);
|
| 807 |
+
drawText(ctx, 'Circle: Area = πr²', centerX, centerY + radius + 30, 14, COLORS.cyan);
|
| 808 |
+
} else {
|
| 809 |
+
// Draw unwrapped rings
|
| 810 |
+
const rings = 20;
|
| 811 |
+
for (let i = 0; i < rings * progress; i++) {
|
| 812 |
+
const r = (i / rings) * radius;
|
| 813 |
+
const rectX = canvas.width / 2 + i * 3;
|
| 814 |
+
const rectY = centerY - r;
|
| 815 |
+
const rectHeight = 2 * r;
|
| 816 |
+
const dr = radius / rings;
|
| 817 |
+
|
| 818 |
+
ctx.fillStyle = COLORS.cyan;
|
| 819 |
+
ctx.globalAlpha = 0.6;
|
| 820 |
+
ctx.fillRect(rectX, rectY, 2, rectHeight);
|
| 821 |
+
}
|
| 822 |
+
ctx.globalAlpha = 1;
|
| 823 |
+
|
| 824 |
+
if (progress >= 0.99) {
|
| 825 |
+
drawText(ctx, 'Integrated! Area = πr²', canvas.width * 0.7, centerY + 50, 14, COLORS.green);
|
| 826 |
+
}
|
| 827 |
+
}
|
| 828 |
+
}
|
| 829 |
+
|
| 830 |
+
const animateBtn = document.getElementById('btn58animate');
|
| 831 |
+
const resetBtn = document.getElementById('btn58reset');
|
| 832 |
+
|
| 833 |
+
if (animateBtn) {
|
| 834 |
+
animateBtn.addEventListener('click', () => {
|
| 835 |
+
unwrapping = true;
|
| 836 |
+
progress = 0;
|
| 837 |
+
const interval = setInterval(() => {
|
| 838 |
+
progress += 0.02;
|
| 839 |
+
draw();
|
| 840 |
+
if (progress >= 1) {
|
| 841 |
+
clearInterval(interval);
|
| 842 |
+
}
|
| 843 |
+
}, 50);
|
| 844 |
+
});
|
| 845 |
+
}
|
| 846 |
+
|
| 847 |
+
if (resetBtn) {
|
| 848 |
+
resetBtn.addEventListener('click', () => {
|
| 849 |
+
unwrapping = false;
|
| 850 |
+
progress = 0;
|
| 851 |
+
draw();
|
| 852 |
+
});
|
| 853 |
+
}
|
| 854 |
+
|
| 855 |
+
draw();
|
| 856 |
+
}
|
| 857 |
+
|
| 858 |
+
function initDerivativeCanvas() {
|
| 859 |
+
const canvas = document.getElementById('canvas-59');
|
| 860 |
+
if (!canvas) return;
|
| 861 |
+
|
| 862 |
+
const ctx = canvas.getContext('2d');
|
| 863 |
+
let dx = 1.0;
|
| 864 |
+
|
| 865 |
+
function f(x) {
|
| 866 |
+
return 0.02 * x * x;
|
| 867 |
+
}
|
| 868 |
+
|
| 869 |
+
function draw() {
|
| 870 |
+
clearCanvas(ctx, canvas);
|
| 871 |
+
|
| 872 |
+
const scale = 50;
|
| 873 |
+
const centerX = canvas.width / 2;
|
| 874 |
+
const centerY = canvas.height * 0.8;
|
| 875 |
+
|
| 876 |
+
// Draw axes
|
| 877 |
+
drawLine(ctx, 50, centerY, canvas.width - 50, centerY, '#555', 1);
|
| 878 |
+
drawLine(ctx, centerX, 50, centerX, canvas.height - 50, '#555', 1);
|
| 879 |
+
|
| 880 |
+
// Draw function
|
| 881 |
+
ctx.beginPath();
|
| 882 |
+
for (let x = -canvas.width / 2; x < canvas.width / 2; x += 2) {
|
| 883 |
+
const px = centerX + x;
|
| 884 |
+
const py = centerY - f(x) * scale;
|
| 885 |
+
if (x === -canvas.width / 2) {
|
| 886 |
+
ctx.moveTo(px, py);
|
| 887 |
+
} else {
|
| 888 |
+
ctx.lineTo(px, py);
|
| 889 |
+
}
|
| 890 |
+
}
|
| 891 |
+
ctx.strokeStyle = COLORS.cyan;
|
| 892 |
+
ctx.lineWidth = 2;
|
| 893 |
+
ctx.stroke();
|
| 894 |
+
|
| 895 |
+
// Draw secant line
|
| 896 |
+
const x0 = 0;
|
| 897 |
+
const x1 = dx * scale;
|
| 898 |
+
const y0 = centerY - f(x0) * scale;
|
| 899 |
+
const y1 = centerY - f(x1) * scale;
|
| 900 |
+
|
| 901 |
+
drawLine(ctx, centerX + x0 - 50, y0 - (y1 - y0) / x1 * 50, centerX + x1 + 50, y1 + (y1 - y0) / x1 * 50, COLORS.orange, 2);
|
| 902 |
+
drawCircle(ctx, centerX + x0, y0, 5, COLORS.green);
|
| 903 |
+
drawCircle(ctx, centerX + x1, y1, 5, COLORS.green);
|
| 904 |
+
|
| 905 |
+
const slope = (f(x1 / scale) - f(0)) / (x1 / scale);
|
| 906 |
+
drawText(ctx, `Slope = ${slope.toFixed(3)}`, canvas.width / 2, 40, 14, COLORS.orange);
|
| 907 |
+
drawText(ctx, `As Δx → 0, slope → derivative`, canvas.width / 2, 60, 12, COLORS.text);
|
| 908 |
+
}
|
| 909 |
+
|
| 910 |
+
const slider = document.getElementById('slider59dx');
|
| 911 |
+
const label = document.getElementById('label59dx');
|
| 912 |
+
|
| 913 |
+
if (slider) {
|
| 914 |
+
slider.addEventListener('input', (e) => {
|
| 915 |
+
dx = parseFloat(e.target.value);
|
| 916 |
+
if (label) label.textContent = dx.toFixed(1);
|
| 917 |
+
draw();
|
| 918 |
+
});
|
| 919 |
+
}
|
| 920 |
+
|
| 921 |
+
draw();
|
| 922 |
+
}
|
| 923 |
+
|
| 924 |
+
function initRiemannSumCanvas() {
|
| 925 |
+
const canvas = document.getElementById('canvas-64');
|
| 926 |
+
if (!canvas) return;
|
| 927 |
+
|
| 928 |
+
const ctx = canvas.getContext('2d');
|
| 929 |
+
let n = 8;
|
| 930 |
+
|
| 931 |
+
function f(x) {
|
| 932 |
+
return 50 + 50 * Math.sin(x / 30);
|
| 933 |
+
}
|
| 934 |
+
|
| 935 |
+
function draw() {
|
| 936 |
+
clearCanvas(ctx, canvas);
|
| 937 |
+
|
| 938 |
+
const padding = 50;
|
| 939 |
+
const width = canvas.width - 2 * padding;
|
| 940 |
+
const height = canvas.height - 2 * padding;
|
| 941 |
+
|
| 942 |
+
// Draw axes
|
| 943 |
+
drawLine(ctx, padding, height + padding, canvas.width - padding, height + padding, '#555', 2);
|
| 944 |
+
drawLine(ctx, padding, padding, padding, height + padding, '#555', 2);
|
| 945 |
+
|
| 946 |
+
// Draw function
|
| 947 |
+
ctx.beginPath();
|
| 948 |
+
for (let x = 0; x <= width; x += 2) {
|
| 949 |
+
const px = padding + x;
|
| 950 |
+
const py = height + padding - f(x);
|
| 951 |
+
if (x === 0) {
|
| 952 |
+
ctx.moveTo(px, py);
|
| 953 |
+
} else {
|
| 954 |
+
ctx.lineTo(px, py);
|
| 955 |
+
}
|
| 956 |
+
}
|
| 957 |
+
ctx.strokeStyle = COLORS.cyan;
|
| 958 |
+
ctx.lineWidth = 3;
|
| 959 |
+
ctx.stroke();
|
| 960 |
+
|
| 961 |
+
// Draw rectangles
|
| 962 |
+
const rectWidth = width / n;
|
| 963 |
+
let totalArea = 0;
|
| 964 |
+
|
| 965 |
+
for (let i = 0; i < n; i++) {
|
| 966 |
+
const x = i * rectWidth;
|
| 967 |
+
const rectHeight = f(x);
|
| 968 |
+
totalArea += rectWidth * rectHeight;
|
| 969 |
+
|
| 970 |
+
ctx.fillStyle = COLORS.orange;
|
| 971 |
+
ctx.globalAlpha = 0.5;
|
| 972 |
+
ctx.fillRect(padding + x, height + padding - rectHeight, rectWidth, rectHeight);
|
| 973 |
+
ctx.strokeStyle = COLORS.orange;
|
| 974 |
+
ctx.globalAlpha = 1;
|
| 975 |
+
ctx.strokeRect(padding + x, height + padding - rectHeight, rectWidth, rectHeight);
|
| 976 |
+
}
|
| 977 |
+
|
| 978 |
+
drawText(ctx, `Rectangles: ${n}`, canvas.width / 2, 30, 14, COLORS.text);
|
| 979 |
+
drawText(ctx, `Approximate Area: ${(totalArea / 100).toFixed(2)}`, canvas.width / 2, 50, 12, COLORS.orange);
|
| 980 |
+
}
|
| 981 |
+
|
| 982 |
+
const slider = document.getElementById('slider64n');
|
| 983 |
+
const label = document.getElementById('label64n');
|
| 984 |
+
|
| 985 |
+
if (slider) {
|
| 986 |
+
slider.addEventListener('input', (e) => {
|
| 987 |
+
n = parseInt(e.target.value);
|
| 988 |
+
if (label) label.textContent = n;
|
| 989 |
+
draw();
|
| 990 |
+
});
|
| 991 |
+
}
|
| 992 |
+
|
| 993 |
+
draw();
|
| 994 |
+
}
|
| 995 |
+
|
| 996 |
+
function initTaylorSeriesCanvas() {
|
| 997 |
+
const canvas = document.getElementById('canvas-68');
|
| 998 |
+
if (!canvas) return;
|
| 999 |
+
|
| 1000 |
+
const ctx = canvas.getContext('2d');
|
| 1001 |
+
let degree = 1;
|
| 1002 |
+
let func = 'sin';
|
| 1003 |
+
|
| 1004 |
+
function draw() {
|
| 1005 |
+
clearCanvas(ctx, canvas);
|
| 1006 |
+
|
| 1007 |
+
const scale = 50;
|
| 1008 |
+
const centerX = canvas.width / 2;
|
| 1009 |
+
const centerY = canvas.height / 2;
|
| 1010 |
+
|
| 1011 |
+
// Draw axes
|
| 1012 |
+
drawLine(ctx, 50, centerY, canvas.width - 50, centerY, '#555', 1);
|
| 1013 |
+
drawLine(ctx, centerX, 50, centerX, canvas.height - 50, '#555', 1);
|
| 1014 |
+
|
| 1015 |
+
// Draw actual function
|
| 1016 |
+
ctx.beginPath();
|
| 1017 |
+
for (let x = -canvas.width / 2; x < canvas.width / 2; x += 2) {
|
| 1018 |
+
const t = x / scale;
|
| 1019 |
+
let y;
|
| 1020 |
+
if (func === 'sin') y = Math.sin(t);
|
| 1021 |
+
else if (func === 'cos') y = Math.cos(t);
|
| 1022 |
+
else y = Math.exp(t);
|
| 1023 |
+
|
| 1024 |
+
const px = centerX + x;
|
| 1025 |
+
const py = centerY - y * scale;
|
| 1026 |
+
if (x === -canvas.width / 2) {
|
| 1027 |
+
ctx.moveTo(px, py);
|
| 1028 |
+
} else {
|
| 1029 |
+
ctx.lineTo(px, py);
|
| 1030 |
+
}
|
| 1031 |
+
}
|
| 1032 |
+
ctx.strokeStyle = COLORS.cyan;
|
| 1033 |
+
ctx.lineWidth = 2;
|
| 1034 |
+
ctx.stroke();
|
| 1035 |
+
|
| 1036 |
+
// Draw Taylor approximation
|
| 1037 |
+
ctx.beginPath();
|
| 1038 |
+
for (let x = -canvas.width / 2; x < canvas.width / 2; x += 2) {
|
| 1039 |
+
const t = x / scale;
|
| 1040 |
+
let y = 0;
|
| 1041 |
+
|
| 1042 |
+
if (func === 'sin') {
|
| 1043 |
+
for (let n = 0; n <= degree; n++) {
|
| 1044 |
+
const term = Math.pow(-1, n) * Math.pow(t, 2 * n + 1) / factorial(2 * n + 1);
|
| 1045 |
+
y += term;
|
| 1046 |
+
}
|
| 1047 |
+
} else if (func === 'cos') {
|
| 1048 |
+
for (let n = 0; n <= degree; n++) {
|
| 1049 |
+
const term = Math.pow(-1, n) * Math.pow(t, 2 * n) / factorial(2 * n);
|
| 1050 |
+
y += term;
|
| 1051 |
+
}
|
| 1052 |
+
} else {
|
| 1053 |
+
for (let n = 0; n <= degree; n++) {
|
| 1054 |
+
y += Math.pow(t, n) / factorial(n);
|
| 1055 |
+
}
|
| 1056 |
+
}
|
| 1057 |
+
|
| 1058 |
+
const px = centerX + x;
|
| 1059 |
+
const py = centerY - y * scale;
|
| 1060 |
+
if (x === -canvas.width / 2) {
|
| 1061 |
+
ctx.moveTo(px, py);
|
| 1062 |
+
} else {
|
| 1063 |
+
ctx.lineTo(px, py);
|
| 1064 |
+
}
|
| 1065 |
+
}
|
| 1066 |
+
ctx.strokeStyle = COLORS.orange;
|
| 1067 |
+
ctx.lineWidth = 3;
|
| 1068 |
+
ctx.stroke();
|
| 1069 |
+
|
| 1070 |
+
drawText(ctx, `Function: ${func}(x)`, canvas.width / 2, 30, 14, COLORS.cyan);
|
| 1071 |
+
drawText(ctx, `Taylor degree: ${degree}`, canvas.width / 2, 50, 14, COLORS.orange);
|
| 1072 |
+
}
|
| 1073 |
+
|
| 1074 |
+
function factorial(n) {
|
| 1075 |
+
if (n <= 1) return 1;
|
| 1076 |
+
return n * factorial(n - 1);
|
| 1077 |
+
}
|
| 1078 |
+
|
| 1079 |
+
const slider = document.getElementById('slider68degree');
|
| 1080 |
+
const label = document.getElementById('label68degree');
|
| 1081 |
+
const select = document.getElementById('select68func');
|
| 1082 |
+
|
| 1083 |
+
if (slider) {
|
| 1084 |
+
slider.addEventListener('input', (e) => {
|
| 1085 |
+
degree = parseInt(e.target.value);
|
| 1086 |
+
if (label) label.textContent = degree;
|
| 1087 |
+
draw();
|
| 1088 |
+
});
|
| 1089 |
+
}
|
| 1090 |
+
|
| 1091 |
+
if (select) {
|
| 1092 |
+
select.addEventListener('change', (e) => {
|
| 1093 |
+
func = e.target.value;
|
| 1094 |
+
draw();
|
| 1095 |
+
});
|
| 1096 |
+
}
|
| 1097 |
+
|
| 1098 |
+
draw();
|
| 1099 |
+
}
|
| 1100 |
+
|
| 1101 |
+
// ===== INTERACTIVE ELEMENTS =====
|
| 1102 |
+
function initInteractiveElements() {
|
| 1103 |
+
// Add any additional interactive elements here
|
| 1104 |
+
// Such as tooltips, modals, etc.
|
| 1105 |
+
}
|
| 1106 |
+
|
| 1107 |
+
// ===== HELPER FUNCTIONS =====
|
| 1108 |
+
function generateRandomData(count, min, max) {
|
| 1109 |
+
return Array.from({ length: count }, () =>
|
| 1110 |
+
Math.floor(Math.random() * (max - min + 1)) + min
|
| 1111 |
+
);
|
| 1112 |
+
}
|
| 1113 |
+
|
| 1114 |
+
function formatNumber(num, decimals = 2) {
|
| 1115 |
+
return Number(num).toFixed(decimals);
|
| 1116 |
+
}
|
| 1117 |
+
|
| 1118 |
+
// ===== ANIMATION LOOP =====
|
| 1119 |
+
function startAnimation(canvasId, animationFunction) {
|
| 1120 |
+
if (animationFrames[canvasId]) {
|
| 1121 |
+
cancelAnimationFrame(animationFrames[canvasId]);
|
| 1122 |
+
}
|
| 1123 |
+
|
| 1124 |
+
function animate() {
|
| 1125 |
+
animationFunction();
|
| 1126 |
+
animationFrames[canvasId] = requestAnimationFrame(animate);
|
| 1127 |
+
}
|
| 1128 |
+
|
| 1129 |
+
animate();
|
| 1130 |
+
}
|
| 1131 |
+
|
| 1132 |
+
function stopAnimation(canvasId) {
|
| 1133 |
+
if (animationFrames[canvasId]) {
|
| 1134 |
+
cancelAnimationFrame(animationFrames[canvasId]);
|
| 1135 |
+
delete animationFrames[canvasId];
|
| 1136 |
+
}
|
| 1137 |
+
}
|
| 1138 |
+
|
| 1139 |
+
// ===== CONSOLE LOG =====
|
| 1140 |
+
// ===== DATA SCIENCE VISUALIZATIONS =====
|
| 1141 |
+
|
| 1142 |
+
function initSimpleRegressionCanvas() {
|
| 1143 |
+
const canvas = document.getElementById('canvas-70');
|
| 1144 |
+
if (!canvas) return;
|
| 1145 |
+
|
| 1146 |
+
const ctx = canvas.getContext('2d');
|
| 1147 |
+
let showLine = false;
|
| 1148 |
+
|
| 1149 |
+
// Sample data
|
| 1150 |
+
const data = [
|
| 1151 |
+
{x: 1, y: 2.1}, {x: 2, y: 4.2}, {x: 3, y: 5.8}, {x: 4, y: 8.1},
|
| 1152 |
+
{x: 5, y: 10.3}, {x: 6, y: 12.1}, {x: 7, y: 13.9}, {x: 8, y: 16.2},
|
| 1153 |
+
{x: 9, y: 18.1}, {x: 10, y: 20.0}
|
| 1154 |
+
];
|
| 1155 |
+
|
| 1156 |
+
function calculateRegression() {
|
| 1157 |
+
const n = data.length;
|
| 1158 |
+
const sumX = data.reduce((s, p) => s + p.x, 0);
|
| 1159 |
+
const sumY = data.reduce((s, p) => s + p.y, 0);
|
| 1160 |
+
const sumXY = data.reduce((s, p) => s + p.x * p.y, 0);
|
| 1161 |
+
const sumX2 = data.reduce((s, p) => s + p.x * p.x, 0);
|
| 1162 |
+
|
| 1163 |
+
const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
|
| 1164 |
+
const intercept = (sumY - slope * sumX) / n;
|
| 1165 |
+
|
| 1166 |
+
return { slope, intercept };
|
| 1167 |
+
}
|
| 1168 |
+
|
| 1169 |
+
function draw() {
|
| 1170 |
+
clearCanvas(ctx, canvas);
|
| 1171 |
+
|
| 1172 |
+
const padding = 60;
|
| 1173 |
+
const width = canvas.width - 2 * padding;
|
| 1174 |
+
const height = canvas.height - 2 * padding;
|
| 1175 |
+
|
| 1176 |
+
const maxX = 11;
|
| 1177 |
+
const maxY = 22;
|
| 1178 |
+
|
| 1179 |
+
// Draw axes
|
| 1180 |
+
drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
|
| 1181 |
+
drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
|
| 1182 |
+
|
| 1183 |
+
// Draw grid
|
| 1184 |
+
for (let i = 0; i <= 10; i++) {
|
| 1185 |
+
const x = padding + (i / maxX) * width;
|
| 1186 |
+
const y = canvas.height - padding - (i * 2 / maxY) * height;
|
| 1187 |
+
drawLine(ctx, x, canvas.height - padding, x, canvas.height - padding + 5, COLORS.textSecondary, 1);
|
| 1188 |
+
drawText(ctx, i.toString(), x, canvas.height - padding + 20, 10, COLORS.textSecondary);
|
| 1189 |
+
|
| 1190 |
+
if (i * 2 <= maxY) {
|
| 1191 |
+
drawLine(ctx, padding - 5, y, padding, y, COLORS.textSecondary, 1);
|
| 1192 |
+
drawText(ctx, (i * 2).toString(), padding - 15, y + 4, 10, COLORS.textSecondary, 'right');
|
| 1193 |
+
}
|
| 1194 |
+
}
|
| 1195 |
+
|
| 1196 |
+
// Draw labels
|
| 1197 |
+
drawText(ctx, 'X', canvas.width - padding + 20, canvas.height - padding + 4, 12, COLORS.cyan);
|
| 1198 |
+
drawText(ctx, 'Y', padding - 4, padding - 20, 12, COLORS.cyan);
|
| 1199 |
+
|
| 1200 |
+
// Draw data points
|
| 1201 |
+
data.forEach(point => {
|
| 1202 |
+
const x = padding + (point.x / maxX) * width;
|
| 1203 |
+
const y = canvas.height - padding - (point.y / maxY) * height;
|
| 1204 |
+
drawCircle(ctx, x, y, 6, COLORS.cyan);
|
| 1205 |
+
});
|
| 1206 |
+
|
| 1207 |
+
// Draw regression line
|
| 1208 |
+
if (showLine) {
|
| 1209 |
+
const { slope, intercept } = calculateRegression();
|
| 1210 |
+
const x1 = 0;
|
| 1211 |
+
const y1 = intercept;
|
| 1212 |
+
const x2 = maxX;
|
| 1213 |
+
const y2 = slope * x2 + intercept;
|
| 1214 |
+
|
| 1215 |
+
const px1 = padding + (x1 / maxX) * width;
|
| 1216 |
+
const py1 = canvas.height - padding - (y1 / maxY) * height;
|
| 1217 |
+
const px2 = padding + (x2 / maxX) * width;
|
| 1218 |
+
const py2 = canvas.height - padding - (y2 / maxY) * height;
|
| 1219 |
+
|
| 1220 |
+
drawLine(ctx, px1, py1, px2, py2, COLORS.orange, 3);
|
| 1221 |
+
|
| 1222 |
+
// Calculate R²
|
| 1223 |
+
const meanY = data.reduce((s, p) => s + p.y, 0) / data.length;
|
| 1224 |
+
let ssTot = 0, ssRes = 0;
|
| 1225 |
+
data.forEach(point => {
|
| 1226 |
+
const predicted = slope * point.x + intercept;
|
| 1227 |
+
ssRes += Math.pow(point.y - predicted, 2);
|
| 1228 |
+
ssTot += Math.pow(point.y - meanY, 2);
|
| 1229 |
+
});
|
| 1230 |
+
const r2 = 1 - (ssRes / ssTot);
|
| 1231 |
+
|
| 1232 |
+
drawText(ctx, `y = ${intercept.toFixed(2)} + ${slope.toFixed(2)}x`, canvas.width / 2, 30, 14, COLORS.orange);
|
| 1233 |
+
drawText(ctx, `R² = ${r2.toFixed(4)}`, canvas.width / 2, 50, 14, COLORS.green);
|
| 1234 |
+
} else {
|
| 1235 |
+
drawText(ctx, 'Click "Fit Regression Line" to see the best fit', canvas.width / 2, 30, 14, COLORS.text);
|
| 1236 |
+
}
|
| 1237 |
+
}
|
| 1238 |
+
|
| 1239 |
+
const fitBtn = document.getElementById('btn70fit');
|
| 1240 |
+
const resetBtn = document.getElementById('btn70reset');
|
| 1241 |
+
|
| 1242 |
+
if (fitBtn) {
|
| 1243 |
+
fitBtn.addEventListener('click', () => {
|
| 1244 |
+
showLine = true;
|
| 1245 |
+
draw();
|
| 1246 |
+
});
|
| 1247 |
+
}
|
| 1248 |
+
|
| 1249 |
+
if (resetBtn) {
|
| 1250 |
+
resetBtn.addEventListener('click', () => {
|
| 1251 |
+
showLine = false;
|
| 1252 |
+
draw();
|
| 1253 |
+
});
|
| 1254 |
+
}
|
| 1255 |
+
|
| 1256 |
+
draw();
|
| 1257 |
+
}
|
| 1258 |
+
|
| 1259 |
+
function initLogisticRegressionCanvas() {
|
| 1260 |
+
const canvas = document.getElementById('canvas-72');
|
| 1261 |
+
if (!canvas) return;
|
| 1262 |
+
|
| 1263 |
+
const ctx = canvas.getContext('2d');
|
| 1264 |
+
let threshold = 0.5;
|
| 1265 |
+
|
| 1266 |
+
function sigmoid(z) {
|
| 1267 |
+
return 1 / (1 + Math.exp(-z));
|
| 1268 |
+
}
|
| 1269 |
+
|
| 1270 |
+
function draw() {
|
| 1271 |
+
clearCanvas(ctx, canvas);
|
| 1272 |
+
|
| 1273 |
+
const padding = 60;
|
| 1274 |
+
const width = canvas.width - 2 * padding;
|
| 1275 |
+
const height = canvas.height - 2 * padding;
|
| 1276 |
+
|
| 1277 |
+
// Draw axes
|
| 1278 |
+
const centerY = canvas.height / 2;
|
| 1279 |
+
drawLine(ctx, padding, centerY, canvas.width - padding, centerY, COLORS.text, 2);
|
| 1280 |
+
drawLine(ctx, canvas.width / 2, padding, canvas.width / 2, canvas.height - padding, COLORS.text, 2);
|
| 1281 |
+
|
| 1282 |
+
// Draw sigmoid curve
|
| 1283 |
+
ctx.beginPath();
|
| 1284 |
+
for (let x = -6; x <= 6; x += 0.1) {
|
| 1285 |
+
const px = canvas.width / 2 + (x / 6) * (width / 2);
|
| 1286 |
+
const y = sigmoid(x);
|
| 1287 |
+
const py = canvas.height - padding - y * height;
|
| 1288 |
+
if (x === -6) {
|
| 1289 |
+
ctx.moveTo(px, py);
|
| 1290 |
+
} else {
|
| 1291 |
+
ctx.lineTo(px, py);
|
| 1292 |
+
}
|
| 1293 |
+
}
|
| 1294 |
+
ctx.strokeStyle = COLORS.cyan;
|
| 1295 |
+
ctx.lineWidth = 3;
|
| 1296 |
+
ctx.stroke();
|
| 1297 |
+
|
| 1298 |
+
// Draw threshold line
|
| 1299 |
+
const thresholdY = canvas.height - padding - threshold * height;
|
| 1300 |
+
drawLine(ctx, padding, thresholdY, canvas.width - padding, thresholdY, COLORS.orange, 2);
|
| 1301 |
+
drawText(ctx, `Threshold = ${threshold.toFixed(2)}`, canvas.width - 100, thresholdY - 10, 12, COLORS.orange);
|
| 1302 |
+
|
| 1303 |
+
// Draw labels
|
| 1304 |
+
drawText(ctx, 'P(y=1) = σ(z) = 1/(1+e^(-z))', canvas.width / 2, 30, 14, COLORS.cyan);
|
| 1305 |
+
drawText(ctx, 'Class 1 (if P ≥ threshold)', canvas.width - 150, thresholdY - 30, 12, COLORS.green);
|
| 1306 |
+
drawText(ctx, 'Class 0 (if P < threshold)', canvas.width - 150, thresholdY + 30, 12, COLORS.textSecondary);
|
| 1307 |
+
|
| 1308 |
+
// Draw axis labels
|
| 1309 |
+
drawText(ctx, '0', canvas.width / 2 + 5, centerY + 20, 10, COLORS.text, 'left');
|
| 1310 |
+
drawText(ctx, '1', padding - 20, padding + 10, 10, COLORS.text);
|
| 1311 |
+
}
|
| 1312 |
+
|
| 1313 |
+
const slider = document.getElementById('slider72');
|
| 1314 |
+
const label = document.getElementById('label72');
|
| 1315 |
+
|
| 1316 |
+
if (slider) {
|
| 1317 |
+
slider.addEventListener('input', (e) => {
|
| 1318 |
+
threshold = parseFloat(e.target.value);
|
| 1319 |
+
if (label) label.textContent = threshold.toFixed(2);
|
| 1320 |
+
draw();
|
| 1321 |
+
});
|
| 1322 |
+
}
|
| 1323 |
+
|
| 1324 |
+
draw();
|
| 1325 |
+
}
|
| 1326 |
+
|
| 1327 |
+
function initPolynomialRegressionCanvas() {
|
| 1328 |
+
const canvas = document.getElementById('canvas-74');
|
| 1329 |
+
if (!canvas) return;
|
| 1330 |
+
|
| 1331 |
+
const ctx = canvas.getContext('2d');
|
| 1332 |
+
let degree = 1;
|
| 1333 |
+
|
| 1334 |
+
// Generate sample data with some noise
|
| 1335 |
+
const trueFunc = (x) => 0.5 * x * x - 3 * x + 5;
|
| 1336 |
+
const data = [];
|
| 1337 |
+
for (let x = 0; x <= 10; x += 0.5) {
|
| 1338 |
+
data.push({ x, y: trueFunc(x) + (Math.random() - 0.5) * 2 });
|
| 1339 |
+
}
|
| 1340 |
+
|
| 1341 |
+
function fitPolynomial(degree) {
|
| 1342 |
+
// Simple polynomial fit (not production-quality)
|
| 1343 |
+
return (x) => {
|
| 1344 |
+
if (degree === 1) return 0.5 * x + 1;
|
| 1345 |
+
if (degree === 2) return 0.5 * x * x - 3 * x + 5;
|
| 1346 |
+
if (degree === 3) return 0.05 * x * x * x - 0.2 * x * x - 2 * x + 5;
|
| 1347 |
+
return trueFunc(x);
|
| 1348 |
+
};
|
| 1349 |
+
}
|
| 1350 |
+
|
| 1351 |
+
function draw() {
|
| 1352 |
+
clearCanvas(ctx, canvas);
|
| 1353 |
+
|
| 1354 |
+
const padding = 60;
|
| 1355 |
+
const width = canvas.width - 2 * padding;
|
| 1356 |
+
const height = canvas.height - 2 * padding;
|
| 1357 |
+
|
| 1358 |
+
const maxX = 10;
|
| 1359 |
+
const maxY = 15;
|
| 1360 |
+
|
| 1361 |
+
// Draw axes
|
| 1362 |
+
drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
|
| 1363 |
+
drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
|
| 1364 |
+
|
| 1365 |
+
// Draw data points
|
| 1366 |
+
data.forEach(point => {
|
| 1367 |
+
const px = padding + (point.x / maxX) * width;
|
| 1368 |
+
const py = canvas.height - padding - (point.y / maxY) * height;
|
| 1369 |
+
drawCircle(ctx, px, py, 4, COLORS.cyan);
|
| 1370 |
+
});
|
| 1371 |
+
|
| 1372 |
+
// Draw polynomial fit
|
| 1373 |
+
const polyFunc = fitPolynomial(degree);
|
| 1374 |
+
ctx.beginPath();
|
| 1375 |
+
for (let x = 0; x <= maxX; x += 0.1) {
|
| 1376 |
+
const px = padding + (x / maxX) * width;
|
| 1377 |
+
const y = polyFunc(x);
|
| 1378 |
+
const py = canvas.height - padding - (y / maxY) * height;
|
| 1379 |
+
if (x === 0) {
|
| 1380 |
+
ctx.moveTo(px, py);
|
| 1381 |
+
} else {
|
| 1382 |
+
ctx.lineTo(px, py);
|
| 1383 |
+
}
|
| 1384 |
+
}
|
| 1385 |
+
ctx.strokeStyle = COLORS.orange;
|
| 1386 |
+
ctx.lineWidth = 3;
|
| 1387 |
+
ctx.stroke();
|
| 1388 |
+
|
| 1389 |
+
drawText(ctx, `Polynomial Degree: ${degree}`, canvas.width / 2, 30, 14, COLORS.orange);
|
| 1390 |
+
|
| 1391 |
+
if (degree > 5) {
|
| 1392 |
+
drawText(ctx, 'High degree may overfit!', canvas.width / 2, 50, 12, COLORS.orange);
|
| 1393 |
+
}
|
| 1394 |
+
}
|
| 1395 |
+
|
| 1396 |
+
const slider = document.getElementById('slider74');
|
| 1397 |
+
const label = document.getElementById('label74');
|
| 1398 |
+
|
| 1399 |
+
if (slider) {
|
| 1400 |
+
slider.addEventListener('input', (e) => {
|
| 1401 |
+
degree = parseInt(e.target.value);
|
| 1402 |
+
if (label) label.textContent = degree;
|
| 1403 |
+
draw();
|
| 1404 |
+
});
|
| 1405 |
+
}
|
| 1406 |
+
|
| 1407 |
+
draw();
|
| 1408 |
+
}
|
| 1409 |
+
|
| 1410 |
+
function initPCACanvas() {
|
| 1411 |
+
const canvas = document.getElementById('canvas-77');
|
| 1412 |
+
if (!canvas) return;
|
| 1413 |
+
|
| 1414 |
+
const ctx = canvas.getContext('2d');
|
| 1415 |
+
let showPCs = false;
|
| 1416 |
+
|
| 1417 |
+
// Generate 2D data
|
| 1418 |
+
const data = [];
|
| 1419 |
+
for (let i = 0; i < 50; i++) {
|
| 1420 |
+
const x = Math.random() * 4 - 2;
|
| 1421 |
+
const y = 0.8 * x + Math.random() * 0.5;
|
| 1422 |
+
data.push({ x, y });
|
| 1423 |
+
}
|
| 1424 |
+
|
| 1425 |
+
function draw() {
|
| 1426 |
+
clearCanvas(ctx, canvas);
|
| 1427 |
+
|
| 1428 |
+
const centerX = canvas.width / 2;
|
| 1429 |
+
const centerY = canvas.height / 2;
|
| 1430 |
+
const scale = 80;
|
| 1431 |
+
|
| 1432 |
+
// Draw axes
|
| 1433 |
+
drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
|
| 1434 |
+
drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
|
| 1435 |
+
|
| 1436 |
+
// Draw data points
|
| 1437 |
+
data.forEach(point => {
|
| 1438 |
+
const px = centerX + point.x * scale;
|
| 1439 |
+
const py = centerY - point.y * scale;
|
| 1440 |
+
drawCircle(ctx, px, py, 5, COLORS.cyan);
|
| 1441 |
+
});
|
| 1442 |
+
|
| 1443 |
+
if (showPCs) {
|
| 1444 |
+
// Draw PC1 (main direction)
|
| 1445 |
+
const pc1Angle = Math.atan(0.8);
|
| 1446 |
+
const pc1Length = 150;
|
| 1447 |
+
drawLine(ctx,
|
| 1448 |
+
centerX - pc1Length * Math.cos(pc1Angle),
|
| 1449 |
+
centerY + pc1Length * Math.sin(pc1Angle),
|
| 1450 |
+
centerX + pc1Length * Math.cos(pc1Angle),
|
| 1451 |
+
centerY - pc1Length * Math.sin(pc1Angle),
|
| 1452 |
+
COLORS.orange, 3
|
| 1453 |
+
);
|
| 1454 |
+
drawText(ctx, 'PC1 (80% variance)', centerX + 100, centerY - 80, 14, COLORS.orange);
|
| 1455 |
+
|
| 1456 |
+
// Draw PC2 (perpendicular)
|
| 1457 |
+
const pc2Angle = pc1Angle + Math.PI / 2;
|
| 1458 |
+
const pc2Length = 80;
|
| 1459 |
+
drawLine(ctx,
|
| 1460 |
+
centerX - pc2Length * Math.cos(pc2Angle),
|
| 1461 |
+
centerY + pc2Length * Math.sin(pc2Angle),
|
| 1462 |
+
centerX + pc2Length * Math.cos(pc2Angle),
|
| 1463 |
+
centerY - pc2Length * Math.sin(pc2Angle),
|
| 1464 |
+
COLORS.green, 3
|
| 1465 |
+
);
|
| 1466 |
+
drawText(ctx, 'PC2 (20% variance)', centerX - 100, centerY - 80, 14, COLORS.green);
|
| 1467 |
+
}
|
| 1468 |
+
|
| 1469 |
+
drawText(ctx, 'PCA finds directions of maximum variance', canvas.width / 2, 30, 14, COLORS.cyan);
|
| 1470 |
+
}
|
| 1471 |
+
|
| 1472 |
+
const projectBtn = document.getElementById('btn77project');
|
| 1473 |
+
const resetBtn = document.getElementById('btn77reset');
|
| 1474 |
+
|
| 1475 |
+
if (projectBtn) {
|
| 1476 |
+
projectBtn.addEventListener('click', () => {
|
| 1477 |
+
showPCs = true;
|
| 1478 |
+
draw();
|
| 1479 |
+
});
|
| 1480 |
+
}
|
| 1481 |
+
|
| 1482 |
+
if (resetBtn) {
|
| 1483 |
+
resetBtn.addEventListener('click', () => {
|
| 1484 |
+
showPCs = false;
|
| 1485 |
+
draw();
|
| 1486 |
+
});
|
| 1487 |
+
}
|
| 1488 |
+
|
| 1489 |
+
draw();
|
| 1490 |
+
}
|
| 1491 |
+
|
| 1492 |
+
function initGradientDescentCanvas() {
|
| 1493 |
+
const canvas = document.getElementById('canvas-80');
|
| 1494 |
+
if (!canvas) return;
|
| 1495 |
+
|
| 1496 |
+
const ctx = canvas.getContext('2d');
|
| 1497 |
+
let learningRate = 0.1;
|
| 1498 |
+
let animating = false;
|
| 1499 |
+
let path = [];
|
| 1500 |
+
|
| 1501 |
+
// Simple quadratic function
|
| 1502 |
+
const f = (x) => (x - 3) * (x - 3) + 2;
|
| 1503 |
+
const df = (x) => 2 * (x - 3);
|
| 1504 |
+
|
| 1505 |
+
function draw() {
|
| 1506 |
+
clearCanvas(ctx, canvas);
|
| 1507 |
+
|
| 1508 |
+
const padding = 60;
|
| 1509 |
+
const width = canvas.width - 2 * padding;
|
| 1510 |
+
const height = canvas.height - 2 * padding;
|
| 1511 |
+
const xMin = 0, xMax = 6;
|
| 1512 |
+
const yMax = 12;
|
| 1513 |
+
|
| 1514 |
+
// Draw axes
|
| 1515 |
+
drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
|
| 1516 |
+
drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
|
| 1517 |
+
|
| 1518 |
+
// Draw function
|
| 1519 |
+
ctx.beginPath();
|
| 1520 |
+
for (let x = xMin; x <= xMax; x += 0.05) {
|
| 1521 |
+
const px = padding + ((x - xMin) / (xMax - xMin)) * width;
|
| 1522 |
+
const y = f(x);
|
| 1523 |
+
const py = canvas.height - padding - (y / yMax) * height;
|
| 1524 |
+
if (x === xMin) {
|
| 1525 |
+
ctx.moveTo(px, py);
|
| 1526 |
+
} else {
|
| 1527 |
+
ctx.lineTo(px, py);
|
| 1528 |
+
}
|
| 1529 |
+
}
|
| 1530 |
+
ctx.strokeStyle = COLORS.cyan;
|
| 1531 |
+
ctx.lineWidth = 2;
|
| 1532 |
+
ctx.stroke();
|
| 1533 |
+
|
| 1534 |
+
// Draw path
|
| 1535 |
+
if (path.length > 0) {
|
| 1536 |
+
ctx.beginPath();
|
| 1537 |
+
path.forEach((point, i) => {
|
| 1538 |
+
const px = padding + ((point.x - xMin) / (xMax - xMin)) * width;
|
| 1539 |
+
const py = canvas.height - padding - (point.y / yMax) * height;
|
| 1540 |
+
|
| 1541 |
+
if (i === 0) {
|
| 1542 |
+
ctx.moveTo(px, py);
|
| 1543 |
+
} else {
|
| 1544 |
+
ctx.lineTo(px, py);
|
| 1545 |
+
}
|
| 1546 |
+
drawCircle(ctx, px, py, 5, COLORS.orange);
|
| 1547 |
+
});
|
| 1548 |
+
ctx.strokeStyle = COLORS.orange;
|
| 1549 |
+
ctx.lineWidth = 2;
|
| 1550 |
+
ctx.stroke();
|
| 1551 |
+
}
|
| 1552 |
+
|
| 1553 |
+
drawText(ctx, 'Gradient Descent: Following negative gradient to minimum', canvas.width / 2, 30, 14, COLORS.cyan);
|
| 1554 |
+
drawText(ctx, `Learning Rate: ${learningRate.toFixed(2)}`, canvas.width / 2, 50, 12, COLORS.text);
|
| 1555 |
+
}
|
| 1556 |
+
|
| 1557 |
+
function startDescent() {
|
| 1558 |
+
if (animating) return;
|
| 1559 |
+
animating = true;
|
| 1560 |
+
path = [{ x: 0.5, y: f(0.5) }];
|
| 1561 |
+
|
| 1562 |
+
const interval = setInterval(() => {
|
| 1563 |
+
const current = path[path.length - 1];
|
| 1564 |
+
const grad = df(current.x);
|
| 1565 |
+
const nextX = current.x - learningRate * grad;
|
| 1566 |
+
|
| 1567 |
+
if (Math.abs(grad) < 0.01 || path.length > 50) {
|
| 1568 |
+
clearInterval(interval);
|
| 1569 |
+
animating = false;
|
| 1570 |
+
return;
|
| 1571 |
+
}
|
| 1572 |
+
|
| 1573 |
+
path.push({ x: nextX, y: f(nextX) });
|
| 1574 |
+
draw();
|
| 1575 |
+
}, 200);
|
| 1576 |
+
}
|
| 1577 |
+
|
| 1578 |
+
const slider = document.getElementById('slider80');
|
| 1579 |
+
const label = document.getElementById('label80');
|
| 1580 |
+
const startBtn = document.getElementById('btn80start');
|
| 1581 |
+
const resetBtn = document.getElementById('btn80reset');
|
| 1582 |
+
|
| 1583 |
+
if (slider) {
|
| 1584 |
+
slider.addEventListener('input', (e) => {
|
| 1585 |
+
learningRate = parseFloat(e.target.value);
|
| 1586 |
+
if (label) label.textContent = learningRate.toFixed(2);
|
| 1587 |
+
});
|
| 1588 |
+
}
|
| 1589 |
+
|
| 1590 |
+
if (startBtn) {
|
| 1591 |
+
startBtn.addEventListener('click', startDescent);
|
| 1592 |
+
}
|
| 1593 |
+
|
| 1594 |
+
if (resetBtn) {
|
| 1595 |
+
resetBtn.addEventListener('click', () => {
|
| 1596 |
+
path = [];
|
| 1597 |
+
animating = false;
|
| 1598 |
+
draw();
|
| 1599 |
+
});
|
| 1600 |
+
}
|
| 1601 |
+
|
| 1602 |
+
draw();
|
| 1603 |
+
}
|
| 1604 |
+
|
| 1605 |
+
function initLossLandscapeCanvas() {
|
| 1606 |
+
const canvas = document.getElementById('canvas-85');
|
| 1607 |
+
if (!canvas) return;
|
| 1608 |
+
|
| 1609 |
+
const ctx = canvas.getContext('2d');
|
| 1610 |
+
let lossType = 'mse';
|
| 1611 |
+
|
| 1612 |
+
function draw() {
|
| 1613 |
+
clearCanvas(ctx, canvas);
|
| 1614 |
+
|
| 1615 |
+
const padding = 60;
|
| 1616 |
+
const width = canvas.width - 2 * padding;
|
| 1617 |
+
const height = canvas.height - 2 * padding;
|
| 1618 |
+
|
| 1619 |
+
// True value
|
| 1620 |
+
const trueVal = 5;
|
| 1621 |
+
|
| 1622 |
+
// Draw axes
|
| 1623 |
+
drawLine(ctx, padding, canvas.height - padding, canvas.width - padding, canvas.height - padding, COLORS.text, 2);
|
| 1624 |
+
drawLine(ctx, padding, padding, padding, canvas.height - padding, COLORS.text, 2);
|
| 1625 |
+
|
| 1626 |
+
// Draw loss function
|
| 1627 |
+
ctx.beginPath();
|
| 1628 |
+
for (let pred = 0; pred <= 10; pred += 0.1) {
|
| 1629 |
+
let loss;
|
| 1630 |
+
if (lossType === 'mse') {
|
| 1631 |
+
loss = Math.pow(trueVal - pred, 2);
|
| 1632 |
+
} else if (lossType === 'mae') {
|
| 1633 |
+
loss = Math.abs(trueVal - pred);
|
| 1634 |
+
} else {
|
| 1635 |
+
// Simplified cross-entropy
|
| 1636 |
+
loss = -Math.log(Math.max(0.01, 1 - Math.abs(trueVal - pred) / 10));
|
| 1637 |
+
}
|
| 1638 |
+
|
| 1639 |
+
const px = padding + (pred / 10) * width;
|
| 1640 |
+
const py = canvas.height - padding - (loss / 30) * height;
|
| 1641 |
+
|
| 1642 |
+
if (pred === 0) {
|
| 1643 |
+
ctx.moveTo(px, py);
|
| 1644 |
+
} else {
|
| 1645 |
+
ctx.lineTo(px, py);
|
| 1646 |
+
}
|
| 1647 |
+
}
|
| 1648 |
+
ctx.strokeStyle = COLORS.cyan;
|
| 1649 |
+
ctx.lineWidth = 3;
|
| 1650 |
+
ctx.stroke();
|
| 1651 |
+
|
| 1652 |
+
// Draw minimum
|
| 1653 |
+
const minX = padding + (trueVal / 10) * width;
|
| 1654 |
+
drawLine(ctx, minX, canvas.height - padding, minX, padding, COLORS.orange, 2);
|
| 1655 |
+
drawText(ctx, 'Minimum', minX + 10, padding + 20, 12, COLORS.orange);
|
| 1656 |
+
|
| 1657 |
+
const lossNames = {
|
| 1658 |
+
'mse': 'Mean Squared Error: (y - ŷ)²',
|
| 1659 |
+
'mae': 'Mean Absolute Error: |y - ŷ|',
|
| 1660 |
+
'cross': 'Cross-Entropy Loss'
|
| 1661 |
+
};
|
| 1662 |
+
|
| 1663 |
+
drawText(ctx, lossNames[lossType], canvas.width / 2, 30, 14, COLORS.cyan);
|
| 1664 |
+
drawText(ctx, 'Predicted Value →', canvas.width - 100, canvas.height - 30, 12, COLORS.text);
|
| 1665 |
+
drawText(ctx, 'Loss ↑', padding - 40, padding, 12, COLORS.text);
|
| 1666 |
+
}
|
| 1667 |
+
|
| 1668 |
+
const select = document.getElementById('select85');
|
| 1669 |
+
if (select) {
|
| 1670 |
+
select.addEventListener('change', (e) => {
|
| 1671 |
+
lossType = e.target.value;
|
| 1672 |
+
draw();
|
| 1673 |
+
});
|
| 1674 |
+
}
|
| 1675 |
+
|
| 1676 |
+
draw();
|
| 1677 |
+
}
|
| 1678 |
+
|
| 1679 |
+
console.log('%c📊 Mathematics Mastery Platform Loaded', 'color: #64ffda; font-size: 16px; font-weight: bold;');
|
| 1680 |
+
console.log('%cReady to explore 85 comprehensive topics across 4 subjects!', 'color: #4a90e2; font-size: 14px;');
|
| 1681 |
+
console.log('%c✓ Statistics (1-41) ✓ Linear Algebra (42-57) ✓ Calculus (58-69) ✓ Data Science (70-85)', 'color: #51cf66; font-size: 12px;');
|
math-ds-complete/index.html
ADDED
|
The diff for this file is too large to render.
See raw diff
|
|
|
math-ds-complete/style.css
ADDED
|
@@ -0,0 +1,1700 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
:root {
|
| 2 |
+
/* Primitive Color Tokens */
|
| 3 |
+
--color-white: rgba(255, 255, 255, 1);
|
| 4 |
+
--color-black: rgba(0, 0, 0, 1);
|
| 5 |
+
--color-cream-50: rgba(252, 252, 249, 1);
|
| 6 |
+
--color-cream-100: rgba(255, 255, 253, 1);
|
| 7 |
+
--color-gray-200: rgba(245, 245, 245, 1);
|
| 8 |
+
--color-gray-300: rgba(167, 169, 169, 1);
|
| 9 |
+
--color-gray-400: rgba(119, 124, 124, 1);
|
| 10 |
+
--color-slate-500: rgba(98, 108, 113, 1);
|
| 11 |
+
--color-brown-600: rgba(94, 82, 64, 1);
|
| 12 |
+
--color-charcoal-700: rgba(31, 33, 33, 1);
|
| 13 |
+
--color-charcoal-800: rgba(38, 40, 40, 1);
|
| 14 |
+
--color-slate-900: rgba(19, 52, 59, 1);
|
| 15 |
+
--color-teal-300: rgba(50, 184, 198, 1);
|
| 16 |
+
--color-teal-400: rgba(45, 166, 178, 1);
|
| 17 |
+
--color-teal-500: rgba(33, 128, 141, 1);
|
| 18 |
+
--color-teal-600: rgba(29, 116, 128, 1);
|
| 19 |
+
--color-teal-700: rgba(26, 104, 115, 1);
|
| 20 |
+
--color-teal-800: rgba(41, 150, 161, 1);
|
| 21 |
+
--color-red-400: rgba(255, 84, 89, 1);
|
| 22 |
+
--color-red-500: rgba(192, 21, 47, 1);
|
| 23 |
+
--color-orange-400: rgba(230, 129, 97, 1);
|
| 24 |
+
--color-orange-500: rgba(168, 75, 47, 1);
|
| 25 |
+
|
| 26 |
+
/* RGB versions for opacity control */
|
| 27 |
+
--color-brown-600-rgb: 94, 82, 64;
|
| 28 |
+
--color-teal-500-rgb: 33, 128, 141;
|
| 29 |
+
--color-slate-900-rgb: 19, 52, 59;
|
| 30 |
+
--color-slate-500-rgb: 98, 108, 113;
|
| 31 |
+
--color-red-500-rgb: 192, 21, 47;
|
| 32 |
+
--color-red-400-rgb: 255, 84, 89;
|
| 33 |
+
--color-orange-500-rgb: 168, 75, 47;
|
| 34 |
+
--color-orange-400-rgb: 230, 129, 97;
|
| 35 |
+
|
| 36 |
+
/* Background color tokens (Light Mode) */
|
| 37 |
+
--color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
|
| 38 |
+
--color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
|
| 39 |
+
--color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
|
| 40 |
+
--color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
|
| 41 |
+
--color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
|
| 42 |
+
--color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
|
| 43 |
+
--color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
|
| 44 |
+
--color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */
|
| 45 |
+
|
| 46 |
+
/* Semantic Color Tokens (Light Mode) */
|
| 47 |
+
--color-background: var(--color-cream-50);
|
| 48 |
+
--color-surface: var(--color-cream-100);
|
| 49 |
+
--color-text: var(--color-slate-900);
|
| 50 |
+
--color-text-secondary: var(--color-slate-500);
|
| 51 |
+
--color-primary: var(--color-teal-500);
|
| 52 |
+
--color-primary-hover: var(--color-teal-600);
|
| 53 |
+
--color-primary-active: var(--color-teal-700);
|
| 54 |
+
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
|
| 55 |
+
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
|
| 56 |
+
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
|
| 57 |
+
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
|
| 58 |
+
--color-btn-primary-text: var(--color-cream-50);
|
| 59 |
+
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
|
| 60 |
+
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
|
| 61 |
+
--color-error: var(--color-red-500);
|
| 62 |
+
--color-success: var(--color-teal-500);
|
| 63 |
+
--color-warning: var(--color-orange-500);
|
| 64 |
+
--color-info: var(--color-slate-500);
|
| 65 |
+
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
|
| 66 |
+
--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
|
| 67 |
+
|
| 68 |
+
/* Common style patterns */
|
| 69 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 70 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 71 |
+
--status-bg-opacity: 0.15;
|
| 72 |
+
--status-border-opacity: 0.25;
|
| 73 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 74 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 75 |
+
|
| 76 |
+
/* RGB versions for opacity control */
|
| 77 |
+
--color-success-rgb: 33, 128, 141;
|
| 78 |
+
--color-error-rgb: 192, 21, 47;
|
| 79 |
+
--color-warning-rgb: 168, 75, 47;
|
| 80 |
+
--color-info-rgb: 98, 108, 113;
|
| 81 |
+
|
| 82 |
+
/* Typography */
|
| 83 |
+
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
|
| 84 |
+
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
| 85 |
+
--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
|
| 86 |
+
Monaco, Consolas, monospace;
|
| 87 |
+
--font-size-xs: 11px;
|
| 88 |
+
--font-size-sm: 12px;
|
| 89 |
+
--font-size-base: 14px;
|
| 90 |
+
--font-size-md: 14px;
|
| 91 |
+
--font-size-lg: 16px;
|
| 92 |
+
--font-size-xl: 18px;
|
| 93 |
+
--font-size-2xl: 20px;
|
| 94 |
+
--font-size-3xl: 24px;
|
| 95 |
+
--font-size-4xl: 30px;
|
| 96 |
+
--font-weight-normal: 400;
|
| 97 |
+
--font-weight-medium: 500;
|
| 98 |
+
--font-weight-semibold: 550;
|
| 99 |
+
--font-weight-bold: 600;
|
| 100 |
+
--line-height-tight: 1.2;
|
| 101 |
+
--line-height-normal: 1.5;
|
| 102 |
+
--letter-spacing-tight: -0.01em;
|
| 103 |
+
|
| 104 |
+
/* Spacing */
|
| 105 |
+
--space-0: 0;
|
| 106 |
+
--space-1: 1px;
|
| 107 |
+
--space-2: 2px;
|
| 108 |
+
--space-4: 4px;
|
| 109 |
+
--space-6: 6px;
|
| 110 |
+
--space-8: 8px;
|
| 111 |
+
--space-10: 10px;
|
| 112 |
+
--space-12: 12px;
|
| 113 |
+
--space-16: 16px;
|
| 114 |
+
--space-20: 20px;
|
| 115 |
+
--space-24: 24px;
|
| 116 |
+
--space-32: 32px;
|
| 117 |
+
|
| 118 |
+
/* Border Radius */
|
| 119 |
+
--radius-sm: 6px;
|
| 120 |
+
--radius-base: 8px;
|
| 121 |
+
--radius-md: 10px;
|
| 122 |
+
--radius-lg: 12px;
|
| 123 |
+
--radius-full: 9999px;
|
| 124 |
+
|
| 125 |
+
/* Shadows */
|
| 126 |
+
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
|
| 127 |
+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
|
| 128 |
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
|
| 129 |
+
0 2px 4px -1px rgba(0, 0, 0, 0.02);
|
| 130 |
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
|
| 131 |
+
0 4px 6px -2px rgba(0, 0, 0, 0.02);
|
| 132 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
|
| 133 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
|
| 134 |
+
|
| 135 |
+
/* Animation */
|
| 136 |
+
--duration-fast: 150ms;
|
| 137 |
+
--duration-normal: 250ms;
|
| 138 |
+
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
|
| 139 |
+
|
| 140 |
+
/* Layout */
|
| 141 |
+
--container-sm: 640px;
|
| 142 |
+
--container-md: 768px;
|
| 143 |
+
--container-lg: 1024px;
|
| 144 |
+
--container-xl: 1280px;
|
| 145 |
+
}
|
| 146 |
+
|
| 147 |
+
/* Dark mode colors */
|
| 148 |
+
@media (prefers-color-scheme: dark) {
|
| 149 |
+
:root {
|
| 150 |
+
/* RGB versions for opacity control (Dark Mode) */
|
| 151 |
+
--color-gray-400-rgb: 119, 124, 124;
|
| 152 |
+
--color-teal-300-rgb: 50, 184, 198;
|
| 153 |
+
--color-gray-300-rgb: 167, 169, 169;
|
| 154 |
+
--color-gray-200-rgb: 245, 245, 245;
|
| 155 |
+
|
| 156 |
+
/* Background color tokens (Dark Mode) */
|
| 157 |
+
--color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
|
| 158 |
+
--color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
|
| 159 |
+
--color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
|
| 160 |
+
--color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
|
| 161 |
+
--color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
|
| 162 |
+
--color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
|
| 163 |
+
--color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
|
| 164 |
+
--color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
|
| 165 |
+
|
| 166 |
+
/* Semantic Color Tokens (Dark Mode) */
|
| 167 |
+
--color-background: var(--color-charcoal-700);
|
| 168 |
+
--color-surface: var(--color-charcoal-800);
|
| 169 |
+
--color-text: var(--color-gray-200);
|
| 170 |
+
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
|
| 171 |
+
--color-primary: var(--color-teal-300);
|
| 172 |
+
--color-primary-hover: var(--color-teal-400);
|
| 173 |
+
--color-primary-active: var(--color-teal-800);
|
| 174 |
+
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
|
| 175 |
+
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
|
| 176 |
+
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
|
| 177 |
+
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
|
| 178 |
+
--color-error: var(--color-red-400);
|
| 179 |
+
--color-success: var(--color-teal-300);
|
| 180 |
+
--color-warning: var(--color-orange-400);
|
| 181 |
+
--color-info: var(--color-gray-300);
|
| 182 |
+
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
|
| 183 |
+
--color-btn-primary-text: var(--color-slate-900);
|
| 184 |
+
--color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
|
| 185 |
+
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
|
| 186 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
| 187 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
| 188 |
+
--button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 189 |
+
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 190 |
+
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
|
| 191 |
+
|
| 192 |
+
/* Common style patterns - updated for dark mode */
|
| 193 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 194 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 195 |
+
--status-bg-opacity: 0.15;
|
| 196 |
+
--status-border-opacity: 0.25;
|
| 197 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 198 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 199 |
+
|
| 200 |
+
/* RGB versions for dark mode */
|
| 201 |
+
--color-success-rgb: var(--color-teal-300-rgb);
|
| 202 |
+
--color-error-rgb: var(--color-red-400-rgb);
|
| 203 |
+
--color-warning-rgb: var(--color-orange-400-rgb);
|
| 204 |
+
--color-info-rgb: var(--color-gray-300-rgb);
|
| 205 |
+
}
|
| 206 |
+
}
|
| 207 |
+
|
| 208 |
+
/* Data attribute for manual theme switching */
|
| 209 |
+
[data-color-scheme="dark"] {
|
| 210 |
+
/* RGB versions for opacity control (dark mode) */
|
| 211 |
+
--color-gray-400-rgb: 119, 124, 124;
|
| 212 |
+
--color-teal-300-rgb: 50, 184, 198;
|
| 213 |
+
--color-gray-300-rgb: 167, 169, 169;
|
| 214 |
+
--color-gray-200-rgb: 245, 245, 245;
|
| 215 |
+
|
| 216 |
+
/* Colorful background palette - Dark Mode */
|
| 217 |
+
--color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
|
| 218 |
+
--color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
|
| 219 |
+
--color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
|
| 220 |
+
--color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
|
| 221 |
+
--color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
|
| 222 |
+
--color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
|
| 223 |
+
--color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
|
| 224 |
+
--color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
|
| 225 |
+
|
| 226 |
+
/* Semantic Color Tokens (Dark Mode) */
|
| 227 |
+
--color-background: var(--color-charcoal-700);
|
| 228 |
+
--color-surface: var(--color-charcoal-800);
|
| 229 |
+
--color-text: var(--color-gray-200);
|
| 230 |
+
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
|
| 231 |
+
--color-primary: var(--color-teal-300);
|
| 232 |
+
--color-primary-hover: var(--color-teal-400);
|
| 233 |
+
--color-primary-active: var(--color-teal-800);
|
| 234 |
+
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
|
| 235 |
+
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
|
| 236 |
+
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
|
| 237 |
+
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
|
| 238 |
+
--color-error: var(--color-red-400);
|
| 239 |
+
--color-success: var(--color-teal-300);
|
| 240 |
+
--color-warning: var(--color-orange-400);
|
| 241 |
+
--color-info: var(--color-gray-300);
|
| 242 |
+
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
|
| 243 |
+
--color-btn-primary-text: var(--color-slate-900);
|
| 244 |
+
--color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
|
| 245 |
+
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
|
| 246 |
+
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
| 247 |
+
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
|
| 248 |
+
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
|
| 249 |
+
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
|
| 250 |
+
|
| 251 |
+
/* Common style patterns - updated for dark mode */
|
| 252 |
+
--focus-ring: 0 0 0 3px var(--color-focus-ring);
|
| 253 |
+
--focus-outline: 2px solid var(--color-primary);
|
| 254 |
+
--status-bg-opacity: 0.15;
|
| 255 |
+
--status-border-opacity: 0.25;
|
| 256 |
+
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 257 |
+
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
| 258 |
+
|
| 259 |
+
/* RGB versions for dark mode */
|
| 260 |
+
--color-success-rgb: var(--color-teal-300-rgb);
|
| 261 |
+
--color-error-rgb: var(--color-red-400-rgb);
|
| 262 |
+
--color-warning-rgb: var(--color-orange-400-rgb);
|
| 263 |
+
--color-info-rgb: var(--color-gray-300-rgb);
|
| 264 |
+
}
|
| 265 |
+
|
| 266 |
+
[data-color-scheme="light"] {
|
| 267 |
+
/* RGB versions for opacity control (light mode) */
|
| 268 |
+
--color-brown-600-rgb: 94, 82, 64;
|
| 269 |
+
--color-teal-500-rgb: 33, 128, 141;
|
| 270 |
+
--color-slate-900-rgb: 19, 52, 59;
|
| 271 |
+
|
| 272 |
+
/* Semantic Color Tokens (Light Mode) */
|
| 273 |
+
--color-background: var(--color-cream-50);
|
| 274 |
+
--color-surface: var(--color-cream-100);
|
| 275 |
+
--color-text: var(--color-slate-900);
|
| 276 |
+
--color-text-secondary: var(--color-slate-500);
|
| 277 |
+
--color-primary: var(--color-teal-500);
|
| 278 |
+
--color-primary-hover: var(--color-teal-600);
|
| 279 |
+
--color-primary-active: var(--color-teal-700);
|
| 280 |
+
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
|
| 281 |
+
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
|
| 282 |
+
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
|
| 283 |
+
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
|
| 284 |
+
--color-btn-primary-text: var(--color-cream-50);
|
| 285 |
+
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
|
| 286 |
+
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
|
| 287 |
+
--color-error: var(--color-red-500);
|
| 288 |
+
--color-success: var(--color-teal-500);
|
| 289 |
+
--color-warning: var(--color-orange-500);
|
| 290 |
+
--color-info: var(--color-slate-500);
|
| 291 |
+
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
|
| 292 |
+
|
| 293 |
+
/* RGB versions for light mode */
|
| 294 |
+
--color-success-rgb: var(--color-teal-500-rgb);
|
| 295 |
+
--color-error-rgb: var(--color-red-500-rgb);
|
| 296 |
+
--color-warning-rgb: var(--color-orange-500-rgb);
|
| 297 |
+
--color-info-rgb: var(--color-slate-500-rgb);
|
| 298 |
+
}
|
| 299 |
+
|
| 300 |
+
/* Base styles */
|
| 301 |
+
html {
|
| 302 |
+
font-size: var(--font-size-base);
|
| 303 |
+
font-family: var(--font-family-base);
|
| 304 |
+
line-height: var(--line-height-normal);
|
| 305 |
+
color: var(--color-text);
|
| 306 |
+
background-color: var(--color-background);
|
| 307 |
+
-webkit-font-smoothing: antialiased;
|
| 308 |
+
box-sizing: border-box;
|
| 309 |
+
}
|
| 310 |
+
|
| 311 |
+
body {
|
| 312 |
+
margin: 0;
|
| 313 |
+
padding: 0;
|
| 314 |
+
}
|
| 315 |
+
|
| 316 |
+
*,
|
| 317 |
+
*::before,
|
| 318 |
+
*::after {
|
| 319 |
+
box-sizing: inherit;
|
| 320 |
+
}
|
| 321 |
+
|
| 322 |
+
/* Typography */
|
| 323 |
+
h1,
|
| 324 |
+
h2,
|
| 325 |
+
h3,
|
| 326 |
+
h4,
|
| 327 |
+
h5,
|
| 328 |
+
h6 {
|
| 329 |
+
margin: 0;
|
| 330 |
+
font-weight: var(--font-weight-semibold);
|
| 331 |
+
line-height: var(--line-height-tight);
|
| 332 |
+
color: var(--color-text);
|
| 333 |
+
letter-spacing: var(--letter-spacing-tight);
|
| 334 |
+
}
|
| 335 |
+
|
| 336 |
+
h1 {
|
| 337 |
+
font-size: var(--font-size-4xl);
|
| 338 |
+
}
|
| 339 |
+
h2 {
|
| 340 |
+
font-size: var(--font-size-3xl);
|
| 341 |
+
}
|
| 342 |
+
h3 {
|
| 343 |
+
font-size: var(--font-size-2xl);
|
| 344 |
+
}
|
| 345 |
+
h4 {
|
| 346 |
+
font-size: var(--font-size-xl);
|
| 347 |
+
}
|
| 348 |
+
h5 {
|
| 349 |
+
font-size: var(--font-size-lg);
|
| 350 |
+
}
|
| 351 |
+
h6 {
|
| 352 |
+
font-size: var(--font-size-md);
|
| 353 |
+
}
|
| 354 |
+
|
| 355 |
+
p {
|
| 356 |
+
margin: 0 0 var(--space-16) 0;
|
| 357 |
+
}
|
| 358 |
+
|
| 359 |
+
a {
|
| 360 |
+
color: var(--color-primary);
|
| 361 |
+
text-decoration: none;
|
| 362 |
+
transition: color var(--duration-fast) var(--ease-standard);
|
| 363 |
+
}
|
| 364 |
+
|
| 365 |
+
a:hover {
|
| 366 |
+
color: var(--color-primary-hover);
|
| 367 |
+
}
|
| 368 |
+
|
| 369 |
+
code,
|
| 370 |
+
pre {
|
| 371 |
+
font-family: var(--font-family-mono);
|
| 372 |
+
font-size: calc(var(--font-size-base) * 0.95);
|
| 373 |
+
background-color: var(--color-secondary);
|
| 374 |
+
border-radius: var(--radius-sm);
|
| 375 |
+
}
|
| 376 |
+
|
| 377 |
+
code {
|
| 378 |
+
padding: var(--space-1) var(--space-4);
|
| 379 |
+
}
|
| 380 |
+
|
| 381 |
+
pre {
|
| 382 |
+
padding: var(--space-16);
|
| 383 |
+
margin: var(--space-16) 0;
|
| 384 |
+
overflow: auto;
|
| 385 |
+
border: 1px solid var(--color-border);
|
| 386 |
+
}
|
| 387 |
+
|
| 388 |
+
pre code {
|
| 389 |
+
background: none;
|
| 390 |
+
padding: 0;
|
| 391 |
+
}
|
| 392 |
+
|
| 393 |
+
/* Buttons */
|
| 394 |
+
.btn {
|
| 395 |
+
display: inline-flex;
|
| 396 |
+
align-items: center;
|
| 397 |
+
justify-content: center;
|
| 398 |
+
padding: var(--space-8) var(--space-16);
|
| 399 |
+
border-radius: var(--radius-base);
|
| 400 |
+
font-size: var(--font-size-base);
|
| 401 |
+
font-weight: 500;
|
| 402 |
+
line-height: 1.5;
|
| 403 |
+
cursor: pointer;
|
| 404 |
+
transition: all var(--duration-normal) var(--ease-standard);
|
| 405 |
+
border: none;
|
| 406 |
+
text-decoration: none;
|
| 407 |
+
position: relative;
|
| 408 |
+
}
|
| 409 |
+
|
| 410 |
+
.btn:focus-visible {
|
| 411 |
+
outline: none;
|
| 412 |
+
box-shadow: var(--focus-ring);
|
| 413 |
+
}
|
| 414 |
+
|
| 415 |
+
.btn--primary {
|
| 416 |
+
background: var(--color-primary);
|
| 417 |
+
color: var(--color-btn-primary-text);
|
| 418 |
+
}
|
| 419 |
+
|
| 420 |
+
.btn--primary:hover {
|
| 421 |
+
background: var(--color-primary-hover);
|
| 422 |
+
}
|
| 423 |
+
|
| 424 |
+
.btn--primary:active {
|
| 425 |
+
background: var(--color-primary-active);
|
| 426 |
+
}
|
| 427 |
+
|
| 428 |
+
.btn--secondary {
|
| 429 |
+
background: var(--color-secondary);
|
| 430 |
+
color: var(--color-text);
|
| 431 |
+
}
|
| 432 |
+
|
| 433 |
+
.btn--secondary:hover {
|
| 434 |
+
background: var(--color-secondary-hover);
|
| 435 |
+
}
|
| 436 |
+
|
| 437 |
+
.btn--secondary:active {
|
| 438 |
+
background: var(--color-secondary-active);
|
| 439 |
+
}
|
| 440 |
+
|
| 441 |
+
.btn--outline {
|
| 442 |
+
background: transparent;
|
| 443 |
+
border: 1px solid var(--color-border);
|
| 444 |
+
color: var(--color-text);
|
| 445 |
+
}
|
| 446 |
+
|
| 447 |
+
.btn--outline:hover {
|
| 448 |
+
background: var(--color-secondary);
|
| 449 |
+
}
|
| 450 |
+
|
| 451 |
+
.btn--sm {
|
| 452 |
+
padding: var(--space-4) var(--space-12);
|
| 453 |
+
font-size: var(--font-size-sm);
|
| 454 |
+
border-radius: var(--radius-sm);
|
| 455 |
+
}
|
| 456 |
+
|
| 457 |
+
.btn--lg {
|
| 458 |
+
padding: var(--space-10) var(--space-20);
|
| 459 |
+
font-size: var(--font-size-lg);
|
| 460 |
+
border-radius: var(--radius-md);
|
| 461 |
+
}
|
| 462 |
+
|
| 463 |
+
.btn--full-width {
|
| 464 |
+
width: 100%;
|
| 465 |
+
}
|
| 466 |
+
|
| 467 |
+
.btn:disabled {
|
| 468 |
+
opacity: 0.5;
|
| 469 |
+
cursor: not-allowed;
|
| 470 |
+
}
|
| 471 |
+
|
| 472 |
+
/* Form elements */
|
| 473 |
+
.form-control {
|
| 474 |
+
display: block;
|
| 475 |
+
width: 100%;
|
| 476 |
+
padding: var(--space-8) var(--space-12);
|
| 477 |
+
font-size: var(--font-size-md);
|
| 478 |
+
line-height: 1.5;
|
| 479 |
+
color: var(--color-text);
|
| 480 |
+
background-color: var(--color-surface);
|
| 481 |
+
border: 1px solid var(--color-border);
|
| 482 |
+
border-radius: var(--radius-base);
|
| 483 |
+
transition: border-color var(--duration-fast) var(--ease-standard),
|
| 484 |
+
box-shadow var(--duration-fast) var(--ease-standard);
|
| 485 |
+
}
|
| 486 |
+
|
| 487 |
+
textarea.form-control {
|
| 488 |
+
font-family: var(--font-family-base);
|
| 489 |
+
font-size: var(--font-size-base);
|
| 490 |
+
}
|
| 491 |
+
|
| 492 |
+
select.form-control {
|
| 493 |
+
padding: var(--space-8) var(--space-12);
|
| 494 |
+
-webkit-appearance: none;
|
| 495 |
+
-moz-appearance: none;
|
| 496 |
+
appearance: none;
|
| 497 |
+
background-image: var(--select-caret-light);
|
| 498 |
+
background-repeat: no-repeat;
|
| 499 |
+
background-position: right var(--space-12) center;
|
| 500 |
+
background-size: 16px;
|
| 501 |
+
padding-right: var(--space-32);
|
| 502 |
+
}
|
| 503 |
+
|
| 504 |
+
/* Add a dark mode specific caret */
|
| 505 |
+
@media (prefers-color-scheme: dark) {
|
| 506 |
+
select.form-control {
|
| 507 |
+
background-image: var(--select-caret-dark);
|
| 508 |
+
}
|
| 509 |
+
}
|
| 510 |
+
|
| 511 |
+
/* Also handle data-color-scheme */
|
| 512 |
+
[data-color-scheme="dark"] select.form-control {
|
| 513 |
+
background-image: var(--select-caret-dark);
|
| 514 |
+
}
|
| 515 |
+
|
| 516 |
+
[data-color-scheme="light"] select.form-control {
|
| 517 |
+
background-image: var(--select-caret-light);
|
| 518 |
+
}
|
| 519 |
+
|
| 520 |
+
.form-control:focus {
|
| 521 |
+
border-color: var(--color-primary);
|
| 522 |
+
outline: var(--focus-outline);
|
| 523 |
+
}
|
| 524 |
+
|
| 525 |
+
.form-label {
|
| 526 |
+
display: block;
|
| 527 |
+
margin-bottom: var(--space-8);
|
| 528 |
+
font-weight: var(--font-weight-medium);
|
| 529 |
+
font-size: var(--font-size-sm);
|
| 530 |
+
}
|
| 531 |
+
|
| 532 |
+
.form-group {
|
| 533 |
+
margin-bottom: var(--space-16);
|
| 534 |
+
}
|
| 535 |
+
|
| 536 |
+
/* Card component */
|
| 537 |
+
.card {
|
| 538 |
+
background-color: var(--color-surface);
|
| 539 |
+
border-radius: var(--radius-lg);
|
| 540 |
+
border: 1px solid var(--color-card-border);
|
| 541 |
+
box-shadow: var(--shadow-sm);
|
| 542 |
+
overflow: hidden;
|
| 543 |
+
transition: box-shadow var(--duration-normal) var(--ease-standard);
|
| 544 |
+
}
|
| 545 |
+
|
| 546 |
+
.card:hover {
|
| 547 |
+
box-shadow: var(--shadow-md);
|
| 548 |
+
}
|
| 549 |
+
|
| 550 |
+
.card__body {
|
| 551 |
+
padding: var(--space-16);
|
| 552 |
+
}
|
| 553 |
+
|
| 554 |
+
.card__header,
|
| 555 |
+
.card__footer {
|
| 556 |
+
padding: var(--space-16);
|
| 557 |
+
border-bottom: 1px solid var(--color-card-border-inner);
|
| 558 |
+
}
|
| 559 |
+
|
| 560 |
+
/* Status indicators - simplified with CSS variables */
|
| 561 |
+
.status {
|
| 562 |
+
display: inline-flex;
|
| 563 |
+
align-items: center;
|
| 564 |
+
padding: var(--space-6) var(--space-12);
|
| 565 |
+
border-radius: var(--radius-full);
|
| 566 |
+
font-weight: var(--font-weight-medium);
|
| 567 |
+
font-size: var(--font-size-sm);
|
| 568 |
+
}
|
| 569 |
+
|
| 570 |
+
.status--success {
|
| 571 |
+
background-color: rgba(
|
| 572 |
+
var(--color-success-rgb, 33, 128, 141),
|
| 573 |
+
var(--status-bg-opacity)
|
| 574 |
+
);
|
| 575 |
+
color: var(--color-success);
|
| 576 |
+
border: 1px solid
|
| 577 |
+
rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
|
| 578 |
+
}
|
| 579 |
+
|
| 580 |
+
.status--error {
|
| 581 |
+
background-color: rgba(
|
| 582 |
+
var(--color-error-rgb, 192, 21, 47),
|
| 583 |
+
var(--status-bg-opacity)
|
| 584 |
+
);
|
| 585 |
+
color: var(--color-error);
|
| 586 |
+
border: 1px solid
|
| 587 |
+
rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
|
| 588 |
+
}
|
| 589 |
+
|
| 590 |
+
.status--warning {
|
| 591 |
+
background-color: rgba(
|
| 592 |
+
var(--color-warning-rgb, 168, 75, 47),
|
| 593 |
+
var(--status-bg-opacity)
|
| 594 |
+
);
|
| 595 |
+
color: var(--color-warning);
|
| 596 |
+
border: 1px solid
|
| 597 |
+
rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
|
| 598 |
+
}
|
| 599 |
+
|
| 600 |
+
.status--info {
|
| 601 |
+
background-color: rgba(
|
| 602 |
+
var(--color-info-rgb, 98, 108, 113),
|
| 603 |
+
var(--status-bg-opacity)
|
| 604 |
+
);
|
| 605 |
+
color: var(--color-info);
|
| 606 |
+
border: 1px solid
|
| 607 |
+
rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
|
| 608 |
+
}
|
| 609 |
+
|
| 610 |
+
/* Container layout */
|
| 611 |
+
.container {
|
| 612 |
+
width: 100%;
|
| 613 |
+
margin-right: auto;
|
| 614 |
+
margin-left: auto;
|
| 615 |
+
padding-right: var(--space-16);
|
| 616 |
+
padding-left: var(--space-16);
|
| 617 |
+
}
|
| 618 |
+
|
| 619 |
+
@media (min-width: 640px) {
|
| 620 |
+
.container {
|
| 621 |
+
max-width: var(--container-sm);
|
| 622 |
+
}
|
| 623 |
+
}
|
| 624 |
+
@media (min-width: 768px) {
|
| 625 |
+
.container {
|
| 626 |
+
max-width: var(--container-md);
|
| 627 |
+
}
|
| 628 |
+
}
|
| 629 |
+
@media (min-width: 1024px) {
|
| 630 |
+
.container {
|
| 631 |
+
max-width: var(--container-lg);
|
| 632 |
+
}
|
| 633 |
+
}
|
| 634 |
+
@media (min-width: 1280px) {
|
| 635 |
+
.container {
|
| 636 |
+
max-width: var(--container-xl);
|
| 637 |
+
}
|
| 638 |
+
}
|
| 639 |
+
|
| 640 |
+
/* Utility classes */
|
| 641 |
+
.flex {
|
| 642 |
+
display: flex;
|
| 643 |
+
}
|
| 644 |
+
.flex-col {
|
| 645 |
+
flex-direction: column;
|
| 646 |
+
}
|
| 647 |
+
.items-center {
|
| 648 |
+
align-items: center;
|
| 649 |
+
}
|
| 650 |
+
.justify-center {
|
| 651 |
+
justify-content: center;
|
| 652 |
+
}
|
| 653 |
+
.justify-between {
|
| 654 |
+
justify-content: space-between;
|
| 655 |
+
}
|
| 656 |
+
.gap-4 {
|
| 657 |
+
gap: var(--space-4);
|
| 658 |
+
}
|
| 659 |
+
.gap-8 {
|
| 660 |
+
gap: var(--space-8);
|
| 661 |
+
}
|
| 662 |
+
.gap-16 {
|
| 663 |
+
gap: var(--space-16);
|
| 664 |
+
}
|
| 665 |
+
|
| 666 |
+
.m-0 {
|
| 667 |
+
margin: 0;
|
| 668 |
+
}
|
| 669 |
+
.mt-8 {
|
| 670 |
+
margin-top: var(--space-8);
|
| 671 |
+
}
|
| 672 |
+
.mb-8 {
|
| 673 |
+
margin-bottom: var(--space-8);
|
| 674 |
+
}
|
| 675 |
+
.mx-8 {
|
| 676 |
+
margin-left: var(--space-8);
|
| 677 |
+
margin-right: var(--space-8);
|
| 678 |
+
}
|
| 679 |
+
.my-8 {
|
| 680 |
+
margin-top: var(--space-8);
|
| 681 |
+
margin-bottom: var(--space-8);
|
| 682 |
+
}
|
| 683 |
+
|
| 684 |
+
.p-0 {
|
| 685 |
+
padding: 0;
|
| 686 |
+
}
|
| 687 |
+
.py-8 {
|
| 688 |
+
padding-top: var(--space-8);
|
| 689 |
+
padding-bottom: var(--space-8);
|
| 690 |
+
}
|
| 691 |
+
.px-8 {
|
| 692 |
+
padding-left: var(--space-8);
|
| 693 |
+
padding-right: var(--space-8);
|
| 694 |
+
}
|
| 695 |
+
.py-16 {
|
| 696 |
+
padding-top: var(--space-16);
|
| 697 |
+
padding-bottom: var(--space-16);
|
| 698 |
+
}
|
| 699 |
+
.px-16 {
|
| 700 |
+
padding-left: var(--space-16);
|
| 701 |
+
padding-right: var(--space-16);
|
| 702 |
+
}
|
| 703 |
+
|
| 704 |
+
.block {
|
| 705 |
+
display: block;
|
| 706 |
+
}
|
| 707 |
+
.hidden {
|
| 708 |
+
display: none;
|
| 709 |
+
}
|
| 710 |
+
|
| 711 |
+
/* Accessibility */
|
| 712 |
+
.sr-only {
|
| 713 |
+
position: absolute;
|
| 714 |
+
width: 1px;
|
| 715 |
+
height: 1px;
|
| 716 |
+
padding: 0;
|
| 717 |
+
margin: -1px;
|
| 718 |
+
overflow: hidden;
|
| 719 |
+
clip: rect(0, 0, 0, 0);
|
| 720 |
+
white-space: nowrap;
|
| 721 |
+
border-width: 0;
|
| 722 |
+
}
|
| 723 |
+
|
| 724 |
+
:focus-visible {
|
| 725 |
+
outline: var(--focus-outline);
|
| 726 |
+
outline-offset: 2px;
|
| 727 |
+
}
|
| 728 |
+
|
| 729 |
+
/* Dark mode specifics */
|
| 730 |
+
[data-color-scheme="dark"] .btn--outline {
|
| 731 |
+
border: 1px solid var(--color-border-secondary);
|
| 732 |
+
}
|
| 733 |
+
|
| 734 |
+
@font-face {
|
| 735 |
+
font-family: 'FKGroteskNeue';
|
| 736 |
+
src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')
|
| 737 |
+
format('woff2');
|
| 738 |
+
}
|
| 739 |
+
|
| 740 |
+
/* END PERPLEXITY DESIGN SYSTEM */
|
| 741 |
+
/* Reset and Base Styles */
|
| 742 |
+
* {
|
| 743 |
+
margin: 0;
|
| 744 |
+
padding: 0;
|
| 745 |
+
box-sizing: border-box;
|
| 746 |
+
}
|
| 747 |
+
|
| 748 |
+
html {
|
| 749 |
+
scroll-behavior: smooth;
|
| 750 |
+
}
|
| 751 |
+
|
| 752 |
+
body {
|
| 753 |
+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
| 754 |
+
background-color: #1a1a2e;
|
| 755 |
+
color: #e1e1e1;
|
| 756 |
+
line-height: 1.6;
|
| 757 |
+
overflow-x: hidden;
|
| 758 |
+
}
|
| 759 |
+
|
| 760 |
+
/* Subject Tabs */
|
| 761 |
+
.subject-tabs {
|
| 762 |
+
display: flex;
|
| 763 |
+
gap: 1rem;
|
| 764 |
+
margin-top: 1rem;
|
| 765 |
+
}
|
| 766 |
+
|
| 767 |
+
.subject-tab {
|
| 768 |
+
padding: 0.6rem 1.5rem;
|
| 769 |
+
background: rgba(74, 144, 226, 0.2);
|
| 770 |
+
border: 2px solid transparent;
|
| 771 |
+
border-radius: 8px;
|
| 772 |
+
color: #a0a0a0;
|
| 773 |
+
font-weight: 600;
|
| 774 |
+
cursor: pointer;
|
| 775 |
+
transition: all 0.3s ease;
|
| 776 |
+
font-size: 0.9rem;
|
| 777 |
+
}
|
| 778 |
+
|
| 779 |
+
.subject-tab:hover {
|
| 780 |
+
background: rgba(74, 144, 226, 0.3);
|
| 781 |
+
color: #64ffda;
|
| 782 |
+
}
|
| 783 |
+
|
| 784 |
+
.subject-tab.active {
|
| 785 |
+
background: linear-gradient(135deg, #4a90e2, #64ffda);
|
| 786 |
+
color: #1a1a2e;
|
| 787 |
+
border-color: #64ffda;
|
| 788 |
+
box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
|
| 789 |
+
}
|
| 790 |
+
|
| 791 |
+
/* Top Navigation */
|
| 792 |
+
.top-nav {
|
| 793 |
+
position: sticky;
|
| 794 |
+
top: 0;
|
| 795 |
+
background: linear-gradient(135deg, #16213e 0%, #0f3460 100%);
|
| 796 |
+
padding: 1rem 0;
|
| 797 |
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
| 798 |
+
z-index: 1000;
|
| 799 |
+
border-bottom: 2px solid #4a90e2;
|
| 800 |
+
}
|
| 801 |
+
|
| 802 |
+
.nav-container {
|
| 803 |
+
max-width: 1400px;
|
| 804 |
+
margin: 0 auto;
|
| 805 |
+
padding: 0 2rem;
|
| 806 |
+
display: flex;
|
| 807 |
+
flex-direction: column;
|
| 808 |
+
gap: 1rem;
|
| 809 |
+
}
|
| 810 |
+
|
| 811 |
+
.course-title {
|
| 812 |
+
font-size: 1.8rem;
|
| 813 |
+
color: #64ffda;
|
| 814 |
+
font-weight: 700;
|
| 815 |
+
text-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
|
| 816 |
+
}
|
| 817 |
+
|
| 818 |
+
.mobile-menu-btn {
|
| 819 |
+
display: none;
|
| 820 |
+
flex-direction: column;
|
| 821 |
+
background: none;
|
| 822 |
+
border: none;
|
| 823 |
+
cursor: pointer;
|
| 824 |
+
padding: 0.5rem;
|
| 825 |
+
}
|
| 826 |
+
|
| 827 |
+
.mobile-menu-btn span {
|
| 828 |
+
width: 25px;
|
| 829 |
+
height: 3px;
|
| 830 |
+
background: #64ffda;
|
| 831 |
+
margin: 3px 0;
|
| 832 |
+
border-radius: 3px;
|
| 833 |
+
transition: all 0.3s ease;
|
| 834 |
+
}
|
| 835 |
+
|
| 836 |
+
/* Main Container */
|
| 837 |
+
.main-container {
|
| 838 |
+
display: flex;
|
| 839 |
+
max-width: 1400px;
|
| 840 |
+
margin: 0 auto;
|
| 841 |
+
min-height: calc(100vh - 80px);
|
| 842 |
+
}
|
| 843 |
+
|
| 844 |
+
/* Sidebar */
|
| 845 |
+
.sidebar {
|
| 846 |
+
width: 280px;
|
| 847 |
+
background: #16213e;
|
| 848 |
+
padding: 2rem 1rem;
|
| 849 |
+
position: sticky;
|
| 850 |
+
top: 80px;
|
| 851 |
+
height: calc(100vh - 80px);
|
| 852 |
+
overflow-y: auto;
|
| 853 |
+
border-right: 2px solid #0f3460;
|
| 854 |
+
transition: transform 0.3s ease;
|
| 855 |
+
}
|
| 856 |
+
|
| 857 |
+
.sidebar-content h3 {
|
| 858 |
+
color: #64ffda;
|
| 859 |
+
margin-bottom: 1.5rem;
|
| 860 |
+
font-size: 1.3rem;
|
| 861 |
+
text-align: center;
|
| 862 |
+
}
|
| 863 |
+
|
| 864 |
+
.module {
|
| 865 |
+
margin-bottom: 2rem;
|
| 866 |
+
}
|
| 867 |
+
|
| 868 |
+
.module-title {
|
| 869 |
+
color: #4a90e2;
|
| 870 |
+
font-size: 0.9rem;
|
| 871 |
+
text-transform: uppercase;
|
| 872 |
+
letter-spacing: 1px;
|
| 873 |
+
margin-bottom: 0.8rem;
|
| 874 |
+
padding: 0.5rem;
|
| 875 |
+
background: rgba(74, 144, 226, 0.1);
|
| 876 |
+
border-radius: 5px;
|
| 877 |
+
border-left: 3px solid #4a90e2;
|
| 878 |
+
}
|
| 879 |
+
|
| 880 |
+
.topic-list {
|
| 881 |
+
list-style: none;
|
| 882 |
+
}
|
| 883 |
+
|
| 884 |
+
.topic-list li {
|
| 885 |
+
margin-bottom: 0.5rem;
|
| 886 |
+
}
|
| 887 |
+
|
| 888 |
+
.topic-link {
|
| 889 |
+
display: block;
|
| 890 |
+
padding: 0.6rem 0.8rem;
|
| 891 |
+
color: #a0a0a0;
|
| 892 |
+
text-decoration: none;
|
| 893 |
+
border-radius: 5px;
|
| 894 |
+
transition: all 0.3s ease;
|
| 895 |
+
font-size: 0.9rem;
|
| 896 |
+
border-left: 3px solid transparent;
|
| 897 |
+
}
|
| 898 |
+
|
| 899 |
+
.topic-link:hover {
|
| 900 |
+
background: rgba(100, 255, 218, 0.1);
|
| 901 |
+
color: #64ffda;
|
| 902 |
+
border-left-color: #64ffda;
|
| 903 |
+
transform: translateX(5px);
|
| 904 |
+
}
|
| 905 |
+
|
| 906 |
+
.topic-link.active {
|
| 907 |
+
background: rgba(100, 255, 218, 0.15);
|
| 908 |
+
color: #64ffda;
|
| 909 |
+
border-left-color: #64ffda;
|
| 910 |
+
font-weight: 600;
|
| 911 |
+
}
|
| 912 |
+
|
| 913 |
+
/* Scrollbar Styling */
|
| 914 |
+
.sidebar::-webkit-scrollbar {
|
| 915 |
+
width: 8px;
|
| 916 |
+
}
|
| 917 |
+
|
| 918 |
+
.sidebar::-webkit-scrollbar-track {
|
| 919 |
+
background: #0f3460;
|
| 920 |
+
}
|
| 921 |
+
|
| 922 |
+
.sidebar::-webkit-scrollbar-thumb {
|
| 923 |
+
background: #4a90e2;
|
| 924 |
+
border-radius: 4px;
|
| 925 |
+
}
|
| 926 |
+
|
| 927 |
+
.sidebar::-webkit-scrollbar-thumb:hover {
|
| 928 |
+
background: #64ffda;
|
| 929 |
+
}
|
| 930 |
+
|
| 931 |
+
/* Main Content */
|
| 932 |
+
.content {
|
| 933 |
+
flex: 1;
|
| 934 |
+
padding: 3rem;
|
| 935 |
+
background: #1a1a2e;
|
| 936 |
+
}
|
| 937 |
+
|
| 938 |
+
/* Subject-specific styling */
|
| 939 |
+
.topic-section[data-subject="statistics"] .topic-number {
|
| 940 |
+
background: linear-gradient(135deg, #4a90e2, #64ffda);
|
| 941 |
+
}
|
| 942 |
+
|
| 943 |
+
.topic-section[data-subject="linear-algebra"] .topic-number {
|
| 944 |
+
background: linear-gradient(135deg, #b47aea, #e66af5);
|
| 945 |
+
}
|
| 946 |
+
|
| 947 |
+
.topic-section[data-subject="calculus"] .topic-number {
|
| 948 |
+
background: linear-gradient(135deg, #ff6b6b, #ffa94d);
|
| 949 |
+
}
|
| 950 |
+
|
| 951 |
+
.topic-section[data-subject="data-science"] .topic-number {
|
| 952 |
+
background: linear-gradient(135deg, #51cf66, #40c057);
|
| 953 |
+
}
|
| 954 |
+
|
| 955 |
+
.topic-section[data-subject="linear-algebra"] .topic-header h2 {
|
| 956 |
+
color: #b47aea;
|
| 957 |
+
}
|
| 958 |
+
|
| 959 |
+
.topic-section[data-subject="calculus"] .topic-header h2 {
|
| 960 |
+
color: #ff6b6b;
|
| 961 |
+
}
|
| 962 |
+
|
| 963 |
+
.topic-section[data-subject="data-science"] .topic-header h2 {
|
| 964 |
+
color: #51cf66;
|
| 965 |
+
}
|
| 966 |
+
|
| 967 |
+
/* Topic Section */
|
| 968 |
+
.topic-section {
|
| 969 |
+
margin-bottom: 4rem;
|
| 970 |
+
opacity: 0;
|
| 971 |
+
transform: translateY(20px);
|
| 972 |
+
animation: fadeInUp 0.6s ease forwards;
|
| 973 |
+
}
|
| 974 |
+
|
| 975 |
+
@keyframes fadeInUp {
|
| 976 |
+
to {
|
| 977 |
+
opacity: 1;
|
| 978 |
+
transform: translateY(0);
|
| 979 |
+
}
|
| 980 |
+
}
|
| 981 |
+
|
| 982 |
+
.topic-header {
|
| 983 |
+
margin-bottom: 2rem;
|
| 984 |
+
padding-bottom: 1.5rem;
|
| 985 |
+
border-bottom: 3px solid #0f3460;
|
| 986 |
+
}
|
| 987 |
+
|
| 988 |
+
.topic-number {
|
| 989 |
+
display: inline-block;
|
| 990 |
+
background: linear-gradient(135deg, #4a90e2, #64ffda);
|
| 991 |
+
color: #1a1a2e;
|
| 992 |
+
padding: 0.3rem 1rem;
|
| 993 |
+
border-radius: 20px;
|
| 994 |
+
font-size: 0.85rem;
|
| 995 |
+
font-weight: 700;
|
| 996 |
+
margin-bottom: 0.8rem;
|
| 997 |
+
}
|
| 998 |
+
|
| 999 |
+
.topic-header h2 {
|
| 1000 |
+
font-size: 2.5rem;
|
| 1001 |
+
color: #64ffda;
|
| 1002 |
+
margin-bottom: 0.5rem;
|
| 1003 |
+
text-shadow: 0 0 20px rgba(100, 255, 218, 0.2);
|
| 1004 |
+
}
|
| 1005 |
+
|
| 1006 |
+
.topic-subtitle {
|
| 1007 |
+
color: #a0a0a0;
|
| 1008 |
+
font-size: 1.1rem;
|
| 1009 |
+
font-style: italic;
|
| 1010 |
+
}
|
| 1011 |
+
|
| 1012 |
+
/* Content Cards */
|
| 1013 |
+
.content-card {
|
| 1014 |
+
background: #16213e;
|
| 1015 |
+
padding: 2rem;
|
| 1016 |
+
border-radius: 12px;
|
| 1017 |
+
margin-bottom: 2rem;
|
| 1018 |
+
border: 1px solid #0f3460;
|
| 1019 |
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
| 1020 |
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
| 1021 |
+
}
|
| 1022 |
+
|
| 1023 |
+
.content-card:hover {
|
| 1024 |
+
transform: translateY(-2px);
|
| 1025 |
+
box-shadow: 0 6px 25px rgba(74, 144, 226, 0.2);
|
| 1026 |
+
}
|
| 1027 |
+
|
| 1028 |
+
.content-card h3 {
|
| 1029 |
+
color: #4a90e2;
|
| 1030 |
+
margin-bottom: 1rem;
|
| 1031 |
+
font-size: 1.5rem;
|
| 1032 |
+
}
|
| 1033 |
+
|
| 1034 |
+
.content-card h4 {
|
| 1035 |
+
margin-top: 1rem;
|
| 1036 |
+
margin-bottom: 0.8rem;
|
| 1037 |
+
font-size: 1.2rem;
|
| 1038 |
+
}
|
| 1039 |
+
|
| 1040 |
+
.content-card p {
|
| 1041 |
+
margin-bottom: 1rem;
|
| 1042 |
+
color: #d0d0d0;
|
| 1043 |
+
line-height: 1.8;
|
| 1044 |
+
}
|
| 1045 |
+
|
| 1046 |
+
.content-card ul,
|
| 1047 |
+
.content-card ol {
|
| 1048 |
+
margin-left: 2rem;
|
| 1049 |
+
margin-bottom: 1rem;
|
| 1050 |
+
}
|
| 1051 |
+
|
| 1052 |
+
.content-card li {
|
| 1053 |
+
margin-bottom: 0.5rem;
|
| 1054 |
+
color: #d0d0d0;
|
| 1055 |
+
}
|
| 1056 |
+
|
| 1057 |
+
/* Callout Boxes */
|
| 1058 |
+
.callout-box {
|
| 1059 |
+
padding: 1.5rem;
|
| 1060 |
+
border-radius: 10px;
|
| 1061 |
+
margin-bottom: 2rem;
|
| 1062 |
+
border-left: 4px solid;
|
| 1063 |
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
| 1064 |
+
}
|
| 1065 |
+
|
| 1066 |
+
.callout-header {
|
| 1067 |
+
font-weight: 700;
|
| 1068 |
+
font-size: 1rem;
|
| 1069 |
+
margin-bottom: 0.8rem;
|
| 1070 |
+
display: flex;
|
| 1071 |
+
align-items: center;
|
| 1072 |
+
gap: 0.5rem;
|
| 1073 |
+
}
|
| 1074 |
+
|
| 1075 |
+
.callout-box.insight {
|
| 1076 |
+
background: rgba(100, 255, 218, 0.1);
|
| 1077 |
+
border-left-color: #64ffda;
|
| 1078 |
+
}
|
| 1079 |
+
|
| 1080 |
+
.callout-box.insight .callout-header {
|
| 1081 |
+
color: #64ffda;
|
| 1082 |
+
}
|
| 1083 |
+
|
| 1084 |
+
.callout-box.warning {
|
| 1085 |
+
background: rgba(255, 107, 107, 0.1);
|
| 1086 |
+
border-left-color: #ff6b6b;
|
| 1087 |
+
}
|
| 1088 |
+
|
| 1089 |
+
.callout-box.warning .callout-header {
|
| 1090 |
+
color: #ff6b6b;
|
| 1091 |
+
}
|
| 1092 |
+
|
| 1093 |
+
.callout-box.tip {
|
| 1094 |
+
background: rgba(81, 207, 102, 0.1);
|
| 1095 |
+
border-left-color: #51cf66;
|
| 1096 |
+
}
|
| 1097 |
+
|
| 1098 |
+
.callout-box.tip .callout-header {
|
| 1099 |
+
color: #51cf66;
|
| 1100 |
+
}
|
| 1101 |
+
|
| 1102 |
+
.callout-box.example {
|
| 1103 |
+
background: rgba(74, 144, 226, 0.1);
|
| 1104 |
+
border-left-color: #4a90e2;
|
| 1105 |
+
}
|
| 1106 |
+
|
| 1107 |
+
.callout-box.example .callout-header {
|
| 1108 |
+
color: #4a90e2;
|
| 1109 |
+
}
|
| 1110 |
+
|
| 1111 |
+
.callout-box p,
|
| 1112 |
+
.callout-box ul,
|
| 1113 |
+
.callout-box ol {
|
| 1114 |
+
color: #d0d0d0;
|
| 1115 |
+
}
|
| 1116 |
+
|
| 1117 |
+
/* Formula Cards */
|
| 1118 |
+
.formula-card {
|
| 1119 |
+
background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
|
| 1120 |
+
padding: 2rem;
|
| 1121 |
+
border-radius: 12px;
|
| 1122 |
+
margin-bottom: 1.5rem;
|
| 1123 |
+
border: 2px solid #4a90e2;
|
| 1124 |
+
box-shadow: 0 4px 20px rgba(74, 144, 226, 0.2);
|
| 1125 |
+
}
|
| 1126 |
+
|
| 1127 |
+
.formula-header {
|
| 1128 |
+
color: #64ffda;
|
| 1129 |
+
font-size: 1.2rem;
|
| 1130 |
+
font-weight: 700;
|
| 1131 |
+
margin-bottom: 1rem;
|
| 1132 |
+
text-align: center;
|
| 1133 |
+
text-transform: uppercase;
|
| 1134 |
+
letter-spacing: 1px;
|
| 1135 |
+
}
|
| 1136 |
+
|
| 1137 |
+
.formula-main {
|
| 1138 |
+
font-size: 1.8rem;
|
| 1139 |
+
text-align: center;
|
| 1140 |
+
margin: 1.5rem 0;
|
| 1141 |
+
color: #fff;
|
| 1142 |
+
font-family: 'Courier New', monospace;
|
| 1143 |
+
}
|
| 1144 |
+
|
| 1145 |
+
.formula-symbol {
|
| 1146 |
+
color: #64ffda;
|
| 1147 |
+
font-weight: 700;
|
| 1148 |
+
font-size: 2rem;
|
| 1149 |
+
}
|
| 1150 |
+
|
| 1151 |
+
.formula-var {
|
| 1152 |
+
color: #64ffda;
|
| 1153 |
+
font-weight: 600;
|
| 1154 |
+
}
|
| 1155 |
+
|
| 1156 |
+
.formula-fraction {
|
| 1157 |
+
display: inline-flex;
|
| 1158 |
+
flex-direction: column;
|
| 1159 |
+
align-items: center;
|
| 1160 |
+
margin: 0 0.5rem;
|
| 1161 |
+
vertical-align: middle;
|
| 1162 |
+
}
|
| 1163 |
+
|
| 1164 |
+
.formula-numerator,
|
| 1165 |
+
.formula-denominator {
|
| 1166 |
+
padding: 0.2rem 0.5rem;
|
| 1167 |
+
}
|
| 1168 |
+
|
| 1169 |
+
.formula-line {
|
| 1170 |
+
width: 100%;
|
| 1171 |
+
height: 2px;
|
| 1172 |
+
background: #fff;
|
| 1173 |
+
margin: 0.2rem 0;
|
| 1174 |
+
}
|
| 1175 |
+
|
| 1176 |
+
.formula-steps {
|
| 1177 |
+
margin-top: 1rem;
|
| 1178 |
+
padding-top: 1rem;
|
| 1179 |
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
| 1180 |
+
}
|
| 1181 |
+
|
| 1182 |
+
.formula-steps p {
|
| 1183 |
+
color: #a0a0a0;
|
| 1184 |
+
margin-bottom: 0.5rem;
|
| 1185 |
+
}
|
| 1186 |
+
|
| 1187 |
+
.formula-steps ol,
|
| 1188 |
+
.formula-steps ul {
|
| 1189 |
+
margin-left: 2rem;
|
| 1190 |
+
color: #d0d0d0;
|
| 1191 |
+
}
|
| 1192 |
+
|
| 1193 |
+
.formula-steps li {
|
| 1194 |
+
margin-bottom: 0.5rem;
|
| 1195 |
+
}
|
| 1196 |
+
|
| 1197 |
+
/* Interactive Container */
|
| 1198 |
+
.interactive-container {
|
| 1199 |
+
background: #16213e;
|
| 1200 |
+
padding: 2rem;
|
| 1201 |
+
border-radius: 12px;
|
| 1202 |
+
margin-bottom: 2rem;
|
| 1203 |
+
border: 2px solid #4a90e2;
|
| 1204 |
+
box-shadow: 0 4px 20px rgba(74, 144, 226, 0.3);
|
| 1205 |
+
}
|
| 1206 |
+
|
| 1207 |
+
.interactive-container h3 {
|
| 1208 |
+
color: #64ffda;
|
| 1209 |
+
margin-bottom: 1.5rem;
|
| 1210 |
+
text-align: center;
|
| 1211 |
+
font-size: 1.5rem;
|
| 1212 |
+
}
|
| 1213 |
+
|
| 1214 |
+
.interactive-container canvas {
|
| 1215 |
+
display: block;
|
| 1216 |
+
max-width: 100%;
|
| 1217 |
+
height: auto;
|
| 1218 |
+
margin: 0 auto 1.5rem;
|
| 1219 |
+
background: #0f3460;
|
| 1220 |
+
border-radius: 8px;
|
| 1221 |
+
border: 1px solid #4a90e2;
|
| 1222 |
+
}
|
| 1223 |
+
|
| 1224 |
+
/* Controls */
|
| 1225 |
+
.controls {
|
| 1226 |
+
display: flex;
|
| 1227 |
+
flex-direction: column;
|
| 1228 |
+
gap: 1rem;
|
| 1229 |
+
align-items: center;
|
| 1230 |
+
}
|
| 1231 |
+
|
| 1232 |
+
.input-group {
|
| 1233 |
+
display: flex;
|
| 1234 |
+
flex-direction: column;
|
| 1235 |
+
gap: 0.8rem;
|
| 1236 |
+
width: 100%;
|
| 1237 |
+
max-width: 600px;
|
| 1238 |
+
}
|
| 1239 |
+
|
| 1240 |
+
.input-group label {
|
| 1241 |
+
color: #64ffda;
|
| 1242 |
+
font-weight: 600;
|
| 1243 |
+
}
|
| 1244 |
+
|
| 1245 |
+
.form-control {
|
| 1246 |
+
padding: 0.8rem;
|
| 1247 |
+
background: #0f3460;
|
| 1248 |
+
border: 2px solid #4a90e2;
|
| 1249 |
+
border-radius: 8px;
|
| 1250 |
+
color: #e1e1e1;
|
| 1251 |
+
font-size: 1rem;
|
| 1252 |
+
transition: all 0.3s ease;
|
| 1253 |
+
}
|
| 1254 |
+
|
| 1255 |
+
.form-control:focus {
|
| 1256 |
+
outline: none;
|
| 1257 |
+
border-color: #64ffda;
|
| 1258 |
+
box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
|
| 1259 |
+
}
|
| 1260 |
+
|
| 1261 |
+
.slider-group {
|
| 1262 |
+
display: flex;
|
| 1263 |
+
flex-direction: column;
|
| 1264 |
+
gap: 0.5rem;
|
| 1265 |
+
width: 100%;
|
| 1266 |
+
}
|
| 1267 |
+
|
| 1268 |
+
.slider-group label {
|
| 1269 |
+
color: #64ffda;
|
| 1270 |
+
font-weight: 600;
|
| 1271 |
+
}
|
| 1272 |
+
|
| 1273 |
+
.slider {
|
| 1274 |
+
width: 100%;
|
| 1275 |
+
height: 8px;
|
| 1276 |
+
border-radius: 5px;
|
| 1277 |
+
background: #0f3460;
|
| 1278 |
+
outline: none;
|
| 1279 |
+
-webkit-appearance: none;
|
| 1280 |
+
}
|
| 1281 |
+
|
| 1282 |
+
.slider::-webkit-slider-thumb {
|
| 1283 |
+
-webkit-appearance: none;
|
| 1284 |
+
appearance: none;
|
| 1285 |
+
width: 20px;
|
| 1286 |
+
height: 20px;
|
| 1287 |
+
border-radius: 50%;
|
| 1288 |
+
background: #64ffda;
|
| 1289 |
+
cursor: pointer;
|
| 1290 |
+
box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
|
| 1291 |
+
transition: all 0.3s ease;
|
| 1292 |
+
}
|
| 1293 |
+
|
| 1294 |
+
.slider::-webkit-slider-thumb:hover {
|
| 1295 |
+
background: #4a90e2;
|
| 1296 |
+
transform: scale(1.2);
|
| 1297 |
+
}
|
| 1298 |
+
|
| 1299 |
+
.slider::-moz-range-thumb {
|
| 1300 |
+
width: 20px;
|
| 1301 |
+
height: 20px;
|
| 1302 |
+
border-radius: 50%;
|
| 1303 |
+
background: #64ffda;
|
| 1304 |
+
cursor: pointer;
|
| 1305 |
+
border: none;
|
| 1306 |
+
box-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
|
| 1307 |
+
}
|
| 1308 |
+
|
| 1309 |
+
/* Buttons */
|
| 1310 |
+
.btn {
|
| 1311 |
+
padding: 0.8rem 2rem;
|
| 1312 |
+
border: none;
|
| 1313 |
+
border-radius: 8px;
|
| 1314 |
+
font-size: 1rem;
|
| 1315 |
+
font-weight: 600;
|
| 1316 |
+
cursor: pointer;
|
| 1317 |
+
transition: all 0.3s ease;
|
| 1318 |
+
text-transform: uppercase;
|
| 1319 |
+
letter-spacing: 1px;
|
| 1320 |
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
| 1321 |
+
}
|
| 1322 |
+
|
| 1323 |
+
.btn-primary {
|
| 1324 |
+
background: linear-gradient(135deg, #4a90e2, #64ffda);
|
| 1325 |
+
color: #1a1a2e;
|
| 1326 |
+
}
|
| 1327 |
+
|
| 1328 |
+
.btn-primary:hover {
|
| 1329 |
+
transform: translateY(-2px);
|
| 1330 |
+
box-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);
|
| 1331 |
+
}
|
| 1332 |
+
|
| 1333 |
+
.btn-secondary {
|
| 1334 |
+
background: #0f3460;
|
| 1335 |
+
color: #64ffda;
|
| 1336 |
+
border: 2px solid #4a90e2;
|
| 1337 |
+
}
|
| 1338 |
+
|
| 1339 |
+
.btn-secondary:hover {
|
| 1340 |
+
background: #16213e;
|
| 1341 |
+
transform: translateY(-2px);
|
| 1342 |
+
}
|
| 1343 |
+
|
| 1344 |
+
/* Results Display */
|
| 1345 |
+
.results {
|
| 1346 |
+
display: grid;
|
| 1347 |
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
| 1348 |
+
gap: 1rem;
|
| 1349 |
+
width: 100%;
|
| 1350 |
+
margin-top: 1rem;
|
| 1351 |
+
}
|
| 1352 |
+
|
| 1353 |
+
.result-item {
|
| 1354 |
+
background: #0f3460;
|
| 1355 |
+
padding: 1rem;
|
| 1356 |
+
border-radius: 8px;
|
| 1357 |
+
text-align: center;
|
| 1358 |
+
border: 2px solid #4a90e2;
|
| 1359 |
+
}
|
| 1360 |
+
|
| 1361 |
+
.result-label {
|
| 1362 |
+
display: block;
|
| 1363 |
+
color: #64ffda;
|
| 1364 |
+
font-weight: 600;
|
| 1365 |
+
margin-bottom: 0.5rem;
|
| 1366 |
+
font-size: 0.9rem;
|
| 1367 |
+
}
|
| 1368 |
+
|
| 1369 |
+
.result-item span:last-child {
|
| 1370 |
+
display: block;
|
| 1371 |
+
color: #fff;
|
| 1372 |
+
font-size: 1.5rem;
|
| 1373 |
+
font-weight: 700;
|
| 1374 |
+
}
|
| 1375 |
+
|
| 1376 |
+
/* Tables */
|
| 1377 |
+
.comparison-table {
|
| 1378 |
+
width: 100%;
|
| 1379 |
+
border-collapse: collapse;
|
| 1380 |
+
margin: 1rem 0;
|
| 1381 |
+
background: #0f3460;
|
| 1382 |
+
border-radius: 8px;
|
| 1383 |
+
overflow: hidden;
|
| 1384 |
+
}
|
| 1385 |
+
|
| 1386 |
+
.comparison-table thead {
|
| 1387 |
+
background: linear-gradient(135deg, #4a90e2, #64ffda);
|
| 1388 |
+
color: #1a1a2e;
|
| 1389 |
+
}
|
| 1390 |
+
|
| 1391 |
+
.comparison-table th,
|
| 1392 |
+
.comparison-table td {
|
| 1393 |
+
padding: 1rem;
|
| 1394 |
+
text-align: left;
|
| 1395 |
+
border-bottom: 1px solid #16213e;
|
| 1396 |
+
}
|
| 1397 |
+
|
| 1398 |
+
.comparison-table th {
|
| 1399 |
+
font-weight: 700;
|
| 1400 |
+
text-transform: uppercase;
|
| 1401 |
+
font-size: 0.9rem;
|
| 1402 |
+
letter-spacing: 1px;
|
| 1403 |
+
}
|
| 1404 |
+
|
| 1405 |
+
.comparison-table tbody tr {
|
| 1406 |
+
transition: background 0.3s ease;
|
| 1407 |
+
}
|
| 1408 |
+
|
| 1409 |
+
.comparison-table tbody tr:hover {
|
| 1410 |
+
background: rgba(74, 144, 226, 0.1);
|
| 1411 |
+
}
|
| 1412 |
+
|
| 1413 |
+
.comparison-table td {
|
| 1414 |
+
color: #d0d0d0;
|
| 1415 |
+
}
|
| 1416 |
+
|
| 1417 |
+
/* Two Column Layout */
|
| 1418 |
+
.two-column {
|
| 1419 |
+
display: grid;
|
| 1420 |
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
| 1421 |
+
gap: 2rem;
|
| 1422 |
+
margin: 1.5rem 0;
|
| 1423 |
+
}
|
| 1424 |
+
|
| 1425 |
+
.column {
|
| 1426 |
+
background: #0f3460;
|
| 1427 |
+
padding: 1.5rem;
|
| 1428 |
+
border-radius: 8px;
|
| 1429 |
+
border: 2px solid rgba(74, 144, 226, 0.3);
|
| 1430 |
+
}
|
| 1431 |
+
|
| 1432 |
+
/* Comparison Grid */
|
| 1433 |
+
.comparison-grid {
|
| 1434 |
+
display: grid;
|
| 1435 |
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
| 1436 |
+
gap: 1.5rem;
|
| 1437 |
+
margin: 1.5rem 0;
|
| 1438 |
+
}
|
| 1439 |
+
|
| 1440 |
+
.comparison-item {
|
| 1441 |
+
background: #0f3460;
|
| 1442 |
+
padding: 1.5rem;
|
| 1443 |
+
border-radius: 8px;
|
| 1444 |
+
border-left: 4px solid #4a90e2;
|
| 1445 |
+
}
|
| 1446 |
+
|
| 1447 |
+
/* Data Tree */
|
| 1448 |
+
.data-tree {
|
| 1449 |
+
display: flex;
|
| 1450 |
+
flex-direction: column;
|
| 1451 |
+
align-items: center;
|
| 1452 |
+
gap: 2rem;
|
| 1453 |
+
padding: 2rem;
|
| 1454 |
+
margin: 1.5rem 0;
|
| 1455 |
+
}
|
| 1456 |
+
|
| 1457 |
+
.tree-level-1,
|
| 1458 |
+
.tree-level-2,
|
| 1459 |
+
.tree-level-3 {
|
| 1460 |
+
display: flex;
|
| 1461 |
+
gap: 2rem;
|
| 1462 |
+
justify-content: center;
|
| 1463 |
+
flex-wrap: wrap;
|
| 1464 |
+
}
|
| 1465 |
+
|
| 1466 |
+
.tree-node {
|
| 1467 |
+
padding: 1rem 2rem;
|
| 1468 |
+
background: #0f3460;
|
| 1469 |
+
border: 2px solid #4a90e2;
|
| 1470 |
+
border-radius: 8px;
|
| 1471 |
+
color: #64ffda;
|
| 1472 |
+
font-weight: 600;
|
| 1473 |
+
position: relative;
|
| 1474 |
+
transition: all 0.3s ease;
|
| 1475 |
+
}
|
| 1476 |
+
|
| 1477 |
+
.tree-node:hover {
|
| 1478 |
+
transform: scale(1.05);
|
| 1479 |
+
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
|
| 1480 |
+
}
|
| 1481 |
+
|
| 1482 |
+
.tree-node.main {
|
| 1483 |
+
font-size: 1.3rem;
|
| 1484 |
+
background: linear-gradient(135deg, #4a90e2, #64ffda);
|
| 1485 |
+
color: #1a1a2e;
|
| 1486 |
+
}
|
| 1487 |
+
|
| 1488 |
+
.tree-node.categorical {
|
| 1489 |
+
border-color: #64ffda;
|
| 1490 |
+
}
|
| 1491 |
+
|
| 1492 |
+
.tree-node.numerical {
|
| 1493 |
+
border-color: #ff6b6b;
|
| 1494 |
+
}
|
| 1495 |
+
|
| 1496 |
+
/* Use Case List */
|
| 1497 |
+
.use-case-list {
|
| 1498 |
+
list-style: none;
|
| 1499 |
+
margin-left: 0;
|
| 1500 |
+
}
|
| 1501 |
+
|
| 1502 |
+
.use-case-list li {
|
| 1503 |
+
padding: 1rem;
|
| 1504 |
+
margin-bottom: 1rem;
|
| 1505 |
+
background: #0f3460;
|
| 1506 |
+
border-radius: 8px;
|
| 1507 |
+
border-left: 4px solid #4a90e2;
|
| 1508 |
+
transition: all 0.3s ease;
|
| 1509 |
+
}
|
| 1510 |
+
|
| 1511 |
+
.use-case-list li:hover {
|
| 1512 |
+
transform: translateX(5px);
|
| 1513 |
+
border-left-color: #64ffda;
|
| 1514 |
+
}
|
| 1515 |
+
|
| 1516 |
+
/* Example Solution */
|
| 1517 |
+
.example-solution {
|
| 1518 |
+
background: #0f3460;
|
| 1519 |
+
padding: 1.5rem;
|
| 1520 |
+
border-radius: 8px;
|
| 1521 |
+
margin-top: 1rem;
|
| 1522 |
+
font-family: 'Courier New', monospace;
|
| 1523 |
+
}
|
| 1524 |
+
|
| 1525 |
+
.example-solution p {
|
| 1526 |
+
margin-bottom: 0.8rem;
|
| 1527 |
+
color: #d0d0d0;
|
| 1528 |
+
}
|
| 1529 |
+
|
| 1530 |
+
.example-solution strong {
|
| 1531 |
+
color: #64ffda;
|
| 1532 |
+
}
|
| 1533 |
+
|
| 1534 |
+
/* Summary Card */
|
| 1535 |
+
.summary-card {
|
| 1536 |
+
background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
|
| 1537 |
+
padding: 2rem;
|
| 1538 |
+
border-radius: 12px;
|
| 1539 |
+
border: 2px solid #64ffda;
|
| 1540 |
+
box-shadow: 0 4px 20px rgba(100, 255, 218, 0.3);
|
| 1541 |
+
margin-bottom: 2rem;
|
| 1542 |
+
}
|
| 1543 |
+
|
| 1544 |
+
.summary-card h3 {
|
| 1545 |
+
color: #64ffda;
|
| 1546 |
+
margin-bottom: 1rem;
|
| 1547 |
+
font-size: 1.5rem;
|
| 1548 |
+
text-align: center;
|
| 1549 |
+
}
|
| 1550 |
+
|
| 1551 |
+
.summary-card ul {
|
| 1552 |
+
list-style: none;
|
| 1553 |
+
margin-left: 0;
|
| 1554 |
+
}
|
| 1555 |
+
|
| 1556 |
+
.summary-card li {
|
| 1557 |
+
padding: 0.8rem;
|
| 1558 |
+
margin-bottom: 0.8rem;
|
| 1559 |
+
background: rgba(100, 255, 218, 0.05);
|
| 1560 |
+
border-radius: 6px;
|
| 1561 |
+
border-left: 3px solid #64ffda;
|
| 1562 |
+
color: #d0d0d0;
|
| 1563 |
+
}
|
| 1564 |
+
|
| 1565 |
+
.summary-card li::before {
|
| 1566 |
+
content: "✓";
|
| 1567 |
+
color: #64ffda;
|
| 1568 |
+
font-weight: 700;
|
| 1569 |
+
margin-right: 0.8rem;
|
| 1570 |
+
}
|
| 1571 |
+
|
| 1572 |
+
/* Data Examples Table */
|
| 1573 |
+
.data-examples-table {
|
| 1574 |
+
width: 100%;
|
| 1575 |
+
border-collapse: collapse;
|
| 1576 |
+
margin-top: 1rem;
|
| 1577 |
+
}
|
| 1578 |
+
|
| 1579 |
+
.data-examples-table th,
|
| 1580 |
+
.data-examples-table td {
|
| 1581 |
+
padding: 1rem;
|
| 1582 |
+
text-align: left;
|
| 1583 |
+
border-bottom: 1px solid rgba(74, 144, 226, 0.2);
|
| 1584 |
+
}
|
| 1585 |
+
|
| 1586 |
+
.data-examples-table th {
|
| 1587 |
+
background: rgba(74, 144, 226, 0.2);
|
| 1588 |
+
color: #64ffda;
|
| 1589 |
+
font-weight: 600;
|
| 1590 |
+
}
|
| 1591 |
+
|
| 1592 |
+
/* Responsive Design */
|
| 1593 |
+
@media (max-width: 1024px) {
|
| 1594 |
+
.subject-tabs {
|
| 1595 |
+
flex-wrap: wrap;
|
| 1596 |
+
gap: 0.5rem;
|
| 1597 |
+
}
|
| 1598 |
+
|
| 1599 |
+
.subject-tab {
|
| 1600 |
+
font-size: 0.8rem;
|
| 1601 |
+
padding: 0.5rem 1rem;
|
| 1602 |
+
}
|
| 1603 |
+
.main-container {
|
| 1604 |
+
flex-direction: column;
|
| 1605 |
+
}
|
| 1606 |
+
|
| 1607 |
+
.sidebar {
|
| 1608 |
+
width: 100%;
|
| 1609 |
+
height: auto;
|
| 1610 |
+
position: static;
|
| 1611 |
+
transform: translateX(-100%);
|
| 1612 |
+
}
|
| 1613 |
+
|
| 1614 |
+
.sidebar.active {
|
| 1615 |
+
transform: translateX(0);
|
| 1616 |
+
}
|
| 1617 |
+
|
| 1618 |
+
.mobile-menu-btn {
|
| 1619 |
+
display: flex;
|
| 1620 |
+
}
|
| 1621 |
+
|
| 1622 |
+
.content {
|
| 1623 |
+
padding: 2rem 1.5rem;
|
| 1624 |
+
}
|
| 1625 |
+
|
| 1626 |
+
.topic-header h2 {
|
| 1627 |
+
font-size: 2rem;
|
| 1628 |
+
}
|
| 1629 |
+
|
| 1630 |
+
.two-column {
|
| 1631 |
+
grid-template-columns: 1fr;
|
| 1632 |
+
}
|
| 1633 |
+
}
|
| 1634 |
+
|
| 1635 |
+
@media (max-width: 768px) {
|
| 1636 |
+
.course-title {
|
| 1637 |
+
font-size: 1.3rem;
|
| 1638 |
+
}
|
| 1639 |
+
|
| 1640 |
+
.content {
|
| 1641 |
+
padding: 1.5rem 1rem;
|
| 1642 |
+
}
|
| 1643 |
+
|
| 1644 |
+
.topic-header h2 {
|
| 1645 |
+
font-size: 1.6rem;
|
| 1646 |
+
}
|
| 1647 |
+
|
| 1648 |
+
.formula-main {
|
| 1649 |
+
font-size: 1.3rem;
|
| 1650 |
+
}
|
| 1651 |
+
|
| 1652 |
+
.comparison-grid {
|
| 1653 |
+
grid-template-columns: 1fr;
|
| 1654 |
+
}
|
| 1655 |
+
|
| 1656 |
+
.results {
|
| 1657 |
+
grid-template-columns: 1fr;
|
| 1658 |
+
}
|
| 1659 |
+
|
| 1660 |
+
.interactive-container canvas {
|
| 1661 |
+
max-width: 100%;
|
| 1662 |
+
height: auto;
|
| 1663 |
+
}
|
| 1664 |
+
}
|
| 1665 |
+
|
| 1666 |
+
/* Animations */
|
| 1667 |
+
@keyframes pulse {
|
| 1668 |
+
0%, 100% {
|
| 1669 |
+
opacity: 1;
|
| 1670 |
+
}
|
| 1671 |
+
50% {
|
| 1672 |
+
opacity: 0.5;
|
| 1673 |
+
}
|
| 1674 |
+
}
|
| 1675 |
+
|
| 1676 |
+
.pulse {
|
| 1677 |
+
animation: pulse 2s ease-in-out infinite;
|
| 1678 |
+
}
|
| 1679 |
+
|
| 1680 |
+
/* Loading State */
|
| 1681 |
+
.loading {
|
| 1682 |
+
display: inline-block;
|
| 1683 |
+
width: 20px;
|
| 1684 |
+
height: 20px;
|
| 1685 |
+
border: 3px solid rgba(100, 255, 218, 0.3);
|
| 1686 |
+
border-radius: 50%;
|
| 1687 |
+
border-top-color: #64ffda;
|
| 1688 |
+
animation: spin 1s ease-in-out infinite;
|
| 1689 |
+
}
|
| 1690 |
+
|
| 1691 |
+
@keyframes spin {
|
| 1692 |
+
to {
|
| 1693 |
+
transform: rotate(360deg);
|
| 1694 |
+
}
|
| 1695 |
+
}
|
| 1696 |
+
|
| 1697 |
+
/* Smooth Transitions */
|
| 1698 |
+
* {
|
| 1699 |
+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
| 1700 |
+
}
|