| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Statistical Machine Learning — University of Piraeus</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> |
| <style> |
| :root { |
| --bg: #EEF3F8; |
| --bg-card: #FFFFFF; |
| --bg-muted: #E2EAF3; |
| --accent-teal: #1D9E75; |
| --accent-teal-light: #E1F5EE; |
| --accent-teal-dark: #0F6E56; |
| --accent-blue: #378ADD; |
| --accent-blue-light: #E6F1FB; |
| --accent-blue-dark: #185FA5; |
| --text-primary: #1C2B3A; |
| --text-secondary: #4A5F74; |
| --text-muted: #8298AE; |
| --border: rgba(28,43,58,0.10); |
| --border-strong: rgba(28,43,58,0.18); |
| --tag-supervised: #E1F5EE; |
| --tag-supervised-text: #0F6E56; |
| --tag-unsupervised: #E6F1FB; |
| --tag-unsupervised-text: #185FA5; |
| --tag-regression: #EEF3F8; |
| --tag-regression-text: #4A5F74; |
| --tag-classification: #FAEEDA; |
| --tag-classification-text: #854F0B; |
| --tag-ensemble: #FBEAF0; |
| --tag-ensemble-text: #72243E; |
| --tag-neural: #EEEDFE; |
| --tag-neural-text: #3C3489; |
| --shadow-sm: 0 1px 3px rgba(28,43,58,0.07), 0 1px 2px rgba(28,43,58,0.05); |
| --shadow-md: 0 4px 12px rgba(28,43,58,0.09), 0 2px 4px rgba(28,43,58,0.06); |
| --shadow-lg: 0 12px 32px rgba(28,43,58,0.11), 0 4px 8px rgba(28,43,58,0.07); |
| } |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| html { scroll-behavior: smooth; } |
| body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } |
| |
| nav { |
| position: sticky; top: 0; z-index: 100; |
| background: rgba(238,243,248,0.90); backdrop-filter: blur(12px); |
| border-bottom: 1px solid var(--border); padding: 0 2.5rem; height: 60px; |
| display: flex; align-items: center; justify-content: space-between; |
| } |
| .nav-brand { display: flex; align-items: center; gap: 10px; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0.04em; } |
| .nav-brand span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-teal); } |
| .nav-links { display: flex; gap: 2rem; list-style: none; } |
| .nav-links a { font-size: 13.5px; font-weight: 400; color: var(--text-secondary); text-decoration: none; transition: color .2s; } |
| .nav-links a:hover { color: var(--accent-teal-dark); } |
| |
| .hero { padding: 6rem 2.5rem 5rem; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 400px; gap: 4rem; align-items: start; } |
| .hero-eyebrow { font-family: 'DM Mono', monospace; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-teal-dark); display: flex; align-items: center; gap: 8px; margin-bottom: 1.4rem; } |
| .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1.5px; background: var(--accent-teal); } |
| .hero h1 { font-family: 'DM Serif Display', serif; font-size: clamp(2.6rem, 4.5vw, 3.6rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 1.4rem; } |
| .hero h1 em { font-style: italic; color: var(--accent-teal-dark); } |
| .hero-desc { font-size: 1.05rem; line-height: 1.75; color: var(--text-secondary); max-width: 520px; margin-bottom: 2.2rem; font-weight: 300; } |
| .hero-instructor { display: flex; flex-direction: column; gap: 3px; margin-bottom: 2rem; padding: 0.9rem 1.1rem; border-left: 2px solid var(--accent-teal); background: var(--accent-teal-light); border-radius: 0 8px 8px 0; } |
| .hero-instructor-label { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-teal-dark); } |
| .hero-instructor-name { font-size: 15px; font-weight: 500; color: var(--text-primary); text-decoration: none; } |
| .hero-instructor-name:hover { color: var(--accent-teal-dark); text-decoration: underline; } |
| .hero-instructor-title { font-size: 12.5px; color: var(--text-secondary); font-weight: 300; } |
| .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } |
| .btn-primary { padding: 11px 24px; background: var(--accent-teal); color: #fff; border: none; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .2s, transform .15s; display: inline-flex; align-items: center; gap: 6px; } |
| .btn-primary:hover { background: var(--accent-teal-dark); transform: translateY(-1px); } |
| .btn-outline { padding: 11px 24px; background: transparent; color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s; display: inline-flex; align-items: center; gap: 6px; } |
| .btn-outline:hover { border-color: var(--accent-teal); color: var(--accent-teal-dark); } |
| |
| .hero-stats-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-lg); position: sticky; top: 80px; } |
| .stats-header { font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 1.2rem; font-family: 'DM Mono', monospace; } |
| .stat-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); } |
| .stat-row:last-child { border-bottom: none; } |
| .stat-label { font-size: 13px; color: var(--text-secondary); } |
| .stat-value { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--text-primary); } |
| .stat-badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; font-weight: 500; } |
| .badge-teal { background: var(--tag-supervised); color: var(--tag-supervised-text); } |
| .badge-blue { background: var(--tag-unsupervised); color: var(--tag-unsupervised-text); } |
| .chart-mini { margin-top: 1.5rem; height: 90px; } |
| |
| .section { padding: 4rem 2.5rem; max-width: 1200px; margin: 0 auto; } |
| .section-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; } |
| .section-title { font-family: 'DM Serif Display', serif; font-size: 1.9rem; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 0.5rem; } |
| .section-sub { font-size: 1rem; color: var(--text-secondary); margin-bottom: 2.5rem; font-weight: 300; max-width: 580px; line-height: 1.7; } |
| .section-divider { max-width: 1200px; margin: 0 auto; border: none; border-top: 1px solid var(--border); } |
| |
| |
| .intro-prose { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 2rem 2.4rem; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; } |
| .intro-prose h3 { font-family: 'DM Serif Display', serif; font-size: 1.1rem; margin-bottom: 0.7rem; color: var(--text-primary); } |
| .intro-prose p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.75; font-weight: 300; } |
| .intro-prose .left-col { border-right: 1px solid var(--border); padding-right: 2.5rem; } |
| .ml-stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 3rem; } |
| .ml-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.3rem; text-align: center; box-shadow: var(--shadow-sm); } |
| .ml-stat-num { font-family: 'DM Serif Display', serif; font-size: 1.9rem; color: var(--accent-teal-dark); line-height: 1; } |
| .ml-stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; } |
| .ml-types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } |
| .ml-type-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.8rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 12px; } |
| .ml-type-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } |
| .ml-type-title { font-family: 'DM Serif Display', serif; font-size: 1.15rem; color: var(--text-primary); } |
| .ml-type-subtitle { font-size: 12px; font-weight: 500; font-family: 'DM Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; } |
| .ml-type-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.65; font-weight: 300; flex: 1; } |
| .ml-type-examples { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--border); } |
| .ml-example-tag { font-size: 11px; padding: 3px 9px; border-radius: 20px; background: var(--bg-muted); color: var(--text-secondary); font-weight: 400; } |
| |
| |
| .models-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } |
| .filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; } |
| .filter-tab { padding: 6px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 500; cursor: pointer; border: 1px solid var(--border-strong); background: transparent; color: var(--text-secondary); font-family: 'Outfit', sans-serif; transition: all .2s; } |
| .filter-tab.active, .filter-tab:hover { background: var(--accent-teal); color: #fff; border-color: var(--accent-teal); } |
| .models-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; } |
| .model-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.6rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; position: relative; overflow: hidden; } |
| .model-card::before { content: ''; position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(135deg, transparent 60%, var(--card-accent, #E1F5EE) 100%); opacity: 0; transition: opacity .3s; } |
| .model-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } |
| .model-card:hover::before { opacity: 1; } |
| .model-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } |
| .model-icon-wrap { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } |
| .model-tags { display: flex; gap: 6px; flex-wrap: wrap; } |
| .tag { font-size: 10.5px; font-weight: 500; padding: 3px 8px; border-radius: 20px; letter-spacing: 0.04em; white-space: nowrap; } |
| .tag-supervised { background: var(--tag-supervised); color: var(--tag-supervised-text); } |
| .tag-unsupervised { background: var(--tag-unsupervised); color: var(--tag-unsupervised-text); } |
| .tag-regression { background: var(--tag-regression); color: var(--tag-regression-text); } |
| .tag-classification { background: var(--tag-classification); color: var(--tag-classification-text); } |
| .tag-ensemble { background: var(--tag-ensemble); color: var(--tag-ensemble-text); } |
| .tag-neural { background: var(--tag-neural); color: var(--tag-neural-text); } |
| .tag-clustering { background: #EAF3DE; color: #3B6D11; } |
| .tag-dimensionality { background: #FAECE7; color: #993C1D; } |
| .model-name { font-family: 'DM Serif Display', serif; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.2; } |
| .model-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; font-weight: 300; flex: 1; } |
| .model-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); } |
| .model-meta { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); } |
| .model-arrow { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-secondary); transition: background .2s, color .2s; } |
| .model-card:hover .model-arrow { background: var(--accent-teal); color: #fff; } |
| .formula-box { background: var(--text-primary); color: #E2EAF3; border-radius: 8px; padding: 10px 14px; font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.5; } |
| .formula-box .kw { color: #9FE1CB; } |
| .formula-box .num { color: #FAC775; } |
| |
| |
| .theory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; margin-bottom: 2.5rem; } |
| .theory-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem; box-shadow: var(--shadow-sm); } |
| .theory-card-icon { font-size: 22px; margin-bottom: 0.7rem; } |
| .theory-card-title { font-weight: 500; margin-bottom: 0.4rem; font-size: 15px; } |
| .theory-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.65; font-weight: 300; } |
| .theory-card-topics { margin-top: 10px; display: flex; gap: 5px; flex-wrap: wrap; } |
| .topic-pill { font-size: 10.5px; padding: 2px 7px; border-radius: 20px; background: var(--bg-muted); color: var(--text-secondary); font-family: 'DM Mono', monospace; } |
| .bv-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 2rem; box-shadow: var(--shadow-sm); } |
| |
| |
| .resources-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } |
| .resource-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.8rem; box-shadow: var(--shadow-sm); } |
| .resource-block-title { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.2rem; } |
| .resource-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } |
| .resource-item:last-child { border-bottom: none; } |
| .resource-num { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); min-width: 20px; padding-top: 2px; } |
| .resource-info { flex: 1; } |
| .resource-title { font-size: 13.5px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; } |
| .resource-meta { font-size: 12px; color: var(--text-muted); font-style: italic; } |
| .resource-link { font-size: 12px; color: var(--accent-blue-dark); text-decoration: none; font-family: 'DM Mono', monospace; } |
| .resource-link:hover { text-decoration: underline; } |
| .syllabus-list { list-style: none; } |
| .syllabus-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); } |
| .syllabus-item:last-child { border-bottom: none; } |
| .syllabus-week { font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--text-muted); min-width: 44px; padding-top: 2px; } |
| .syllabus-topic { font-size: 13px; color: var(--text-primary); font-weight: 400; } |
| .syllabus-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } |
| |
| .footer-wrap { border-top: 1px solid var(--border); padding: 2rem 2.5rem; max-width: 1200px; margin: 4rem auto 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 12px; color: var(--text-muted); font-family: 'DM Mono', monospace; } |
| |
| @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } |
| .fade-up { animation: fadeUp .55s ease both; } |
| .delay-1 { animation-delay: .1s; } |
| .delay-2 { animation-delay: .2s; } |
| .delay-3 { animation-delay: .3s; } |
| .delay-4 { animation-delay: .4s; } |
| |
| |
| .insights-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; } |
| .insight-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1.8rem 2rem; box-shadow: var(--shadow-sm); } |
| .insight-full { grid-column: 1 / -1; } |
| .insight-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.3rem; } |
| .insight-title { font-family: 'DM Serif Display', serif; font-size: 1.05rem; color: var(--text-primary); margin-bottom: 1.2rem; } |
| .insight-chart { position: relative; height: 280px; } |
| .insight-chart-wide { position: relative; height: 230px; } |
| |
| @media (max-width: 960px) { |
| .hero { grid-template-columns: 1fr; } |
| .hero-stats-card { position: static; } |
| .ml-types-grid { grid-template-columns: 1fr; } |
| .intro-prose { grid-template-columns: 1fr; } |
| .intro-prose .left-col { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 1.5rem; } |
| .ml-stats-row { grid-template-columns: repeat(2,1fr); } |
| .resources-grid { grid-template-columns: 1fr; } |
| .insights-grid { grid-template-columns: 1fr; } |
| .insight-full { grid-column: 1; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <nav> |
| <div class="nav-brand"><span></span>SML · MSc Course</div> |
| <ul class="nav-links"> |
| <li><a href="#overview">Overview</a></li> |
| <li><a href="#models">Models</a></li> |
| <li><a href="#theory">Theory</a></li> |
| <li><a href="#resources">Resources</a></li> |
| </ul> |
| </nav> |
|
|
| |
| <div style="max-width:1200px;margin:0 auto;padding:0 2.5rem;"> |
| <div class="hero"> |
| <div> |
| <div class="hero-eyebrow fade-up">Dept. of Statistics & Insurance Science · University of Piraeus</div> |
| <h1 class="fade-up delay-1">Statistical<br><em>Machine Learning</em></h1> |
| <p class="hero-desc fade-up delay-2">A rigorous treatment of probabilistic models, optimization theory, and algorithmic decision-making — from convex loss surfaces to ensemble methods and deep architectures.</p> |
| <div class="hero-instructor fade-up delay-3"> |
| <span class="hero-instructor-label">Course Instructor</span> |
| <a href="https://boa.uop.gr/en/staff-memberen/livieris" target="_blank" class="hero-instructor-name">Ioannis E. Livieris</a> |
| <span class="hero-instructor-title">Associate Professor</span> |
| </div> |
| <div class="hero-cta fade-up delay-4"> |
| <a href="#overview" class="btn-primary">Start Learning →</a> |
| <a href="#resources" class="btn-outline">Course Syllabus</a> |
| </div> |
| </div> |
| <div class="hero-stats-card fade-up delay-4"> |
| <div class="stats-header">Course Overview</div> |
| <div class="stat-row"><span class="stat-label">Department</span><span class="stat-value">Statistics & Ins. Sci.</span></div> |
| <div class="stat-row"><span class="stat-label">ECTS Credits</span><span class="stat-value">6.0</span></div> |
| <div class="stat-row"><span class="stat-label">Supervised Models</span><span class="stat-badge badge-teal">8 algorithms</span></div> |
| <div class="stat-row"><span class="stat-label">Unsupervised Models</span><span class="stat-badge badge-blue">3 algorithms</span></div> |
| <div class="stat-row"><span class="stat-label">Prerequisites</span><span class="stat-value">Linear Algebra · Prob.</span></div> |
| <div class="stat-row"><span class="stat-label">Semester</span><span class="stat-value">2027 – 2028</span></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <hr class="section-divider"> |
| <section id="overview" class="section"> |
| <div class="section-label">Overview</div> |
| <h2 class="section-title">What is Machine Learning?</h2> |
| <p class="section-sub">Machine Learning allows systems to learn autonomously from data — identifying patterns, constructing models, and making decisions without being explicitly programmed for each task.</p> |
|
|
| <div class="intro-prose"> |
| <div class="left-col"> |
| <h3>How machines learn</h3> |
| <p>Just as humans build knowledge from experience, ML algorithms are exposed to data from which they extract features, relationships, and patterns. This acquired structure enables accurate predictions on new, unseen data — and continuous improvement as more data becomes available.</p> |
| </div> |
| <div> |
| <h3>Why it matters</h3> |
| <p>Human analysts face hard limits on the data they can process manually. ML systems operate at arbitrary scale, uncovering structure that would otherwise remain hidden. Applications span self-driving vehicles, fraud detection, medical diagnosis, and recommendation systems at Netflix, Amazon, and YouTube.</p> |
| </div> |
| </div> |
|
|
| <div class="ml-types-grid"> |
| <div class="ml-type-card"> |
| <div class="ml-type-icon" style="background:#E1F5EE;"> |
| <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="9" stroke="#1D9E75" stroke-width="1.8" fill="none"/><polyline points="6,11 10,15 16,7" stroke="#1D9E75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| </div> |
| <div><div class="ml-type-subtitle" style="color:#0F6E56;">01 · Supervised</div><div class="ml-type-title">Supervised Learning</div></div> |
| <p class="ml-type-desc">Trained on <strong style="font-weight:500;">labeled data</strong> — each input is paired with the correct output. The model learns a mapping and generalizes to new examples. Covers both <em>classification</em> (discrete targets) and <em>regression</em> (continuous targets).</p> |
| <div class="ml-type-examples"><span class="ml-example-tag">Random Forest</span><span class="ml-example-tag">Logistic Regression</span><span class="ml-example-tag">SVM</span><span class="ml-example-tag">XGBoost</span><span class="ml-example-tag">ANN</span></div> |
| </div> |
| <div class="ml-type-card"> |
| <div class="ml-type-icon" style="background:#E6F1FB;"> |
| <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="6" cy="6" r="2.5" fill="#378ADD" opacity=".5"/><circle cx="5" cy="10" r="2.5" fill="#378ADD" opacity=".7"/><circle cx="8" cy="14" r="2.5" fill="#378ADD"/><circle cx="15" cy="5" r="2.5" fill="#1D9E75" opacity=".5"/><circle cx="17" cy="9" r="2.5" fill="#1D9E75"/><circle cx="14" cy="13" r="2.5" fill="#1D9E75" opacity=".7"/></svg> |
| </div> |
| <div><div class="ml-type-subtitle" style="color:#185FA5;">02 · Unsupervised</div><div class="ml-type-title">Unsupervised Learning</div></div> |
| <p class="ml-type-desc">Works on <strong style="font-weight:500;">unlabeled data</strong>, discovering hidden structures autonomously. No human labeling required, enabling the algorithm to scale to terabytes of raw data. Representations adapt dynamically post-deployment.</p> |
| <div class="ml-type-examples"><span class="ml-example-tag">k-Means</span><span class="ml-example-tag">PCA</span><span class="ml-example-tag">DBSCAN</span><span class="ml-example-tag">Association Rules</span></div> |
| </div> |
| <div class="ml-type-card"> |
| <div class="ml-type-icon" style="background:#FAEEDA;"> |
| <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="4" fill="#BA7517" opacity=".15"/><circle cx="11" cy="11" r="2" fill="#BA7517"/><path d="M11 3 C15 3 19 7 19 11" stroke="#BA7517" stroke-width="1.8" stroke-linecap="round" fill="none"/><path d="M19 11 C19 15 15 19 11 19 C7 19 3 15 3 11 C3 7 7 3 11 3" stroke="#BA7517" stroke-width="1" stroke-dasharray="2.5,2" fill="none"/><polyline points="17,8 19,11 22,10" stroke="#BA7517" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| </div> |
| <div><div class="ml-type-subtitle" style="color:#854F0B;">03 · Reinforcement</div><div class="ml-type-title">Reinforcement Learning</div></div> |
| <p class="ml-type-desc">An agent interacts with an environment via a <strong style="font-weight:500;">reward signal</strong>. Favorable actions are reinforced; unfavorable ones penalized. The algorithm iterates via trial-and-error until it discovers the optimal policy.</p> |
| <div class="ml-type-examples"><span class="ml-example-tag">Q-Learning</span><span class="ml-example-tag">Policy Gradient</span><span class="ml-example-tag">Actor-Critic</span></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <hr class="section-divider"> |
| <section id="models" class="section"> |
| <div class="models-header"> |
| <div> |
| <div class="section-label">Algorithms</div> |
| <h2 class="section-title">ML Models</h2> |
| <p class="section-sub">Select any model to explore its theory, interactive visualizations, and real-world applications.</p> |
| </div> |
| <div class="filter-tabs"> |
| <button class="filter-tab active" onclick="filterModels('all',this)">All</button> |
| <button class="filter-tab" onclick="filterModels('supervised',this)">Supervised</button> |
| <button class="filter-tab" onclick="filterModels('unsupervised',this)">Unsupervised</button> |
| <button class="filter-tab" onclick="filterModels('regression',this)">Regression</button> |
| <button class="filter-tab" onclick="filterModels('classification',this)">Classification</button> |
| <button class="filter-tab" onclick="filterModels('ensemble',this)">Ensemble</button> |
| </div> |
| </div> |
| <div class="models-grid" id="modelsGrid"> |
|
|
| <a class="model-card" href="/linear-regression" data-tags="supervised regression" style="--card-accent:#E1F5EE;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#E1F5EE;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><polyline points="2,22 8,14 14,16 22,4" stroke="#1D9E75" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><line x1="2" y1="22" x2="24" y2="5" stroke="#0F6E56" stroke-width="1.4" stroke-dasharray="3,2"/></svg></div><div class="model-tags"><span class="tag tag-supervised">Supervised</span><span class="tag tag-regression">Regression</span></div></div> |
| <div><div class="model-name">Linear Regression</div><p class="model-desc">Estimates a continuous output by fitting the best-fit hyperplane, minimizing MSE. Fully interpretable — each β quantifies the exact linear contribution of a feature.</p></div> |
| <div class="formula-box">ŷ = <span class="kw">β₀</span> + <span class="kw">β₁</span>x₁ + … + <span class="kw">βₙ</span>xₙ</div> |
| <div class="model-card-footer"><span class="model-meta">MSE · Normal Eq.</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="/logistic-regression" data-tags="supervised classification" style="--card-accent:#FAEEDA;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#FAEEDA;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M2,20 Q5,20 8,13 Q11,6 14,13 Q17,20 20,13 Q22,8 24,8" stroke="#BA7517" stroke-width="2.2" stroke-linecap="round" fill="none"/><line x1="2" y1="13" x2="24" y2="13" stroke="#BA7517" stroke-width="1" stroke-dasharray="2,2" opacity=".4"/></svg></div><div class="model-tags"><span class="tag tag-supervised">Supervised</span><span class="tag tag-classification">Classification</span></div></div> |
| <div><div class="model-name">Logistic Regression</div><p class="model-desc">Probabilistic binary classifier using the sigmoid function to map linear combinations to [0,1]. Decision boundary is a hyperplane; trained via maximum likelihood.</p></div> |
| <div class="formula-box">σ(z) = <span class="num">1</span> / (<span class="num">1</span> + e<sup>−z</sup>)</div> |
| <div class="model-card-footer"><span class="model-meta">Cross-Entropy · MLE</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="knn.html" data-tags="supervised classification regression" style="--card-accent:#E6F1FB;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#E6F1FB;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="13" r="3.5" fill="#378ADD"/><circle cx="5" cy="8" r="2.5" fill="#85B7EB"/><circle cx="20" cy="7" r="2.5" fill="#85B7EB"/><circle cx="7" cy="20" r="2.5" fill="#85B7EB"/><line x1="13" y1="13" x2="5" y2="8" stroke="#378ADD" stroke-width="1.2" stroke-dasharray="2,1.5"/><line x1="13" y1="13" x2="20" y2="7" stroke="#378ADD" stroke-width="1.2" stroke-dasharray="2,1.5"/><line x1="13" y1="13" x2="7" y2="20" stroke="#378ADD" stroke-width="1.2" stroke-dasharray="2,1.5"/><circle cx="13" cy="13" r="6.5" stroke="#378ADD" stroke-width="1" fill="none" opacity=".3"/></svg></div><div class="model-tags"><span class="tag tag-supervised">Supervised</span><span class="tag tag-classification">Classification</span></div></div> |
| <div><div class="model-name">k-Nearest Neighbors</div><p class="model-desc">Non-parametric instance-based learner. Classifies by majority vote among k nearest neighbors. No training phase — all computation deferred to query time.</p></div> |
| <div class="formula-box">d(x,y) = √<span class="kw">Σ</span>(xᵢ−yᵢ)<span class="num">²</span></div> |
| <div class="model-card-footer"><span class="model-meta">Euclidean · Lazy Learner</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="svm.html" data-tags="supervised classification regression" style="--card-accent:#EEEDFE;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#EEEDFE;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><line x1="13" y1="2" x2="13" y2="24" stroke="#534AB7" stroke-width="2" stroke-linecap="round"/><line x1="7" y1="2" x2="7" y2="24" stroke="#AFA9EC" stroke-width="1" stroke-dasharray="3,2"/><line x1="19" y1="2" x2="19" y2="24" stroke="#AFA9EC" stroke-width="1" stroke-dasharray="3,2"/><circle cx="5" cy="7" r="2.5" fill="#534AB7"/><circle cx="4" cy="15" r="2.5" fill="#534AB7"/><circle cx="21" cy="10" r="2.5" fill="#9FE1CB"/><circle cx="22" cy="18" r="2.5" fill="#9FE1CB"/></svg></div><div class="model-tags"><span class="tag tag-supervised">Supervised</span><span class="tag tag-classification">Classification</span></div></div> |
| <div><div class="model-name">Support Vector Machine</div><p class="model-desc">Finds the maximum-margin hyperplane separating classes. Kernel trick extends to non-linear boundaries. Dual formulation leads to sparse support vector solutions.</p></div> |
| <div class="formula-box">max <span class="kw">2/‖w‖</span> s.t. yᵢ(wᵀxᵢ+b)≥<span class="num">1</span></div> |
| <div class="model-card-footer"><span class="model-meta">Hinge Loss · Kernel Trick</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="decision_tree.html" data-tags="supervised classification regression" style="--card-accent:#EAF3DE;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#EAF3DE;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="4" r="2.5" fill="#639922"/><circle cx="7" cy="13" r="2.5" fill="#639922"/><circle cx="19" cy="13" r="2.5" fill="#639922"/><rect x="4" y="20" width="6" height="4" rx="1.5" fill="#97C459"/><rect x="10" y="20" width="6" height="4" rx="1.5" fill="#97C459"/><rect x="16" y="20" width="6" height="4" rx="1.5" fill="#97C459"/><line x1="13" y1="6.5" x2="8.5" y2="10.5" stroke="#639922" stroke-width="1.5"/><line x1="13" y1="6.5" x2="17.5" y2="10.5" stroke="#639922" stroke-width="1.5"/><line x1="7" y1="15.5" x2="6" y2="19.5" stroke="#97C459" stroke-width="1.2"/><line x1="7" y1="15.5" x2="11" y2="19.5" stroke="#97C459" stroke-width="1.2"/><line x1="19" y1="15.5" x2="18" y2="19.5" stroke="#97C459" stroke-width="1.2"/></svg></div><div class="model-tags"><span class="tag tag-supervised">Supervised</span><span class="tag tag-classification">Classification</span></div></div> |
| <div><div class="model-name">Decision Tree</div><p class="model-desc">Recursive axis-aligned partitioning of feature space. Splits chosen to maximize information gain (ID3) or minimize Gini impurity (CART). Interpretable; prone to overfitting.</p></div> |
| <div class="formula-box">Gini = <span class="num">1</span> − <span class="kw">Σ</span> pₖ²</div> |
| <div class="model-card-footer"><span class="model-meta">Gini / Entropy · CART</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="random_forest.html" data-tags="supervised ensemble classification regression" style="--card-accent:#EAF3DE;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#EAF3DE;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="5" cy="5" r="2" fill="#3B6D11" opacity=".6"/><circle cx="13" cy="3" r="2" fill="#3B6D11"/><circle cx="21" cy="5" r="2" fill="#3B6D11" opacity=".6"/><path d="M5,7 L5,14" stroke="#3B6D11" stroke-width="1.5" opacity=".5"/><path d="M13,5 L13,14" stroke="#3B6D11" stroke-width="1.5"/><path d="M21,7 L21,14" stroke="#3B6D11" stroke-width="1.5" opacity=".5"/><rect x="2" y="14" width="22" height="6" rx="3" fill="#C0DD97"/><text x="13" y="19.5" text-anchor="middle" font-size="6" fill="#3B6D11" font-family="monospace" font-weight="600">VOTE</text></svg></div><div class="model-tags"><span class="tag tag-ensemble">Ensemble</span><span class="tag tag-classification">Classification</span></div></div> |
| <div><div class="model-name">Random Forest</div><p class="model-desc">Bagging ensemble of decision trees with random feature subsampling. Reduces variance via averaging. Provides feature importance scores. Robust to outliers and high-dimensional data.</p></div> |
| <div class="formula-box">ŷ = <span class="kw">mode</span>{T₁(x), …, T<span class="num">B</span>(x)}</div> |
| <div class="model-card-footer"><span class="model-meta">Bagging · OOB Error</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="xgboost.html" data-tags="supervised ensemble classification regression" style="--card-accent:#FAEEDA;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#FAEEDA;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><rect x="3" y="18" width="4" height="6" rx="1" fill="#BA7517"/><rect x="9" y="13" width="4" height="11" rx="1" fill="#EF9F27"/><rect x="15" y="8" width="4" height="16" rx="1" fill="#BA7517"/><rect x="21" y="3" width="4" height="21" rx="1" fill="#854F0B"/><polyline points="5,17 11,12 17,7 23,2" stroke="#412402" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div><div class="model-tags"><span class="tag tag-ensemble">Ensemble</span><span class="tag tag-classification">Boosting</span></div></div> |
| <div><div class="model-name">XGBoost</div><p class="model-desc">Gradient-boosted trees with L1/L2 regularization, column subsampling, and second-order Taylor expansion of the loss. Industry-standard for tabular data competitions.</p></div> |
| <div class="formula-box">F<span class="num">m</span>(x) = F<span class="num">m−1</span>(x) + <span class="kw">η</span>·h<span class="num">m</span>(x)</div> |
| <div class="model-card-footer"><span class="model-meta">Gradient Boosting · GBDT</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="naive_bayes.html" data-tags="supervised classification" style="--card-accent:#FBEAF0;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#FBEAF0;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="9" r="5" stroke="#D4537E" stroke-width="2" fill="none"/><circle cx="7" cy="19" r="4" stroke="#D4537E" stroke-width="1.5" fill="none" opacity=".5"/><circle cx="19" cy="19" r="4" stroke="#D4537E" stroke-width="1.5" fill="none" opacity=".5"/><path d="M9,13 C9,16 7,19 7,19" stroke="#D4537E" stroke-width="1" opacity=".6"/><path d="M17,13 C17,16 19,19 19,19" stroke="#D4537E" stroke-width="1" opacity=".6"/></svg></div><div class="model-tags"><span class="tag tag-supervised">Supervised</span><span class="tag tag-classification">Probabilistic</span></div></div> |
| <div><div class="model-name">Naïve Bayes</div><p class="model-desc">Probabilistic classifier based on Bayes' theorem with conditional independence assumption. Extremely fast; works well on text and high-dimensional sparse data.</p></div> |
| <div class="formula-box">P(y|x) ∝ P(y)<span class="kw">Π</span>P(xᵢ|y)</div> |
| <div class="model-card-footer"><span class="model-meta">Bayes Theorem · MAP</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="ann.html" data-tags="supervised neural classification regression" style="--card-accent:#EEEDFE;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#EEEDFE;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="4" cy="8" r="2.5" fill="#7F77DD"/><circle cx="4" cy="14" r="2.5" fill="#7F77DD"/><circle cx="4" cy="20" r="2.5" fill="#7F77DD"/><circle cx="13" cy="6" r="2.5" fill="#534AB7"/><circle cx="13" cy="13" r="2.5" fill="#534AB7"/><circle cx="13" cy="20" r="2.5" fill="#534AB7"/><circle cx="22" cy="13" r="2.5" fill="#3C3489"/><line x1="6.5" y1="8" x2="10.5" y2="6.5" stroke="#AFA9EC" stroke-width="0.8"/><line x1="6.5" y1="14" x2="10.5" y2="13" stroke="#AFA9EC" stroke-width="0.8"/><line x1="6.5" y1="20" x2="10.5" y2="20" stroke="#AFA9EC" stroke-width="0.8"/><line x1="6.5" y1="8" x2="10.5" y2="13" stroke="#AFA9EC" stroke-width="0.8" opacity=".5"/><line x1="15.5" y1="6" x2="19.5" y2="13" stroke="#7F77DD" stroke-width="0.8"/><line x1="15.5" y1="13" x2="19.5" y2="13" stroke="#7F77DD" stroke-width="0.8"/><line x1="15.5" y1="20" x2="19.5" y2="13" stroke="#7F77DD" stroke-width="0.8"/></svg></div><div class="model-tags"><span class="tag tag-neural">Neural Net</span><span class="tag tag-supervised">Supervised</span></div></div> |
| <div><div class="model-name">Artificial Neural Network</div><p class="model-desc">Layered composition of parameterized non-linear transformations. Trained via backpropagation and gradient descent. Universal approximator; foundation of deep learning.</p></div> |
| <div class="formula-box">a<sup>(l)</sup> = <span class="kw">σ</span>(W<sup>(l)</sup>a<sup>(l−1)</sup> + b<sup>(l)</sup>)</div> |
| <div class="model-card-footer"><span class="model-meta">Backprop · SGD</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="kmeans.html" data-tags="unsupervised clustering" style="--card-accent:#E6F1FB;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#E6F1FB;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="8" cy="8" r="3" fill="#378ADD" opacity=".25"/><circle cx="7" cy="7" r="1.5" fill="#378ADD"/><circle cx="9" cy="10" r="1.5" fill="#378ADD"/><circle cx="5" cy="9" r="1.5" fill="#378ADD" opacity=".7"/><circle cx="18" cy="7" r="3" fill="#1D9E75" opacity=".25"/><circle cx="17" cy="6" r="1.5" fill="#1D9E75"/><circle cx="19" cy="9" r="1.5" fill="#1D9E75"/><circle cx="18" cy="18" r="3" fill="#D4537E" opacity=".25"/><circle cx="17" cy="17" r="1.5" fill="#D4537E"/><circle cx="19" cy="19" r="1.5" fill="#D4537E" opacity=".7"/></svg></div><div class="model-tags"><span class="tag tag-unsupervised">Unsupervised</span><span class="tag tag-clustering">Clustering</span></div></div> |
| <div><div class="model-name">k-Means Clustering</div><p class="model-desc">Iterative algorithm partitioning data into k clusters by alternating assignment and centroid update steps. Minimizes within-cluster sum of squared distances (inertia).</p></div> |
| <div class="formula-box">J = <span class="kw">Σ</span><span class="num">Σ</span>‖x − μₖ‖²</div> |
| <div class="model-card-footer"><span class="model-meta">Lloyd's Alg. · Inertia</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| <a class="model-card" href="pca.html" data-tags="unsupervised dimensionality" style="--card-accent:#FAECE7;"> |
| <div class="model-card-top"><div class="model-icon-wrap" style="background:#FAECE7;"><svg width="26" height="26" viewBox="0 0 26 26" fill="none"><ellipse cx="13" cy="13" rx="10" ry="5" stroke="#D85A30" stroke-width="1.5" fill="none" transform="rotate(-35 13 13)"/><line x1="3" y1="20" x2="23" y2="6" stroke="#993C1D" stroke-width="2" stroke-linecap="round"/><circle cx="8" cy="9" r="1.5" fill="#D85A30" opacity=".6"/><circle cx="11" cy="15" r="1.5" fill="#D85A30" opacity=".6"/><circle cx="16" cy="11" r="1.5" fill="#D85A30" opacity=".6"/><circle cx="18" cy="17" r="1.5" fill="#D85A30" opacity=".6"/><circle cx="14" cy="7" r="1.5" fill="#D85A30" opacity=".6"/></svg></div><div class="model-tags"><span class="tag tag-unsupervised">Unsupervised</span><span class="tag tag-dimensionality">Dim. Reduction</span></div></div> |
| <div><div class="model-name">Principal Component Analysis</div><p class="model-desc">Linear orthogonal projection that maximizes variance. Computes eigenvectors of the covariance matrix. Foundation of dimensionality reduction, noise filtering, and feature extraction.</p></div> |
| <div class="formula-box">C = <span class="kw">XᵀX</span>/(n−1), Cv = <span class="num">λ</span>v</div> |
| <div class="model-card-footer"><span class="model-meta">SVD · Eigendecomposition</span><span class="model-arrow">→</span></div> |
| </a> |
|
|
| </div> |
| </section> |
|
|
| |
| <hr class="section-divider"> |
| <section class="section"> |
| <div class="section-label">Algorithm Landscape</div> |
| <h2 class="section-title">Comparing the Models</h2> |
| <p class="section-sub">Three perspectives on all 11 algorithms — their computational and explanatory footprint, how they cluster into families, and how much labeled data each one needs to learn effectively.</p> |
|
|
| <div class="insights-grid"> |
| <div class="insight-card"> |
| <div class="insight-label">Scatter Plot</div> |
| <div class="insight-title">Complexity vs. Interpretability</div> |
| <div class="insight-chart"> |
| <canvas id="scatterChart"></canvas> |
| </div> |
| </div> |
| <div class="insight-card"> |
| <div class="insight-label">Donut Chart</div> |
| <div class="insight-title">Distribution by Category</div> |
| <div class="insight-chart"> |
| <canvas id="donutChart"></canvas> |
| </div> |
| </div> |
| <div class="insight-card insight-full"> |
| <div class="insight-label">Bar Chart</div> |
| <div class="insight-title">Minimum Training Data Requirements</div> |
| <div class="insight-chart-wide"> |
| <canvas id="dataReqChart"></canvas> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <hr class="section-divider"> |
| <section id="theory" class="section"> |
| <div class="section-label">Theory</div> |
| <h2 class="section-title">Mathematical Foundations</h2> |
| <p class="section-sub">Core concepts from optimization, probability, and statistical learning theory that underpin every algorithm in the course.</p> |
|
|
| <div class="theory-grid"> |
| <div class="theory-card"> |
| <div class="theory-card-icon">📐</div> |
| <div class="theory-card-title">Optimization Theory</div> |
| <p class="theory-card-desc">Gradient descent, SGD, momentum, and Adam. Convexity conditions, Lagrangian relaxation, and KKT optimality conditions for constrained problems.</p> |
| <div class="theory-card-topics"><span class="topic-pill">GD / SGD</span><span class="topic-pill">Adam</span><span class="topic-pill">KKT</span><span class="topic-pill">Convexity</span></div> |
| </div> |
| <div class="theory-card"> |
| <div class="theory-card-icon">🎲</div> |
| <div class="theory-card-title">Probabilistic Models</div> |
| <p class="theory-card-desc">Maximum Likelihood Estimation, MAP inference, Bayesian reasoning, conjugate priors, and posterior predictive distributions.</p> |
| <div class="theory-card-topics"><span class="topic-pill">MLE</span><span class="topic-pill">MAP</span><span class="topic-pill">Bayesian</span><span class="topic-pill">Priors</span></div> |
| </div> |
| <div class="theory-card"> |
| <div class="theory-card-icon">🎯</div> |
| <div class="theory-card-title">Generalization Theory</div> |
| <p class="theory-card-desc">VC dimension, PAC learning framework, L1/L2 regularization, cross-validation strategies, and the bias-variance decomposition of generalization error.</p> |
| <div class="theory-card-topics"><span class="topic-pill">VC Dim.</span><span class="topic-pill">PAC</span><span class="topic-pill">L1/L2 Reg.</span><span class="topic-pill">CV</span></div> |
| </div> |
| <div class="theory-card"> |
| <div class="theory-card-icon">🔬</div> |
| <div class="theory-card-title">Kernel Methods</div> |
| <p class="theory-card-desc">The kernel trick, Reproducing Kernel Hilbert Spaces, Mercer's theorem, and standard kernels: RBF, polynomial, and sigmoid.</p> |
| <div class="theory-card-topics"><span class="topic-pill">RKHS</span><span class="topic-pill">RBF</span><span class="topic-pill">Mercer</span><span class="topic-pill">Gram Matrix</span></div> |
| </div> |
| <div class="theory-card"> |
| <div class="theory-card-icon">🌲</div> |
| <div class="theory-card-title">Ensemble Methods</div> |
| <p class="theory-card-desc">Bagging and boosting theory: bias-variance reduction, AdaBoost convergence, gradient boosting as functional gradient descent.</p> |
| <div class="theory-card-topics"><span class="topic-pill">Bagging</span><span class="topic-pill">Boosting</span><span class="topic-pill">AdaBoost</span><span class="topic-pill">GBDT</span></div> |
| </div> |
| <div class="theory-card"> |
| <div class="theory-card-icon">🔢</div> |
| <div class="theory-card-title">Matrix Decompositions</div> |
| <p class="theory-card-desc">Eigendecomposition, SVD, and their application to dimensionality reduction, pseudo-inverses, and covariance geometry.</p> |
| <div class="theory-card-topics"><span class="topic-pill">SVD</span><span class="topic-pill">Eigen</span><span class="topic-pill">PCA</span><span class="topic-pill">Covariance</span></div> |
| </div> |
| </div> |
|
|
| <div class="bv-card"> |
| <div class="section-label" style="margin-bottom:.5rem;">Key Concept</div> |
| <h3 style="font-family:'DM Serif Display',serif; font-size:1.25rem; margin-bottom:.4rem;">Bias–Variance Tradeoff</h3> |
| <p style="font-size:13px; color:var(--text-secondary); margin-bottom:1.4rem; font-weight:300; line-height:1.7;">Total expected error decomposes as <strong style="font-weight:500;">Bias² + Variance + Irreducible Noise</strong>. Simple models underfit (high bias); complex models overfit (high variance). Optimal complexity sits at the minimum of total error.</p> |
| <canvas id="biasVariance" width="400" height="200"></canvas> |
| </div> |
| </section> |
|
|
| |
| <hr class="section-divider"> |
| <section id="resources" class="section"> |
| <div class="section-label">Resources</div> |
| <h2 class="section-title">Course Material</h2> |
| <p class="section-sub">Textbooks, lecture notes, useful links, and the full semester syllabus.</p> |
|
|
| <div class="resources-grid"> |
| <div class="resource-block"> |
| <div class="resource-block-title">📚 Bibliography</div> |
| <div class="resource-item"><span class="resource-num">01</span><div class="resource-info"><div class="resource-title">Pattern Recognition and Machine Learning</div><div class="resource-meta">Bishop, C.M. (2006) · Springer</div></div></div> |
| <div class="resource-item"><span class="resource-num">02</span><div class="resource-info"><div class="resource-title">The Elements of Statistical Learning</div><div class="resource-meta">Hastie, Tibshirani & Friedman (2009) · Springer</div></div></div> |
| <div class="resource-item"><span class="resource-num">03</span><div class="resource-info"><div class="resource-title">An Introduction to Statistical Learning</div><div class="resource-meta">James, Witten, Hastie & Tibshirani (2021) · Springer</div></div></div> |
| <div class="resource-item"><span class="resource-num">04</span><div class="resource-info"><div class="resource-title">Understanding Machine Learning: From Theory to Algorithms</div><div class="resource-meta">Shalev-Shwartz & Ben-David (2014) · Cambridge</div></div></div> |
| </div> |
|
|
| <div class="resource-block"> |
| <div class="resource-block-title">🔗 Useful Links</div> |
| <div class="resource-item"><span class="resource-num">→</span><div class="resource-info"><div class="resource-title">scikit-learn Documentation</div><div class="resource-meta">Python ML library — API reference & user guide</div><a class="resource-link" href="https://scikit-learn.org/stable/" target="_blank">scikit-learn.org ↗</a></div></div> |
| <div class="resource-item"><span class="resource-num">→</span><div class="resource-info"><div class="resource-title">Kaggle Learn</div><div class="resource-meta">Free micro-courses and competitions for practice</div><a class="resource-link" href="https://www.kaggle.com/learn" target="_blank">kaggle.com/learn ↗</a></div></div> |
| <div class="resource-item"><span class="resource-num">→</span><div class="resource-info"><div class="resource-title">StatQuest with Josh Starmer</div><div class="resource-meta">Intuitive video explanations of ML algorithms</div><a class="resource-link" href="https://www.youtube.com/@statquest" target="_blank">youtube.com/@statquest ↗</a></div></div> |
| <div class="resource-item"><span class="resource-num">→</span><div class="resource-info"><div class="resource-title">Distill.pub</div><div class="resource-meta">Interactive, peer-reviewed ML research articles</div><a class="resource-link" href="https://distill.pub" target="_blank">distill.pub ↗</a></div></div> |
| </div> |
|
|
| <div class="resource-block"> |
| <div class="resource-block-title">📄 Lecture Notes & Slides</div> |
| <div class="resource-item"><span class="resource-num">W1</span><div class="resource-info"><div class="resource-title">Introduction to Statistical Learning</div><div class="resource-meta">PDF — upload coming soon</div></div></div> |
| <div class="resource-item"><span class="resource-num">W2</span><div class="resource-info"><div class="resource-title">Linear & Logistic Regression</div><div class="resource-meta">PDF — upload coming soon</div></div></div> |
| <div class="resource-item"><span class="resource-num">W3</span><div class="resource-info"><div class="resource-title">Decision Trees & Ensemble Methods</div><div class="resource-meta">PDF — upload coming soon</div></div></div> |
| <div class="resource-item"><span class="resource-num">W4</span><div class="resource-info"><div class="resource-title">Neural Networks & Backpropagation</div><div class="resource-meta">PDF — upload coming soon</div></div></div> |
| </div> |
|
|
| <div class="resource-block"> |
| <div class="resource-block-title">🗓 Semester Syllabus</div> |
| <ul class="syllabus-list"> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 1</span><div><div class="syllabus-topic">Introduction to ML</div><div class="syllabus-sub">Paradigms, applications, course structure</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 2</span><div><div class="syllabus-topic">Linear & Logistic Regression</div><div class="syllabus-sub">MLE, gradient descent, regularization</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 3</span><div><div class="syllabus-topic">k-NN & Naive Bayes</div><div class="syllabus-sub">Instance-based learning, probabilistic classifiers</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 4</span><div><div class="syllabus-topic">Support Vector Machines</div><div class="syllabus-sub">Maximum margin, kernel trick, dual problem</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 5</span><div><div class="syllabus-topic">Decision Trees & Random Forest</div><div class="syllabus-sub">CART, information gain, bagging</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 6</span><div><div class="syllabus-topic">Boosting & XGBoost</div><div class="syllabus-sub">AdaBoost, gradient boosting, regularization</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 7</span><div><div class="syllabus-topic">Neural Networks</div><div class="syllabus-sub">Backpropagation, activations, deep learning intro</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 8</span><div><div class="syllabus-topic">Unsupervised: k-Means & PCA</div><div class="syllabus-sub">Clustering, eigendecomposition, applications</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 9</span><div><div class="syllabus-topic">Model Evaluation & Selection</div><div class="syllabus-sub">CV, AUC-ROC, bias-variance, generalization</div></div></li> |
| <li class="syllabus-item"><span class="syllabus-week">Wk 10</span><div><div class="syllabus-topic">Project Presentations</div><div class="syllabus-sub">Applied ML project · peer review</div></div></li> |
| </ul> |
| </div> |
| </div> |
| </section> |
|
|
| <div class="footer-wrap"> |
| <span>Statistical Machine Learning · Dept. of Statistics & Insurance Science · University of Piraeus · 2024–25</span> |
| <span>Interactive study material</span> |
| </div> |
|
|
| <script> |
| function filterModels(tag, btn) { |
| document.querySelectorAll('.filter-tab').forEach(b => b.classList.remove('active')); |
| btn.classList.add('active'); |
| document.querySelectorAll('.model-card').forEach(card => { |
| const tags = card.dataset.tags || ''; |
| card.style.display = (tag === 'all' || tags.includes(tag)) ? '' : 'none'; |
| }); |
| } |
| Chart.defaults.font.family = "'DM Mono', monospace"; |
| Chart.defaults.color = '#8298AE'; |
| const xs = Array.from({length: 60}, (_,i) => i/6); |
| const bias2 = xs.map(x => 4 * Math.exp(-0.35*x)); |
| const variance = xs.map(x => 0.08 * Math.pow(x, 2.2)); |
| const total = xs.map((_,i) => bias2[i] + variance[i] + 0.4); |
| new Chart(document.getElementById('biasVariance'), { |
| type: 'line', |
| data: { labels: xs.map(x => x.toFixed(1)), datasets: [ |
| { label: 'Bias²', data: bias2, borderColor: '#D85A30', borderWidth: 2.2, fill: false, pointRadius: 0, tension: 0.4 }, |
| { label: 'Variance', data: variance, borderColor: '#378ADD', borderWidth: 2.2, fill: false, pointRadius: 0, tension: 0.4 }, |
| { label: 'Total Error', data: total, borderColor: '#1C2B3A', borderWidth: 2.5, fill: false, pointRadius: 0, tension: 0.4 } |
| ]}, |
| options: { responsive: true, maintainAspectRatio: true, plugins: { legend: { position: 'top', labels: { font: { size: 12 }, padding: 16, boxWidth: 14 } } }, scales: { x: { title: { display: true, text: 'Model Complexity →', font: { size: 11 } }, grid: { color: 'rgba(28,43,58,0.05)' }, ticks: { maxTicksLimit: 8 } }, y: { title: { display: true, text: 'Error', font: { size: 11 } }, grid: { color: 'rgba(28,43,58,0.05)' }, min: 0 } } } |
| }); |
| |
| const scatterModels = [ |
| { short:'LinReg', full:'Linear Regression', x:1.0, y:10.0, c:'#1D9E75' }, |
| { short:'LogReg', full:'Logistic Regression', x:2.0, y:8.5, c:'#0F6E56' }, |
| { short:'NB', full:'Naïve Bayes', x:1.8, y:7.0, c:'#D4537E' }, |
| { short:'DTree', full:'Decision Tree', x:3.2, y:8.8, c:'#639922' }, |
| { short:'kNN', full:'k-Nearest Neighbors', x:4.0, y:6.5, c:'#378ADD' }, |
| { short:'kMeans', full:'k-Means Clustering', x:3.5, y:5.0, c:'#185FA5' }, |
| { short:'PCA', full:'PCA', x:4.5, y:4.5, c:'#D85A30' }, |
| { short:'RF', full:'Random Forest', x:6.5, y:5.5, c:'#3B6D11' }, |
| { short:'SVM', full:'SVM', x:7.0, y:3.5, c:'#534AB7' }, |
| { short:'XGB', full:'XGBoost', x:8.5, y:2.5, c:'#BA7517' }, |
| { short:'ANN', full:'Neural Network', x:9.5, y:1.5, c:'#7F77DD' }, |
| ]; |
| const scatterLabelPlugin = { |
| id: 'scatterLabels', |
| afterDatasetsDraw(chart) { |
| if (chart.canvas.id !== 'scatterChart') return; |
| const ctx = chart.ctx; |
| const meta = chart.getDatasetMeta(0); |
| ctx.save(); |
| meta.data.forEach((pt, i) => { |
| const m = scatterModels[i]; |
| const nearRight = pt.x > chart.chartArea.right - 70; |
| ctx.font = "500 9px 'DM Mono', monospace"; |
| ctx.fillStyle = m.c; |
| ctx.textAlign = nearRight ? 'right' : 'left'; |
| ctx.fillText(m.short, pt.x + (nearRight ? -12 : 12), pt.y - 10); |
| }); |
| ctx.restore(); |
| } |
| }; |
| new Chart(document.getElementById('scatterChart'), { |
| type: 'scatter', |
| plugins: [scatterLabelPlugin], |
| data: { |
| datasets: [{ |
| data: scatterModels.map(m => ({ x: m.x, y: m.y })), |
| backgroundColor: scatterModels.map(m => m.c + 'BB'), |
| borderColor: scatterModels.map(m => m.c), |
| borderWidth: 1.5, |
| pointRadius: 8, |
| pointHoverRadius: 11, |
| }] |
| }, |
| options: { |
| responsive: true, maintainAspectRatio: false, |
| plugins: { |
| legend: { display: false }, |
| tooltip: { |
| callbacks: { |
| label: ctx => ` ${scatterModels[ctx.dataIndex].full}`, |
| afterLabel: ctx => { |
| const m = scatterModels[ctx.dataIndex]; |
| return [`Complexity: ${m.x}/10`, `Interpretability: ${m.y}/10`]; |
| } |
| } |
| } |
| }, |
| scales: { |
| x: { title: { display: true, text: 'Complexity →', font: { size: 11 } }, min: 0, max: 11, grid: { color: 'rgba(28,43,58,0.05)' }, ticks: { maxTicksLimit: 6 } }, |
| y: { title: { display: true, text: 'Interpretability →', font: { size: 11 } }, min: 0, max: 11, grid: { color: 'rgba(28,43,58,0.05)' }, ticks: { maxTicksLimit: 6 } } |
| } |
| } |
| }); |
| new Chart(document.getElementById('donutChart'), { |
| type: 'doughnut', |
| data: { |
| labels: ['Classification', 'Ensemble', 'Regression', 'Clustering', 'Dim. Reduction', 'Neural Net'], |
| datasets: [{ |
| data: [5, 2, 1, 1, 1, 1], |
| backgroundColor: ['#BA7517','#D4537E','#1D9E75','#378ADD','#D85A30','#7F77DD'], |
| borderColor: '#fff', |
| borderWidth: 3, |
| hoverOffset: 6, |
| }] |
| }, |
| options: { |
| responsive: true, maintainAspectRatio: false, |
| cutout: '62%', |
| plugins: { |
| legend: { position: 'bottom', labels: { font: { size: 10.5 }, padding: 10, boxWidth: 12, usePointStyle: true, pointStyleWidth: 10 } }, |
| tooltip: { callbacks: { label: ctx => ` ${ctx.label}: ${ctx.parsed} model${ctx.parsed > 1 ? 's' : ''}` } } |
| } |
| } |
| }); |
| const reqLabels = ['Naïve Bayes','Lin. Reg.','Log. Reg.','Dec. Tree','PCA','k-Means','kNN','SVM','Rand. Forest','XGBoost','ANN']; |
| const reqData = [50, 100, 100, 100, 100, 200, 300, 500, 1000, 5000, 50000]; |
| const reqColors = reqData.map(v => v < 200 ? '#1D9E75' : v < 600 ? '#378ADD' : v < 5000 ? '#BA7517' : '#534AB7'); |
| new Chart(document.getElementById('dataReqChart'), { |
| type: 'bar', |
| data: { |
| labels: reqLabels, |
| datasets: [{ |
| data: reqData, |
| backgroundColor: reqColors, |
| borderRadius: 4, |
| }] |
| }, |
| options: { |
| responsive: true, maintainAspectRatio: false, |
| plugins: { |
| legend: { display: false }, |
| tooltip: { callbacks: { label: ctx => ` ≥ ${ctx.parsed.y.toLocaleString()} samples` } } |
| }, |
| scales: { |
| x: { grid: { display: false }, ticks: { font: { size: 10 }, maxRotation: 30 } }, |
| y: { |
| type: 'logarithmic', |
| title: { display: true, text: 'Min. samples (log scale)', font: { size: 11 } }, |
| grid: { color: 'rgba(28,43,58,0.05)' }, |
| ticks: { callback: v => v >= 1000 ? (v/1000)+'k' : v, maxTicksLimit: 6 } |
| } |
| } |
| } |
| }); |
| const observer = new IntersectionObserver(entries => { |
| entries.forEach(e => { if (e.isIntersecting) { e.target.style.opacity = 1; e.target.style.transform = 'translateY(0)'; } }); |
| }, { threshold: 0.06 }); |
| document.querySelectorAll('.model-card, .ml-type-card, .theory-card, .resource-block, .bv-card, .ml-stat-card, .insight-card').forEach(el => { |
| el.style.opacity = 0; el.style.transform = 'translateY(18px)'; el.style.transition = 'opacity .5s ease, transform .5s ease'; observer.observe(el); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
