Hugging Face's logo

Spaces:
Aashish34
/
DataScience
Running

App Files Community
Aashish34 commited on
Commit
14422b0
·
1 Parent(s): 5023d23

add deeplearning

Browse files
Files changed (4) hide show
  1. DeepLearning/Deep Learning Curriculum.html +2091 -0
  2. math-ds-complete/app.js +1027 -21
  3. math-ds-complete/index.html +380 -102
  4. ml_complete-all-topics/index.html +369 -0
DeepLearning/Deep Learning Curriculum.html ADDED
@@ -0,0 +1,2091 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Complete Deep Learning & Computer Vision Curriculum</title>
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --bg: #0f1419;
17
+ --surface: #1a1f2e;
18
+ --text: #e4e6eb;
19
+ --text-dim: #b0b7c3;
20
+ --cyan: #00d4ff;
21
+ --orange: #ff6b35;
22
+ --green: #00ff88;
23
+ --yellow: #ffa500;
24
+ }
25
+
26
+ body {
27
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
28
+ background: var(--bg);
29
+ color: var(--text);
30
+ line-height: 1.6;
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ .container {
35
+ max-width: 1400px;
36
+ margin: 0 auto;
37
+ padding: 20px;
38
+ }
39
+
40
+ header {
41
+ text-align: center;
42
+ margin-bottom: 40px;
43
+ padding: 30px 0;
44
+ border-bottom: 2px solid var(--cyan);
45
+ }
46
+
47
+ h1 {
48
+ font-size: 2.5em;
49
+ background: linear-gradient(135deg, var(--cyan), var(--orange));
50
+ -webkit-background-clip: text;
51
+ -webkit-text-fill-color: transparent;
52
+ margin-bottom: 10px;
53
+ }
54
+
55
+ .subtitle {
56
+ color: var(--text-dim);
57
+ font-size: 1.1em;
58
+ }
59
+
60
+ .dashboard {
61
+ display: none;
62
+ }
63
+
64
+ .dashboard.active {
65
+ display: block;
66
+ }
67
+
68
+ .grid {
69
+ display: grid;
70
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
71
+ gap: 25px;
72
+ margin: 40px 0;
73
+ }
74
+
75
+ .card {
76
+ background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 107, 53, 0.1));
77
+ border: 2px solid var(--cyan);
78
+ border-radius: 12px;
79
+ padding: 30px;
80
+ cursor: pointer;
81
+ transition: all 0.3s ease;
82
+ text-align: center;
83
+ }
84
+
85
+ .card:hover {
86
+ transform: translateY(-5px);
87
+ box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
88
+ border-color: var(--orange);
89
+ }
90
+
91
+ .card-icon {
92
+ font-size: 3em;
93
+ margin-bottom: 15px;
94
+ }
95
+
96
+ .card h3 {
97
+ color: var(--cyan);
98
+ font-size: 1.5em;
99
+ margin-bottom: 10px;
100
+ }
101
+
102
+ .card p {
103
+ color: var(--text-dim);
104
+ font-size: 0.95em;
105
+ }
106
+
107
+ .category-label {
108
+ display: inline-block;
109
+ margin-top: 10px;
110
+ padding: 5px 12px;
111
+ background: rgba(0, 212, 255, 0.2);
112
+ border-radius: 20px;
113
+ font-size: 0.85em;
114
+ color: var(--green);
115
+ }
116
+
117
+ .module {
118
+ display: none;
119
+ }
120
+
121
+ .module.active {
122
+ display: block;
123
+ animation: fadeIn 0.3s ease;
124
+ }
125
+
126
+ @keyframes fadeIn {
127
+ from {
128
+ opacity: 0;
129
+ }
130
+
131
+ to {
132
+ opacity: 1;
133
+ }
134
+ }
135
+
136
+ .btn-back {
137
+ padding: 10px 20px;
138
+ background: var(--orange);
139
+ color: var(--bg);
140
+ border: none;
141
+ border-radius: 6px;
142
+ cursor: pointer;
143
+ font-weight: 600;
144
+ margin-bottom: 25px;
145
+ transition: all 0.3s ease;
146
+ }
147
+
148
+ .btn-back:hover {
149
+ background: var(--cyan);
150
+ }
151
+
152
+ .tabs {
153
+ display: flex;
154
+ gap: 10px;
155
+ margin-bottom: 30px;
156
+ flex-wrap: wrap;
157
+ justify-content: center;
158
+ border-bottom: 1px solid rgba(0, 212, 255, 0.2);
159
+ padding-bottom: 15px;
160
+ overflow-x: auto;
161
+ }
162
+
163
+ .tab-btn {
164
+ padding: 10px 20px;
165
+ background: var(--surface);
166
+ color: var(--text);
167
+ border: 2px solid transparent;
168
+ border-radius: 6px;
169
+ cursor: pointer;
170
+ font-size: 0.95em;
171
+ transition: all 0.3s ease;
172
+ font-weight: 500;
173
+ white-space: nowrap;
174
+ }
175
+
176
+ .tab-btn:hover {
177
+ background: rgba(0, 212, 255, 0.1);
178
+ border-color: var(--cyan);
179
+ }
180
+
181
+ .tab-btn.active {
182
+ background: var(--cyan);
183
+ color: var(--bg);
184
+ border-color: var(--cyan);
185
+ }
186
+
187
+ .tab {
188
+ display: none;
189
+ }
190
+
191
+ .tab.active {
192
+ display: block;
193
+ animation: fadeIn 0.3s ease;
194
+ }
195
+
196
+ .section {
197
+ background: var(--surface);
198
+ border: 1px solid rgba(0, 212, 255, 0.2);
199
+ border-radius: 10px;
200
+ padding: 30px;
201
+ margin-bottom: 25px;
202
+ transition: all 0.3s ease;
203
+ }
204
+
205
+ .section:hover {
206
+ border-color: var(--cyan);
207
+ box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
208
+ }
209
+
210
+ h2 {
211
+ color: var(--cyan);
212
+ font-size: 1.8em;
213
+ margin-bottom: 15px;
214
+ }
215
+
216
+ h3 {
217
+ color: var(--orange);
218
+ font-size: 1.3em;
219
+ margin-top: 20px;
220
+ margin-bottom: 12px;
221
+ }
222
+
223
+ h4 {
224
+ color: var(--green);
225
+ font-size: 1.1em;
226
+ margin-top: 15px;
227
+ margin-bottom: 10px;
228
+ }
229
+
230
+ p {
231
+ margin-bottom: 15px;
232
+ line-height: 1.8;
233
+ }
234
+
235
+ ul {
236
+ margin-left: 20px;
237
+ margin-bottom: 15px;
238
+ }
239
+
240
+ ul li {
241
+ margin-bottom: 8px;
242
+ }
243
+
244
+ .info-box {
245
+ background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 107, 53, 0.1));
246
+ border: 1px solid var(--cyan);
247
+ border-radius: 8px;
248
+ padding: 20px;
249
+ margin: 20px 0;
250
+ }
251
+
252
+ .box-title {
253
+ color: var(--orange);
254
+ font-weight: 700;
255
+ margin-bottom: 10px;
256
+ font-size: 1.1em;
257
+ }
258
+
259
+ .box-content {
260
+ color: var(--text-dim);
261
+ line-height: 1.7;
262
+ }
263
+
264
+ .formula {
265
+ background: rgba(0, 212, 255, 0.1);
266
+ border: 1px solid var(--cyan);
267
+ border-radius: 8px;
268
+ padding: 20px;
269
+ margin: 20px 0;
270
+ font-family: 'Courier New', monospace;
271
+ overflow-x: auto;
272
+ line-height: 1.8;
273
+ color: var(--cyan);
274
+ }
275
+
276
+ .callout {
277
+ border-left: 4px solid;
278
+ padding: 15px;
279
+ margin: 20px 0;
280
+ border-radius: 6px;
281
+ }
282
+
283
+ .callout.tip {
284
+ border-left-color: var(--green);
285
+ background: rgba(0, 255, 136, 0.05);
286
+ }
287
+
288
+ .callout.warning {
289
+ border-left-color: var(--yellow);
290
+ background: rgba(255, 165, 0, 0.05);
291
+ }
292
+
293
+ .callout.insight {
294
+ border-left-color: var(--cyan);
295
+ background: rgba(0, 212, 255, 0.05);
296
+ }
297
+
298
+ .callout-title {
299
+ font-weight: 700;
300
+ margin-bottom: 8px;
301
+ }
302
+
303
+ .list-item {
304
+ display: flex;
305
+ gap: 12px;
306
+ margin: 12px 0;
307
+ padding: 12px;
308
+ background: rgba(0, 212, 255, 0.05);
309
+ border-left: 3px solid var(--cyan);
310
+ border-radius: 4px;
311
+ }
312
+
313
+ .list-num {
314
+ color: var(--orange);
315
+ font-weight: 700;
316
+ min-width: 30px;
317
+ }
318
+
319
+ table {
320
+ width: 100%;
321
+ border-collapse: collapse;
322
+ margin: 20px 0;
323
+ }
324
+
325
+ th,
326
+ td {
327
+ padding: 12px;
328
+ text-align: left;
329
+ border: 1px solid rgba(0, 212, 255, 0.2);
330
+ }
331
+
332
+ th {
333
+ background: rgba(0, 212, 255, 0.1);
334
+ color: var(--cyan);
335
+ font-weight: 700;
336
+ }
337
+
338
+ .viz-container {
339
+ background: rgba(0, 212, 255, 0.02);
340
+ border: 1px solid rgba(0, 212, 255, 0.2);
341
+ border-radius: 8px;
342
+ padding: 20px;
343
+ margin: 20px 0;
344
+ display: flex;
345
+ justify-content: center;
346
+ overflow-x: auto;
347
+ }
348
+
349
+ .viz-controls {
350
+ display: flex;
351
+ gap: 10px;
352
+ margin-top: 20px;
353
+ justify-content: center;
354
+ flex-wrap: wrap;
355
+ }
356
+
357
+ .btn-viz {
358
+ padding: 10px 20px;
359
+ background: var(--cyan);
360
+ color: var(--bg);
361
+ border: none;
362
+ border-radius: 6px;
363
+ font-weight: 600;
364
+ cursor: pointer;
365
+ font-size: 0.95em;
366
+ transition: all 0.3s ease;
367
+ }
368
+
369
+ .btn-viz:hover {
370
+ background: var(--orange);
371
+ transform: scale(1.05);
372
+ }
373
+
374
+ canvas {
375
+ max-width: 100%;
376
+ height: auto;
377
+ }
378
+
379
+ @media (max-width: 768px) {
380
+ h1 {
381
+ font-size: 1.8em;
382
+ }
383
+
384
+ .tabs {
385
+ flex-direction: column;
386
+ }
387
+
388
+ .tab-btn {
389
+ width: 100%;
390
+ }
391
+
392
+ .grid {
393
+ grid-template-columns: 1fr;
394
+ }
395
+
396
+ canvas {
397
+ width: 100% !important;
398
+ height: auto !important;
399
+ }
400
+ }
401
+ </style>
402
+ </head>
403
+
404
+ <body>
405
+ <div class="container">
406
+ <!-- MAIN DASHBOARD -->
407
+ <div id="dashboard" class="dashboard active">
408
+ <header>
409
+ <h1>🧠 Complete Deep Learning & Computer Vision</h1>
410
+ <p class="subtitle">Comprehensive Curriculum | Foundations to Advanced Applications</p>
411
+ </header>
412
+
413
+ <div style="text-align: center; margin-bottom: 40px;">
414
+ <p style="color: var(--text-dim); font-size: 1.1em;">
415
+ Master all aspects of deep learning and computer vision. 25+ modules covering neural networks, CNNs,
416
+ object detection, GANs, and more.
417
+ </p>
418
+ </div>
419
+
420
+ <div class="grid" id="modulesGrid"></div>
421
+ </div>
422
+
423
+ <!-- MODULES CONTAINER -->
424
+ <div id="modulesContainer"></div>
425
+ </div>
426
+
427
+ <script>
428
+ const modules = [
429
+ // Module 1: Deep Learning Foundations
430
+ {
431
+ id: "nn-basics",
432
+ title: "Introduction to Neural Networks",
433
+ icon: "🧬",
434
+ category: "Foundations",
435
+ color: "#0088ff",
436
+ description: "Biological vs. Artificial neurons and network architecture"
437
+ },
438
+ {
439
+ id: "perceptron",
440
+ title: "The Perceptron",
441
+ icon: "⚙️",
442
+ category: "Foundations",
443
+ color: "#0088ff",
444
+ description: "Single layer networks and their limitations"
445
+ },
446
+ {
447
+ id: "mlp",
448
+ title: "Multi-Layer Perceptron (MLP)",
449
+ icon: "🏗️",
450
+ category: "Foundations",
451
+ color: "#0088ff",
452
+ description: "Hidden layers and deep architectures"
453
+ },
454
+ {
455
+ id: "activation",
456
+ title: "Activation Functions",
457
+ icon: "⚡",
458
+ category: "Foundations",
459
+ color: "#0088ff",
460
+ description: "Sigmoid, ReLU, Tanh, Leaky ReLU, ELU, Softmax"
461
+ },
462
+ {
463
+ id: "weight-init",
464
+ title: "Weight Initialization",
465
+ icon: "🎯",
466
+ category: "Foundations",
467
+ color: "#0088ff",
468
+ description: "Xavier, He, Random initialization strategies"
469
+ },
470
+ {
471
+ id: "loss",
472
+ title: "Loss Functions",
473
+ icon: "📉",
474
+ category: "Foundations",
475
+ color: "#0088ff",
476
+ description: "MSE, Binary Cross-Entropy, Categorical Cross-Entropy"
477
+ },
478
+ {
479
+ id: "optimizers",
480
+ title: "Optimizers",
481
+ icon: "🎯",
482
+ category: "Training",
483
+ color: "#00ff00",
484
+ description: "SGD, Momentum, Adam, Adagrad, RMSprop"
485
+ },
486
+ {
487
+ id: "backprop",
488
+ title: "Forward & Backpropagation",
489
+ icon: "⬅️",
490
+ category: "Training",
491
+ color: "#00ff00",
492
+ description: "Chain rule and gradient computation"
493
+ },
494
+ {
495
+ id: "regularization",
496
+ title: "Regularization",
497
+ icon: "🛡️",
498
+ category: "Training",
499
+ color: "#00ff00",
500
+ description: "L1/L2, Dropout, Early Stopping, Batch Norm"
501
+ },
502
+ {
503
+ id: "batch-norm",
504
+ title: "Batch Normalization",
505
+ icon: "⚙️",
506
+ category: "Training",
507
+ color: "#00ff00",
508
+ description: "Stabilizing and speeding up training"
509
+ },
510
+ // Module 2: Computer Vision Fundamentals
511
+ {
512
+ id: "cv-intro",
513
+ title: "CV Fundamentals",
514
+ icon: "👁️",
515
+ category: "Computer Vision",
516
+ color: "#ff6b35",
517
+ description: "Why ANNs fail with images, parameter explosion"
518
+ },
519
+ {
520
+ id: "conv-layer",
521
+ title: "Convolutional Layers",
522
+ icon: "🖼️",
523
+ category: "Computer Vision",
524
+ color: "#ff6b35",
525
+ description: "Kernels, filters, feature maps, stride, padding"
526
+ },
527
+ {
528
+ id: "pooling",
529
+ title: "Pooling Layers",
530
+ icon: "📦",
531
+ category: "Computer Vision",
532
+ color: "#ff6b35",
533
+ description: "Max pooling, average pooling, spatial reduction"
534
+ },
535
+ {
536
+ id: "cnn-basics",
537
+ title: "CNN Architecture",
538
+ icon: "🏗️",
539
+ category: "Computer Vision",
540
+ color: "#ff6b35",
541
+ description: "Combining conv, pooling, and fully connected layers"
542
+ },
543
+ {
544
+ id: "viz-filters",
545
+ title: "Visualizing CNNs",
546
+ icon: "🔍",
547
+ category: "Computer Vision",
548
+ color: "#ff6b35",
549
+ description: "What filters learn: edges → shapes → objects"
550
+ },
551
+ // Module 3: Advanced CNN Architectures
552
+ {
553
+ id: "lenet",
554
+ title: "LeNet-5",
555
+ icon: "🔢",
556
+ category: "CNN Architectures",
557
+ color: "#ff00ff",
558
+ description: "Classic digit recognizer (MNIST)"
559
+ },
560
+ {
561
+ id: "alexnet",
562
+ title: "AlexNet",
563
+ icon: "🌟",
564
+ category: "CNN Architectures",
565
+ color: "#ff00ff",
566
+ description: "The breakthrough in deep computer vision (2012)"
567
+ },
568
+ {
569
+ id: "vgg",
570
+ title: "VGGNet",
571
+ icon: "📊",
572
+ category: "CNN Architectures",
573
+ color: "#ff00ff",
574
+ description: "VGG-16/19: Deep networks with small filters"
575
+ },
576
+ {
577
+ id: "resnet",
578
+ title: "ResNet",
579
+ icon: "🌉",
580
+ category: "CNN Architectures",
581
+ color: "#ff00ff",
582
+ description: "Skip connections, solving vanishing gradients"
583
+ },
584
+ {
585
+ id: "inception",
586
+ title: "InceptionNet (GoogLeNet)",
587
+ icon: "🎯",
588
+ category: "CNN Architectures",
589
+ color: "#ff00ff",
590
+ description: "1x1 convolutions, multi-scale feature extraction"
591
+ },
592
+ {
593
+ id: "mobilenet",
594
+ title: "MobileNet",
595
+ icon: "📱",
596
+ category: "CNN Architectures",
597
+ color: "#ff00ff",
598
+ description: "Depth-wise separable convolutions for efficiency"
599
+ },
600
+ {
601
+ id: "transfer-learning",
602
+ title: "Transfer Learning",
603
+ icon: "🔄",
604
+ category: "CNN Architectures",
605
+ color: "#ff00ff",
606
+ description: "Fine-tuning and leveraging pre-trained models"
607
+ },
608
+ // Module 4: Object Detection & Segmentation
609
+ {
610
+ id: "localization",
611
+ title: "Object Localization",
612
+ icon: "📍",
613
+ category: "Detection",
614
+ color: "#00ff00",
615
+ description: "Bounding boxes and classification together"
616
+ },
617
+ {
618
+ id: "rcnn",
619
+ title: "R-CNN Family",
620
+ icon: "🎯",
621
+ category: "Detection",
622
+ color: "#00ff00",
623
+ description: "R-CNN, Fast R-CNN, Faster R-CNN"
624
+ },
625
+ {
626
+ id: "yolo",
627
+ title: "YOLO",
628
+ icon: "⚡",
629
+ category: "Detection",
630
+ color: "#00ff00",
631
+ description: "Real-time object detection (v3, v5, v8)"
632
+ },
633
+ {
634
+ id: "ssd",
635
+ title: "SSD",
636
+ icon: "🚀",
637
+ category: "Detection",
638
+ color: "#00ff00",
639
+ description: "Single Shot MultiBox Detector"
640
+ },
641
+ {
642
+ id: "semantic-seg",
643
+ title: "Semantic Segmentation",
644
+ icon: "🖌️",
645
+ category: "Segmentation",
646
+ color: "#00ff00",
647
+ description: "Pixel-level classification (U-Net)"
648
+ },
649
+ {
650
+ id: "instance-seg",
651
+ title: "Instance Segmentation",
652
+ icon: "👥",
653
+ category: "Segmentation",
654
+ color: "#00ff00",
655
+ description: "Mask R-CNN and separate object instances"
656
+ },
657
+ {
658
+ id: "face-recog",
659
+ title: "Face Recognition",
660
+ icon: "👤",
661
+ category: "Segmentation",
662
+ color: "#00ff00",
663
+ description: "Siamese networks and triplet loss"
664
+ },
665
+ // Module 5: Generative Models
666
+ {
667
+ id: "autoencoders",
668
+ title: "Autoencoders",
669
+ icon: "🔀",
670
+ category: "Generative",
671
+ color: "#ffaa00",
672
+ description: "Encoder-decoder, latent space, denoising"
673
+ },
674
+ {
675
+ id: "gans",
676
+ title: "GANs (Generative Adversarial Networks)",
677
+ icon: "🎮",
678
+ category: "Generative",
679
+ color: "#ffaa00",
680
+ description: "Generator vs. Discriminator, DCGAN"
681
+ },
682
+ {
683
+ id: "diffusion",
684
+ title: "Diffusion Models",
685
+ icon: "🌊",
686
+ category: "Generative",
687
+ color: "#ffaa00",
688
+ description: "Foundation of Stable Diffusion and DALL-E"
689
+ },
690
+ // Additional Advanced Topics
691
+ {
692
+ id: "rnn",
693
+ title: "RNNs & LSTMs",
694
+ icon: "🔄",
695
+ category: "Sequence",
696
+ color: "#ff6b35",
697
+ description: "Recurrent networks for sequential data"
698
+ },
699
+ {
700
+ id: "transformers",
701
+ title: "Transformers",
702
+ icon: "🔗",
703
+ category: "Sequence",
704
+ color: "#ff6b35",
705
+ description: "Attention mechanisms and modern architectures"
706
+ },
707
+ {
708
+ id: "bert",
709
+ title: "BERT & NLP Transformers",
710
+ icon: "📚",
711
+ category: "NLP",
712
+ color: "#ff6b35",
713
+ description: "Bidirectional transformers for language"
714
+ },
715
+ {
716
+ id: "gpt",
717
+ title: "GPT & Language Models",
718
+ icon: "💬",
719
+ category: "NLP",
720
+ color: "#ff6b35",
721
+ description: "Autoregressive models and text generation"
722
+ },
723
+ {
724
+ id: "vit",
725
+ title: "Vision Transformers (ViT)",
726
+ icon: "🎨",
727
+ category: "Vision",
728
+ color: "#ff6b35",
729
+ description: "Transformers applied to image data"
730
+ }
731
+ ];
732
+
733
+ function createModuleHTML(module) {
734
+ return `
735
+ <div class="module" id="${module.id}-module">
736
+ <button class="btn-back" onclick="switchTo('dashboard')">← Back to Dashboard</button>
737
+ <header>
738
+ <h1>${module.icon} ${module.title}</h1>
739
+ <p class="subtitle">${module.description}</p>
740
+ </header>
741
+
742
+ <div class="tabs">
743
+ <button class="tab-btn active" onclick="switchTab(event, '${module.id}-overview')">Overview</button>
744
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-concepts')">Key Concepts</button>
745
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-visualization')">📊 Visualization</button>
746
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-math')">Math</button>
747
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-applications')">Applications</button>
748
+ <button class="tab-btn" onclick="switchTab(event, '${module.id}-summary')">Summary</button>
749
+ </div>
750
+
751
+ <div id="${module.id}-overview" class="tab active">
752
+ <div class="section">
753
+ <h2>📖 Overview</h2>
754
+ <p>Complete coverage of ${module.title.toLowerCase()}. Learn the fundamentals, mathematics, real-world applications, and implementation details.</p>
755
+ <div class="info-box">
756
+ <div class="box-title">Learning Objectives</div>
757
+ <div class="box-content">
758
+ ✓ Understand core concepts and theory<br>
759
+ ✓ Master mathematical foundations<br>
760
+ ✓ Learn practical applications<br>
761
+ ✓ Implement and experiment
762
+ </div>
763
+ </div>
764
+ </div>
765
+ </div>
766
+
767
+ <div id="${module.id}-concepts" class="tab">
768
+ <div class="section">
769
+ <h2>🎯 Key Concepts</h2>
770
+ <p>Fundamental concepts and building blocks for ${module.title.toLowerCase()}.</p>
771
+ <div class="callout insight">
772
+ <div class="callout-title">💡 Main Ideas</div>
773
+ This section covers the core ideas you need to understand before diving into mathematics.
774
+ </div>
775
+ </div>
776
+ </div>
777
+
778
+ <div id="${module.id}-visualization" class="tab">
779
+ <div class="section">
780
+ <h2>📊 Interactive Visualization</h2>
781
+ <p>Visual representation to help understand ${module.title.toLowerCase()} concepts intuitively.</p>
782
+ <div id="${module.id}-viz" class="viz-container">
783
+ <canvas id="${module.id}-canvas" width="800" height="400" style="border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; background: rgba(0, 212, 255, 0.02);"></canvas>
784
+ </div>
785
+ <div class="viz-controls">
786
+ <button onclick="drawVisualization('${module.id}')" class="btn-viz">🔄 Refresh Visualization</button>
787
+ <button onclick="toggleVizAnimation('${module.id}')" class="btn-viz">▶️ Animate</button>
788
+ <button onclick="downloadViz('${module.id}')" class="btn-viz">⬇️ Save Image</button>
789
+ </div>
790
+ </div>
791
+ </div>
792
+
793
+ <div id="${module.id}-math" class="tab">
794
+ <div class="section">
795
+ <h2>📐 Mathematical Foundation</h2>
796
+ <p>Rigorous mathematical treatment of ${module.title.toLowerCase()}.</p>
797
+ <div class="formula">
798
+ Mathematical formulas and derivations go here
799
+ </div>
800
+ </div>
801
+ <div class="section">
802
+ <h2>📊 Mathematical Visualization</h2>
803
+ <div id="${module.id}-math-viz" class="viz-container">
804
+ <canvas id="${module.id}-math-canvas" width="800" height="400" style="border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; background: rgba(0, 212, 255, 0.02);"></canvas>
805
+ </div>
806
+ <div class="viz-controls">
807
+ <button onclick="drawMathVisualization('${module.id}')" class="btn-viz">🔄 Visualize Equations</button>
808
+ </div>
809
+ </div>
810
+ </div>
811
+
812
+ <div id="${module.id}-applications" class="tab">
813
+ <div class="section">
814
+ <h2>🌍 Real-World Applications</h2>
815
+ <p>How ${module.title.toLowerCase()} is used in practice across different industries.</p>
816
+ <div class="info-box">
817
+ <div class="box-title">Use Cases</div>
818
+ <div class="box-content">
819
+ Common applications and practical examples
820
+ </div>
821
+ </div>
822
+ </div>
823
+ <div class="section">
824
+ <h2>📊 Application Scenarios Visualization</h2>
825
+ <div id="${module.id}-app-viz" class="viz-container">
826
+ <canvas id="${module.id}-app-canvas" width="800" height="400" style="border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 8px; background: rgba(0, 212, 255, 0.02);"></canvas>
827
+ </div>
828
+ <div class="viz-controls">
829
+ <button onclick="drawApplicationVisualization('${module.id}')" class="btn-viz">🔄 Show Applications</button>
830
+ </div>
831
+ </div>
832
+ </div>
833
+
834
+ <div id="${module.id}-summary" class="tab">
835
+ <div class="section">
836
+ <h2>✅ Summary</h2>
837
+ <div class="info-box">
838
+ <div class="box-title">Key Takeaways</div>
839
+ <div class="box-content">
840
+ ✓ Essential concepts covered<br>
841
+ ✓ Mathematical foundations understood<br>
842
+ ✓ Real-world applications identified<br>
843
+ ✓ Ready for implementation
844
+ </div>
845
+ </div>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ `;
850
+ }
851
+
852
+ function initDashboard() {
853
+ const grid = document.getElementById("modulesGrid");
854
+ const container = document.getElementById("modulesContainer");
855
+
856
+ modules.forEach(module => {
857
+ const card = document.createElement("div");
858
+ card.className = "card";
859
+ card.style.borderColor = module.color;
860
+ card.onclick = () => switchTo(module.id + "-module");
861
+ card.innerHTML = `
862
+ <div class="card-icon">${module.icon}</div>
863
+ <h3>${module.title}</h3>
864
+ <p>${module.description}</p>
865
+ <span class="category-label">${module.category}</span>
866
+ `;
867
+ grid.appendChild(card);
868
+
869
+ const moduleHTML = createModuleHTML(module);
870
+ container.innerHTML += moduleHTML;
871
+ });
872
+ }
873
+
874
+ function switchTo(target) {
875
+ document.querySelectorAll('.dashboard, .module').forEach(el => {
876
+ el.classList.remove('active');
877
+ });
878
+ const elem = document.getElementById(target);
879
+ if (elem) elem.classList.add('active');
880
+ }
881
+
882
+ function switchTab(e, tabId) {
883
+ const module = e.target.closest('.module');
884
+ if (!module) return;
885
+
886
+ module.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
887
+ module.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
888
+
889
+ const tab = document.getElementById(tabId);
890
+ if (tab) tab.classList.add('active');
891
+ e.target.classList.add('active');
892
+
893
+ // Trigger visualization when tabs are clicked
894
+ setTimeout(() => {
895
+ const moduleId = tabId.split('-')[0];
896
+ if (tabId.includes('-concepts')) {
897
+ drawConceptsVisualization(moduleId);
898
+ } else if (tabId.includes('-visualization')) {
899
+ drawConceptsVisualization(moduleId);
900
+ } else if (tabId.includes('-math')) {
901
+ drawMathVisualization(moduleId);
902
+ } else if (tabId.includes('-applications')) {
903
+ drawApplicationVisualization(moduleId);
904
+ }
905
+ }, 150);
906
+ }
907
+
908
+ // Visualization Functions - Concepts Tab
909
+ function drawConceptsVisualization(moduleId) {
910
+ const canvas = document.getElementById(moduleId + '-canvas');
911
+ if (!canvas) return;
912
+
913
+ const ctx = canvas.getContext('2d');
914
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
915
+ ctx.fillStyle = '#0f1419';
916
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
917
+
918
+ const vizMap = {
919
+ 'nn-basics': drawNeuronAnimation,
920
+ 'perceptron': drawDecisionBoundary,
921
+ 'mlp': drawNetworkGraph,
922
+ 'activation': drawActivationFunctions,
923
+ 'weight-init': drawWeightDistribution,
924
+ 'loss': drawLossLandscape,
925
+ 'optimizers': drawConvergencePaths,
926
+ 'backprop': drawGradientFlow,
927
+ 'regularization': drawOverfitComparison,
928
+ 'batch-norm': drawBatchNormalization,
929
+ 'cv-intro': drawImageMatrix,
930
+ 'conv-layer': drawConvolutionAnimation,
931
+ 'pooling': drawPoolingDemo,
932
+ 'cnn-basics': drawCNNArchitecture,
933
+ 'viz-filters': drawLearnedFilters,
934
+ 'lenet': drawLeNetArchitecture,
935
+ 'alexnet': drawAlexNetArchitecture,
936
+ 'vgg': drawVGGArchitecture,
937
+ 'resnet': drawResNetArchitecture,
938
+ 'inception': drawInceptionModule,
939
+ 'mobilenet': drawMobileNetArchitecture,
940
+ 'transfer-learning': drawTransferLearning,
941
+ 'localization': drawBoundingBoxes,
942
+ 'rcnn': drawRCNNPipeline,
943
+ 'yolo': drawYOLOGrid,
944
+ 'ssd': drawSSDDetector,
945
+ 'semantic-seg': drawSemanticSegmentation,
946
+ 'instance-seg': drawInstanceSegmentation,
947
+ 'face-recog': drawFaceEmbeddings,
948
+ 'autoencoders': drawAutoencoderArchitecture,
949
+ 'gans': drawGANsGame,
950
+ 'diffusion': drawDiffusionProcess,
951
+ 'rnn': drawRNNUnrolled,
952
+ 'transformers': drawAttentionMatrix,
953
+ 'bert': drawBERTProcess,
954
+ 'gpt': drawGPTGeneration,
955
+ 'vit': drawVisionTransformer
956
+ };
957
+
958
+ if (vizMap[moduleId]) {
959
+ vizMap[moduleId](ctx, canvas);
960
+ } else {
961
+ drawDefaultVisualization(ctx, canvas);
962
+ }
963
+ }
964
+
965
+ // Default Visualization
966
+ function drawDefaultVisualization(ctx, canvas) {
967
+ const centerX = canvas.width / 2;
968
+ const centerY = canvas.height / 2;
969
+
970
+ ctx.fillStyle = 'rgba(0, 212, 255, 0.2)';
971
+ ctx.fillRect(centerX - 120, centerY - 60, 240, 120);
972
+ ctx.strokeStyle = '#00d4ff';
973
+ ctx.lineWidth = 2;
974
+ ctx.strokeRect(centerX - 120, centerY - 60, 240, 120);
975
+
976
+ ctx.fillStyle = '#00d4ff';
977
+ ctx.font = 'bold 18px Arial';
978
+ ctx.textAlign = 'center';
979
+ ctx.fillText('📊 Interactive Visualization', centerX, centerY - 20);
980
+ ctx.font = '13px Arial';
981
+ ctx.fillText('Custom visualization for this topic', centerX, centerY + 20);
982
+ ctx.font = '11px Arial';
983
+ ctx.fillStyle = '#00ff88';
984
+ ctx.fillText('Click Refresh to render', centerX, centerY + 45);
985
+ }
986
+
987
+ // Default Math Visualization
988
+ function drawDefaultMathVisualization(ctx, canvas) {
989
+ const centerX = canvas.width / 2;
990
+ const centerY = canvas.height / 2;
991
+
992
+ ctx.fillStyle = 'rgba(255, 107, 53, 0.2)';
993
+ ctx.fillRect(centerX - 120, centerY - 60, 240, 120);
994
+ ctx.strokeStyle = '#ff6b35';
995
+ ctx.lineWidth = 2;
996
+ ctx.strokeRect(centerX - 120, centerY - 60, 240, 120);
997
+
998
+ ctx.fillStyle = '#ff6b35';
999
+ ctx.font = 'bold 18px Arial';
1000
+ ctx.textAlign = 'center';
1001
+ ctx.fillText('📐 Mathematical Formulas', centerX, centerY - 20);
1002
+ ctx.font = '13px Arial';
1003
+ ctx.fillText('Visual equation derivations', centerX, centerY + 20);
1004
+ ctx.font = '11px Arial';
1005
+ ctx.fillStyle = '#00ff88';
1006
+ ctx.fillText('Click Visualize to render', centerX, centerY + 45);
1007
+ }
1008
+
1009
+ // Default Application Visualization
1010
+ function drawDefaultApplicationVisualization(ctx, canvas) {
1011
+ const centerX = canvas.width / 2;
1012
+ const centerY = canvas.height / 2;
1013
+
1014
+ ctx.fillStyle = 'rgba(0, 255, 136, 0.2)';
1015
+ ctx.fillRect(centerX - 120, centerY - 60, 240, 120);
1016
+ ctx.strokeStyle = '#00ff88';
1017
+ ctx.lineWidth = 2;
1018
+ ctx.strokeRect(centerX - 120, centerY - 60, 240, 120);
1019
+
1020
+ ctx.fillStyle = '#00ff88';
1021
+ ctx.font = 'bold 18px Arial';
1022
+ ctx.textAlign = 'center';
1023
+ ctx.fillText('🌍 Real-World Applications', centerX, centerY - 20);
1024
+ ctx.font = '13px Arial';
1025
+ ctx.fillText('Practical use cases and examples', centerX, centerY + 20);
1026
+ ctx.font = '11px Arial';
1027
+ ctx.fillStyle = '#ffa500';
1028
+ ctx.fillText('Click Show Applications to render', centerX, centerY + 45);
1029
+ }
1030
+
1031
+ // Activation Functions Visualization
1032
+ function drawActivationFunctions(ctx, canvas) {
1033
+ const width = canvas.width;
1034
+ const height = canvas.height;
1035
+ const centerX = width / 2;
1036
+ const centerY = height / 2;
1037
+ const scale = 40;
1038
+
1039
+ // Draw grid
1040
+ ctx.strokeStyle = 'rgba(0, 212, 255, 0.1)';
1041
+ ctx.lineWidth = 1;
1042
+ for (let i = -5; i <= 5; i += 1) {
1043
+ const x = centerX + i * scale;
1044
+ ctx.beginPath();
1045
+ ctx.moveTo(x, centerY - 5 * scale);
1046
+ ctx.lineTo(x, centerY + 5 * scale);
1047
+ ctx.stroke();
1048
+ }
1049
+
1050
+ // Draw axes
1051
+ ctx.strokeStyle = '#00d4ff';
1052
+ ctx.lineWidth = 2;
1053
+ ctx.beginPath();
1054
+ ctx.moveTo(centerX - 6 * scale, centerY);
1055
+ ctx.lineTo(centerX + 6 * scale, centerY);
1056
+ ctx.stroke();
1057
+ ctx.beginPath();
1058
+ ctx.moveTo(centerX, centerY - 6 * scale);
1059
+ ctx.lineTo(centerX, centerY + 6 * scale);
1060
+ ctx.stroke();
1061
+
1062
+ // Draw activation functions
1063
+ const functions = [
1064
+ { name: 'ReLU', color: '#ff6b35', fn: x => Math.max(0, x) },
1065
+ { name: 'Sigmoid', color: '#00ff88', fn: x => 1 / (1 + Math.exp(-x)) },
1066
+ { name: 'Tanh', color: '#ffa500', fn: x => Math.tanh(x) }
1067
+ ];
1068
+
1069
+ functions.forEach(func => {
1070
+ ctx.strokeStyle = func.color;
1071
+ ctx.lineWidth = 2;
1072
+ ctx.beginPath();
1073
+ for (let x = -5; x <= 5; x += 0.1) {
1074
+ const y = func.fn(x);
1075
+ const canvasX = centerX + x * scale;
1076
+ const canvasY = centerY - y * scale;
1077
+ if (x === -5) ctx.moveTo(canvasX, canvasY);
1078
+ else ctx.lineTo(canvasX, canvasY);
1079
+ }
1080
+ ctx.stroke();
1081
+ });
1082
+
1083
+ // Legend
1084
+ ctx.font = 'bold 12px Arial';
1085
+ functions.forEach((func, i) => {
1086
+ ctx.fillStyle = func.color;
1087
+ ctx.fillRect(10, 10 + i * 20, 10, 10);
1088
+ ctx.fillStyle = '#e4e6eb';
1089
+ ctx.fillText(func.name, 25, 19 + i * 20);
1090
+ });
1091
+ }
1092
+
1093
+ // Neural Network Graph
1094
+ function drawNetworkGraph(ctx, canvas) {
1095
+ const layers = [2, 3, 3, 1];
1096
+ const width = canvas.width;
1097
+ const height = canvas.height;
1098
+ const layerWidth = width / (layers.length + 1);
1099
+
1100
+ ctx.fillStyle = 'rgba(0, 212, 255, 0.05)';
1101
+ ctx.fillRect(0, 0, width, height);
1102
+
1103
+ // Draw neurons and connections
1104
+ const neuronPositions = [];
1105
+
1106
+ layers.forEach((numNeurons, layerIdx) => {
1107
+ const x = (layerIdx + 1) * layerWidth;
1108
+ const positions = [];
1109
+
1110
+ for (let i = 0; i < numNeurons; i++) {
1111
+ const y = height / (numNeurons + 1) * (i + 1);
1112
+ positions.push({ x, y });
1113
+
1114
+ // Draw connections to next layer
1115
+ if (layerIdx < layers.length - 1) {
1116
+ const nextLayerPositions = [];
1117
+ const nextX = (layerIdx + 2) * layerWidth;
1118
+ for (let j = 0; j < layers[layerIdx + 1]; j++) {
1119
+ const nextY = height / (layers[layerIdx + 1] + 1) * (j + 1);
1120
+ nextLayerPositions.push({ x: nextX, y: nextY });
1121
+ }
1122
+
1123
+ nextLayerPositions.forEach(next => {
1124
+ ctx.strokeStyle = 'rgba(0, 212, 255, 0.2)';
1125
+ ctx.lineWidth = 1;
1126
+ ctx.beginPath();
1127
+ ctx.moveTo(x, y);
1128
+ ctx.lineTo(next.x, next.y);
1129
+ ctx.stroke();
1130
+ });
1131
+ }
1132
+ }
1133
+
1134
+ // Draw neurons
1135
+ positions.forEach(pos => {
1136
+ ctx.fillStyle = '#00d4ff';
1137
+ ctx.beginPath();
1138
+ ctx.arc(pos.x, pos.y, 8, 0, Math.PI * 2);
1139
+ ctx.fill();
1140
+ });
1141
+
1142
+ neuronPositions.push(positions);
1143
+ });
1144
+
1145
+ // Labels
1146
+ ctx.fillStyle = '#e4e6eb';
1147
+ ctx.font = 'bold 12px Arial';
1148
+ ctx.textAlign = 'center';
1149
+ ctx.fillText('Input', layerWidth, height - 10);
1150
+ ctx.fillText('Hidden 1', layerWidth * 2, height - 10);
1151
+ ctx.fillText('Hidden 2', layerWidth * 3, height - 10);
1152
+ ctx.fillText('Output', layerWidth * 4, height - 10);
1153
+ }
1154
+
1155
+ // Convolution Animation
1156
+ function drawConvolutionAnimation(ctx, canvas) {
1157
+ const width = canvas.width;
1158
+ const height = canvas.height;
1159
+
1160
+ // Draw input image
1161
+ ctx.fillStyle = 'rgba(0, 212, 255, 0.1)';
1162
+ ctx.fillRect(20, 20, 150, 150);
1163
+ ctx.strokeStyle = '#00d4ff';
1164
+ ctx.lineWidth = 2;
1165
+ ctx.strokeRect(20, 20, 150, 150);
1166
+
1167
+ // Draw filter
1168
+ ctx.fillStyle = 'rgba(255, 107, 53, 0.1)';
1169
+ const filterPos = 60 + Math.sin(Date.now() / 1000) * 40;
1170
+ ctx.fillRect(filterPos, 60, 60, 60);
1171
+ ctx.strokeStyle = '#ff6b35';
1172
+ ctx.lineWidth = 3;
1173
+ ctx.strokeRect(filterPos, 60, 60, 60);
1174
+
1175
+ // Draw output
1176
+ ctx.fillStyle = 'rgba(0, 255, 136, 0.1)';
1177
+ ctx.fillRect(width - 170, 20, 150, 150);
1178
+ ctx.strokeStyle = '#00ff88';
1179
+ ctx.lineWidth = 2;
1180
+ ctx.strokeRect(width - 170, 20, 150, 150);
1181
+
1182
+ // Draw feature map
1183
+ for (let i = 0; i < 5; i++) {
1184
+ for (let j = 0; j < 5; j++) {
1185
+ const intensity = Math.random() * 100;
1186
+ ctx.fillStyle = `rgba(0, 212, 255, ${intensity / 100})`;
1187
+ ctx.fillRect(width - 160 + i * 25, 30 + j * 25, 20, 20);
1188
+ }
1189
+ }
1190
+
1191
+ // Labels
1192
+ ctx.fillStyle = '#e4e6eb';
1193
+ ctx.font = 'bold 12px Arial';
1194
+ ctx.textAlign = 'left';
1195
+ ctx.fillText('Input Image', 20, 190);
1196
+ ctx.fillText('Filter', filterPos, 140);
1197
+ ctx.fillText('Feature Map', width - 170, 190);
1198
+ }
1199
+
1200
+ // Loss Landscape
1201
+ function drawLossLandscape(ctx, canvas) {
1202
+ const width = canvas.width;
1203
+ const height = canvas.height;
1204
+
1205
+ for (let x = 0; x < width; x += 20) {
1206
+ for (let y = 0; y < height; y += 20) {
1207
+ const nx = (x - width / 2) / (width / 4);
1208
+ const ny = (y - height / 2) / (height / 4);
1209
+ const loss = nx * nx + ny * ny;
1210
+ const intensity = Math.min(255, loss * 50);
1211
+ ctx.fillStyle = `rgb(${intensity}, ${100}, ${255 - intensity})`;
1212
+ ctx.fillRect(x, y, 20, 20);
1213
+ }
1214
+ }
1215
+
1216
+ // Draw descent path
1217
+ ctx.strokeStyle = '#00ff88';
1218
+ ctx.lineWidth = 2;
1219
+ ctx.beginPath();
1220
+ const startX = width / 2 + 80;
1221
+ const startY = height / 2 + 80;
1222
+ ctx.moveTo(startX, startY);
1223
+
1224
+ for (let i = 0; i < 20; i++) {
1225
+ const angle = Math.atan2(startY - height / 2, startX - width / 2);
1226
+ const newX = startX - Math.cos(angle) * 15;
1227
+ const newY = startY - Math.sin(angle) * 15;
1228
+ ctx.lineTo(newX, newY);
1229
+ }
1230
+ ctx.stroke();
1231
+
1232
+ // Minimum point
1233
+ ctx.fillStyle = '#00ff88';
1234
+ ctx.beginPath();
1235
+ ctx.arc(width / 2, height / 2, 8, 0, Math.PI * 2);
1236
+ ctx.fill();
1237
+ }
1238
+
1239
+ // YOLO Grid
1240
+ function drawYOLOGrid(ctx, canvas) {
1241
+ const width = canvas.width;
1242
+ const height = canvas.height;
1243
+ const gridSize = 7;
1244
+ const cellWidth = width / gridSize;
1245
+ const cellHeight = height / gridSize;
1246
+
1247
+ // Draw grid
1248
+ ctx.strokeStyle = 'rgba(0, 212, 255, 0.3)';
1249
+ ctx.lineWidth = 1;
1250
+ for (let i = 0; i <= gridSize; i++) {
1251
+ ctx.beginPath();
1252
+ ctx.moveTo(i * cellWidth, 0);
1253
+ ctx.lineTo(i * cellWidth, height);
1254
+ ctx.stroke();
1255
+
1256
+ ctx.beginPath();
1257
+ ctx.moveTo(0, i * cellHeight);
1258
+ ctx.lineTo(width, i * cellHeight);
1259
+ ctx.stroke();
1260
+ }
1261
+
1262
+ // Draw detected objects
1263
+ const detections = [
1264
+ { x: 2, y: 2, w: 2, h: 2, conf: 0.95 },
1265
+ { x: 4, y: 5, w: 1.5, h: 1.5, conf: 0.87 }
1266
+ ];
1267
+
1268
+ detections.forEach(det => {
1269
+ ctx.fillStyle = `rgba(255, 107, 53, ${det.conf * 0.5})`;
1270
+ ctx.fillRect(det.x * cellWidth, det.y * cellHeight, det.w * cellWidth, det.h * cellHeight);
1271
+ ctx.strokeStyle = '#ff6b35';
1272
+ ctx.lineWidth = 2;
1273
+ ctx.strokeRect(det.x * cellWidth, det.y * cellHeight, det.w * cellWidth, det.h * cellHeight);
1274
+
1275
+ ctx.fillStyle = '#ff6b35';
1276
+ ctx.font = 'bold 12px Arial';
1277
+ ctx.fillText((det.conf * 100).toFixed(0) + '%', det.x * cellWidth + 5, det.y * cellHeight + 15);
1278
+ });
1279
+ }
1280
+
1281
+ // Attention Matrix
1282
+ function drawAttentionMatrix(ctx, canvas) {
1283
+ const size = 8;
1284
+ const cellSize = Math.min(canvas.width, canvas.height) / size;
1285
+
1286
+ for (let i = 0; i < size; i++) {
1287
+ for (let j = 0; j < size; j++) {
1288
+ const distance = Math.abs(i - j);
1289
+ const attention = Math.exp(-distance / 2);
1290
+ const intensity = Math.floor(attention * 255);
1291
+ ctx.fillStyle = `rgb(${intensity}, 100, ${200 - intensity})`;
1292
+ ctx.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);
1293
+ }
1294
+ }
1295
+
1296
+ // Add labels
1297
+ ctx.fillStyle = '#e4e6eb';
1298
+ ctx.font = '10px Arial';
1299
+ ctx.textAlign = 'center';
1300
+ for (let i = 0; i < size; i++) {
1301
+ ctx.fillText('w' + i, i * cellSize + cellSize / 2, canvas.height - 5);
1302
+ }
1303
+ }
1304
+
1305
+ // Math Visualization
1306
+ function drawMathVisualization(moduleId) {
1307
+ const canvas = document.getElementById(moduleId + '-math-canvas');
1308
+ if (!canvas) return;
1309
+
1310
+ const ctx = canvas.getContext('2d');
1311
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
1312
+ ctx.fillStyle = '#0f1419';
1313
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
1314
+
1315
+ const mathVizMap = {
1316
+ 'nn-basics': () => drawNNMath(ctx, canvas),
1317
+ 'activation': () => drawActivationDerivatives(ctx, canvas),
1318
+ 'loss': () => drawLossComparison(ctx, canvas),
1319
+ 'optimizers': () => drawOptimizerSteps(ctx, canvas),
1320
+ 'backprop': () => drawChainRule(ctx, canvas),
1321
+ 'conv-layer': () => drawConvolutionMath(ctx, canvas),
1322
+ 'pooling': () => drawPoolingMath(ctx, canvas),
1323
+ 'regularization': () => drawRegularizationMath(ctx, canvas),
1324
+ 'transformers': () => drawAttentionMath(ctx, canvas),
1325
+ 'rnn': () => drawRNNMath(ctx, canvas)
1326
+ };
1327
+
1328
+ if (mathVizMap[moduleId]) {
1329
+ mathVizMap[moduleId]();
1330
+ } else {
1331
+ drawDefaultMathVisualization(ctx, canvas);
1332
+ }
1333
+ }
1334
+
1335
+ // Application Visualization
1336
+ function drawApplicationVisualization(moduleId) {
1337
+ const canvas = document.getElementById(moduleId + '-app-canvas');
1338
+ if (!canvas) return;
1339
+
1340
+ const ctx = canvas.getContext('2d');
1341
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
1342
+ ctx.fillStyle = '#0f1419';
1343
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
1344
+
1345
+ const appVizMap = {
1346
+ 'nn-basics': () => drawNNApplications(ctx, canvas),
1347
+ 'cnn-basics': () => drawCNNApplications(ctx, canvas),
1348
+ 'conv-layer': () => drawConvolutionApplications(ctx, canvas),
1349
+ 'yolo': () => drawYOLOApplications(ctx, canvas),
1350
+ 'semantic-seg': () => drawSegmentationApplications(ctx, canvas),
1351
+ 'instance-seg': () => drawInstanceSegmentationApps(ctx, canvas),
1352
+ 'face-recog': () => drawFaceRecognitionApps(ctx, canvas),
1353
+ 'transformers': () => drawTransformerApps(ctx, canvas),
1354
+ 'bert': () => drawBERTApplications(ctx, canvas),
1355
+ 'gpt': () => drawGPTApplications(ctx, canvas),
1356
+ 'gans': () => drawGANApplications(ctx, canvas),
1357
+ 'diffusion': () => drawDiffusionApplications(ctx, canvas)
1358
+ };
1359
+
1360
+ if (appVizMap[moduleId]) {
1361
+ appVizMap[moduleId]();
1362
+ } else {
1363
+ drawDefaultApplicationVisualization(ctx, canvas);
1364
+ }
1365
+ }
1366
+
1367
+ // Math visualization helper functions
1368
+ function drawNNMath(ctx, canvas) {
1369
+ ctx.fillStyle = '#00d4ff';
1370
+ ctx.font = 'bold 18px Arial';
1371
+ ctx.textAlign = 'center';
1372
+ ctx.fillText('Forward Pass: y = σ(Wx + b)', canvas.width / 2, 50);
1373
+ ctx.font = '14px Arial';
1374
+ ctx.fillStyle = '#00ff88';
1375
+ ctx.fillText('Linear combination + Non-linearity', canvas.width / 2, 100);
1376
+ ctx.fillStyle = '#ffa500';
1377
+ ctx.fillText('W: weights, b: bias, σ: activation', canvas.width / 2, 150);
1378
+ }
1379
+
1380
+ function drawActivationDerivatives(ctx, canvas) {
1381
+ const width = canvas.width;
1382
+ const height = canvas.height;
1383
+ const centerX = width / 2;
1384
+ const centerY = height / 2;
1385
+ const scale = 40;
1386
+
1387
+ ctx.strokeStyle = 'rgba(0, 212, 255, 0.2)';
1388
+ ctx.lineWidth = 1;
1389
+ for (let i = -5; i <= 5; i += 1) {
1390
+ ctx.beginPath();
1391
+ ctx.moveTo(centerX + i * scale, centerY - 5 * scale);
1392
+ ctx.lineTo(centerX + i * scale, centerY + 5 * scale);
1393
+ ctx.stroke();
1394
+ }
1395
+
1396
+ ctx.strokeStyle = '#00ff88';
1397
+ ctx.lineWidth = 3;
1398
+ ctx.beginPath();
1399
+ for (let x = -5; x <= 5; x += 0.1) {
1400
+ const y = 1 / (1 + Math.exp(-x)) * (1 - 1 / (1 + Math.exp(-x)));
1401
+ const canvasX = centerX + x * scale;
1402
+ const canvasY = centerY - y * scale * 10;
1403
+ if (x === -5) ctx.moveTo(canvasX, canvasY);
1404
+ else ctx.lineTo(canvasX, canvasY);
1405
+ }
1406
+ ctx.stroke();
1407
+
1408
+ ctx.fillStyle = '#00ff88';
1409
+ ctx.font = 'bold 14px Arial';
1410
+ ctx.textAlign = 'center';
1411
+ ctx.fillText("Sigmoid Derivative: σ'(x) = σ(x)(1-σ(x))", canvas.width / 2, 30);
1412
+ }
1413
+
1414
+ function drawLossComparison(ctx, canvas) {
1415
+ const width = canvas.width;
1416
+ const height = canvas.height;
1417
+
1418
+ // MSE
1419
+ ctx.fillStyle = 'rgba(0, 212, 255, 0.2)';
1420
+ ctx.fillRect(20, 60, width / 2 - 30, height - 100);
1421
+ ctx.fillStyle = '#00d4ff';
1422
+ ctx.font = 'bold 14px Arial';
1423
+ ctx.fillText('MSE Loss', width / 4, 45);
1424
+ ctx.font = '12px Arial';
1425
+ ctx.fillText('L = (1/n)Σ(y-ŷ)²', width / 4, 90);
1426
+ ctx.fillText('Regression', width / 4, 115);
1427
+
1428
+ // Cross-Entropy
1429
+ ctx.fillStyle = 'rgba(255, 107, 53, 0.2)';
1430
+ ctx.fillRect(width / 2 + 10, 60, width / 2 - 30, height - 100);
1431
+ ctx.fillStyle = '#ff6b35';
1432
+ ctx.font = 'bold 14px Arial';
1433
+ ctx.fillText('Cross-Entropy Loss', width * 3 / 4, 45);
1434
+ ctx.font = '12px Arial';
1435
+ ctx.fillText('L = -Σ(y·log(ŷ))', width * 3 / 4, 90);
1436
+ ctx.fillText('Classification', width * 3 / 4, 115);
1437
+ }
1438
+
1439
+ function drawOptimizerSteps(ctx, canvas) {
1440
+ const width = canvas.width;
1441
+ const height = canvas.height;
1442
+ const centerY = height / 2;
1443
+
1444
+ ctx.fillStyle = '#00d4ff';
1445
+ ctx.font = 'bold 16px Arial';
1446
+ ctx.textAlign = 'center';
1447
+ ctx.fillText('SGD', width / 4, 50);
1448
+ ctx.font = '12px Arial';
1449
+ ctx.fillText('w = w - α·∇L', width / 4, 100);
1450
+
1451
+ ctx.fillStyle = '#00ff88';
1452
+ ctx.font = 'bold 16px Arial';
1453
+ ctx.fillText('Momentum', width / 2, 50);
1454
+ ctx.font = '12px Arial';
1455
+ ctx.fillText('v = β·v + (1-β)·∇L', width / 2, 100);
1456
+
1457
+ ctx.fillStyle = '#ffa500';
1458
+ ctx.font = 'bold 16px Arial';
1459
+ ctx.fillText('Adam', width * 3 / 4, 50);
1460
+ ctx.font = '12px Arial';
1461
+ ctx.fillText('Adaptive learning rate', width * 3 / 4, 100);
1462
+ }
1463
+
1464
+ function drawChainRule(ctx, canvas) {
1465
+ const width = canvas.width;
1466
+ ctx.fillStyle = '#00ff88';
1467
+ ctx.font = 'bold 16px Arial';
1468
+ ctx.textAlign = 'center';
1469
+ ctx.fillText('Backpropagation Chain Rule', width / 2, 50);
1470
+ ctx.font = '12px Arial';
1471
+ ctx.fillStyle = '#00d4ff';
1472
+ ctx.fillText('dL/dW = dL/dŷ · dŷ/da · da/dz · dz/dW', width / 2, 100);
1473
+ ctx.fillStyle = '#ffa500';
1474
+ ctx.fillText('Compute gradient by multiplying partial derivatives', width / 2, 150);
1475
+ }
1476
+
1477
+ function drawConvolutionMath(ctx, canvas) {
1478
+ ctx.fillStyle = '#ff6b35';
1479
+ ctx.font = 'bold 16px Arial';
1480
+ ctx.textAlign = 'center';
1481
+ ctx.fillText('Convolution Operation', canvas.width / 2, 50);
1482
+ ctx.font = '12px Arial';
1483
+ ctx.fillStyle = '#00d4ff';
1484
+ ctx.fillText('y[i,j] = Σ Σ w[m,n] * x[i+m,j+n] + b', canvas.width / 2, 100);
1485
+ ctx.fillStyle = '#00ff88';
1486
+ ctx.fillText('Sliding window element-wise multiplication and summation', canvas.width / 2, 150);
1487
+ }
1488
+
1489
+ function drawPoolingMath(ctx, canvas) {
1490
+ const width = canvas.width;
1491
+ ctx.fillStyle = '#00ff88';
1492
+ ctx.font = 'bold 14px Arial';
1493
+ ctx.textAlign = 'center';
1494
+ ctx.fillText('Max Pooling', width / 3, 50);
1495
+ ctx.font = '12px Arial';
1496
+ ctx.fillText('y = max(neighborhood)', width / 3, 100);
1497
+
1498
+ ctx.fillStyle = '#00d4ff';
1499
+ ctx.font = 'bold 14px Arial';
1500
+ ctx.fillText('Average Pooling', width * 2 / 3, 50);
1501
+ ctx.font = '12px Arial';
1502
+ ctx.fillText('y = avg(neighborhood)', width * 2 / 3, 100);
1503
+
1504
+ ctx.fillStyle = '#ffa500';
1505
+ ctx.font = '11px Arial';
1506
+ ctx.textAlign = 'center';
1507
+ ctx.fillText('Reduces spatial dimensions', width / 2, 150);
1508
+ }
1509
+
1510
+ function drawRegularizationMath(ctx, canvas) {
1511
+ ctx.fillStyle = '#00d4ff';
1512
+ ctx.font = 'bold 14px Arial';
1513
+ ctx.textAlign = 'center';
1514
+ ctx.fillText('L1 Regularization: L = Loss + λΣ|w|', canvas.width / 2, 60);
1515
+ ctx.fillStyle = '#00ff88';
1516
+ ctx.fillText('L2 Regularization: L = Loss + λΣw²', canvas.width / 2, 110);
1517
+ ctx.fillStyle = '#ffa500';
1518
+ ctx.fillText('Prevents overfitting by penalizing large weights', canvas.width / 2, 160);
1519
+ }
1520
+
1521
+ function drawAttentionMath(ctx, canvas) {
1522
+ ctx.fillStyle = '#00d4ff';
1523
+ ctx.font = 'bold 14px Arial';
1524
+ ctx.textAlign = 'center';
1525
+ ctx.fillText('Attention Mechanism', canvas.width / 2, 50);
1526
+ ctx.font = '12px Arial';
1527
+ ctx.fillStyle = '#00ff88';
1528
+ ctx.fillText('Attention(Q,K,V) = softmax(QK^T/√d_k) · V', canvas.width / 2, 100);
1529
+ ctx.fillStyle = '#ffa500';
1530
+ ctx.fillText('Query-Key matching determines how much to focus on each value', canvas.width / 2, 150);
1531
+ }
1532
+
1533
+ function drawRNNMath(ctx, canvas) {
1534
+ ctx.fillStyle = '#00d4ff';
1535
+ ctx.font = 'bold 14px Arial';
1536
+ ctx.textAlign = 'center';
1537
+ ctx.fillText('RNN Hidden State Update', canvas.width / 2, 50);
1538
+ ctx.font = '12px Arial';
1539
+ ctx.fillStyle = '#00ff88';
1540
+ ctx.fillText('h_t = σ(W_h·h_(t-1) + W_x·x_t + b)', canvas.width / 2, 100);
1541
+ ctx.fillStyle = '#ffa500';
1542
+ ctx.fillText('Processes sequences step-by-step with recurrent connections', canvas.width / 2, 150);
1543
+ }
1544
+
1545
+ // Application visualization helper functions
1546
+ function drawNNApplications(ctx, canvas) {
1547
+ ctx.fillStyle = '#00d4ff';
1548
+ ctx.font = 'bold 14px Arial';
1549
+ ctx.textAlign = 'center';
1550
+ ctx.fillText('📱 Stock Price Prediction', canvas.width / 4, 60);
1551
+ ctx.fillStyle = '#00ff88';
1552
+ ctx.fillText('🏥 Medical Diagnosis', canvas.width / 2, 60);
1553
+ ctx.fillStyle = '#ffa500';
1554
+ ctx.fillText('🎮 Game AI', canvas.width * 3 / 4, 60);
1555
+
1556
+ ctx.fillStyle = '#ff6b35';
1557
+ ctx.font = '12px Arial';
1558
+ ctx.fillText('Fraud Detection', canvas.width / 4, 120);
1559
+ ctx.fillStyle = '#00d4ff';
1560
+ ctx.fillText('Recommendation Systems', canvas.width / 2, 120);
1561
+ ctx.fillStyle = '#00ff88';
1562
+ ctx.fillText('Credit Scoring', canvas.width * 3 / 4, 120);
1563
+ }
1564
+
1565
+ function drawCNNApplications(ctx, canvas) {
1566
+ ctx.fillStyle = '#00d4ff';
1567
+ ctx.font = 'bold 14px Arial';
1568
+ ctx.textAlign = 'center';
1569
+ ctx.fillText('Image Classification', canvas.width / 3, 60);
1570
+ ctx.fillStyle = '#00ff88';
1571
+ ctx.fillText('Object Detection', canvas.width * 2 / 3, 60);
1572
+
1573
+ ctx.fillStyle = '#ffa500';
1574
+ ctx.font = '12px Arial';
1575
+ ctx.fillText('Deep Learning Backbone', canvas.width / 2, 150);
1576
+ }
1577
+
1578
+ function drawConvolutionApplications(ctx, canvas) {
1579
+ ctx.fillStyle = '#00d4ff';
1580
+ ctx.font = 'bold 14px Arial';
1581
+ ctx.textAlign = 'center';
1582
+ ctx.fillText('📷 Image Feature Extraction', canvas.width / 3, 60);
1583
+ ctx.fillStyle = '#00ff88';
1584
+ ctx.fillText('🔍 Edge Detection', canvas.width * 2 / 3, 60);
1585
+
1586
+ ctx.fillStyle = '#ffa500';
1587
+ ctx.font = '12px Arial';
1588
+ ctx.fillText('Foundation of Computer Vision', canvas.width / 2, 150);
1589
+ }
1590
+
1591
+ function drawYOLOApplications(ctx, canvas) {
1592
+ ctx.fillStyle = '#ff6b35';
1593
+ ctx.font = 'bold 14px Arial';
1594
+ ctx.textAlign = 'center';
1595
+ ctx.fillText('🚗 Autonomous Driving', canvas.width / 3, 60);
1596
+ ctx.fillStyle = '#00d4ff';
1597
+ ctx.fillText('📹 Real-time Video Detection', canvas.width * 2 / 3, 60);
1598
+
1599
+ ctx.fillStyle = '#00ff88';
1600
+ ctx.font = '12px Arial';
1601
+ ctx.fillText('Ultra-fast inference for live applications', canvas.width / 2, 150);
1602
+ }
1603
+
1604
+ function drawSegmentationApplications(ctx, canvas) {
1605
+ ctx.fillStyle = '#00d4ff';
1606
+ ctx.font = 'bold 14px Arial';
1607
+ ctx.textAlign = 'center';
1608
+ ctx.fillText('🏥 Medical Imaging', canvas.width / 3, 60);
1609
+ ctx.fillStyle = '#00ff88';
1610
+ ctx.fillText('🚗 Autonomous Vehicles', canvas.width * 2 / 3, 60);
1611
+
1612
+ ctx.fillStyle = '#ffa500';
1613
+ ctx.font = '12px Arial';
1614
+ ctx.fillText('Pixel-level understanding of scenes', canvas.width / 2, 150);
1615
+ }
1616
+
1617
+ function drawInstanceSegmentationApps(ctx, canvas) {
1618
+ ctx.fillStyle = '#00d4ff';
1619
+ ctx.font = 'bold 14px Arial';
1620
+ ctx.textAlign = 'center';
1621
+ ctx.fillText('👥 Person Detection & Tracking', canvas.width / 3, 60);
1622
+ ctx.fillStyle = '#00ff88';
1623
+ ctx.fillText('🍎 Object Instance Counting', canvas.width * 2 / 3, 60);
1624
+
1625
+ ctx.fillStyle = '#ffa500';
1626
+ ctx.font = '12px Arial';
1627
+ ctx.fillText('Separates overlapping objects', canvas.width / 2, 150);
1628
+ }
1629
+
1630
+ function drawFaceRecognitionApps(ctx, canvas) {
1631
+ ctx.fillStyle = '#ffa500';
1632
+ ctx.font = 'bold 14px Arial';
1633
+ ctx.textAlign = 'center';
1634
+ ctx.fillText('📱 Phone Unlock', canvas.width / 3, 60);
1635
+ ctx.fillStyle = '#00d4ff';
1636
+ ctx.fillText('🔒 Security Systems', canvas.width * 2 / 3, 60);
1637
+
1638
+ ctx.fillStyle = '#00ff88';
1639
+ ctx.font = '12px Arial';
1640
+ ctx.fillText('Identity verification and access control', canvas.width / 2, 150);
1641
+ }
1642
+
1643
+ function drawTransformerApps(ctx, canvas) {
1644
+ ctx.fillStyle = '#00d4ff';
1645
+ ctx.font = 'bold 14px Arial';
1646
+ ctx.textAlign = 'center';
1647
+ ctx.fillText('💬 ChatGPT / LLMs', canvas.width / 3, 60);
1648
+ ctx.fillStyle = '#00ff88';
1649
+ ctx.fillText('🌐 Machine Translation', canvas.width * 2 / 3, 60);
1650
+
1651
+ ctx.fillStyle = '#ffa500';
1652
+ ctx.font = '12px Arial';
1653
+ ctx.fillText('Foundation of modern NLP and beyond', canvas.width / 2, 150);
1654
+ }
1655
+
1656
+ function drawBERTApplications(ctx, canvas) {
1657
+ ctx.fillStyle = '#00d4ff';
1658
+ ctx.font = 'bold 14px Arial';
1659
+ ctx.textAlign = 'center';
1660
+ ctx.fillText('🔍 Semantic Search', canvas.width / 3, 60);
1661
+ ctx.fillStyle = '#00ff88';
1662
+ ctx.fillText('❓ Question Answering', canvas.width * 2 / 3, 60);
1663
+
1664
+ ctx.fillStyle = '#ffa500';
1665
+ ctx.font = '12px Arial';
1666
+ ctx.fillText('Deep language understanding', canvas.width / 2, 150);
1667
+ }
1668
+
1669
+ function drawGPTApplications(ctx, canvas) {
1670
+ ctx.fillStyle = '#ff6b35';
1671
+ ctx.font = 'bold 14px Arial';
1672
+ ctx.textAlign = 'center';
1673
+ ctx.fillText('✍️ Text Generation', canvas.width / 3, 60);
1674
+ ctx.fillStyle = '#00d4ff';
1675
+ ctx.fillText('💡 Idea Assistance', canvas.width * 2 / 3, 60);
1676
+
1677
+ ctx.fillStyle = '#00ff88';
1678
+ ctx.font = '12px Arial';
1679
+ ctx.fillText('Powerful autoregressive language models', canvas.width / 2, 150);
1680
+ }
1681
+
1682
+ function drawGANApplications(ctx, canvas) {
1683
+ ctx.fillStyle = '#ff6b35';
1684
+ ctx.font = 'bold 14px Arial';
1685
+ ctx.textAlign = 'center';
1686
+ ctx.fillText('🎨 Image Generation', canvas.width / 3, 60);
1687
+ ctx.fillStyle = '#00d4ff';
1688
+ ctx.fillText('🎭 Style Transfer', canvas.width * 2 / 3, 60);
1689
+
1690
+ ctx.fillStyle = '#00ff88';
1691
+ ctx.font = '12px Arial';
1692
+ ctx.fillText('Creative content generation and enhancement', canvas.width / 2, 150);
1693
+ }
1694
+
1695
+ function drawDiffusionApplications(ctx, canvas) {
1696
+ ctx.fillStyle = '#ffa500';
1697
+ ctx.font = 'bold 14px Arial';
1698
+ ctx.textAlign = 'center';
1699
+ ctx.fillText('🖼️ Image Synthesis', canvas.width / 3, 60);
1700
+ ctx.fillStyle = '#00d4ff';
1701
+ ctx.fillText('🎬 Stable Diffusion', canvas.width * 2 / 3, 60);
1702
+
1703
+ ctx.fillStyle = '#00ff88';
1704
+ ctx.font = '12px Arial';
1705
+ ctx.fillText('State-of-the-art generative AI', canvas.width / 2, 150);
1706
+ }
1707
+
1708
+ // Missing visualization stub functions
1709
+ function drawNeuronAnimation(ctx, canvas) {
1710
+ drawNetworkGraph(ctx, canvas);
1711
+ }
1712
+
1713
+ function drawDecisionBoundary(ctx, canvas) {
1714
+ const centerX = canvas.width / 2;
1715
+ const centerY = canvas.height / 2;
1716
+
1717
+ // Draw decision boundary line
1718
+ ctx.strokeStyle = '#ff6b35';
1719
+ ctx.lineWidth = 3;
1720
+ ctx.beginPath();
1721
+ ctx.moveTo(0, centerY);
1722
+ ctx.lineTo(canvas.width, centerY);
1723
+ ctx.stroke();
1724
+
1725
+ // Draw sample points
1726
+ for (let i = 0; i < 20; i++) {
1727
+ const x = Math.random() * canvas.width;
1728
+ const y = Math.random() * canvas.height;
1729
+ ctx.fillStyle = y < centerY ? '#00d4ff' : '#00ff88';
1730
+ ctx.beginPath();
1731
+ ctx.arc(x, y, 5, 0, Math.PI * 2);
1732
+ ctx.fill();
1733
+ }
1734
+ }
1735
+
1736
+ function drawWeightDistribution(ctx, canvas) {
1737
+ const centerX = canvas.width / 2;
1738
+ const centerY = canvas.height / 2;
1739
+
1740
+ // Draw Gaussian distribution
1741
+ ctx.strokeStyle = '#00d4ff';
1742
+ ctx.lineWidth = 2;
1743
+ ctx.beginPath();
1744
+ for (let x = -100; x <= 100; x += 2) {
1745
+ const y = Math.exp(-(x * x) / 500) * 80;
1746
+ const canvasX = centerX + x;
1747
+ const canvasY = centerY - y;
1748
+ if (x === -100) ctx.moveTo(canvasX, canvasY);
1749
+ else ctx.lineTo(canvasX, canvasY);
1750
+ }
1751
+ ctx.stroke();
1752
+
1753
+ ctx.fillStyle = '#00d4ff';
1754
+ ctx.font = 'bold 14px Arial';
1755
+ ctx.textAlign = 'center';
1756
+ ctx.fillText('Weight Distribution (Xavier/He Init)', centerX, 50);
1757
+ }
1758
+
1759
+ function drawConvergencePaths(ctx, canvas) {
1760
+ drawLossLandscape(ctx, canvas);
1761
+ }
1762
+
1763
+ function drawGradientFlow(ctx, canvas) {
1764
+ drawChainRule(ctx, canvas);
1765
+ }
1766
+
1767
+ function drawOverfitComparison(ctx, canvas) {
1768
+ const width = canvas.width;
1769
+ ctx.fillStyle = '#00d4ff';
1770
+ ctx.font = 'bold 14px Arial';
1771
+ ctx.textAlign = 'center';
1772
+ ctx.fillText('Without Regularization', width / 4, 40);
1773
+ ctx.fillStyle = '#ff6b35';
1774
+ ctx.fillText('With Regularization', width * 3 / 4, 40);
1775
+
1776
+ // Draw wavy overfit line
1777
+ ctx.strokeStyle = '#00d4ff';
1778
+ ctx.lineWidth = 2;
1779
+ ctx.beginPath();
1780
+ for (let x = 0; x < width / 2 - 20; x += 5) {
1781
+ const y = 100 + Math.sin(x / 10) * 30 + Math.random() * 20;
1782
+ if (x === 0) ctx.moveTo(x + 20, y);
1783
+ else ctx.lineTo(x + 20, y);
1784
+ }
1785
+ ctx.stroke();
1786
+
1787
+ // Draw smooth regularized line
1788
+ ctx.strokeStyle = '#ff6b35';
1789
+ ctx.beginPath();
1790
+ for (let x = 0; x < width / 2 - 20; x += 5) {
1791
+ const y = 100 + Math.sin(x / 20) * 15;
1792
+ if (x === 0) ctx.moveTo(x + width / 2 + 20, y);
1793
+ else ctx.lineTo(x + width / 2 + 20, y);
1794
+ }
1795
+ ctx.stroke();
1796
+ }
1797
+
1798
+ function drawBatchNormalization(ctx, canvas) {
1799
+ ctx.fillStyle = '#00d4ff';
1800
+ ctx.font = 'bold 14px Arial';
1801
+ ctx.textAlign = 'center';
1802
+ ctx.fillText('Batch Normalization: μ=0, σ²=1', canvas.width / 2, 50);
1803
+
1804
+ // Draw before/after distributions
1805
+ ctx.fillStyle = '#ffa500';
1806
+ ctx.fillText('Input Distribution', canvas.width / 4, 100);
1807
+ ctx.fillStyle = '#00ff88';
1808
+ ctx.fillText('Normalized Distribution', canvas.width * 3 / 4, 100);
1809
+ }
1810
+
1811
+ function drawImageMatrix(ctx, canvas) {
1812
+ const cellSize = 20;
1813
+ for (let i = 0; i < 10; i++) {
1814
+ for (let j = 0; j < 10; j++) {
1815
+ const intensity = Math.random();
1816
+ ctx.fillStyle = `rgba(0, 212, 255, ${intensity})`;
1817
+ ctx.fillRect(i * cellSize + 100, j * cellSize + 100, cellSize, cellSize);
1818
+ }
1819
+ }
1820
+ ctx.fillStyle = '#e4e6eb';
1821
+ ctx.font = 'bold 14px Arial';
1822
+ ctx.textAlign = 'center';
1823
+ ctx.fillText('Image as Matrix (Pixel Values)', canvas.width / 2, 50);
1824
+ }
1825
+
1826
+ function drawPoolingDemo(ctx, canvas) {
1827
+ const cellSize = 30;
1828
+ const matrix = [[12, 20, 30, 0], [8, 12, 2, 0], [34, 70, 37, 4], [112, 100, 25, 12]];
1829
+
1830
+ ctx.fillStyle = '#e4e6eb';
1831
+ ctx.font = 'bold 14px Arial';
1832
+ ctx.textAlign = 'center';
1833
+ ctx.fillText('Max Pooling Demo (2x2)', canvas.width / 2, 30);
1834
+
1835
+ // Draw input matrix
1836
+ for (let i = 0; i < 4; i++) {
1837
+ for (let j = 0; j < 4; j++) {
1838
+ ctx.strokeStyle = '#00d4ff';
1839
+ ctx.strokeRect(50 + j * cellSize, 50 + i * cellSize, cellSize, cellSize);
1840
+ ctx.fillStyle = '#e4e6eb';
1841
+ ctx.font = '10px Arial';
1842
+ ctx.fillText(matrix[i][j], 50 + j * cellSize + cellSize / 2, 50 + i * cellSize + cellSize / 2 + 4);
1843
+ }
1844
+ }
1845
+
1846
+ // Draw output (max pooled)
1847
+ const pooled = [[20, 30], [112, 37]];
1848
+ for (let i = 0; i < 2; i++) {
1849
+ for (let j = 0; j < 2; j++) {
1850
+ ctx.strokeStyle = '#00ff88';
1851
+ ctx.strokeRect(250 + j * cellSize * 1.5, 70 + i * cellSize * 1.5, cellSize * 1.5, cellSize * 1.5);
1852
+ ctx.fillStyle = '#00ff88';
1853
+ ctx.font = 'bold 12px Arial';
1854
+ ctx.fillText(pooled[i][j], 250 + j * cellSize * 1.5 + cellSize * 0.75, 70 + i * cellSize * 1.5 + cellSize * 0.75 + 5);
1855
+ }
1856
+ }
1857
+ }
1858
+
1859
+ function drawCNNArchitecture(ctx, canvas) {
1860
+ ctx.fillStyle = '#00d4ff';
1861
+ ctx.font = 'bold 12px Arial';
1862
+ ctx.textAlign = 'center';
1863
+ ctx.fillText('Input', 60, 200);
1864
+ ctx.fillText('Conv', 160, 200);
1865
+ ctx.fillText('Pool', 260, 200);
1866
+ ctx.fillText('Conv', 360, 200);
1867
+ ctx.fillText('Pool', 460, 200);
1868
+ ctx.fillText('FC', 560, 200);
1869
+ ctx.fillText('Output', 660, 200);
1870
+
1871
+ // Draw blocks
1872
+ const blocks = [60, 160, 260, 360, 460, 560, 660];
1873
+ blocks.forEach((x, i) => {
1874
+ const height = i === 0 ? 100 : (i < blocks.length - 2 ? 80 - i * 10 : 60);
1875
+ ctx.strokeStyle = '#00d4ff';
1876
+ ctx.strokeRect(x - 30, 100, 60, height);
1877
+ });
1878
+ }
1879
+
1880
+ function drawLearnedFilters(ctx, canvas) {
1881
+ ctx.fillStyle = '#e4e6eb';
1882
+ ctx.font = 'bold 14px Arial';
1883
+ ctx.textAlign = 'center';
1884
+ ctx.fillText('CNN Learned Filters', canvas.width / 2, 30);
1885
+
1886
+ const labels = ['Edges', 'Textures', 'Patterns', 'Objects'];
1887
+ labels.forEach((label, i) => {
1888
+ const x = (i + 1) * canvas.width / 5;
1889
+ ctx.fillStyle = '#ff6b35';
1890
+ ctx.font = 'bold 12px Arial';
1891
+ ctx.fillText(label, x, 80);
1892
+
1893
+ // Draw filter representation
1894
+ for (let j = 0; j < 3; j++) {
1895
+ for (let k = 0; k < 3; k++) {
1896
+ const intensity = Math.random();
1897
+ ctx.fillStyle = `rgba(0, 212, 255, ${intensity})`;
1898
+ ctx.fillRect(x - 20 + k * 12, 100 + j * 12, 10, 10);
1899
+ }
1900
+ }
1901
+ });
1902
+ }
1903
+
1904
+ function drawLeNetArchitecture(ctx, canvas) { drawCNNArchitecture(ctx, canvas); }
1905
+ function drawAlexNetArchitecture(ctx, canvas) { drawCNNArchitecture(ctx, canvas); }
1906
+ function drawVGGArchitecture(ctx, canvas) { drawCNNArchitecture(ctx, canvas); }
1907
+ function drawResNetArchitecture(ctx, canvas) { drawCNNArchitecture(ctx, canvas); }
1908
+ function drawInceptionModule(ctx, canvas) { drawCNNArchitecture(ctx, canvas); }
1909
+ function drawMobileNetArchitecture(ctx, canvas) { drawCNNArchitecture(ctx, canvas); }
1910
+ function drawTransferLearning(ctx, canvas) { drawCNNArchitecture(ctx, canvas); }
1911
+
1912
+ function drawBoundingBoxes(ctx, canvas) {
1913
+ // Draw sample image
1914
+ ctx.fillStyle = 'rgba(0, 212, 255, 0.1)';
1915
+ ctx.fillRect(50, 50, 300, 300);
1916
+
1917
+ // Draw bounding boxes
1918
+ ctx.strokeStyle = '#ff6b35';
1919
+ ctx.lineWidth = 3;
1920
+ ctx.strokeRect(100, 100, 150, 150);
1921
+ ctx.fillStyle = '#ff6b35';
1922
+ ctx.font = 'bold 12px Arial';
1923
+ ctx.fillText('Dog 95%', 105, 95);
1924
+
1925
+ ctx.strokeStyle = '#00ff88';
1926
+ ctx.strokeRect(180, 200, 100, 80);
1927
+ ctx.fillStyle = '#00ff88';
1928
+ ctx.fillText('Cat 87%', 185, 195);
1929
+ }
1930
+
1931
+ function drawRCNNPipeline(ctx, canvas) { drawBoundingBoxes(ctx, canvas); }
1932
+ function drawSSDDetector(ctx, canvas) { drawBoundingBoxes(ctx, canvas); }
1933
+
1934
+ function drawSemanticSegmentation(ctx, canvas) {
1935
+ const cellSize = 15;
1936
+ const colors = ['rgba(0, 212, 255, 0.5)', 'rgba(255, 107, 53, 0.5)', 'rgba(0, 255, 136, 0.5)'];
1937
+
1938
+ for (let i = 0; i < 20; i++) {
1939
+ for (let j = 0; j < 20; j++) {
1940
+ ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
1941
+ ctx.fillRect(i * cellSize + 100, j * cellSize + 50, cellSize, cellSize);
1942
+ }
1943
+ }
1944
+
1945
+ ctx.fillStyle = '#e4e6eb';
1946
+ ctx.font = 'bold 14px Arial';
1947
+ ctx.textAlign = 'center';
1948
+ ctx.fillText('Pixel-wise Classification', canvas.width / 2, 30);
1949
+ }
1950
+
1951
+ function drawInstanceSegmentation(ctx, canvas) { drawSemanticSegmentation(ctx, canvas); }
1952
+
1953
+ function drawFaceEmbeddings(ctx, canvas) {
1954
+ ctx.fillStyle = '#e4e6eb';
1955
+ ctx.font = 'bold 14px Arial';
1956
+ ctx.textAlign = 'center';
1957
+ ctx.fillText('Face Embedding Space', canvas.width / 2, 30);
1958
+
1959
+ // Draw embedding vectors
1960
+ const faces = 5;
1961
+ for (let i = 0; i < faces; i++) {
1962
+ const x = 100 + Math.random() * (canvas.width - 200);
1963
+ const y = 100 + Math.random() * 200;
1964
+ ctx.fillStyle = '#00d4ff';
1965
+ ctx.beginPath();
1966
+ ctx.arc(x, y, 10, 0, Math.PI * 2);
1967
+ ctx.fill();
1968
+ }
1969
+ }
1970
+
1971
+ function drawAutoencoderArchitecture(ctx, canvas) {
1972
+ ctx.fillStyle = '#00d4ff';
1973
+ ctx.font = 'bold 12px Arial';
1974
+ ctx.textAlign = 'center';
1975
+
1976
+ const stages = ['Input', 'Encoder', 'Latent', 'Decoder', 'Output'];
1977
+ stages.forEach((label, i) => {
1978
+ const x = (i + 1) * canvas.width / 6;
1979
+ ctx.fillText(label, x, 50);
1980
+ const height = i === 2 ? 40 : (i === 0 || i === 4 ? 100 : 70);
1981
+ ctx.strokeStyle = '#00d4ff';
1982
+ ctx.strokeRect(x - 30, 100, 60, height);
1983
+ });
1984
+ }
1985
+
1986
+ function drawGANsGame(ctx, canvas) {
1987
+ ctx.fillStyle = '#ff6b35';
1988
+ ctx.font = 'bold 14px Arial';
1989
+ ctx.textAlign = 'center';
1990
+ ctx.fillText('Generator', canvas.width / 3, 50);
1991
+ ctx.fillStyle = '#00d4ff';
1992
+ ctx.fillText('Discriminator', canvas.width * 2 / 3, 50);
1993
+
1994
+ // DrawGenerator
1995
+ ctx.strokeStyle = '#ff6b35';
1996
+ ctx.strokeRect(canvas.width / 3 - 50, 100, 100, 100);
1997
+
1998
+ // Draw Discriminator
1999
+ ctx.strokeStyle = '#00d4ff';
2000
+ ctx.strokeRect(canvas.width * 2 / 3 - 50, 100, 100, 100);
2001
+
2002
+ // Draw arrow
2003
+ ctx.strokeStyle = '#00ff88';
2004
+ ctx.lineWidth = 2;
2005
+ ctx.beginPath();
2006
+ ctx.moveTo(canvas.width / 3 + 50, 150);
2007
+ ctx.lineTo(canvas.width * 2 / 3 - 50, 150);
2008
+ ctx.stroke();
2009
+ }
2010
+
2011
+ function drawDiffusionProcess(ctx, canvas) {
2012
+ const steps = 5;
2013
+ const stepWidth = canvas.width / (steps + 1);
2014
+
2015
+ ctx.fillStyle = '#e4e6eb';
2016
+ ctx.font = 'bold 14px Arial';
2017
+ ctx.textAlign = 'center';
2018
+ ctx.fillText('Diffusion Process: From Noise to Image', canvas.width / 2, 30);
2019
+
2020
+ for (let i = 0; i < steps; i++) {
2021
+ const x = (i + 1) * stepWidth;
2022
+ const noise = 1 - (i / steps);
2023
+ ctx.fillStyle = `rgba(0, 212, 255, ${1 - noise})`;
2024
+ ctx.fillRect(x - 40, 100, 80, 80);
2025
+ ctx.strokeStyle = '#00d4ff';
2026
+ ctx.strokeRect(x - 40, 100, 80, 80);
2027
+ }
2028
+ }
2029
+
2030
+ function drawRNNUnrolled(ctx, canvas) {
2031
+ const cells = 5;
2032
+ const cellWidth = canvas.width / (cells + 1);
2033
+
2034
+ ctx.fillStyle = '#e4e6eb';
2035
+ ctx.font = 'bold 14px Arial';
2036
+ ctx.textAlign = 'center';
2037
+ ctx.fillText('Unrolled RNN', canvas.width / 2, 30);
2038
+
2039
+ for (let i = 0; i < cells; i++) {
2040
+ const x = (i + 1) * cellWidth;
2041
+ ctx.strokeStyle = '#00d4ff';
2042
+ ctx.strokeRect(x - 30, 100, 60, 60);
2043
+
2044
+ if (i < cells - 1) {
2045
+ ctx.strokeStyle = '#ff6b35';
2046
+ ctx.lineWidth = 2;
2047
+ ctx.beginPath();
2048
+ ctx.moveTo(x + 30, 130);
2049
+ ctx.lineTo(x + cellWidth - 30, 130);
2050
+ ctx.stroke();
2051
+ }
2052
+ }
2053
+ }
2054
+
2055
+ function drawBERTProcess(ctx, canvas) { drawAttentionMatrix(ctx, canvas); }
2056
+ function drawGPTGeneration(ctx, canvas) { drawAttentionMatrix(ctx, canvas); }
2057
+ function drawVisionTransformer(ctx, canvas) { drawAttentionMatrix(ctx, canvas); }
2058
+
2059
+ function drawVisualization(moduleId) {
2060
+ drawConceptsVisualization(moduleId);
2061
+ }
2062
+
2063
+ // Animation and download utilities
2064
+ function toggleVizAnimation(moduleId) {
2065
+ window.vizAnimating = !window.vizAnimating;
2066
+ if (window.vizAnimating) {
2067
+ animateVisualization(moduleId);
2068
+ }
2069
+ }
2070
+
2071
+ function animateVisualization(moduleId) {
2072
+ if (!window.vizAnimating) return;
2073
+ drawConceptsVisualization(moduleId);
2074
+ setTimeout(() => animateVisualization(moduleId), 150);
2075
+ }
2076
+
2077
+ function downloadViz(moduleId) {
2078
+ const canvas = document.getElementById(moduleId + '-canvas');
2079
+ if (!canvas) return;
2080
+
2081
+ const link = document.createElement('a');
2082
+ link.href = canvas.toDataURL('image/png');
2083
+ link.download = moduleId + '-visualization.png';
2084
+ link.click();
2085
+ }
2086
+
2087
+ initDashboard();
2088
+ </script>
2089
+ </body>
2090
+
2091
+ </html>
math-ds-complete/app.js CHANGED
@@ -31,6 +31,11 @@ document.addEventListener('DOMContentLoaded', () => {
31
  initKeyboardShortcuts();
32
  initLazyLoading();
33
 
 
 
 
 
 
34
  // Show initial subject
35
  switchSubject('statistics');
36
 
@@ -502,7 +507,14 @@ function initializeAllVisualizations() {
502
  initVectorCanvas();
503
  initSpanCanvas();
504
  initTransformationGrid();
505
- initEigenvectorCanvas();
 
 
 
 
 
 
 
506
 
507
  // Calculus visualizations
508
  initCircleAreaCanvas();
@@ -518,6 +530,9 @@ function initializeAllVisualizations() {
518
  initGradientDescentCanvas();
519
  initLossLandscapeCanvas();
520
 
 
 
 
521
  // Machine Learning visualizations
522
  initMLLinearRegressionCanvas();
523
  initMLKMeansCanvas();
@@ -1008,6 +1023,7 @@ function initTransformationGrid() {
1008
  drawGrid(false);
1009
  }
1010
 
 
1011
  function initEigenvectorCanvas() {
1012
  const canvas = document.getElementById('canvas-54');
1013
  if (!canvas) return;
@@ -1015,37 +1031,84 @@ function initEigenvectorCanvas() {
1015
  const ctx = canvas.getContext('2d');
1016
  let transformed = false;
1017
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1018
  function draw() {
1019
  clearCanvas(ctx, canvas);
1020
 
1021
  const centerX = canvas.width / 2;
1022
  const centerY = canvas.height / 2;
1023
- const scale = 50;
 
 
 
 
 
 
 
 
 
 
 
 
1024
 
1025
  // Draw axes
1026
- drawLine(ctx, 0, centerY, canvas.width, centerY, '#555', 1);
1027
- drawLine(ctx, centerX, 0, centerX, canvas.height, '#555', 1);
1028
 
1029
- // Matrix [[2, 0], [0, 1]] - scaling transformation
1030
- // Eigenvectors: [1, 0] with eigenvalue 2, [0, 1] with eigenvalue 1
 
1031
 
1032
- const e1Scale = transformed ? 2 : 1;
1033
- const e2Scale = 1;
1034
 
1035
- // Draw regular vectors (affected)
1036
- const regularVecs = [[2, 2], [1, 2], [-2, 1]];
1037
- regularVecs.forEach(([x, y]) => {
1038
- const endX = transformed ? centerX + 2 * x * scale : centerX + x * scale;
1039
- const endY = centerY - y * scale;
1040
- drawLine(ctx, centerX, centerY, endX, endY, '#666', 2);
1041
- });
1042
 
1043
- // Draw eigenvectors (special - stay on their line)
1044
- drawLine(ctx, centerX, centerY, centerX + e1Scale * 2 * scale, centerY, COLORS.cyan, 4);
1045
- drawLine(ctx, centerX, centerY, centerX, centerY - 2 * scale, COLORS.orange, 4);
 
 
 
 
 
 
 
 
 
 
 
 
1046
 
1047
- drawText(ctx, 'Eigenvector 1 (λ=2)', centerX + e1Scale * 2 * scale + 10, centerY - 10, 12, COLORS.cyan, 'left');
1048
- drawText(ctx, 'Eigenvector 2 (λ=1)', centerX + 10, centerY - 2 * scale - 10, 12, COLORS.orange, 'left');
 
 
 
 
 
1049
  }
1050
 
1051
  const transformBtn = document.getElementById('btn54transform');
@@ -2431,4 +2494,947 @@ function navigateTopics(direction) {
2431
 
2432
  console.log('%c📊 Ultimate Learning Platform Loaded', 'color: #64ffda; font-size: 16px; font-weight: bold;');
2433
  console.log('%cReady to explore 125+ comprehensive topics across 5 subjects!', 'color: #4a90e2; font-size: 14px;');
2434
- console.log('%c✓ Statistics (41) ✓ Linear Algebra (16) ✓ Calculus (12) ✓ Data Science (16) ✓ Machine Learning (40+)', 'color: #51cf66; font-size: 12px;');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  initKeyboardShortcuts();
32
  initLazyLoading();
33
 
34
+ // Fix Show Answer buttons (Remove inline handlers to avoid conflicts)
35
+ document.querySelectorAll('.show-answers-btn, .show-answer-btn').forEach(btn => {
36
+ btn.removeAttribute('onclick');
37
+ });
38
+
39
  // Show initial subject
40
  switchSubject('statistics');
41
 
 
507
  initVectorCanvas();
508
  initSpanCanvas();
509
  initTransformationGrid();
510
+ initEigenvectorCanvas(); // This now calls the updated version
511
+
512
+ // Advanced Stats (New)
513
+ initSkewnessVisualization();
514
+ initCovarianceVisualization();
515
+ initPDFCDFVisualization();
516
+ initNormalRuleVisualization();
517
+ initCorrelationVisualization();
518
 
519
  // Calculus visualizations
520
  initCircleAreaCanvas();
 
530
  initGradientDescentCanvas();
531
  initLossLandscapeCanvas();
532
 
533
+ // Machine Learning (New)
534
+ initDecisionTreeVisualization();
535
+
536
  // Machine Learning visualizations
537
  initMLLinearRegressionCanvas();
538
  initMLKMeansCanvas();
 
1023
  drawGrid(false);
1024
  }
1025
 
1026
+ // ===== EIGENVECTOR VISUALIZATION (UPDATED) =====
1027
  function initEigenvectorCanvas() {
1028
  const canvas = document.getElementById('canvas-54');
1029
  if (!canvas) return;
 
1031
  const ctx = canvas.getContext('2d');
1032
  let transformed = false;
1033
 
1034
+ // Matrix A = [[2, 0], [0, 1]]
1035
+ const matrix = [[2, 0], [0, 1]];
1036
+
1037
+ // Test vectors
1038
+ const vectors = [
1039
+ { x: 1, y: 1, color: '#4a90e2', label: '[1,1] Not Eigenvector', isEigen: false },
1040
+ { x: 1, y: 0, color: '#51cf66', label: '[1,0] Eigenvector \u03bb=2', isEigen: true, lambda: 2 },
1041
+ { x: 0, y: 1, color: '#ffd93d', label: '[0,1] Eigenvector \u03bb=1', isEigen: true, lambda: 1 }
1042
+ ];
1043
+
1044
+ function applyMatrix(v) {
1045
+ return {
1046
+ x: matrix[0][0] * v.x + matrix[0][1] * v.y,
1047
+ y: matrix[1][0] * v.x + matrix[1][1] * v.y
1048
+ };
1049
+ }
1050
+
1051
  function draw() {
1052
  clearCanvas(ctx, canvas);
1053
 
1054
  const centerX = canvas.width / 2;
1055
  const centerY = canvas.height / 2;
1056
+ const scale = 80;
1057
+
1058
+ // Title
1059
+ drawText(ctx, transformed ? 'After: A \u00d7 v (Matrix Applied)' : 'Before: Original Vectors', centerX, 25, 16, COLORS.cyan);
1060
+ drawText(ctx, 'Matrix A = [[2, 0], [0, 1]] \u2014 Stretches x-axis by 2', centerX, 45, 12, COLORS.textSecondary);
1061
+
1062
+ // Draw grid
1063
+ ctx.strokeStyle = 'rgba(255,255,255,0.1)';
1064
+ ctx.lineWidth = 1;
1065
+ for (let i = -4; i <= 4; i++) {
1066
+ drawLine(ctx, centerX + i * scale, 60, centerX + i * scale, canvas.height - 40, 'rgba(255,255,255,0.1)', 1);
1067
+ drawLine(ctx, 40, centerY + i * scale, canvas.width - 40, centerY + i * scale, 'rgba(255,255,255,0.1)', 1);
1068
+ }
1069
 
1070
  // Draw axes
1071
+ drawLine(ctx, 40, centerY, canvas.width - 40, centerY, COLORS.text, 2);
1072
+ drawLine(ctx, centerX, 60, centerX, canvas.height - 40, COLORS.text, 2);
1073
 
1074
+ // Draw vectors
1075
+ vectors.forEach((v, idx) => {
1076
+ let displayV = transformed ? applyMatrix(v) : v;
1077
 
1078
+ const endX = centerX + displayV.x * scale;
1079
+ const endY = centerY - displayV.y * scale;
1080
 
1081
+ // Draw vector arrow
1082
+ ctx.beginPath();
1083
+ ctx.strokeStyle = v.color;
1084
+ ctx.lineWidth = 3;
1085
+ ctx.moveTo(centerX, centerY);
1086
+ ctx.lineTo(endX, endY);
1087
+ ctx.stroke();
1088
 
1089
+ // Arrow head
1090
+ const angle = Math.atan2(centerY - endY, endX - centerX);
1091
+ ctx.beginPath();
1092
+ ctx.fillStyle = v.color;
1093
+ ctx.moveTo(endX, endY);
1094
+ ctx.lineTo(endX - 15 * Math.cos(angle - 0.3), endY + 15 * Math.sin(angle - 0.3));
1095
+ ctx.lineTo(endX - 15 * Math.cos(angle + 0.3), endY + 15 * Math.sin(angle + 0.3));
1096
+ ctx.closePath();
1097
+ ctx.fill();
1098
+
1099
+ // Label
1100
+ const labelX = endX + 20;
1101
+ const labelY = endY - 10;
1102
+ drawText(ctx, `[${displayV.x.toFixed(1)}, ${displayV.y.toFixed(1)}]`, labelX, labelY, 11, v.color, 'left');
1103
+ });
1104
 
1105
+ // Legend
1106
+ const legendY = canvas.height - 25;
1107
+ vectors.forEach((v, idx) => {
1108
+ const x = 80 + idx * 220;
1109
+ drawCircle(ctx, x, legendY, 6, v.color);
1110
+ drawText(ctx, v.label, x + 15, legendY + 4, 10, COLORS.text, 'left');
1111
+ });
1112
  }
1113
 
1114
  const transformBtn = document.getElementById('btn54transform');
 
2494
 
2495
  console.log('%c📊 Ultimate Learning Platform Loaded', 'color: #64ffda; font-size: 16px; font-weight: bold;');
2496
  console.log('%cReady to explore 125+ comprehensive topics across 5 subjects!', 'color: #4a90e2; font-size: 14px;');
2497
+ console.log('%c✓ Statistics (41) ✓ Linear Algebra (16) ✓ Calculus (12) ✓ Data Science (16) ✓ Machine Learning (40+)', 'color: #51cf66; font-size: 12px;');
2498
+
2499
+ // ===== TOGGLE ANSWER FUNCTION =====
2500
+ /**
2501
+ * toggleAnswer - Robust Show/Hide Answer Function for practice problems
2502
+ * @param {string} answerId - The ID of the answer element to toggle
2503
+ */
2504
+ function toggleAnswer(answerId) {
2505
+ const answerElement = document.getElementById(answerId);
2506
+
2507
+ if (!answerElement) {
2508
+ console.warn(`Element with ID "${answerId}" not found.`);
2509
+ return;
2510
+ }
2511
+
2512
+ // Find the button that triggered this
2513
+ const allButtons = document.querySelectorAll('.show-answer-btn');
2514
+ let triggerButton = null;
2515
+
2516
+ allButtons.forEach(btn => {
2517
+ const onclickAttr = btn.getAttribute('onclick');
2518
+ if (onclickAttr && onclickAttr.includes(answerId)) {
2519
+ triggerButton = btn;
2520
+ }
2521
+ });
2522
+
2523
+ // Toggle display
2524
+ const isHidden = answerElement.style.display === 'none' ||
2525
+ getComputedStyle(answerElement).display === 'none' ||
2526
+ answerElement.style.display === '';
2527
+
2528
+ if (isHidden) {
2529
+ answerElement.style.display = 'block';
2530
+ if (triggerButton) {
2531
+ triggerButton.textContent = 'Hide Answers';
2532
+ triggerButton.classList.add('active');
2533
+ }
2534
+ } else {
2535
+ answerElement.style.display = 'none';
2536
+ if (triggerButton) {
2537
+ triggerButton.textContent = 'Show Answers';
2538
+ triggerButton.classList.remove('active');
2539
+ }
2540
+ }
2541
+ }
2542
+
2543
+ // ===== FIX ALL SHOW ANSWER BUTTONS (EVENT DELEGATION) =====
2544
+ document.addEventListener('DOMContentLoaded', function () {
2545
+ // Use event delegation to handle all show answer buttons
2546
+ document.addEventListener('click', function (e) {
2547
+ // Check if clicked element is a show-answers button
2548
+ if (e.target.classList.contains('show-answers-btn') ||
2549
+ e.target.classList.contains('show-answer-btn')) {
2550
+
2551
+ e.preventDefault();
2552
+ e.stopPropagation();
2553
+
2554
+ const btn = e.target;
2555
+ const answerDiv = btn.nextElementSibling;
2556
+
2557
+ if (answerDiv && (answerDiv.classList.contains('practice-answers') ||
2558
+ answerDiv.classList.contains('answer-content') ||
2559
+ answerDiv.id && answerDiv.id.includes('answer'))) {
2560
+
2561
+ // Toggle display
2562
+ if (answerDiv.style.display === 'none' || answerDiv.style.display === '') {
2563
+ answerDiv.style.display = 'block';
2564
+ btn.textContent = 'Hide Answers';
2565
+ btn.classList.add('active');
2566
+ } else {
2567
+ answerDiv.style.display = 'none';
2568
+ btn.textContent = 'Show Answers';
2569
+ btn.classList.remove('active');
2570
+ }
2571
+ }
2572
+ }
2573
+ });
2574
+
2575
+ // Ensure all answer divs start hidden
2576
+ document.querySelectorAll('.practice-answers, .answer-content').forEach(el => {
2577
+ el.style.display = 'none';
2578
+ });
2579
+
2580
+ // Fix button text (remove line breaks)
2581
+ document.querySelectorAll('.show-answers-btn, .show-answer-btn').forEach(btn => {
2582
+ const text = btn.textContent.trim();
2583
+ if (text.includes('Show') && text.includes('Answers')) {
2584
+ btn.textContent = 'Show Answers';
2585
+ }
2586
+ });
2587
+
2588
+ console.log('%c✓ Show Answer Buttons Fixed', 'color: #51cf66;');
2589
+ });
2590
+
2591
+ // ===== TOPIC 10: SKEWNESS VISUALIZATION =====
2592
+ function initSkewnessVisualization() {
2593
+ const canvas = document.getElementById('skewnessCanvas');
2594
+ if (!canvas) return;
2595
+
2596
+ const ctx = canvas.getContext('2d');
2597
+ let animating = false;
2598
+
2599
+ function normalPDF(x, mean, std) {
2600
+ return Math.exp(-0.5 * Math.pow((x - mean) / std, 2)) / (std * Math.sqrt(2 * Math.PI));
2601
+ }
2602
+
2603
+ function betaPDF(x, alpha, beta) {
2604
+ if (x <= 0 || x >= 1) return 0;
2605
+ const B = (Math.pow(x, alpha - 1) * Math.pow(1 - x, beta - 1));
2606
+ return B * 3; // Scale for visibility
2607
+ }
2608
+
2609
+ function draw() {
2610
+ clearCanvas(ctx, canvas);
2611
+
2612
+ const padding = 50;
2613
+ const chartWidth = (canvas.width - padding * 4) / 3;
2614
+ const chartHeight = canvas.height - padding * 3;
2615
+
2616
+ // Title
2617
+ drawText(ctx, 'Types of Skewness: Where Mean, Median, and Mode Fall', canvas.width / 2, 25, 16, COLORS.cyan);
2618
+
2619
+ const charts = [
2620
+ { title: 'NEGATIVE (Left) Skew', color: '#64ffda', type: 'left', meanPos: 0.35, medianPos: 0.5, modePos: 0.65 },
2621
+ { title: 'SYMMETRIC (No Skew)', color: '#4a90e2', type: 'symmetric', meanPos: 0.5, medianPos: 0.5, modePos: 0.5 },
2622
+ { title: 'POSITIVE (Right) Skew', color: '#ff6b6b', type: 'right', meanPos: 0.65, medianPos: 0.5, modePos: 0.35 }
2623
+ ];
2624
+
2625
+ charts.forEach((chart, i) => {
2626
+ const startX = padding + i * (chartWidth + padding);
2627
+ const startY = padding + 30;
2628
+
2629
+ // Draw axes
2630
+ drawLine(ctx, startX, startY + chartHeight, startX + chartWidth, startY + chartHeight, COLORS.text, 2);
2631
+
2632
+ // Draw distribution curve
2633
+ ctx.beginPath();
2634
+ ctx.strokeStyle = chart.color;
2635
+ ctx.lineWidth = 3;
2636
+
2637
+ for (let px = 0; px <= chartWidth; px++) {
2638
+ const x = px / chartWidth;
2639
+ let y;
2640
+
2641
+ if (chart.type === 'left') {
2642
+ y = betaPDF(x, 5, 2);
2643
+ } else if (chart.type === 'right') {
2644
+ y = betaPDF(x, 2, 5);
2645
+ } else {
2646
+ y = normalPDF(x, 0.5, 0.15) * 0.15;
2647
+ }
2648
+
2649
+ const plotX = startX + px;
2650
+ const plotY = startY + chartHeight - y * chartHeight * 0.8;
2651
+
2652
+ if (px === 0) ctx.moveTo(plotX, plotY);
2653
+ else ctx.lineTo(plotX, plotY);
2654
+ }
2655
+ ctx.stroke();
2656
+
2657
+ // Fill under curve
2658
+ ctx.globalAlpha = 0.2;
2659
+ ctx.fillStyle = chart.color;
2660
+ ctx.lineTo(startX + chartWidth, startY + chartHeight);
2661
+ ctx.lineTo(startX, startY + chartHeight);
2662
+ ctx.closePath();
2663
+ ctx.fill();
2664
+ ctx.globalAlpha = 1;
2665
+
2666
+ // Draw Mean, Median, Mode lines
2667
+ const measures = [
2668
+ { pos: chart.modePos, label: 'Mode', color: '#ff6b6b', dash: [5, 5] },
2669
+ { pos: chart.medianPos, label: 'Median', color: '#ffd93d', dash: [10, 5] },
2670
+ { pos: chart.meanPos, label: 'Mean', color: '#51cf66', dash: [2, 2] }
2671
+ ];
2672
+
2673
+ measures.forEach((m, idx) => {
2674
+ const lineX = startX + m.pos * chartWidth;
2675
+ ctx.setLineDash(m.dash);
2676
+ drawLine(ctx, lineX, startY + 20, lineX, startY + chartHeight, m.color, 2);
2677
+ ctx.setLineDash([]);
2678
+ drawText(ctx, m.label, lineX, startY + 10 + idx * 12, 10, m.color);
2679
+ });
2680
+
2681
+ // Title
2682
+ drawText(ctx, chart.title, startX + chartWidth / 2, startY + chartHeight + 25, 12, chart.color);
2683
+
2684
+ // Relationship text
2685
+ let relText = '';
2686
+ if (chart.type === 'left') relText = 'Mean < Median < Mode';
2687
+ else if (chart.type === 'right') relText = 'Mode < Median < Mean';
2688
+ else relText = 'Mean = Median = Mode';
2689
+ drawText(ctx, relText, startX + chartWidth / 2, startY + chartHeight + 45, 10, COLORS.text);
2690
+ });
2691
+ }
2692
+
2693
+ const animateBtn = document.getElementById('skewnessAnimateBtn');
2694
+ const resetBtn = document.getElementById('skewnessResetBtn');
2695
+
2696
+ if (animateBtn) animateBtn.addEventListener('click', draw);
2697
+ if (resetBtn) resetBtn.addEventListener('click', draw);
2698
+
2699
+ draw();
2700
+ }
2701
+
2702
+ // ===== TOPIC 20: PDF vs CDF VISUALIZATION =====
2703
+ function initPDFCDFVisualization() {
2704
+ const canvas = document.getElementById('pdfCdfCanvas');
2705
+ if (!canvas) return;
2706
+
2707
+ const ctx = canvas.getContext('2d');
2708
+ let rangeStart = 3, rangeEnd = 7;
2709
+
2710
+ function draw() {
2711
+ clearCanvas(ctx, canvas);
2712
+
2713
+ const padding = 60;
2714
+ const chartWidth = (canvas.width - padding * 3) / 2;
2715
+ const chartHeight = canvas.height - padding * 2.5;
2716
+
2717
+ // Title
2718
+ drawText(ctx, 'PDF vs CDF: Uniform Distribution [0, 10]', canvas.width / 2, 25, 16, COLORS.cyan);
2719
+
2720
+ // PDF (Left side)
2721
+ const pdfStartX = padding;
2722
+ const pdfStartY = padding + 20;
2723
+
2724
+ drawText(ctx, 'PDF: Probability Density Function', pdfStartX + chartWidth / 2, pdfStartY - 5, 14, '#64ffda');
2725
+
2726
+ // Axes
2727
+ drawLine(ctx, pdfStartX, pdfStartY + chartHeight, pdfStartX + chartWidth, pdfStartY + chartHeight, COLORS.text, 2);
2728
+ drawLine(ctx, pdfStartX, pdfStartY, pdfStartX, pdfStartY + chartHeight, COLORS.text, 2);
2729
+
2730
+ // X-axis labels
2731
+ for (let i = 0; i <= 10; i += 2) {
2732
+ const x = pdfStartX + (i / 10) * chartWidth;
2733
+ drawText(ctx, i.toString(), x, pdfStartY + chartHeight + 15, 10, COLORS.textSecondary);
2734
+ }
2735
+
2736
+ // PDF rectangle (height = 0.1 for uniform [0,10])
2737
+ const pdfHeight = chartHeight * 0.4;
2738
+ ctx.fillStyle = 'rgba(100, 255, 218, 0.2)';
2739
+ ctx.fillRect(pdfStartX, pdfStartY + chartHeight - pdfHeight, chartWidth, pdfHeight);
2740
+ ctx.strokeStyle = '#64ffda';
2741
+ ctx.lineWidth = 2;
2742
+ ctx.strokeRect(pdfStartX, pdfStartY + chartHeight - pdfHeight, chartWidth, pdfHeight);
2743
+
2744
+ // Shade the selected range
2745
+ const rangeX1 = pdfStartX + (rangeStart / 10) * chartWidth;
2746
+ const rangeX2 = pdfStartX + (rangeEnd / 10) * chartWidth;
2747
+ ctx.fillStyle = 'rgba(255, 107, 107, 0.5)';
2748
+ ctx.fillRect(rangeX1, pdfStartY + chartHeight - pdfHeight, rangeX2 - rangeX1, pdfHeight);
2749
+
2750
+ // Labels
2751
+ drawText(ctx, 'Height = 0.1', pdfStartX + chartWidth + 10, pdfStartY + chartHeight - pdfHeight / 2, 10, COLORS.cyan, 'left');
2752
+ const prob = ((rangeEnd - rangeStart) / 10).toFixed(2);
2753
+ drawText(ctx, `P(${rangeStart} ≤ X ≤ ${rangeEnd}) = ${prob}`, pdfStartX + chartWidth / 2, pdfStartY + chartHeight - pdfHeight - 15, 12, '#ff6b6b');
2754
+ drawText(ctx, `Area = (${rangeEnd}-${rangeStart}) × 0.1 = ${prob}`, pdfStartX + chartWidth / 2, pdfStartY + chartHeight - pdfHeight / 2, 11, '#ff6b6b');
2755
+
2756
+ // CDF (Right side)
2757
+ const cdfStartX = padding * 2 + chartWidth;
2758
+ const cdfStartY = pdfStartY;
2759
+
2760
+ drawText(ctx, 'CDF: Cumulative Distribution Function', cdfStartX + chartWidth / 2, cdfStartY - 5, 14, '#ff6b6b');
2761
+
2762
+ // Axes
2763
+ drawLine(ctx, cdfStartX, cdfStartY + chartHeight, cdfStartX + chartWidth, cdfStartY + chartHeight, COLORS.text, 2);
2764
+ drawLine(ctx, cdfStartX, cdfStartY, cdfStartX, cdfStartY + chartHeight, COLORS.text, 2);
2765
+
2766
+ // X-axis labels
2767
+ for (let i = 0; i <= 10; i += 2) {
2768
+ const x = cdfStartX + (i / 10) * chartWidth;
2769
+ drawText(ctx, i.toString(), x, cdfStartY + chartHeight + 15, 10, COLORS.textSecondary);
2770
+ }
2771
+
2772
+ // Y-axis labels
2773
+ for (let i = 0; i <= 1; i += 0.2) {
2774
+ const y = cdfStartY + chartHeight - i * chartHeight;
2775
+ drawText(ctx, i.toFixed(1), cdfStartX - 20, y + 4, 10, COLORS.textSecondary);
2776
+ }
2777
+
2778
+ // CDF ramp line
2779
+ ctx.beginPath();
2780
+ ctx.strokeStyle = '#ff6b6b';
2781
+ ctx.lineWidth = 3;
2782
+ ctx.moveTo(cdfStartX, cdfStartY + chartHeight);
2783
+ ctx.lineTo(cdfStartX + chartWidth, cdfStartY);
2784
+ ctx.stroke();
2785
+
2786
+ // Mark points for selected range
2787
+ const cdfY1 = cdfStartY + chartHeight - (rangeStart / 10) * chartHeight;
2788
+ const cdfY2 = cdfStartY + chartHeight - (rangeEnd / 10) * chartHeight;
2789
+ const cdfX1 = cdfStartX + (rangeStart / 10) * chartWidth;
2790
+ const cdfX2 = cdfStartX + (rangeEnd / 10) * chartWidth;
2791
+
2792
+ drawCircle(ctx, cdfX1, cdfY1, 6, '#ffd93d');
2793
+ drawCircle(ctx, cdfX2, cdfY2, 6, '#ffd93d');
2794
+
2795
+ // Dashed lines to points
2796
+ ctx.setLineDash([5, 5]);
2797
+ drawLine(ctx, cdfX1, cdfY1, cdfX1, cdfStartY + chartHeight, '#ffd93d', 1);
2798
+ drawLine(ctx, cdfX2, cdfY2, cdfX2, cdfStartY + chartHeight, '#ffd93d', 1);
2799
+ drawLine(ctx, cdfStartX, cdfY1, cdfX1, cdfY1, '#ffd93d', 1);
2800
+ drawLine(ctx, cdfStartX, cdfY2, cdfX2, cdfY2, '#ffd93d', 1);
2801
+ ctx.setLineDash([]);
2802
+
2803
+ drawText(ctx, `F(${rangeStart}) = ${(rangeStart / 10).toFixed(1)}`, cdfX1 + 10, cdfY1 - 10, 10, '#ffd93d', 'left');
2804
+ drawText(ctx, `F(${rangeEnd}) = ${(rangeEnd / 10).toFixed(1)}`, cdfX2 + 10, cdfY2 - 10, 10, '#ffd93d', 'left');
2805
+
2806
+ // Relationship
2807
+ drawText(ctx, `P(${rangeStart}≤X≤${rangeEnd}) = F(${rangeEnd}) - F(${rangeStart}) = ${prob}`,
2808
+ cdfStartX + chartWidth / 2, cdfStartY + chartHeight / 2, 11, '#64ffda');
2809
+
2810
+ // Key insight
2811
+ drawText(ctx, '💡 Area under PDF = Height on CDF', canvas.width / 2, canvas.height - 20, 14, COLORS.cyan);
2812
+ }
2813
+
2814
+ const slider1 = document.getElementById('pdfRangeSlider');
2815
+ const slider2 = document.getElementById('pdfRangeSlider2');
2816
+ const label = document.getElementById('pdfRangeLabel');
2817
+ const animateBtn = document.getElementById('pdfCdfAnimateBtn');
2818
+
2819
+ function updateSliders() {
2820
+ rangeStart = parseFloat(slider1.value);
2821
+ rangeEnd = parseFloat(slider2.value);
2822
+ if (rangeEnd < rangeStart) {
2823
+ const temp = rangeStart;
2824
+ rangeStart = rangeEnd;
2825
+ rangeEnd = temp;
2826
+ }
2827
+ if (label) label.textContent = `[${rangeStart}, ${rangeEnd}]`;
2828
+ draw();
2829
+ }
2830
+
2831
+ if (slider1) slider1.addEventListener('input', updateSliders);
2832
+ if (slider2) slider2.addEventListener('input', updateSliders);
2833
+ if (animateBtn) animateBtn.addEventListener('click', draw);
2834
+
2835
+ draw();
2836
+ }
2837
+
2838
+ // ===== TOPIC 24: NORMAL DISTRIBUTION 68-95-99.7 RULE =====
2839
+ function initNormalRuleVisualization() {
2840
+ const canvas = document.getElementById('normalRuleCanvas');
2841
+ if (!canvas) return;
2842
+
2843
+ const ctx = canvas.getContext('2d');
2844
+ let showLevel = 'all'; // '1', '2', '3', or 'all'
2845
+
2846
+ function normalPDF(x) {
2847
+ return Math.exp(-0.5 * x * x) / Math.sqrt(2 * Math.PI);
2848
+ }
2849
+
2850
+ function draw() {
2851
+ clearCanvas(ctx, canvas);
2852
+
2853
+ const padding = 60;
2854
+ const width = canvas.width - padding * 2;
2855
+ const height = canvas.height - padding * 2;
2856
+ const centerX = canvas.width / 2;
2857
+ const centerY = padding + height * 0.85;
2858
+ const scale = width / 8; // -4 to +4 std devs
2859
+
2860
+ // Title
2861
+ drawText(ctx, 'The 68-95-99.7 Rule (Empirical Rule)', canvas.width / 2, 25, 18, COLORS.cyan);
2862
+
2863
+ // Draw axes
2864
+ drawLine(ctx, padding, centerY, canvas.width - padding, centerY, COLORS.text, 2);
2865
+
2866
+ // Draw standard deviation markers
2867
+ for (let i = -3; i <= 3; i++) {
2868
+ const x = centerX + i * scale;
2869
+ const label = i === 0 ? 'μ' : (i > 0 ? `+${i}σ` : `${i}σ`);
2870
+ drawLine(ctx, x, centerY, x, centerY + 10, COLORS.text, 1);
2871
+ drawText(ctx, label, x, centerY + 25, 12, i === 0 ? '#ffd93d' : COLORS.textSecondary);
2872
+ }
2873
+
2874
+ // Fill regions based on showLevel
2875
+ const regions = [
2876
+ { sigma: 3, color: 'rgba(153, 102, 255, 0.3)', percent: '99.7%', show: showLevel === '3' || showLevel === 'all' },
2877
+ { sigma: 2, color: 'rgba(255, 107, 107, 0.4)', percent: '95%', show: showLevel === '2' || showLevel === 'all' },
2878
+ { sigma: 1, color: 'rgba(100, 255, 218, 0.5)', percent: '68%', show: showLevel === '1' || showLevel === 'all' }
2879
+ ];
2880
+
2881
+ regions.forEach(region => {
2882
+ if (!region.show) return;
2883
+
2884
+ ctx.beginPath();
2885
+ ctx.fillStyle = region.color;
2886
+
2887
+ for (let px = -region.sigma * scale; px <= region.sigma * scale; px++) {
2888
+ const x = px / scale;
2889
+ const y = normalPDF(x);
2890
+ const plotX = centerX + px;
2891
+ const plotY = centerY - y * height * 2;
2892
+
2893
+ if (px === -region.sigma * scale) {
2894
+ ctx.moveTo(plotX, centerY);
2895
+ ctx.lineTo(plotX, plotY);
2896
+ } else {
2897
+ ctx.lineTo(plotX, plotY);
2898
+ }
2899
+ }
2900
+ ctx.lineTo(centerX + region.sigma * scale, centerY);
2901
+ ctx.closePath();
2902
+ ctx.fill();
2903
+ });
2904
+
2905
+ // Draw the curve
2906
+ ctx.beginPath();
2907
+ ctx.strokeStyle = 'white';
2908
+ ctx.lineWidth = 3;
2909
+
2910
+ for (let px = -4 * scale; px <= 4 * scale; px++) {
2911
+ const x = px / scale;
2912
+ const y = normalPDF(x);
2913
+ const plotX = centerX + px;
2914
+ const plotY = centerY - y * height * 2;
2915
+
2916
+ if (px === -4 * scale) ctx.moveTo(plotX, plotY);
2917
+ else ctx.lineTo(plotX, plotY);
2918
+ }
2919
+ ctx.stroke();
2920
+
2921
+ // Draw percentage labels
2922
+ const labelY = centerY - height * 0.4;
2923
+ if (showLevel === '1' || showLevel === 'all') {
2924
+ drawText(ctx, '68%', centerX, labelY + 60, 24, '#64ffda');
2925
+ }
2926
+ if (showLevel === '2' || showLevel === 'all') {
2927
+ drawText(ctx, '95%', centerX, labelY + 30, 18, '#ff6b6b');
2928
+ }
2929
+ if (showLevel === '3' || showLevel === 'all') {
2930
+ drawText(ctx, '99.7%', centerX, labelY, 14, '#9966ff');
2931
+ }
2932
+
2933
+ // Legend
2934
+ const legendY = canvas.height - 40;
2935
+ drawRect(ctx, padding, legendY, 15, 15, 'rgba(100, 255, 218, 0.5)');
2936
+ drawText(ctx, '±1σ = 68%', padding + 25, legendY + 12, 11, COLORS.text, 'left');
2937
+
2938
+ drawRect(ctx, padding + 120, legendY, 15, 15, 'rgba(255, 107, 107, 0.4)');
2939
+ drawText(ctx, '±2σ = 95%', padding + 145, legendY + 12, 11, COLORS.text, 'left');
2940
+
2941
+ drawRect(ctx, padding + 240, legendY, 15, 15, 'rgba(153, 102, 255, 0.3)');
2942
+ drawText(ctx, '±3σ = 99.7%', padding + 265, legendY + 12, 11, COLORS.text, 'left');
2943
+
2944
+ // Example
2945
+ drawText(ctx, 'Example: IQ (μ=100, σ=15) → 68% between 85-115', canvas.width - padding - 150, legendY + 12, 11, '#ffd93d');
2946
+ }
2947
+
2948
+ const show68Btn = document.getElementById('normalShow68Btn');
2949
+ const show95Btn = document.getElementById('normalShow95Btn');
2950
+ const show997Btn = document.getElementById('normalShow997Btn');
2951
+ const showAllBtn = document.getElementById('normalShowAllBtn');
2952
+
2953
+ if (show68Btn) show68Btn.addEventListener('click', () => { showLevel = '1'; draw(); });
2954
+ if (show95Btn) show95Btn.addEventListener('click', () => { showLevel = '2'; draw(); });
2955
+ if (show997Btn) show997Btn.addEventListener('click', () => { showLevel = '3'; draw(); });
2956
+ if (showAllBtn) showAllBtn.addEventListener('click', () => { showLevel = 'all'; draw(); });
2957
+
2958
+ draw();
2959
+ }
2960
+
2961
+ // ===== ML-10: DECISION TREE VISUALIZATION =====
2962
+ function initDecisionTreeVisualization() {
2963
+ const canvas = document.getElementById('decisionTreeCanvas');
2964
+ if (!canvas) return;
2965
+
2966
+ const ctx = canvas.getContext('2d');
2967
+ let testHeight = 175;
2968
+ let classifying = false;
2969
+ let classificationPath = null;
2970
+
2971
+ function draw() {
2972
+ clearCanvas(ctx, canvas);
2973
+
2974
+ const centerX = canvas.width / 2;
2975
+
2976
+ // Title
2977
+ drawText(ctx, 'Decision Tree: Is a Person Tall? (Height > 170 cm)', centerX, 30, 18, COLORS.cyan);
2978
+
2979
+ // Root node (decision node)
2980
+ const rootX = centerX, rootY = 100;
2981
+ const nodeWidth = 180, nodeHeight = 60;
2982
+
2983
+ // Draw root node
2984
+ ctx.fillStyle = classifying ? '#21262d' : '#1a365d';
2985
+ ctx.strokeStyle = COLORS.cyan;
2986
+ ctx.lineWidth = 3;
2987
+ roundRect(ctx, rootX - nodeWidth / 2, rootY - nodeHeight / 2, nodeWidth, nodeHeight, 10, true, true);
2988
+
2989
+ drawText(ctx, 'Height > 170?', rootX, rootY - 5, 16, COLORS.cyan);
2990
+ drawText(ctx, '(Root Node)', rootX, rootY + 15, 11, COLORS.textSecondary);
2991
+
2992
+ // Branches
2993
+ const leafY = 280;
2994
+ const leftX = centerX - 180;
2995
+ const rightX = centerX + 180;
2996
+
2997
+ // Left branch (NO)
2998
+ ctx.strokeStyle = classificationPath === 'left' ? '#ff6b6b' : COLORS.text;
2999
+ ctx.lineWidth = classificationPath === 'left' ? 4 : 2;
3000
+ ctx.beginPath();
3001
+ ctx.moveTo(rootX - nodeWidth / 4, rootY + nodeHeight / 2);
3002
+ ctx.lineTo(leftX, leafY - nodeHeight / 2);
3003
+ ctx.stroke();
3004
+
3005
+ drawText(ctx, 'NO (≤ 170)', leftX + 40, rootY + 80, 14, '#ff6b6b');
3006
+
3007
+ // Right branch (YES)
3008
+ ctx.strokeStyle = classificationPath === 'right' ? '#51cf66' : COLORS.text;
3009
+ ctx.lineWidth = classificationPath === 'right' ? 4 : 2;
3010
+ ctx.beginPath();
3011
+ ctx.moveTo(rootX + nodeWidth / 4, rootY + nodeHeight / 2);
3012
+ ctx.lineTo(rightX, leafY - nodeHeight / 2);
3013
+ ctx.stroke();
3014
+
3015
+ drawText(ctx, 'YES (> 170)', rightX - 40, rootY + 80, 14, '#51cf66');
3016
+
3017
+ // Left leaf node (NOT TALL)
3018
+ const leafActive = classificationPath === 'left';
3019
+ ctx.fillStyle = leafActive ? '#4a1c1c' : '#21262d';
3020
+ ctx.strokeStyle = '#ff6b6b';
3021
+ ctx.lineWidth = leafActive ? 4 : 2;
3022
+ roundRect(ctx, leftX - nodeWidth / 2, leafY - nodeHeight / 2, nodeWidth, nodeHeight, 10, true, true);
3023
+
3024
+ drawText(ctx, '🔴 Class: 0', leftX, leafY - 8, 16, '#ff6b6b');
3025
+ drawText(ctx, 'NOT TALL', leftX, leafY + 12, 12, '#ff6b6b');
3026
+
3027
+ // Right leaf node (TALL)
3028
+ const rightActive = classificationPath === 'right';
3029
+ ctx.fillStyle = rightActive ? '#1c4a1c' : '#21262d';
3030
+ ctx.strokeStyle = '#51cf66';
3031
+ ctx.lineWidth = rightActive ? 4 : 2;
3032
+ roundRect(ctx, rightX - nodeWidth / 2, leafY - nodeHeight / 2, nodeWidth, nodeHeight, 10, true, true);
3033
+
3034
+ drawText(ctx, '🟢 Class: 1', rightX, leafY - 8, 16, '#51cf66');
3035
+ drawText(ctx, 'TALL', rightX, leafY + 12, 12, '#51cf66');
3036
+
3037
+ // Show test input
3038
+ if (classifying) {
3039
+ const resultText = testHeight > 170 ? `${testHeight} cm → TALL (Class 1)` : `${testHeight} cm → NOT TALL (Class 0)`;
3040
+ const resultColor = testHeight > 170 ? '#51cf66' : '#ff6b6b';
3041
+ drawText(ctx, `Test Input: ${testHeight} cm`, centerX, 380, 16, COLORS.text);
3042
+ drawText(ctx, `Result: ${resultText}`, centerX, 410, 18, resultColor);
3043
+ }
3044
+
3045
+ // Legend
3046
+ drawText(ctx, '📋 Components: Root Node (Question) → Branches (Yes/No) → Leaf Nodes (Predictions)', centerX, canvas.height - 20, 12, COLORS.textSecondary);
3047
+ }
3048
+
3049
+ function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
3050
+ ctx.beginPath();
3051
+ ctx.moveTo(x + radius, y);
3052
+ ctx.lineTo(x + width - radius, y);
3053
+ ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
3054
+ ctx.lineTo(x + width, y + height - radius);
3055
+ ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
3056
+ ctx.lineTo(x + radius, y + height);
3057
+ ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
3058
+ ctx.lineTo(x, y + radius);
3059
+ ctx.quadraticCurveTo(x, y, x + radius, y);
3060
+ ctx.closePath();
3061
+ if (fill) ctx.fill();
3062
+ if (stroke) ctx.stroke();
3063
+ }
3064
+
3065
+ const slider = document.getElementById('heightTestSlider');
3066
+ const label = document.getElementById('heightTestLabel');
3067
+ const classifyBtn = document.getElementById('treeClassifyBtn');
3068
+ const resetBtn = document.getElementById('treeResetBtn');
3069
+
3070
+ if (slider) {
3071
+ slider.addEventListener('input', (e) => {
3072
+ testHeight = parseInt(e.target.value);
3073
+ if (label) label.textContent = testHeight;
3074
+ });
3075
+ }
3076
+
3077
+ if (classifyBtn) {
3078
+ classifyBtn.addEventListener('click', () => {
3079
+ classifying = true;
3080
+ classificationPath = testHeight > 170 ? 'right' : 'left';
3081
+ draw();
3082
+ });
3083
+ }
3084
+
3085
+ if (resetBtn) {
3086
+ resetBtn.addEventListener('click', () => {
3087
+ classifying = false;
3088
+ classificationPath = null;
3089
+ draw();
3090
+ });
3091
+ }
3092
+
3093
+ draw();
3094
+ }
3095
+
3096
+
3097
+
3098
+ // ===== TOPIC 12: CORRELATION VISUALIZATION =====
3099
+ function initCorrelationVisualization() {
3100
+ const canvas = document.getElementById('correlationCanvas');
3101
+ if (!canvas) return;
3102
+ const ctx = canvas.getContext('2d');
3103
+ let r = 0.7;
3104
+
3105
+ function generateCorrelatedData(rho) {
3106
+ const data = [];
3107
+ const n = 50;
3108
+ for (let i = 0; i < n; i++) {
3109
+ const x = (Math.random() - 0.5) * 2;
3110
+ const noise = (Math.random() - 0.5) * 2;
3111
+ const y = rho * x + Math.sqrt(1 - rho * rho) * noise;
3112
+ data.push({ x: x * 40 + 50, y: y * 40 + 50 });
3113
+ }
3114
+ return data;
3115
+ }
3116
+
3117
+ function draw() {
3118
+ clearCanvas(ctx, canvas);
3119
+ const padding = 60, width = canvas.width - padding * 2, height = canvas.height - padding * 2;
3120
+ const data = generateCorrelatedData(r);
3121
+
3122
+ let statusText = '';
3123
+ let color = '#fff';
3124
+ if (r > 0.7) { statusText = 'Strong Positive'; color = '#51cf66'; }
3125
+ else if (r > 0.3) { statusText = 'Moderate Positive'; color = '#64ffda'; }
3126
+ else if (r > -0.3) { statusText = 'Weak / No Correlation'; color = '#ffd93d'; }
3127
+ else if (r > -0.7) { statusText = 'Moderate Negative'; color = '#ffa94d'; }
3128
+ else { statusText = 'Strong Negative'; color = '#ff6b6b'; }
3129
+
3130
+ drawText(ctx, `r = ${r.toFixed(2)} (${statusText})`, canvas.width / 2, 30, 20, color);
3131
+
3132
+ // Axes
3133
+ drawLine(ctx, padding, height + padding, width + padding, height + padding, COLORS.text, 2);
3134
+ drawLine(ctx, padding, padding, padding, height + padding, COLORS.text, 2);
3135
+
3136
+ data.forEach(p => {
3137
+ const px = padding + (p.x / 100) * width;
3138
+ const py = padding + height - (p.y / 100) * height;
3139
+ drawCircle(ctx, px, py, 5, color);
3140
+ });
3141
+
3142
+ drawText(ctx, 'Standardized X', canvas.width / 2, canvas.height - 15, 12, COLORS.textSecondary);
3143
+ }
3144
+ const s = document.getElementById('corrSlider'), l = document.getElementById('corrLabel');
3145
+ if (s) s.addEventListener('input', (e) => {
3146
+ r = e.target.value / 100;
3147
+ if (l) l.textContent = r.toFixed(2);
3148
+ draw();
3149
+ });
3150
+ draw();
3151
+ }
3152
+
3153
+ console.log('%c\u2713 Ultimate Learning Platform Fully Initialized', 'color: #51cf66; font-size: 14px; font-weight: bold;');
3154
+
3155
+
3156
+ // ===== TOPIC 10: SKEWNESS VISUALIZATION =====
3157
+ function initSkewnessVisualization() {
3158
+ const canvas = document.getElementById('skewnessCanvas');
3159
+ if (!canvas) return;
3160
+
3161
+ const ctx = canvas.getContext('2d');
3162
+
3163
+ function normalPDF(x, mean, std) {
3164
+ return Math.exp(-0.5 * Math.pow((x - mean) / std, 2)) / (std * Math.sqrt(2 * Math.PI));
3165
+ }
3166
+
3167
+ function betaPDF(x, alpha, beta) {
3168
+ if (x <= 0 || x >= 1) return 0;
3169
+ const B = (Math.pow(x, alpha - 1) * Math.pow(1 - x, beta - 1));
3170
+ return B * 3; // Scale for visibility
3171
+ }
3172
+
3173
+ function draw() {
3174
+ clearCanvas(ctx, canvas);
3175
+
3176
+ const padding = 50;
3177
+ const chartWidth = (canvas.width - padding * 4) / 3;
3178
+ const chartHeight = canvas.height - 120;
3179
+
3180
+ const charts = [
3181
+ { type: 'negative', title: 'Negative Skew (Left Skewed)', color: '#ff6b6b', alpha: 5, beta: 2 },
3182
+ { type: 'symmetric', title: 'Symmetric (Normal)', color: '#64ffda', mean: 0.5, std: 0.15 },
3183
+ { type: 'positive', title: 'Positive Skew (Right Skewed)', color: '#51cf66', alpha: 2, beta: 5 }
3184
+ ];
3185
+
3186
+ charts.forEach((chart, idx) => {
3187
+ const startX = padding + idx * (chartWidth + padding);
3188
+ const centerY = canvas.height - 40;
3189
+
3190
+ drawText(ctx, chart.title, startX + chartWidth / 2, 40, 14, chart.color);
3191
+ drawLine(ctx, startX, centerY, startX + chartWidth, centerY, COLORS.text, 2);
3192
+ drawLine(ctx, startX, centerY - chartHeight, startX, centerY, COLORS.text, 2);
3193
+
3194
+ ctx.beginPath();
3195
+ ctx.strokeStyle = chart.color;
3196
+ ctx.lineWidth = 3;
3197
+
3198
+ for (let i = 0; i <= 100; i++) {
3199
+ const x = i / 100;
3200
+ let y = chart.type === 'symmetric' ? normalPDF(x, chart.mean, chart.std) : betaPDF(x, chart.alpha, chart.beta);
3201
+ const px = startX + x * chartWidth;
3202
+ const py = centerY - y * chartHeight / 3;
3203
+ if (i === 0) ctx.moveTo(px, py);
3204
+ else ctx.lineTo(px, py);
3205
+ }
3206
+ ctx.stroke();
3207
+
3208
+ let modePos, medianPos, meanPos;
3209
+ if (chart.type === 'negative') { modePos = 0.75; medianPos = 0.65; meanPos = 0.55; }
3210
+ else if (chart.type === 'positive') { modePos = 0.25; medianPos = 0.35; meanPos = 0.45; }
3211
+ else { modePos = medianPos = meanPos = 0.5; }
3212
+
3213
+ if (chart.type === 'symmetric') {
3214
+ const x = startX + 0.5 * chartWidth;
3215
+ drawLine(ctx, x, centerY, x, centerY - chartHeight * 0.8, '#fff', 1);
3216
+ drawText(ctx, 'Mean=Median=Mode', x, centerY + 20, 10, '#fff');
3217
+ } else {
3218
+ const ann = [
3219
+ { pos: modePos, label: 'Mode', color: '#ff6b6b' },
3220
+ { pos: medianPos, label: 'Median', color: '#ffd93d' },
3221
+ { pos: meanPos, label: 'Mean', color: '#4a90e2' }
3222
+ ];
3223
+ ann.forEach((a, i) => {
3224
+ const x = startX + a.pos * chartWidth;
3225
+ const h = centerY - (chart.type === 'negative' ? betaPDF(a.pos, 5, 2) : betaPDF(a.pos, 2, 5)) * chartHeight / 3;
3226
+ drawLine(ctx, x, centerY, x, h, a.color, 1);
3227
+ drawText(ctx, a.label, x, centerY + 15 + (i * 12), 10, a.color);
3228
+ });
3229
+ }
3230
+ });
3231
+ drawText(ctx, 'Rule: Skew pulls Mean towards the tail!', canvas.width / 2, canvas.height - 10, 12, COLORS.textSecondary);
3232
+ }
3233
+ const btn = document.getElementById('skewnessAnimateBtn');
3234
+ if (btn) btn.addEventListener('click', draw);
3235
+ draw();
3236
+ }
3237
+
3238
+ // ===== TOPIC 20: PDF VS CDF VISUALIZATION =====
3239
+ function initPDFCDFVisualization() {
3240
+ const canvas = document.getElementById('pdfCdfCanvas');
3241
+ if (!canvas) return;
3242
+ const ctx = canvas.getContext('2d');
3243
+ let rangeStart = 2, rangeEnd = 6;
3244
+
3245
+ function draw() {
3246
+ clearCanvas(ctx, canvas);
3247
+ const padding = 60;
3248
+ const chartWidth = (canvas.width - padding * 3) / 2;
3249
+ const chartHeight = canvas.height - 150;
3250
+ const pdfStartX = padding, cdfStartX = padding * 2 + chartWidth, chartStartY = 100;
3251
+
3252
+ drawText(ctx, 'PDF: Relative Likelihood (height)', pdfStartX + chartWidth / 2, 50, 16, COLORS.cyan);
3253
+ drawLine(ctx, pdfStartX, chartStartY + chartHeight, pdfStartX + chartWidth, chartStartY + chartHeight, COLORS.text, 2);
3254
+ drawLine(ctx, pdfStartX, chartStartY, pdfStartX, chartStartY + chartHeight, COLORS.text, 2);
3255
+ ctx.fillStyle = 'rgba(100, 255, 218, 0.2)';
3256
+ ctx.fillRect(pdfStartX, chartStartY + chartHeight * 0.7, chartWidth, chartHeight * 0.3);
3257
+ ctx.strokeStyle = COLORS.cyan;
3258
+ ctx.strokeRect(pdfStartX, chartStartY + chartHeight * 0.7, chartWidth, chartHeight * 0.3);
3259
+
3260
+ const shadeX1 = pdfStartX + (rangeStart / 10) * chartWidth;
3261
+ const shadeX2 = pdfStartX + (rangeEnd / 10) * chartWidth;
3262
+ ctx.fillStyle = 'rgba(255, 107, 107, 0.5)';
3263
+ ctx.fillRect(shadeX1, chartStartY + chartHeight * 0.7, shadeX2 - shadeX1, chartHeight * 0.3);
3264
+ drawText(ctx, 'Area = Probability', (shadeX1 + shadeX2) / 2, chartStartY + chartHeight * 0.85, 12, '#ff6b6b');
3265
+
3266
+ drawText(ctx, 'CDF: Cumulative Probability (area)', cdfStartX + chartWidth / 2, 50, 16, COLORS.orange);
3267
+ drawLine(ctx, cdfStartX, chartStartY + chartHeight, cdfStartX + chartWidth, chartStartY + chartHeight, COLORS.text, 2);
3268
+ drawLine(ctx, cdfStartX, chartStartY, cdfStartX, chartStartY + chartHeight, COLORS.text, 2);
3269
+ ctx.beginPath();
3270
+ ctx.strokeStyle = COLORS.orange; ctx.lineWidth = 3;
3271
+ ctx.moveTo(cdfStartX, chartStartY + chartHeight); ctx.lineTo(cdfStartX + chartWidth, chartStartY);
3272
+ ctx.stroke();
3273
+
3274
+ const cdfX1 = cdfStartX + (rangeStart / 10) * chartWidth;
3275
+ const cdfY1 = chartStartY + chartHeight - (rangeStart / 10) * chartHeight;
3276
+ const cdfX2 = cdfStartX + (rangeEnd / 10) * chartWidth;
3277
+ const cdfY2 = chartStartY + chartHeight - (rangeEnd / 10) * chartHeight;
3278
+ drawCircle(ctx, cdfX1, cdfY1, 6, '#ffd93d');
3279
+ drawCircle(ctx, cdfX2, cdfY2, 6, '#ffd93d');
3280
+ ctx.setLineDash([5, 5]);
3281
+ drawLine(ctx, cdfX1, cdfY1, cdfX1, chartStartY + chartHeight, '#ffd93d', 1);
3282
+ drawLine(ctx, cdfX2, cdfY2, cdfX2, chartStartY + chartHeight, '#ffd93d', 1);
3283
+ ctx.setLineDash([]);
3284
+ drawText(ctx, `F(${rangeStart}) = ${(rangeStart / 10).toFixed(1)}`, cdfX1, cdfY1 - 10, 10, '#ffd93d');
3285
+ drawText(ctx, `F(${rangeEnd}) = ${(rangeEnd / 10).toFixed(1)}`, cdfX2, cdfY2 - 10, 10, '#ffd93d');
3286
+ }
3287
+ const s1 = document.getElementById('pdfRangeSlider'), s2 = document.getElementById('pdfRangeSlider2'), l = document.getElementById('pdfRangeLabel');
3288
+ const update = () => { rangeStart = Math.min(s1.value, s2.value); rangeEnd = Math.max(s1.value, s2.value); if (l) l.textContent = `Range: [${rangeStart}, ${rangeEnd}]`; draw(); };
3289
+ if (s1) s1.addEventListener('input', update); if (s2) s2.addEventListener('input', update);
3290
+ draw();
3291
+ }
3292
+
3293
+ // ===== TOPIC 24: NORMAL DISTRIBUTION 68-95-99.7 RULE =====
3294
+ function initNormalRuleVisualization() {
3295
+ const canvas = document.getElementById('normalRuleCanvas');
3296
+ if (!canvas) return;
3297
+ const ctx = canvas.getContext('2d');
3298
+ let showLevel = 'all';
3299
+
3300
+ function normalPDF(x) { return Math.exp(-0.5 * x * x) / Math.sqrt(2 * Math.PI); }
3301
+
3302
+ function draw() {
3303
+ clearCanvas(ctx, canvas);
3304
+ const padding = 60, width = canvas.width - padding * 2, height = canvas.height - padding * 2;
3305
+ const centerX = canvas.width / 2, centerY = padding + height * 0.85, scale = width / 8;
3306
+
3307
+ drawText(ctx, 'The 68-95-99.7 Rule (Empirical Rule)', centerX, 25, 18, COLORS.cyan);
3308
+ drawLine(ctx, padding, centerY, canvas.width - padding, centerY, COLORS.text, 2);
3309
+
3310
+ for (let i = -3; i <= 3; i++) {
3311
+ const x = centerX + i * scale;
3312
+ const label = i === 0 ? '\u03bc' : (i > 0 ? `+${i}\u03c3` : `${i}\u03c3`);
3313
+ drawLine(ctx, x, centerY, x, centerY + 10, COLORS.text, 1);
3314
+ drawText(ctx, label, x, centerY + 25, 12, i === 0 ? '#ffd93d' : COLORS.textSecondary);
3315
+ }
3316
+
3317
+ const regions = [
3318
+ { sigma: 3, color: 'rgba(153, 102, 255, 0.3)', show: showLevel === '3' || showLevel === 'all' },
3319
+ { sigma: 2, color: 'rgba(255, 107, 107, 0.4)', show: showLevel === '2' || showLevel === 'all' },
3320
+ { sigma: 1, color: 'rgba(100, 255, 218, 0.5)', show: showLevel === '1' || showLevel === 'all' }
3321
+ ];
3322
+
3323
+ regions.forEach(r => {
3324
+ if (!r.show) return;
3325
+ ctx.beginPath(); ctx.fillStyle = r.color;
3326
+ for (let px = -r.sigma * scale; px <= r.sigma * scale; px++) {
3327
+ const x = px / scale, y = normalPDF(x);
3328
+ const plotX = centerX + px, plotY = centerY - y * height * 2;
3329
+ if (px === -r.sigma * scale) ctx.moveTo(plotX, centerY);
3330
+ ctx.lineTo(plotX, plotY);
3331
+ }
3332
+ ctx.lineTo(centerX + r.sigma * scale, centerY); ctx.closePath(); ctx.fill();
3333
+ });
3334
+
3335
+ ctx.beginPath(); ctx.strokeStyle = 'white'; ctx.lineWidth = 3;
3336
+ for (let px = -4 * scale; px <= 4 * scale; px++) {
3337
+ const x = px / scale, y = normalPDF(x);
3338
+ const plotX = centerX + px, plotY = centerY - y * height * 2;
3339
+ if (px === -4 * scale) ctx.moveTo(plotX, plotY);
3340
+ else ctx.lineTo(plotX, plotY);
3341
+ }
3342
+ ctx.stroke();
3343
+ }
3344
+ const b1 = document.getElementById('normalShow68Btn'), b2 = document.getElementById('normalShow95Btn'), b3 = document.getElementById('normalShow997Btn'), b4 = document.getElementById('normalShowAllBtn');
3345
+ if (b1) b1.addEventListener('click', () => { showLevel = '1'; draw(); });
3346
+ if (b2) b2.addEventListener('click', () => { showLevel = '2'; draw(); });
3347
+ if (b3) b3.addEventListener('click', () => { showLevel = '3'; draw(); });
3348
+ if (b4) b4.addEventListener('click', () => { showLevel = 'all'; draw(); });
3349
+ draw();
3350
+ }
3351
+
3352
+ // ===== ML-10: DECISION TREE VISUALIZATION =====
3353
+ function initDecisionTreeVisualization() {
3354
+ const canvas = document.getElementById('decisionTreeCanvas');
3355
+ if (!canvas) return;
3356
+ const ctx = canvas.getContext('2d');
3357
+ let testHeight = 165, classifying = false, classificationPath = null;
3358
+
3359
+ function draw() {
3360
+ clearCanvas(ctx, canvas);
3361
+ const centerX = canvas.width / 2, rootY = 80, leafY = 280, leftX = centerX - 180, rightX = centerX + 180;
3362
+ const nodeWidth = 140, nodeHeight = 60;
3363
+
3364
+ drawLine(ctx, centerX, rootY, leftX, leafY, COLORS.textSecondary, 2);
3365
+ drawLine(ctx, centerX, rootY, rightX, leafY, COLORS.textSecondary, 2);
3366
+
3367
+ ctx.fillStyle = '#21262d'; ctx.strokeStyle = COLORS.cyan; ctx.lineWidth = 3;
3368
+ roundRect(ctx, centerX - nodeWidth / 2, rootY - nodeHeight / 2, nodeWidth, nodeHeight, 10, true, true);
3369
+ drawText(ctx, 'ROOT NODE: Height > 170?', centerX, rootY + 5, 14, '#fff');
3370
+
3371
+ const lActive = classificationPath === 'left', rActive = classificationPath === 'right';
3372
+ ctx.fillStyle = lActive ? '#4a1c1c' : '#21262d'; ctx.strokeStyle = '#ff6b6b';
3373
+ roundRect(ctx, leftX - nodeWidth / 2, leafY - nodeHeight / 2, nodeWidth, nodeHeight, 10, true, true);
3374
+ drawText(ctx, 'Class 0: NOT TALL', leftX, leafY + 5, 14, '#ff6b6b');
3375
+
3376
+ ctx.fillStyle = rActive ? '#1c4a1c' : '#21262d'; ctx.strokeStyle = '#51cf66';
3377
+ roundRect(ctx, rightX - nodeWidth / 2, leafY - nodeHeight / 2, nodeWidth, nodeHeight, 10, true, true);
3378
+ drawText(ctx, 'Class 1: TALL', rightX, leafY + 5, 14, '#51cf66');
3379
+
3380
+ if (classifying) {
3381
+ drawText(ctx, `Test: ${testHeight} cm \u2192 ${testHeight > 170 ? 'TALL' : 'NOT TALL'}`, centerX, 400, 18, COLORS.cyan);
3382
+ }
3383
+ }
3384
+
3385
+ function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
3386
+ ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y);
3387
+ ctx.quadraticCurveTo(x + width, y, x + width, y + radius); ctx.lineTo(x + width, y + height - radius);
3388
+ ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); ctx.lineTo(x + radius, y + height);
3389
+ ctx.quadraticCurveTo(x, y + height, x, y + height - radius); ctx.lineTo(x, y + radius);
3390
+ ctx.quadraticCurveTo(x, y, x + radius, y); ctx.closePath();
3391
+ if (fill) ctx.fill(); if (stroke) ctx.stroke();
3392
+ }
3393
+
3394
+ const s = document.getElementById('heightTestSlider'), b = document.getElementById('treeClassifyBtn');
3395
+ if (s) s.addEventListener('input', (e) => { testHeight = e.target.value; draw(); });
3396
+ if (b) b.addEventListener('click', () => { classifying = true; classificationPath = testHeight > 170 ? 'right' : 'left'; draw(); });
3397
+ draw();
3398
+ }
3399
+
3400
+ // ===== TOPIC 11: COVARIANCE VISUALIZATION =====
3401
+ function initCovarianceVisualization() {
3402
+ const canvas = document.getElementById('covarianceCanvas');
3403
+ if (!canvas) return;
3404
+ const ctx = canvas.getContext('2d');
3405
+ let covType = 'positive';
3406
+
3407
+ function generateData(type) {
3408
+ let data = [];
3409
+ for (let i = 0; i < 30; i++) {
3410
+ let x = Math.random() * 80 + 10, y;
3411
+ if (type === 'positive') y = x + (Math.random() - 0.5) * 30;
3412
+ else if (type === 'negative') y = 100 - x + (Math.random() - 0.5) * 30;
3413
+ else y = Math.random() * 80 + 10;
3414
+ data.push({ x, y });
3415
+ }
3416
+ return data;
3417
+ }
3418
+
3419
+ function draw() {
3420
+ clearCanvas(ctx, canvas);
3421
+ const padding = 60, width = canvas.width - padding * 2, height = canvas.height - padding * 2;
3422
+ const data = generateData(covType);
3423
+ const meanX = data.reduce((s, p) => s + p.x, 0) / data.length;
3424
+ const meanY = data.reduce((s, p) => s + p.y, 0) / data.length;
3425
+ const cov = data.reduce((s, p) => s + (p.x - meanX) * (p.y - meanY), 0) / (data.length - 1);
3426
+
3427
+ drawText(ctx, `${covType.toUpperCase()} Covariance: ${cov.toFixed(2)}`, canvas.width / 2, 25, 18, COLORS.cyan);
3428
+ drawLine(ctx, padding, height + padding, width + padding, height + padding, COLORS.text, 2);
3429
+ drawLine(ctx, padding, padding, padding, height + padding, COLORS.text, 2);
3430
+
3431
+ data.forEach(p => {
3432
+ drawCircle(ctx, padding + (p.x / 100) * width, padding + height - (p.y / 100) * height, 6, COLORS.cyan);
3433
+ });
3434
+ }
3435
+ const b1 = document.getElementById('covPositiveBtn'), b2 = document.getElementById('covNegativeBtn'), b3 = document.getElementById('covZeroBtn');
3436
+ if (b1) b1.addEventListener('click', () => { covType = 'positive'; draw(); });
3437
+ if (b2) b2.addEventListener('click', () => { covType = 'negative'; draw(); });
3438
+ if (b3) b3.addEventListener('click', () => { covType = 'zero'; draw(); });
3439
+ draw();
3440
+ }
math-ds-complete/index.html CHANGED
@@ -1103,8 +1103,7 @@
1103
  <li>What's the median of: [3, 1, 4, 1, 5]?</li>
1104
  <li>Find the mode of: [2, 2, 3, 4, 4, 4, 5]</li>
1105
  </ol>
1106
- <button class="show-answers-btn"
1107
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
1108
  Answers</button>
1109
  <div class="practice-answers" style="display: none;">
1110
  <p><strong>Answers:</strong></p>
@@ -1344,8 +1343,7 @@
1344
  <li>Calculate the standard deviation of: [2, 4, 6, 8]</li>
1345
  <li>Find the variance of: [10, 12, 14, 16, 18]</li>
1346
  </ol>
1347
- <button class="show-answers-btn"
1348
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
1349
  Answers</button>
1350
  <div class="practice-answers" style="display: none;">
1351
  <p><strong>Answers:</strong></p>
@@ -1490,6 +1488,16 @@
1490
  </div>
1491
  </div>
1492
 
 
 
 
 
 
 
 
 
 
 
1493
  <!-- WORKED EXAMPLE SECTION -->
1494
  <div class="content-block worked-example-section">
1495
  <h3>📝 Worked Example - Step by Step</h3>
@@ -1578,8 +1586,7 @@
1578
  <li>Data with left tail - positive or negative skew?</li>
1579
  <li>If mean &lt; median, what type of skew?</li>
1580
  </ol>
1581
- <button class="show-answers-btn"
1582
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
1583
  Answers</button>
1584
  <div class="practice-answers" style="display: none;">
1585
  <p><strong>Answers:</strong></p>
@@ -1636,6 +1643,17 @@
1636
  </ul>
1637
  </div>
1638
 
 
 
 
 
 
 
 
 
 
 
 
1639
  <!-- WORKED EXAMPLE SECTION -->
1640
  <div class="content-block worked-example-section">
1641
  <h3>📝 Worked Example - Step by Step</h3>
@@ -1763,8 +1781,7 @@
1763
  <li>If Cov(X,Y) = -5, what does this tell you about the relationship?</li>
1764
  <li>Find Cov(X,Y) for X=[5, 5, 5] and Y=[1, 2, 3]. What do you notice?</li>
1765
  </ol>
1766
- <button class="show-answers-btn"
1767
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
1768
  Answers</button>
1769
  <div class="practice-answers" style="display: none;">
1770
  <p><strong>Answers:</strong></p>
@@ -1828,6 +1845,30 @@
1828
  </ul>
1829
  </div>
1830
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1831
  <div class="callout-box insight">
1832
  <div class="callout-header">💡 REAL-WORLD EXAMPLE</div>
1833
  <p>Study hours vs exam scores typically show r = 0.7 (strong positive). More study hours correlate
@@ -1941,8 +1982,7 @@
1941
  <li>What does r = -0.8 indicate about the relationship?</li>
1942
  <li>Can correlation be greater than 1? Why or why not?</li>
1943
  </ol>
1944
- <button class="show-answers-btn"
1945
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
1946
  Answers</button>
1947
  <div class="practice-answers" style="display: none;">
1948
  <p><strong>Answers:</strong></p>
@@ -2106,8 +2146,7 @@
2106
  <li>Can r = 1.5? Why or why not?</li>
2107
  <li>If r = 0, does that mean no relationship at all?</li>
2108
  </ol>
2109
- <button class="show-answers-btn"
2110
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
2111
  Answers</button>
2112
  <div class="practice-answers" style="display: none;">
2113
  <p><strong>Answers:</strong></p>
@@ -2298,8 +2337,7 @@
2298
  <li>If P(A∪B)=0.8, P(A)=0.5, P(B)=0.4, find P(A∩B)</li>
2299
  <li>100 students: 60 like pizza, 40 like burgers, 20 like both. How many like neither?</li>
2300
  </ol>
2301
- <button class="show-answers-btn"
2302
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
2303
  Answers</button>
2304
  <div class="practice-answers" style="display: none;">
2305
  <p><strong>Answers:</strong></p>
@@ -2494,8 +2532,7 @@
2494
  <li>Coin flip: P(Heads) and P(Tails). Independent?</li>
2495
  <li>Drawing two cards without replacement. Independent?</li>
2496
  </ol>
2497
- <button class="show-answers-btn"
2498
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
2499
  Answers</button>
2500
  <div class="practice-answers" style="display: none;">
2501
  <p><strong>Answers:</strong></p>
@@ -2641,8 +2678,7 @@
2641
  <li>What if the disease affects 10% of the population instead? Recalculate P(A|B)</li>
2642
  <li>If the test was 95% accurate instead of 99%, what would P(A|B) be?</li>
2643
  </ol>
2644
- <button class="show-answers-btn"
2645
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
2646
  Answers</button>
2647
  <div class="practice-answers" style="display: none;">
2648
  <p><strong>Answers:</strong></p>
@@ -2734,6 +2770,22 @@
2734
  </ul>
2735
  </div>
2736
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2737
  <!-- WORKED EXAMPLE SECTION -->
2738
  <div class="content-block worked-example-section">
2739
  <h3>📝 Worked Example - Step by Step</h3>
@@ -2822,8 +2874,7 @@
2822
  <li>For above, find P(8 ≤ X ≤ 12)</li>
2823
  <li>Why is P(X = 7) = 0 for continuous distributions?</li>
2824
  </ol>
2825
- <button class="show-answers-btn"
2826
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
2827
  Answers</button>
2828
  <div class="practice-answers" style="display: none;">
2829
  <p><strong>Answers:</strong></p>
@@ -2972,8 +3023,7 @@
2972
  <li>What is P(X &gt; 7) using the CDF?</li>
2973
  <li>If F(x) = 0.75, what does this mean?</li>
2974
  </ol>
2975
- <button class="show-answers-btn"
2976
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
2977
  Answers</button>
2978
  <div class="practice-answers" style="display: none;">
2979
  <p><strong>Answers:</strong></p>
@@ -3120,8 +3170,7 @@
3120
  <li>Free throw: 80% success rate. Model as Bernoulli</li>
3121
  <li>When is Var(X) maximized for Bernoulli?</li>
3122
  </ol>
3123
- <button class="show-answers-btn"
3124
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
3125
  Answers</button>
3126
  <div class="practice-answers" style="display: none;">
3127
  <p><strong>Answers:</strong></p>
@@ -3232,6 +3281,18 @@
3232
  <p>99.7% have IQ between 55-145</p>
3233
  </div>
3234
 
 
 
 
 
 
 
 
 
 
 
 
 
3235
  <!-- WORKED EXAMPLE SECTION -->
3236
  <div class="content-block worked-example-section">
3237
  <h3>📝 Worked Example - Step by Step</h3>
@@ -3322,8 +3383,7 @@
3322
  <li>What IQ scores contain the middle 95% of people?</li>
3323
  <li>If z = -2, what percentile is this?</li>
3324
  </ol>
3325
- <button class="show-answers-btn"
3326
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
3327
  Answers</button>
3328
  <div class="practice-answers" style="display: none;">
3329
  <p><strong>Answers:</strong></p>
@@ -4097,8 +4157,7 @@
4097
  <li>If z = 2.5, α = 0.01, find p-value and decide</li>
4098
  <li>When do we reject H₀ using p-value method?</li>
4099
  </ol>
4100
- <button class="show-answers-btn"
4101
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
4102
  Answers</button>
4103
  <div class="practice-answers" style="display: none;">
4104
  <p><strong>Answers:</strong></p>
@@ -4263,8 +4322,7 @@
4263
  <li>Claim: μ &gt; 50. One-tailed or two-tailed?</li>
4264
  <li>Claim: μ ≠ 100. Which test?</li>
4265
  </ol>
4266
- <button class="show-answers-btn"
4267
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
4268
  Answers</button>
4269
  <div class="practice-answers" style="display: none;">
4270
  <p><strong>Answers:</strong></p>
@@ -4423,8 +4481,7 @@
4423
  <li>n = 25, x̄ = 100, s = 15, test μ = 95 at α = 0.01</li>
4424
  <li>Why use t-test instead of z-test?</li>
4425
  </ol>
4426
- <button class="show-answers-btn"
4427
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
4428
  Answers</button>
4429
  <div class="practice-answers" style="display: none;">
4430
  <p><strong>Answers:</strong></p>
@@ -4565,8 +4622,7 @@
4565
  <li>Sample size 100, find df for t-test</li>
4566
  <li>5×3 table, find df for chi-squared</li>
4567
  </ol>
4568
- <button class="show-answers-btn"
4569
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
4570
  Answers</button>
4571
  <div class="practice-answers" style="display: none;">
4572
  <p><strong>Answers:</strong></p>
@@ -4737,8 +4793,7 @@
4737
  <li>Security scanner: H₀ = "Safe". Describe Type I/II errors</li>
4738
  <li>If α = 0.01, what's P(Type I error)?</li>
4739
  </ol>
4740
- <button class="show-answers-btn"
4741
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
4742
  Answers</button>
4743
  <div class="practice-answers" style="display: none;">
4744
  <p><strong>Answers:</strong></p>
@@ -5267,79 +5322,298 @@
5267
  </section>
5268
 
5269
  <!-- Topic 54: Eigenvectors -->
5270
- <!-- Topic 54: Eigenvectors & Eigenvalues -->
5271
  <section class="topic-section" id="topic-54" data-subject="linear-algebra" style="display: none;">
5272
  <div class="topic-header">
5273
  <span class="topic-number">Topic 54</span>
5274
  <h2>🎯 Eigenvectors and Eigenvalues</h2>
5275
- <p class="topic-subtitle">Special vectors that only get scaled</p>
5276
  </div>
5277
 
5278
  <div class="content-card">
5279
- <h3>The Fundamental Equation</h3>
5280
- <p>An <strong>eigenvector</strong> $\mathbf{v}$ of a square matrix $A$ is a non-zero vector that,
5281
- when multiplied by $A$, yields a scalar multiple of itself. This scalar $\lambda$ is called the
5282
- <strong>eigenvalue</strong>.
5283
- </p>
5284
- <div class="formula-card">
5285
- <div style="font-size: 1.3em; margin: 15px 0;">
5286
- $$A\mathbf{v} = \lambda\mathbf{v}$$
5287
- </div>
 
 
 
 
 
 
5288
  </div>
5289
  </div>
5290
 
5291
- <div class="content-card">
5292
- <h3>✍️ How to Solve (Paper & Pen)</h3>
5293
- <p><strong>Step 1: Set up the Characteristic Equation</strong><br>
5294
- To find $\lambda$, we move everything to one side: $(A - \lambda I)\mathbf{v} = 0$. Since
5295
- $\mathbf{v} \neq 0$, the matrix $(A - \lambda I)$ must be singular (squish space to zero area),
5296
- meaning its determinant must be zero:</p>
5297
- <div class="formula-card">
5298
- <div style="font-size: 1.2em; margin: 15px 0;">
5299
- $$\det(A - \lambda I) = 0$$
5300
  </div>
 
 
5301
  </div>
5302
 
5303
- <div class="callout-box example">
5304
- <div class="callout-header">WORKED EXAMPLE: FINDING EIGENVALUES</div>
5305
- <p>Let $A = \begin{bmatrix} 3 & 1 \\ 0 & 2 \end{bmatrix}$. Solve $\det \begin{bmatrix} 3-\lambda
5306
- & 1 \\ 0 & 2-\lambda \end{bmatrix} = 0$:</p>
5307
- <p>$(3-\lambda)(2-\lambda) - (1 \times 0) = 0$<br>
5308
- $(3-\lambda)(2-\lambda) = 0$<br>
5309
- Roots: $\mathbf{\lambda_1 = 3, \lambda_2 = 2}$</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5310
  </div>
5311
 
5312
- <p><strong>Step 2: Find the Eigenvectors</strong><br>
5313
- For each $\lambda$, plug it back into $(A - \lambda I)\mathbf{v} = 0$ and solve for
5314
- $\mathbf{v}$.</p>
5315
- <div class="callout-box example">
5316
- <div class="callout-header">WORKED EXAMPLE: FINDING EIGENVECTORS</div>
5317
- <p>For $\lambda = 3$ in our matrix above:<br>
5318
- $(A - 3I)\mathbf{v} = 0 \implies \begin{bmatrix} 3-3 & 1 \\ 0 & 2-3 \end{bmatrix}
5319
- \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} 0 \\ 0 \end{bmatrix}$<br>
5320
- $\begin{bmatrix} 0 & 1 \\ 0 & -1 \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} =
5321
- \begin{bmatrix} 0 \\ 0 \end{bmatrix}$<br>
5322
- This gives the equation $y = 0$. $x$ can be anything! So an eigenvector for $\lambda=3$ is
5323
- $\mathbf{\begin{bmatrix} 1 \\ 0 \end{bmatrix}}$.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5324
  </div>
5325
  </div>
5326
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5327
  <div class="interactive-container">
5328
- <h3>Visual Confirmation</h3>
5329
- <canvas id="canvas-54" width="600" height="400"></canvas>
5330
  <div class="controls">
5331
- <button class="btn btn-primary" id="btn54transform">Apply Transformation</button>
5332
  <button class="btn btn-secondary" id="btn54reset">Reset</button>
5333
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5334
  </div>
5335
 
5336
  <div class="summary-card">
5337
  <h3>🎯 Key Takeaways</h3>
5338
  <ul>
5339
- <li>Eigenvectors stay on their span (no rotation).</li>
5340
- <li>Find eigenvalues by solving the polynomial $\det(A - \lambda I) = 0$.</li>
5341
- <li>Find eigenvectors by solving $(A - \lambda I)\mathbf{v} = 0$.</li>
5342
- <li>Critical for PCA, PageRank, and vibration analysis.</li>
 
 
 
5343
  </ul>
5344
  </div>
5345
  </section>
@@ -6304,8 +6578,7 @@
6304
  <li>Find ∫₀² (3x² + 2) dx</li>
6305
  <li>Evaluate ∫₁³ (4x - 1) dx</li>
6306
  </ol>
6307
- <button class="show-answers-btn"
6308
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
6309
  Answers</button>
6310
  <div class="practice-answers" style="display: none;">
6311
  <p><strong>Answers:</strong></p>
@@ -6790,8 +7063,7 @@
6790
  <li>Using y=2+3x, predict y when x=6</li>
6791
  <li>If b=2 and the line passes through (3,10), find a</li>
6792
  </ol>
6793
- <button class="show-answers-btn"
6794
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
6795
  Answers</button>
6796
  <div class="practice-answers" style="display: none;">
6797
  <p><strong>Answers:</strong></p>
@@ -7661,8 +7933,7 @@
7661
  <li>Find the minimum of f(x) = (x-3)² using calculus (no GD)</li>
7662
  <li>If gradient is positive, which direction should we move?</li>
7663
  </ol>
7664
- <button class="show-answers-btn"
7665
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
7666
  Answers</button>
7667
  <div class="practice-answers" style="display: none;">
7668
  <p><strong>Answers:</strong></p>
@@ -8291,8 +8562,7 @@
8291
  <li>If price is $275k, estimate the house size</li>
8292
  <li>What does the slope 0.10 mean in real terms?</li>
8293
  </ol>
8294
- <button class="show-answers-btn"
8295
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
8296
  Answers</button>
8297
  <div class="practice-answers" style="display: none;">
8298
  <p><strong>Answers:</strong></p>
@@ -8597,8 +8867,7 @@
8597
  <li>If distances were 0.5(Setosa), 0.6(Setosa), 0.7(Versicolor), predict class</li>
8598
  <li>Why is K usually chosen as odd number?</li>
8599
  </ol>
8600
- <button class="show-answers-btn"
8601
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
8602
  Answers</button>
8603
  <div class="practice-answers" style="display: none;">
8604
  <p><strong>Answers:</strong></p>
@@ -8735,6 +9004,20 @@
8735
  </div>
8736
  </div>
8737
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8738
  <div class="worked-example-section">
8739
  <h3>📝 Worked Example - Loan Approval Prediction</h3>
8740
 
@@ -8895,8 +9178,7 @@
8895
  <li>If split gives H_left=0 and H_right=0.5, which is better split?</li>
8896
  <li>Why might deep trees overfit?</li>
8897
  </ol>
8898
- <button class="show-answers-btn"
8899
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
8900
  Answers</button>
8901
  <div class="practice-answers" style="display: none;">
8902
  <p><strong>Answers:</strong></p>
@@ -9146,8 +9428,7 @@
9146
  <li>How would you choose optimal K value?</li>
9147
  <li>What happens if we use K=3 instead?</li>
9148
  </ol>
9149
- <button class="show-answers-btn"
9150
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
9151
  Answers</button>
9152
  <div class="practice-answers" style="display: none;">
9153
  <p><strong>Answers:</strong></p>
@@ -9395,8 +9676,7 @@
9395
  <li>3-fold CV gives: 0.80, 0.85, 0.90. Find mean.</li>
9396
  <li>When should you use stratified K-fold?</li>
9397
  </ol>
9398
- <button class="show-answers-btn"
9399
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
9400
  Answers</button>
9401
  <div class="practice-answers" style="display: none;">
9402
  <p><strong>Answers:</strong></p>
@@ -11075,8 +11355,7 @@ optimizer.step()</code>
11075
  <li>Why use ε-greedy exploration?</li>
11076
  <li>Calculate Q-update: current Q=2, r=-1, max next Q=5, α=0.1, γ=0.9</li>
11077
  </ol>
11078
- <button class="show-answers-btn"
11079
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
11080
  Answers</button>
11081
  <div class="practice-answers" style="display: none;">
11082
  <p><strong>Answers:</strong></p>
@@ -11543,8 +11822,7 @@ for episode in range(1000):<br>
11543
  <li>What are advantages of policy gradient vs Q-learning?</li>
11544
  <li>What problem occurs if your learning rate is too high?</li>
11545
  </ol>
11546
- <button class="show-answers-btn"
11547
- onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === 'Show Answers' ? 'Hide Answers' : 'Show Answers'">Show
11548
  Answers</button>
11549
  <div class="practice-answers" style="display: none;">
11550
  <p><strong>Answers:</strong></p>
 
1103
  <li>What's the median of: [3, 1, 4, 1, 5]?</li>
1104
  <li>Find the mode of: [2, 2, 3, 4, 4, 4, 5]</li>
1105
  </ol>
1106
+ <button class="show-answers-btn">Show
 
1107
  Answers</button>
1108
  <div class="practice-answers" style="display: none;">
1109
  <p><strong>Answers:</strong></p>
 
1343
  <li>Calculate the standard deviation of: [2, 4, 6, 8]</li>
1344
  <li>Find the variance of: [10, 12, 14, 16, 18]</li>
1345
  </ol>
1346
+ <button class="show-answers-btn">Show
 
1347
  Answers</button>
1348
  <div class="practice-answers" style="display: none;">
1349
  <p><strong>Answers:</strong></p>
 
1488
  </div>
1489
  </div>
1490
 
1491
+ <!-- Interactive Skewness Visualization -->
1492
+ <div class="interactive-container">
1493
+ <h3>📊 Visual: Types of Skewness</h3>
1494
+ <canvas id="skewnessCanvas" width="900" height="350"></canvas>
1495
+ <div class="controls">
1496
+ <button class="btn btn-primary" id="skewnessAnimateBtn">Animate</button>
1497
+ <button class="btn btn-secondary" id="skewnessResetBtn">Reset</button>
1498
+ </div>
1499
+ </div>
1500
+
1501
  <!-- WORKED EXAMPLE SECTION -->
1502
  <div class="content-block worked-example-section">
1503
  <h3>📝 Worked Example - Step by Step</h3>
 
1586
  <li>Data with left tail - positive or negative skew?</li>
1587
  <li>If mean &lt; median, what type of skew?</li>
1588
  </ol>
1589
+ <button class="show-answers-btn">Show
 
1590
  Answers</button>
1591
  <div class="practice-answers" style="display: none;">
1592
  <p><strong>Answers:</strong></p>
 
1643
  </ul>
1644
  </div>
1645
 
1646
+ <!-- Interactive Covariance Visualization -->
1647
+ <div class="interactive-container">
1648
+ <h3>📊 Visual: Understanding Covariance</h3>
1649
+ <canvas id="covarianceCanvas" width="900" height="350"></canvas>
1650
+ <div class="controls">
1651
+ <button class="btn btn-primary" id="covPositiveBtn">Positive Cov</button>
1652
+ <button class="btn btn-secondary" id="covNegativeBtn">Negative Cov</button>
1653
+ <button class="btn btn-secondary" id="covZeroBtn">Zero Cov</button>
1654
+ </div>
1655
+ </div>
1656
+
1657
  <!-- WORKED EXAMPLE SECTION -->
1658
  <div class="content-block worked-example-section">
1659
  <h3>📝 Worked Example - Step by Step</h3>
 
1781
  <li>If Cov(X,Y) = -5, what does this tell you about the relationship?</li>
1782
  <li>Find Cov(X,Y) for X=[5, 5, 5] and Y=[1, 2, 3]. What do you notice?</li>
1783
  </ol>
1784
+ <button class="show-answers-btn">Show
 
1785
  Answers</button>
1786
  <div class="practice-answers" style="display: none;">
1787
  <p><strong>Answers:</strong></p>
 
1845
  </ul>
1846
  </div>
1847
 
1848
+ <!-- Interactive Correlation Visualization -->
1849
+ <div class="interactive-container">
1850
+ <h3>📊 Visual: Correlation Strength & Direction</h3>
1851
+ <p>Standard covariance (Cov / σ_x σ_y)</p>
1852
+ <canvas id="correlationCanvas" width="900" height="400"></canvas>
1853
+ <div class="controls">
1854
+ <div class="slider-group">
1855
+ <label>Correlation (r): <span id="corrLabel">0.70</span></label>
1856
+ <input type="range" id="corrSlider" min="-100" max="100" value="70" class="slider">
1857
+ </div>
1858
+ <div class="btn-group">
1859
+ <button class="btn btn-sm btn-outline"
1860
+ onclick="document.getElementById('corrSlider').value=100; document.getElementById('corrSlider').dispatchEvent(new Event('input'))">Perfect
1861
+ +1</button>
1862
+ <button class="btn btn-sm btn-outline"
1863
+ onclick="document.getElementById('corrSlider').value=0; document.getElementById('corrSlider').dispatchEvent(new Event('input'))">Zero
1864
+ 0</button>
1865
+ <button class="btn btn-sm btn-outline"
1866
+ onclick="document.getElementById('corrSlider').value=-100; document.getElementById('corrSlider').dispatchEvent(new Event('input'))">Perfect
1867
+ -1</button>
1868
+ </div>
1869
+ </div>
1870
+ </div>
1871
+
1872
  <div class="callout-box insight">
1873
  <div class="callout-header">💡 REAL-WORLD EXAMPLE</div>
1874
  <p>Study hours vs exam scores typically show r = 0.7 (strong positive). More study hours correlate
 
1982
  <li>What does r = -0.8 indicate about the relationship?</li>
1983
  <li>Can correlation be greater than 1? Why or why not?</li>
1984
  </ol>
1985
+ <button class="show-answers-btn">Show
 
1986
  Answers</button>
1987
  <div class="practice-answers" style="display: none;">
1988
  <p><strong>Answers:</strong></p>
 
2146
  <li>Can r = 1.5? Why or why not?</li>
2147
  <li>If r = 0, does that mean no relationship at all?</li>
2148
  </ol>
2149
+ <button class="show-answers-btn">Show
 
2150
  Answers</button>
2151
  <div class="practice-answers" style="display: none;">
2152
  <p><strong>Answers:</strong></p>
 
2337
  <li>If P(A∪B)=0.8, P(A)=0.5, P(B)=0.4, find P(A∩B)</li>
2338
  <li>100 students: 60 like pizza, 40 like burgers, 20 like both. How many like neither?</li>
2339
  </ol>
2340
+ <button class="show-answers-btn">Show
 
2341
  Answers</button>
2342
  <div class="practice-answers" style="display: none;">
2343
  <p><strong>Answers:</strong></p>
 
2532
  <li>Coin flip: P(Heads) and P(Tails). Independent?</li>
2533
  <li>Drawing two cards without replacement. Independent?</li>
2534
  </ol>
2535
+ <button class="show-answers-btn">Show
 
2536
  Answers</button>
2537
  <div class="practice-answers" style="display: none;">
2538
  <p><strong>Answers:</strong></p>
 
2678
  <li>What if the disease affects 10% of the population instead? Recalculate P(A|B)</li>
2679
  <li>If the test was 95% accurate instead of 99%, what would P(A|B) be?</li>
2680
  </ol>
2681
+ <button class="show-answers-btn">Show
 
2682
  Answers</button>
2683
  <div class="practice-answers" style="display: none;">
2684
  <p><strong>Answers:</strong></p>
 
2770
  </ul>
2771
  </div>
2772
 
2773
+ <!-- Interactive PDF vs CDF Visualization -->
2774
+ <div class="interactive-container">
2775
+ <h3>📊 Visual: PDF vs CDF (Uniform Distribution)</h3>
2776
+ <canvas id="pdfCdfCanvas" width="900" height="400"></canvas>
2777
+ <div class="controls">
2778
+ <div class="slider-group">
2779
+ <label>Select Range: <span id="pdfRangeLabel">[3, 7]</span></label>
2780
+ <input type="range" id="pdfRangeSlider" min="0" max="10" value="3" step="0.5"
2781
+ class="slider">
2782
+ <input type="range" id="pdfRangeSlider2" min="0" max="10" value="7" step="0.5"
2783
+ class="slider">
2784
+ </div>
2785
+ <button class="btn btn-primary" id="pdfCdfAnimateBtn">Show Relationship</button>
2786
+ </div>
2787
+ </div>
2788
+
2789
  <!-- WORKED EXAMPLE SECTION -->
2790
  <div class="content-block worked-example-section">
2791
  <h3>📝 Worked Example - Step by Step</h3>
 
2874
  <li>For above, find P(8 ≤ X ≤ 12)</li>
2875
  <li>Why is P(X = 7) = 0 for continuous distributions?</li>
2876
  </ol>
2877
+ <button class="show-answers-btn">Show
 
2878
  Answers</button>
2879
  <div class="practice-answers" style="display: none;">
2880
  <p><strong>Answers:</strong></p>
 
3023
  <li>What is P(X &gt; 7) using the CDF?</li>
3024
  <li>If F(x) = 0.75, what does this mean?</li>
3025
  </ol>
3026
+ <button class="show-answers-btn">Show
 
3027
  Answers</button>
3028
  <div class="practice-answers" style="display: none;">
3029
  <p><strong>Answers:</strong></p>
 
3170
  <li>Free throw: 80% success rate. Model as Bernoulli</li>
3171
  <li>When is Var(X) maximized for Bernoulli?</li>
3172
  </ol>
3173
+ <button class="show-answers-btn">Show
 
3174
  Answers</button>
3175
  <div class="practice-answers" style="display: none;">
3176
  <p><strong>Answers:</strong></p>
 
3281
  <p>99.7% have IQ between 55-145</p>
3282
  </div>
3283
 
3284
+ <!-- Interactive 68-95-99.7 Rule Visualization -->
3285
+ <div class="interactive-container">
3286
+ <h3>📊 Visual: The 68-95-99.7 Rule</h3>
3287
+ <canvas id="normalRuleCanvas" width="900" height="400"></canvas>
3288
+ <div class="controls">
3289
+ <button class="btn btn-primary" id="normalShow68Btn">Show ±1σ (68%)</button>
3290
+ <button class="btn btn-secondary" id="normalShow95Btn">Show ±2σ (95%)</button>
3291
+ <button class="btn btn-secondary" id="normalShow997Btn">Show ±3σ (99.7%)</button>
3292
+ <button class="btn btn-secondary" id="normalShowAllBtn">Show All</button>
3293
+ </div>
3294
+ </div>
3295
+
3296
  <!-- WORKED EXAMPLE SECTION -->
3297
  <div class="content-block worked-example-section">
3298
  <h3>📝 Worked Example - Step by Step</h3>
 
3383
  <li>What IQ scores contain the middle 95% of people?</li>
3384
  <li>If z = -2, what percentile is this?</li>
3385
  </ol>
3386
+ <button class="show-answers-btn">Show
 
3387
  Answers</button>
3388
  <div class="practice-answers" style="display: none;">
3389
  <p><strong>Answers:</strong></p>
 
4157
  <li>If z = 2.5, α = 0.01, find p-value and decide</li>
4158
  <li>When do we reject H₀ using p-value method?</li>
4159
  </ol>
4160
+ <button class="show-answers-btn">Show
 
4161
  Answers</button>
4162
  <div class="practice-answers" style="display: none;">
4163
  <p><strong>Answers:</strong></p>
 
4322
  <li>Claim: μ &gt; 50. One-tailed or two-tailed?</li>
4323
  <li>Claim: μ ≠ 100. Which test?</li>
4324
  </ol>
4325
+ <button class="show-answers-btn">Show
 
4326
  Answers</button>
4327
  <div class="practice-answers" style="display: none;">
4328
  <p><strong>Answers:</strong></p>
 
4481
  <li>n = 25, x̄ = 100, s = 15, test μ = 95 at α = 0.01</li>
4482
  <li>Why use t-test instead of z-test?</li>
4483
  </ol>
4484
+ <button class="show-answers-btn">Show
 
4485
  Answers</button>
4486
  <div class="practice-answers" style="display: none;">
4487
  <p><strong>Answers:</strong></p>
 
4622
  <li>Sample size 100, find df for t-test</li>
4623
  <li>5×3 table, find df for chi-squared</li>
4624
  </ol>
4625
+ <button class="show-answers-btn">Show
 
4626
  Answers</button>
4627
  <div class="practice-answers" style="display: none;">
4628
  <p><strong>Answers:</strong></p>
 
4793
  <li>Security scanner: H₀ = "Safe". Describe Type I/II errors</li>
4794
  <li>If α = 0.01, what's P(Type I error)?</li>
4795
  </ol>
4796
+ <button class="show-answers-btn">Show
 
4797
  Answers</button>
4798
  <div class="practice-answers" style="display: none;">
4799
  <p><strong>Answers:</strong></p>
 
5322
  </section>
5323
 
5324
  <!-- Topic 54: Eigenvectors -->
5325
+ <!-- Topic 54: Eigenvectors & Eigenvalues - PAPER AND PAIN APPROACH -->
5326
  <section class="topic-section" id="topic-54" data-subject="linear-algebra" style="display: none;">
5327
  <div class="topic-header">
5328
  <span class="topic-number">Topic 54</span>
5329
  <h2>🎯 Eigenvectors and Eigenvalues</h2>
5330
+ <p class="topic-subtitle">Special vectors that only get scaled (not rotated) by a matrix</p>
5331
  </div>
5332
 
5333
  <div class="content-card">
5334
+ <h3>🤔 The Big Idea (Intuition First)</h3>
5335
+ <p>When you multiply a matrix by a vector, the vector usually <strong>changes direction</strong>.
5336
+ But some special vectors only get <strong>stretched or shrunk</strong>—they stay on the same
5337
+ line.
5338
+ These are <strong>eigenvectors</strong>.</p>
5339
+
5340
+ <div class="callout-box insight">
5341
+ <div class="callout-header">💡 KEY INSIGHT</div>
5342
+ <p><strong>Eigenvector:</strong> A vector that keeps its direction when multiplied by a matrix.
5343
+ </p>
5344
+ <p><strong>Eigenvalue:</strong> How much the eigenvector gets stretched (or shrunk).</p>
5345
+ <p style="font-size: 1.2em; margin-top: 10px;">$$A\mathbf{v} = \lambda\mathbf{v}$$</p>
5346
+ <p style="color: #8b949e; font-style: italic;">
5347
+ "Apply matrix A to vector v, and you just get λ times v back!"
5348
+ </p>
5349
  </div>
5350
  </div>
5351
 
5352
+ <!-- PAPER AND PAIN SECTION -->
5353
+ <div class="content-block worked-example-section">
5354
+ <h3>✍️ Paper and Pain: Manual Calculation</h3>
5355
+
5356
+ <div class="example-problem">
5357
+ <h4>Our Test Matrix:</h4>
5358
+ <p class="problem-statement">Let's use a simple diagonal matrix:</p>
5359
+ <div style="font-size: 1.4em; text-align: center; margin: 20px 0; color: #64ffda;">
5360
+ $$A = \begin{bmatrix} 2 & 0 \\ 0 & 1 \end{bmatrix}$$
5361
  </div>
5362
+ <p><strong>What does this matrix do?</strong> It stretches the x-axis by 2, and leaves the
5363
+ y-axis alone.</p>
5364
  </div>
5365
 
5366
+ <h4 style="color: #ff6b6b; margin-top: 30px;">❌ Test 1: Is v = [1, 1] an eigenvector?</h4>
5367
+
5368
+ <div class="example-solution">
5369
+ <div class="solution-step">
5370
+ <div class="step-number">Step 1:</div>
5371
+ <div class="step-content">
5372
+ <p class="step-description">Set up the Matrix-Vector Multiplication</p>
5373
+ <div class="step-work" style="font-size: 1.1em;">
5374
+ <code>A × v = ?</code><br>
5375
+ <code style="font-size: 1.2em;">
5376
+ $$\begin{bmatrix} 2 & 0 \\ 0 & 1 \end{bmatrix} \times \begin{bmatrix} 1 \\ 1 \end{bmatrix} = ?$$
5377
+ </code>
5378
+ </div>
5379
+ <p class="step-explanation">We multiply the matrix A by the vector v = [1, 1]</p>
5380
+ </div>
5381
+ </div>
5382
+
5383
+ <div class="solution-step">
5384
+ <div class="step-number">Step 2:</div>
5385
+ <div class="step-content">
5386
+ <p class="step-description">Calculate Row 1 (Top of Result)</p>
5387
+ <div class="step-work">
5388
+ <code>Row 1 of A • v = (2×1) + (0×1)</code><br>
5389
+ <code style="color: #64ffda;">= 2 + 0 = <strong>2</strong></code>
5390
+ </div>
5391
+ <p class="step-explanation">First row [2, 0] dotted with [1, 1]</p>
5392
+ </div>
5393
+ </div>
5394
+
5395
+ <div class="solution-step">
5396
+ <div class="step-number">Step 3:</div>
5397
+ <div class="step-content">
5398
+ <p class="step-description">Calculate Row 2 (Bottom of Result)</p>
5399
+ <div class="step-work">
5400
+ <code>Row 2 of A • v = (0×1) + (1×1)</code><br>
5401
+ <code style="color: #64ffda;">= 0 + 1 = <strong>1</strong></code>
5402
+ </div>
5403
+ <p class="step-explanation">Second row [0, 1] dotted with [1, 1]</p>
5404
+ </div>
5405
+ </div>
5406
+
5407
+ <div class="solution-step">
5408
+ <div class="step-number">Step 4:</div>
5409
+ <div class="step-content">
5410
+ <p class="step-description">Combine the Results</p>
5411
+ <div class="step-work" style="font-size: 1.1em;">
5412
+ <code style="font-size: 1.2em;">
5413
+ $$A \times v = \begin{bmatrix} 2 \\ 1 \end{bmatrix}$$
5414
+ </code>
5415
+ </div>
5416
+ </div>
5417
+ </div>
5418
+
5419
+ <div class="solution-step">
5420
+ <div class="step-number">Step 5:</div>
5421
+ <div class="step-content">
5422
+ <p class="step-description">Compare: Did the Vector Stay on Its Line?</p>
5423
+ <div class="step-work">
5424
+ <code>Original v = [1, 1] → Points at 45° angle (slope = 1/1 = 1)</code><br>
5425
+ <code>Result Av = [2, 1] → Points at different angle (slope = 1/2 = 0.5)</code><br><br>
5426
+ <code style="color: #ff6b6b; font-weight: bold;">❌ DIRECTION CHANGED!</code>
5427
+ </div>
5428
+ <p class="step-explanation">The vector rotated from 45° to a shallower angle</p>
5429
+ </div>
5430
+ </div>
5431
+
5432
+ <div class="final-answer"
5433
+ style="background: linear-gradient(135deg, #ff6b6b22, #ff6b6b11); border-left: 4px solid #ff6b6b;">
5434
+ <strong>❌ Conclusion:</strong>
5435
+ <span class="answer-highlight" style="color: #ff6b6b;">v = [1, 1] is NOT an
5436
+ eigenvector!</span>
5437
+ <p style="margin-top: 10px;">The matrix didn't just stretch it — it <em>changed its
5438
+ direction</em>.</p>
5439
+ </div>
5440
  </div>
5441
 
5442
+ <h4 style="color: #51cf66; margin-top: 40px;">✓ Test 2: Is v = [1, 0] an eigenvector?</h4>
5443
+
5444
+ <div class="example-solution">
5445
+ <div class="solution-step">
5446
+ <div class="step-number">Step 1:</div>
5447
+ <div class="step-content">
5448
+ <p class="step-description">Set up the Matrix-Vector Multiplication</p>
5449
+ <div class="step-work" style="font-size: 1.1em;">
5450
+ <code style="font-size: 1.2em;">
5451
+ $$\begin{bmatrix} 2 & 0 \\ 0 & 1 \end{bmatrix} \times \begin{bmatrix} 1 \\ 0 \end{bmatrix} = ?$$
5452
+ </code>
5453
+ </div>
5454
+ <p class="step-explanation">Multiply A by v = [1, 0] (the x-axis unit vector)</p>
5455
+ </div>
5456
+ </div>
5457
+
5458
+ <div class="solution-step">
5459
+ <div class="step-number">Step 2:</div>
5460
+ <div class="step-content">
5461
+ <p class="step-description">Calculate Row 1</p>
5462
+ <div class="step-work">
5463
+ <code>Row 1: (2×1) + (0×0) = 2 + 0 = <strong style="color: #64ffda;">2</strong></code>
5464
+ </div>
5465
+ </div>
5466
+ </div>
5467
+
5468
+ <div class="solution-step">
5469
+ <div class="step-number">Step 3:</div>
5470
+ <div class="step-content">
5471
+ <p class="step-description">Calculate Row 2</p>
5472
+ <div class="step-work">
5473
+ <code>Row 2: (0×1) + (1×0) = 0 + 0 = <strong style="color: #64ffda;">0</strong></code>
5474
+ </div>
5475
+ </div>
5476
+ </div>
5477
+
5478
+ <div class="solution-step">
5479
+ <div class="step-number">Step 4:</div>
5480
+ <div class="step-content">
5481
+ <p class="step-description">The Result</p>
5482
+ <div class="step-work" style="font-size: 1.1em;">
5483
+ <code style="font-size: 1.2em;">
5484
+ $$A \times v = \begin{bmatrix} 2 \\ 0 \end{bmatrix} = 2 \times \begin{bmatrix} 1 \\ 0 \end{bmatrix}$$
5485
+ </code>
5486
+ </div>
5487
+ </div>
5488
+ </div>
5489
+
5490
+ <div class="solution-step">
5491
+ <div class="step-number">Step 5:</div>
5492
+ <div class="step-content">
5493
+ <p class="step-description">Compare: Did the Vector Stay on Its Line?</p>
5494
+ <div class="step-work">
5495
+ <code>Original v = [1, 0] → Points along x-axis (→)</code><br>
5496
+ <code>Result Av = [2, 0] → STILL points along x-axis! (→→)</code><br><br>
5497
+ <code
5498
+ style="color: #51cf66; font-weight: bold;">✓ SAME DIRECTION! Just 2× longer!</code>
5499
+ </div>
5500
+ <p class="step-explanation">It doubled in length but stayed on the x-axis</p>
5501
+ </div>
5502
+ </div>
5503
+
5504
+ <div class="final-answer"
5505
+ style="background: linear-gradient(135deg, #51cf6622, #51cf6611); border-left: 4px solid #51cf66;">
5506
+ <strong>✓ Conclusion:</strong>
5507
+ <span class="answer-highlight" style="color: #51cf66;">v = [1, 0] IS an eigenvector!</span>
5508
+ <p style="margin-top: 10px;">
5509
+ <strong>Eigenvector:</strong> [1, 0]<br>
5510
+ <strong>Eigenvalue:</strong> λ = 2 (the stretching factor)
5511
+ </p>
5512
+ </div>
5513
+ </div>
5514
+
5515
+ <h4 style="color: #51cf66; margin-top: 40px;">✓ Test 3: Is v = [0, 1] an eigenvector?</h4>
5516
+
5517
+ <div class="example-solution">
5518
+ <div class="solution-step">
5519
+ <div class="step-number">Quick Check:</div>
5520
+ <div class="step-content">
5521
+ <div class="step-work" style="font-size: 1.1em;">
5522
+ <code style="font-size: 1.2em;">
5523
+ $$\begin{bmatrix} 2 & 0 \\ 0 & 1 \end{bmatrix} \times \begin{bmatrix} 0 \\ 1 \end{bmatrix} = \begin{bmatrix} 0 \\ 1 \end{bmatrix} = 1 \times \begin{bmatrix} 0 \\ 1 \end{bmatrix}$$
5524
+ </code>
5525
+ </div>
5526
+ <p class="step-explanation">The y-axis vector stays on the y-axis! λ = 1</p>
5527
+ </div>
5528
+ </div>
5529
+
5530
+ <div class="final-answer"
5531
+ style="background: linear-gradient(135deg, #51cf6622, #51cf6611); border-left: 4px solid #51cf66;">
5532
+ <strong>✓ Yes!</strong>
5533
+ <span class="answer-highlight" style="color: #51cf66;">[0, 1] is also an eigenvector with λ
5534
+ = 1</span>
5535
+ </div>
5536
  </div>
5537
  </div>
5538
 
5539
+ <!-- Visual Summary -->
5540
+ <div class="callout-box insight">
5541
+ <div class="callout-header">📊 The Full Picture</div>
5542
+ <table class="comparison-table">
5543
+ <thead>
5544
+ <tr>
5545
+ <th>Vector</th>
5546
+ <th>A × v Result</th>
5547
+ <th>Direction Changed?</th>
5548
+ <th>Eigenvector?</th>
5549
+ <th>Eigenvalue (λ)</th>
5550
+ </tr>
5551
+ </thead>
5552
+ <tbody>
5553
+ <tr>
5554
+ <td>[1, 1]</td>
5555
+ <td>[2, 1]</td>
5556
+ <td style="color: #ff6b6b;">YES ❌</td>
5557
+ <td style="color: #ff6b6b;">NO</td>
5558
+ <td>—</td>
5559
+ </tr>
5560
+ <tr>
5561
+ <td>[1, 0]</td>
5562
+ <td>[2, 0]</td>
5563
+ <td style="color: #51cf66;">NO ✓</td>
5564
+ <td style="color: #51cf66;">YES</td>
5565
+ <td>λ = 2</td>
5566
+ </tr>
5567
+ <tr>
5568
+ <td>[0, 1]</td>
5569
+ <td>[0, 1]</td>
5570
+ <td style="color: #51cf66;">NO ✓</td>
5571
+ <td style="color: #51cf66;">YES</td>
5572
+ <td>λ = 1</td>
5573
+ </tr>
5574
+ </tbody>
5575
+ </table>
5576
+ </div>
5577
+
5578
+ <!-- Interactive Visualization -->
5579
  <div class="interactive-container">
5580
+ <h3>🎮 Interactive: Watch Vectors Transform</h3>
5581
+ <canvas id="canvas-54" width="700" height="400"></canvas>
5582
  <div class="controls">
5583
+ <button class="btn btn-primary" id="btn54transform">Apply Matrix A</button>
5584
  <button class="btn btn-secondary" id="btn54reset">Reset</button>
5585
  </div>
5586
+ <p style="color: #8b949e; font-size: 0.9em; margin-top: 10px;">
5587
+ 🔵 Blue [1,1]: Changes direction → NOT eigenvector<br>
5588
+ 🟢 Green [1,0]: Just stretches → IS eigenvector (λ=2)<br>
5589
+ 🟡 Yellow [0,1]: Stays same → IS eigenvector (λ=1)
5590
+ </p>
5591
+ </div>
5592
+
5593
+ <!-- The Mathematical Method -->
5594
+ <div class="content-card">
5595
+ <h3>📐 The Formal Method (For Finding Eigenvectors)</h3>
5596
+ <p>Once you understand the concept, here's how to find eigenvectors systematically:</p>
5597
+
5598
+ <div class="formula-card">
5599
+ <div class="formula-header">The Characteristic Equation</div>
5600
+ <div style="font-size: 1.2em; margin: 15px 0;">
5601
+ $$\det(A - \lambda I) = 0$$
5602
+ </div>
5603
+ <p>Solve this polynomial to find eigenvalues λ, then plug each λ back to find eigenvectors.</p>
5604
+ </div>
5605
  </div>
5606
 
5607
  <div class="summary-card">
5608
  <h3>🎯 Key Takeaways</h3>
5609
  <ul>
5610
+ <li><strong>Eigenvectors</strong> are special vectors that <em>don't rotate</em> when multiplied
5611
+ by a matrix—they only stretch or shrink.</li>
5612
+ <li><strong>Eigenvalues</strong> tell you <em>how much</em> the eigenvector stretches (λ > 1) or
5613
+ shrinks (λ < 1).</li>
5614
+ <li>If λ is negative, the vector flips direction (but still stays on the same line!).</li>
5615
+ <li><strong>Why it matters:</strong> Critical for PCA (dimensionality reduction), Google
5616
+ PageRank, quantum mechanics, and stability analysis.</li>
5617
  </ul>
5618
  </div>
5619
  </section>
 
6578
  <li>Find ∫₀² (3x² + 2) dx</li>
6579
  <li>Evaluate ∫₁³ (4x - 1) dx</li>
6580
  </ol>
6581
+ <button class="show-answers-btn">Show
 
6582
  Answers</button>
6583
  <div class="practice-answers" style="display: none;">
6584
  <p><strong>Answers:</strong></p>
 
7063
  <li>Using y=2+3x, predict y when x=6</li>
7064
  <li>If b=2 and the line passes through (3,10), find a</li>
7065
  </ol>
7066
+ <button class="show-answers-btn">Show
 
7067
  Answers</button>
7068
  <div class="practice-answers" style="display: none;">
7069
  <p><strong>Answers:</strong></p>
 
7933
  <li>Find the minimum of f(x) = (x-3)² using calculus (no GD)</li>
7934
  <li>If gradient is positive, which direction should we move?</li>
7935
  </ol>
7936
+ <button class="show-answers-btn">Show
 
7937
  Answers</button>
7938
  <div class="practice-answers" style="display: none;">
7939
  <p><strong>Answers:</strong></p>
 
8562
  <li>If price is $275k, estimate the house size</li>
8563
  <li>What does the slope 0.10 mean in real terms?</li>
8564
  </ol>
8565
+ <button class="show-answers-btn">Show
 
8566
  Answers</button>
8567
  <div class="practice-answers" style="display: none;">
8568
  <p><strong>Answers:</strong></p>
 
8867
  <li>If distances were 0.5(Setosa), 0.6(Setosa), 0.7(Versicolor), predict class</li>
8868
  <li>Why is K usually chosen as odd number?</li>
8869
  </ol>
8870
+ <button class="show-answers-btn">Show
 
8871
  Answers</button>
8872
  <div class="practice-answers" style="display: none;">
8873
  <p><strong>Answers:</strong></p>
 
9004
  </div>
9005
  </div>
9006
 
9007
+ <!-- Interactive Decision Tree Visualization -->
9008
+ <div class="interactive-container">
9009
+ <h3>📊 Visual: Simple Decision Tree - "Is a Person Tall?"</h3>
9010
+ <canvas id="decisionTreeCanvas" width="900" height="450"></canvas>
9011
+ <div class="controls">
9012
+ <div class="slider-group">
9013
+ <label>Test Height: <span id="heightTestLabel">175</span> cm</label>
9014
+ <input type="range" id="heightTestSlider" min="150" max="200" value="175" class="slider">
9015
+ </div>
9016
+ <button class="btn btn-primary" id="treeClassifyBtn">Classify</button>
9017
+ <button class="btn btn-secondary" id="treeResetBtn">Reset</button>
9018
+ </div>
9019
+ </div>
9020
+
9021
  <div class="worked-example-section">
9022
  <h3>📝 Worked Example - Loan Approval Prediction</h3>
9023
 
 
9178
  <li>If split gives H_left=0 and H_right=0.5, which is better split?</li>
9179
  <li>Why might deep trees overfit?</li>
9180
  </ol>
9181
+ <button class="show-answers-btn">Show
 
9182
  Answers</button>
9183
  <div class="practice-answers" style="display: none;">
9184
  <p><strong>Answers:</strong></p>
 
9428
  <li>How would you choose optimal K value?</li>
9429
  <li>What happens if we use K=3 instead?</li>
9430
  </ol>
9431
+ <button class="show-answers-btn">Show
 
9432
  Answers</button>
9433
  <div class="practice-answers" style="display: none;">
9434
  <p><strong>Answers:</strong></p>
 
9676
  <li>3-fold CV gives: 0.80, 0.85, 0.90. Find mean.</li>
9677
  <li>When should you use stratified K-fold?</li>
9678
  </ol>
9679
+ <button class="show-answers-btn">Show
 
9680
  Answers</button>
9681
  <div class="practice-answers" style="display: none;">
9682
  <p><strong>Answers:</strong></p>
 
11355
  <li>Why use ε-greedy exploration?</li>
11356
  <li>Calculate Q-update: current Q=2, r=-1, max next Q=5, α=0.1, γ=0.9</li>
11357
  </ol>
11358
+ <button class="show-answers-btn">Show
 
11359
  Answers</button>
11360
  <div class="practice-answers" style="display: none;">
11361
  <p><strong>Answers:</strong></p>
 
11822
  <li>What are advantages of policy gradient vs Q-learning?</li>
11823
  <li>What problem occurs if your learning rate is too high?</li>
11824
  </ol>
11825
+ <button class="show-answers-btn">Show
 
11826
  Answers</button>
11827
  <div class="practice-answers" style="display: none;">
11828
  <p><strong>Answers:</strong></p>
ml_complete-all-topics/index.html CHANGED
@@ -3006,6 +3006,158 @@ Actual Pos TP FN
3006
  <li><strong>Use when:</strong> Many features, few are important</li>
3007
  </ul>
3008
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3009
  <h3>L2 Regularization (Ridge)</h3>
3010
  <div class="formula">
3011
  <strong>L2 Penalty:</strong>
@@ -3021,6 +3173,223 @@ Actual Pos TP FN
3021
  <li><strong>Use when:</strong> Many correlated features (multicollinearity)</li>
3022
  </ul>
3023
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3024
  <div class="figure">
3025
  <div class="figure-placeholder" style="height: 400px">
3026
  <canvas id="regularization-canvas" style="width: 100%; height: 100%;"></canvas>
 
3006
  <li><strong>Use when:</strong> Many features, few are important</li>
3007
  </ul>
3008
 
3009
+ <!-- COMPREHENSIVE L1 MATH SECTION -->
3010
+ <div class="info-card"
3011
+ style="background: linear-gradient(135deg, rgba(106, 169, 255, 0.1), rgba(126, 240, 212, 0.1)); border: 2px solid #6aa9ff; margin-top: 32px;">
3012
+ <h3 style="color: #6aa9ff; margin-bottom: 20px;">📐 L1 Regularization: Complete Mathematical
3013
+ Walkthrough</h3>
3014
+
3015
+ <p style="color: #7ef0d4; font-weight: bold;">Let's see how L1 drives coefficients to ZERO!</p>
3016
+
3017
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3018
+ <strong style="color: #ff8c6a;">Problem: Predicting House Price with 4
3019
+ Features</strong><br><br>
3020
+
3021
+ <strong>Dataset:</strong><br>
3022
+ <table style="width: 100%; color: #e8eef6; margin: 10px 0; border-collapse: collapse;">
3023
+ <tr style="border-bottom: 2px solid #6aa9ff;">
3024
+ <th style="padding: 8px;">Size (x₁)</th>
3025
+ <th style="padding: 8px;">Bedrooms (x₂)</th>
3026
+ <th style="padding: 8px;">Pool (x₃)</th>
3027
+ <th style="padding: 8px;">Age (x₄)</th>
3028
+ <th style="padding: 8px;">Price (y)</th>
3029
+ </tr>
3030
+ <tr>
3031
+ <td style="padding: 6px; text-align: center;">1000</td>
3032
+ <td style="text-align: center;">2</td>
3033
+ <td style="text-align: center;">0</td>
3034
+ <td style="text-align: center;">15</td>
3035
+ <td style="text-align: center;">₹50L</td>
3036
+ </tr>
3037
+ <tr style="background: rgba(106, 169, 255, 0.05);">
3038
+ <td style="padding: 6px; text-align: center;">1500</td>
3039
+ <td style="text-align: center;">3</td>
3040
+ <td style="text-align: center;">1</td>
3041
+ <td style="text-align: center;">5</td>
3042
+ <td style="text-align: center;">₹75L</td>
3043
+ </tr>
3044
+ <tr>
3045
+ <td style="padding: 6px; text-align: center;">800</td>
3046
+ <td style="text-align: center;">2</td>
3047
+ <td style="text-align: center;">0</td>
3048
+ <td style="text-align: center;">20</td>
3049
+ <td style="text-align: center;">₹40L</td>
3050
+ </tr>
3051
+ </table>
3052
+ </div>
3053
+
3054
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3055
+ <strong style="color: #ff8c6a;">Step 1: Linear Regression WITHOUT
3056
+ Regularization</strong><br><br>
3057
+
3058
+ <strong>Model:</strong> ŷ = θ₀ + θ₁·Size + θ₂·Bedrooms + θ₃·Pool + θ₄·Age<br><br>
3059
+
3060
+ <strong>Training Result (overfitted):</strong><br>
3061
+ θ₀ = 5.0<br>
3062
+ θ₁ = <strong style="color: #7ef0d4;">0.035</strong> (Size - IMPORTANT!)<br>
3063
+ θ₂ = <strong style="color: #ff8c6a;">8.2</strong> (Bedrooms - inflated)<br>
3064
+ θ₃ = <strong style="color: #ff8c6a;">0.3</strong> (Pool - likely noise)<br>
3065
+ θ₄ = <strong style="color: #ff8c6a;">-0.1</strong> (Age - weak signal)<br><br>
3066
+
3067
+ <strong>Cost (MSE) = 2.5</strong> (good fit but overfitted!)
3068
+ </div>
3069
+
3070
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3071
+ <strong style="color: #ff8c6a;">Step 2: Add L1 Penalty (λ = 1.0)</strong><br><br>
3072
+
3073
+ <strong>New Cost Function:</strong><br>
3074
+ Cost = MSE + λ × (|θ₁| + |θ₂| + |θ₃| + |θ₄|)<br>
3075
+ Cost = MSE + 1.0 × (|θ₁| + |θ₂| + |θ₃| + |θ₄|)<br><br>
3076
+
3077
+ <strong>Before regularization:</strong><br>
3078
+ MSE = 2.5<br>
3079
+ L1 Penalty = 1.0 × (|0.035| + |8.2| + |0.3| + |-0.1|)<br>
3080
+ L1 Penalty = 1.0 × (0.035 + 8.2 + 0.3 + 0.1) = <strong
3081
+ style="color: #ff8c6a;">8.635</strong><br>
3082
+ <strong style="color: #ff8c6a;">Total Cost = 2.5 + 8.635 = 11.135</strong> ❌ Too high!
3083
+ </div>
3084
+
3085
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3086
+ <strong style="color: #ff8c6a;">Step 3: Optimization - Shrinking
3087
+ Coefficients</strong><br><br>
3088
+
3089
+ <strong>Gradient Descent Update (simplified):</strong><br>
3090
+ θⱼ = θⱼ - α × (∂MSE/∂θⱼ + λ × sign(θⱼ))<br><br>
3091
+
3092
+ <strong>Key insight:</strong> L1 penalty adds constant <strong style="color: #7ef0d4;">λ ×
3093
+ sign(θⱼ)</strong><br>
3094
+ → Pushes small coefficients ALL THE WAY to zero!<br><br>
3095
+
3096
+ <strong>After L1 optimization (λ = 1.0):</strong><br>
3097
+ θ₁ = <strong style="color: #7ef0d4;">0.034</strong> (Size - kept, slightly reduced)<br>
3098
+ θ₂ = <strong style="color: #7ef0d4;">6.5</strong> (Bedrooms - reduced significantly)<br>
3099
+ θ₃ = <strong style="color: #7ef0d4;">0.0</strong> ← ELIMINATED! (Pool was noise)<br>
3100
+ θ₄ = <strong style="color: #7ef0d4;">0.0</strong> ← ELIMINATED! (Age was weak)<br><br>
3101
+
3102
+ <strong>New costs:</strong><br>
3103
+ MSE = 2.8 (slightly worse fit)<br>
3104
+ L1 Penalty = 1.0 × (0.034 + 6.5 + 0 + 0) = 6.534<br>
3105
+ <strong style="color: #7ef0d4;">Total Cost = 2.8 + 6.534 = 9.334</strong> ✓ BETTER!
3106
+ </div>
3107
+
3108
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3109
+ <strong style="color: #ff8c6a;">Step 4: Why L1 Creates Exactly Zero?</strong><br><br>
3110
+
3111
+ <strong>Geometric Interpretation:</strong><br>
3112
+ • L1 constraint: |θ₁| + |θ₂| ≤ budget<br>
3113
+ • This forms a DIAMOND shape in 2D (sharp corners!)<br>
3114
+ • MSE contours are ellipses<br>
3115
+ • Solution touches diamond at CORNERS (where θ₁ or θ₂ = 0)<br><br>
3116
+
3117
+ <strong>Numerical example for θ₃ (Pool coefficient):</strong><br>
3118
+ Original: θ₃ = 0.3<br>
3119
+ L1 gradient contribution: λ × sign(0.3) = 1.0 × (+1) = 1.0<br>
3120
+ MSE gradient contribution: ≈ 0.2 (weak)<br><br>
3121
+
3122
+ L1 force (1.0) > MSE force (0.2)<br>
3123
+ → θ₃ gets pushed to 0 and STAYS there! ✓
3124
+ </div>
3125
+
3126
+ <div class="step">
3127
+ <div class="step-title">Prediction Comparison</div>
3128
+ <div class="step-calculation">
3129
+ <strong style="color: #6aa9ff;">New House: 1200 sq ft, 3 bed, Pool, 10 years
3130
+ old</strong><br><br>
3131
+
3132
+ <strong>Without Regularization:</strong><br>
3133
+ ŷ = 5.0 + 0.035(1200) + 8.2(3) + 0.3(1) + (-0.1)(10)<br>
3134
+ ŷ = 5.0 + 42 + 24.6 + 0.3 - 1.0<br>
3135
+ ŷ = <strong style="color: #ff8c6a;">₹70.9L</strong> (uses all features, may be
3136
+ overfitted)<br><br>
3137
+
3138
+ <strong>With L1 Regularization (λ=1.0):</strong><br>
3139
+ ŷ = 5.0 + 0.034(1200) + 6.5(3) + <strong style="color: #7ef0d4;">0(1)</strong> + <strong
3140
+ style="color: #7ef0d4;">0(10)</strong><br>
3141
+ ŷ = 5.0 + 40.8 + 19.5 + 0 + 0<br>
3142
+ ŷ = <strong style="color: #7ef0d4;">₹65.3L</strong> ✓ (simpler, more generalizable!)
3143
+ </div>
3144
+ </div>
3145
+
3146
+ <div class="callout success" style="margin-top: 20px;">
3147
+ <div class="callout-title">✓ L1 Regularization Summary</div>
3148
+ <div class="callout-content">
3149
+ <strong>The Magic of L1:</strong><br>
3150
+ 1. Adds <strong>|θ₁| + |θ₂| + ...</strong> to cost function<br>
3151
+ 2. Creates constant gradient: <strong>λ × sign(θⱼ)</strong><br>
3152
+ 3. Small coefficients get pushed ALL THE WAY to zero<br>
3153
+ 4. Result: <strong>Automatic feature selection!</strong><br>
3154
+ 5. Only important features survive<br><br>
3155
+ <strong style="color: #7ef0d4;">Perfect for high-dimensional data with irrelevant
3156
+ features!</strong>
3157
+ </div>
3158
+ </div>
3159
+ </div>
3160
+
3161
  <h3>L2 Regularization (Ridge)</h3>
3162
  <div class="formula">
3163
  <strong>L2 Penalty:</strong>
 
3173
  <li><strong>Use when:</strong> Many correlated features (multicollinearity)</li>
3174
  </ul>
3175
 
3176
+ <!-- COMPREHENSIVE L2 MATH SECTION -->
3177
+ <div class="info-card"
3178
+ style="background: linear-gradient(135deg, rgba(106, 169, 255, 0.1), rgba(126, 240, 212, 0.1)); border: 2px solid #6aa9ff; margin-top: 32px;">
3179
+ <h3 style="color: #6aa9ff; margin-bottom: 20px;">📐 L2 Regularization: Complete Mathematical
3180
+ Walkthrough</h3>
3181
+
3182
+ <p style="color: #7ef0d4; font-weight: bold;">Let's see how L2 shrinks ALL coefficients
3183
+ smoothly!</p>
3184
+
3185
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3186
+ <strong style="color: #ff8c6a;">Problem: Same House Price Dataset (with
3187
+ multicollinearity)</strong><br><br>
3188
+
3189
+ <strong>Dataset:</strong><br>
3190
+ <table style="width: 100%; color: #e8eef6; margin: 10px 0; border-collapse: collapse;">
3191
+ <tr style="border-bottom: 2px solid #6aa9ff;">
3192
+ <th style="padding: 8px;">Size (x₁)</th>
3193
+ <th style="padding: 8px;">Rooms (x₂)</th>
3194
+ <th style="padding: 8px;">Sqft/Room (x₃)</th>
3195
+ <th style="padding: 8px;">Location (x₄)</th>
3196
+ <th style="padding: 8px;">Price (y)</th>
3197
+ </tr>
3198
+ <tr>
3199
+ <td style="padding: 6px; text-align: center;">1000</td>
3200
+ <td style="text-align: center;">5</td>
3201
+ <td style="text-align: center;">200</td>
3202
+ <td style="text-align: center;">8</td>
3203
+ <td style="text-align: center;">₹50L</td>
3204
+ </tr>
3205
+ <tr style="background: rgba(106, 169, 255, 0.05);">
3206
+ <td style="padding: 6px; text-align: center;">1500</td>
3207
+ <td style="text-align: center;">6</td>
3208
+ <td style="text-align: center;">250</td>
3209
+ <td style="text-align: center;">9</td>
3210
+ <td style="text-align: center;">₹75L</td>
3211
+ </tr>
3212
+ <tr>
3213
+ <td style="padding: 6px; text-align: center;">800</td>
3214
+ <td style="text-align: center;">4</td>
3215
+ <td style="text-align: center;">200</td>
3216
+ <td style="text-align: center;">6</td>
3217
+ <td style="text-align: center;">₹40L</td>
3218
+ </tr>
3219
+ </table>
3220
+ <em style="color: #ff8c6a;">Note: x₁ and x₃ are highly correlated! (Size ≈ Rooms ×
3221
+ Sqft/Room)</em>
3222
+ </div>
3223
+
3224
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3225
+ <strong style="color: #ff8c6a;">Step 1: Linear Regression WITHOUT
3226
+ Regularization</strong><br><br>
3227
+
3228
+ <strong>Model:</strong> ŷ = θ₀ + θ₁·Size + θ₂·Rooms + θ₃·Sqft/Room + θ₄·Location<br><br>
3229
+
3230
+ <strong>Training Result (unstable due to multicollinearity):</strong><br>
3231
+ θ₀ = 2.0<br>
3232
+ θ₁ = <strong style="color: #ff8c6a;">0.055</strong> (Size - inflated)<br>
3233
+ θ₂ = <strong style="color: #ff8c6a;">12.5</strong> (Rooms - VERY inflated)<br>
3234
+ θ₃ = <strong style="color: #ff8c6a;">-0.048</strong> (Sqft/Room - wrong sign!)<br>
3235
+ θ₄ = <strong style="color: #7ef0d4;">2.8</strong> (Location - reasonable)<br><br>
3236
+
3237
+ <strong>Problem:</strong> Coefficients compensate for each other<br>
3238
+ → Unstable, sensitive to small data changes<br>
3239
+ <strong>Cost (MSE) = 1.8</strong> (low training error but poor generalization)
3240
+ </div>
3241
+
3242
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3243
+ <strong style="color: #ff8c6a;">Step 2: Add L2 Penalty (λ = 1.0)</strong><br><br>
3244
+
3245
+ <strong>New Cost Function:</strong><br>
3246
+ Cost = MSE + λ × (θ₁² + θ₂² + θ₃² + θ₄²)<br>
3247
+ Cost = MSE + 1.0 × (θ₁² + θ₂² + θ₃² + θ₄²)<br><br>
3248
+
3249
+ <strong>Before regularization:</strong><br>
3250
+ MSE = 1.8<br>
3251
+ L2 Penalty = 1.0 × (0.055² + 12.5² + (-0.048)² + 2.8²)<br>
3252
+ L2 Penalty = 1.0 × (0.003 + 156.25 + 0.0023 + 7.84)<br>
3253
+ L2 Penalty = <strong style="color: #ff8c6a;">164.095</strong><br>
3254
+ <strong style="color: #ff8c6a;">Total Cost = 1.8 + 164.095 = 165.895</strong> ❌ Huge
3255
+ penalty!
3256
+ </div>
3257
+
3258
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3259
+ <strong style="color: #ff8c6a;">Step 3: Optimization - Proportional
3260
+ Shrinkage</strong><br><br>
3261
+
3262
+ <strong>Gradient Descent Update:</strong><br>
3263
+ θⱼ = θⱼ - α × (∂MSE/∂θⱼ + <strong style="color: #7ef0d4;">2λθⱼ</strong>)<br><br>
3264
+
3265
+ <strong>Key insight:</strong> L2 penalty adds <strong style="color: #7ef0d4;">2λθⱼ</strong>
3266
+ (proportional to θⱼ!)<br>
3267
+ → Large coefficients shrink MORE<br>
3268
+ → Small coefficients shrink LESS<br>
3269
+ → None go exactly to zero!<br><br>
3270
+
3271
+ <strong>After L2 optimization (λ = 1.0):</strong><br>
3272
+ θ₁ = <strong style="color: #7ef0d4;">0.042</strong> (Size - reduced 24%)<br>
3273
+ θ₂ = <strong style="color: #7ef0d4;">7.8</strong> (Rooms - reduced 38%! was largest)<br>
3274
+ θ₃ = <strong style="color: #7ef0d4;">-0.035</strong> (Sqft/Room - reduced 27%)<br>
3275
+ θ₄ = <strong style="color: #7ef0d4;">2.3</strong> (Location - reduced 18%)<br><br>
3276
+
3277
+ <strong>New costs:</strong><br>
3278
+ MSE = 2.1 (slightly worse fit, acceptable)<br>
3279
+ L2 Penalty = 1.0 × (0.042² + 7.8² + 0.035² + 2.3²)<br>
3280
+ L2 Penalty = 1.0 × (0.0018 + 60.84 + 0.0012 + 5.29) = 66.13<br>
3281
+ <strong style="color: #7ef0d4;">Total Cost = 2.1 + 66.13 = 68.23</strong> ✓ MUCH BETTER!
3282
+ </div>
3283
+
3284
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3285
+ <strong style="color: #ff8c6a;">Step 4: Why L2 NEVER Creates Exact Zero?</strong><br><br>
3286
+
3287
+ <strong>Mathematical Proof:</strong><br>
3288
+ Gradient contribution from L2: 2λθⱼ<br><br>
3289
+
3290
+ As θⱼ → 0, the L2 gradient → 0 too!<br>
3291
+ → Shrinkage force weakens near zero<br>
3292
+ → Coefficient asymptotically approaches zero but never reaches it<br><br>
3293
+
3294
+ <strong>Numerical example for θ₂ (Rooms coefficient):</strong><br>
3295
+ Iteration 1: θ₂ = 12.5 → L2 gradient = 2(1)(12.5) = <strong>25.0</strong> (huge!)<br>
3296
+ Iteration 50: θ₂ = 8.2 → L2 gradient = 2(1)(8.2) = <strong>16.4</strong> (large)<br>
3297
+ Iteration 100: θ₂ = 7.8 → L2 gradient = 2(1)(7.8) = <strong>15.6</strong> (moderate)<br>
3298
+ Iteration 1000: θ₂ = 7.8 → L2 gradient = 2(1)(7.8) = <strong>15.6</strong> ✓
3299
+ Converged!<br><br>
3300
+
3301
+ <strong style="color: #7ef0d4;">θ₂ never reaches 0, just gets smaller!</strong>
3302
+ </div>
3303
+
3304
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3305
+ <strong style="color: #ff8c6a;">Step 5: Geometric Interpretation</strong><br><br>
3306
+
3307
+ <strong>L2 Constraint:</strong> θ₁² + θ₂² ≤ budget<br>
3308
+ • This forms a CIRCLE (smooth, no corners!)<br>
3309
+ • MSE contours are ellipses<br>
3310
+ • Solution touches circle tangentially<br>
3311
+ • Circle has NO sharp corners → unlikely to hit axes (θ = 0)<br><br>
3312
+
3313
+ <strong>vs L1 (diamond with corners):</strong><br>
3314
+ L1: Diamond corners → solution hits axes → zeros<br>
3315
+ L2: Smooth circle → solution anywhere on circle → no zeros
3316
+ </div>
3317
+
3318
+ <div class="step">
3319
+ <div class="step-title">Handling Multicollinearity</div>
3320
+ <div class="step-calculation">
3321
+ <strong style="color: #6aa9ff;">Why L2 is Perfect for Correlated
3322
+ Features</strong><br><br>
3323
+
3324
+ <strong>Without L2 (multicollinearity problem):</strong><br>
3325
+ Size and Sqft/Room are correlated:<br>
3326
+ θ₁ = 0.055, θ₃ = -0.048 (compensating!)<br>
3327
+ Model equation: 0.055·Size - 0.048·Sqft/Room<br>
3328
+ → Unstable! Small data change → huge coefficient change<br><br>
3329
+
3330
+ <strong>With L2 (λ=1.0):</strong><br>
3331
+ θ₁ = 0.042, θ₃ = -0.035<br>
3332
+ Both shrunk proportionally → more stable!<br>
3333
+ Model: 0.042·Size - 0.035·Sqft/Room<br>
3334
+ → Even if data changes slightly, coefficients stay reasonable ✓
3335
+ </div>
3336
+ </div>
3337
+
3338
+ <div class="step">
3339
+ <div class="step-title">Prediction Comparison</div>
3340
+ <div class="step-calculation">
3341
+ <strong style="color: #6aa9ff;">New House: 1200 sq ft, 6 rooms, 200 sqft/room,
3342
+ location=8</strong><br><br>
3343
+
3344
+ <strong>Without Regularization:</strong><br>
3345
+ ŷ = 2.0 + 0.055(1200) + 12.5(6) - 0.048(200) + 2.8(8)<br>
3346
+ ŷ = 2.0 + 66 + 75 - 9.6 + 22.4<br>
3347
+ ŷ = <strong style="color: #ff8c6a;">₹155.8L</strong> (wildly inflated! unstable
3348
+ coefficients)<br><br>
3349
+
3350
+ <strong>With L2 Regularization (λ=1.0):</strong><br>
3351
+ ŷ = 2.0 + 0.042(1200) + 7.8(6) - 0.035(200) + 2.3(8)<br>
3352
+ ŷ = 2.0 + 50.4 + 46.8 - 7.0 + 18.4<br>
3353
+ ŷ = <strong style="color: #7ef0d4;">₹110.6L</strong> ✓ (more realistic, stable!)
3354
+ </div>
3355
+ </div>
3356
+
3357
+ <div class="formula" style="background: rgba(26, 35, 50, 0.9); padding: 20px; margin: 16px 0;">
3358
+ <strong style="color: #ff8c6a;">Step 6: Closed-Form Solution (Ridge Regression
3359
+ Formula)</strong><br><br>
3360
+
3361
+ <strong>Amazing fact:</strong> L2 has exact solution!<br><br>
3362
+
3363
+ <strong>Normal Equation (no regularization):</strong><br>
3364
+ θ = (X<sup>T</sup>X)<sup>-1</sup>X<sup>T</sup>y<br><br>
3365
+
3366
+ <strong>Ridge Regression (with L2):</strong><br>
3367
+ θ = (X<sup>T</sup>X + <strong
3368
+ style="color: #7ef0d4;">λI</strong>)<sup>-1</sup>X<sup>T</sup>y<br><br>
3369
+
3370
+ Where I is identity matrix<br>
3371
+ <strong style="color: #7ef0d4;">The λI term stabilizes X<sup>T</sup>X!</strong><br><br>
3372
+
3373
+ <strong>Benefit:</strong> Even if X<sup>T</sup>X is singular (non-invertible),<br>
3374
+ X<sup>T</sup>X + λI becomes invertible! ✓
3375
+ </div>
3376
+
3377
+ <div class="callout success" style="margin-top: 20px;">
3378
+ <div class="callout-title">✓ L2 Regularization Summary</div>
3379
+ <div class="callout-content">
3380
+ <strong>The Magic of L2:</strong><br>
3381
+ 1. Adds <strong>θ₁² + θ₂² + ...</strong> to cost function<br>
3382
+ 2. Creates proportional gradient: <strong>2λθⱼ</strong><br>
3383
+ 3. Large coefficients shrink MORE, small shrink LESS<br>
3384
+ 4. NO coefficients go exactly to zero<br>
3385
+ 5. <strong>Handles multicollinearity beautifully!</strong><br>
3386
+ 6. Has closed-form solution!<br><br>
3387
+ <strong style="color: #7ef0d4;">Perfect when all features are potentially useful and
3388
+ correlated!</strong>
3389
+ </div>
3390
+ </div>
3391
+ </div>
3392
+
3393
  <div class="figure">
3394
  <div class="figure-placeholder" style="height: 400px">
3395
  <canvas id="regularization-canvas" style="width: 100%; height: 100%;"></canvas>