michalbojkogdansk/observability-foundations

# 📐 数据工程基础 用于数据工程概念的交互式可视化讲座。零构建步骤 —— 仅通过 GitHub Pages 提供静态 HTML。 **🔗 [在线站点 →](https://michalbojkogdansk.github.io/clustering-showdown/)** ## 主题 | 主题 | 状态 | 描述 | |-------|--------|-------------| | 🔮 [聚类](https://michalbojkogdansk.github.io/clustering-showdown/clustering.html) | ✅ 已上线 | KMeans 与 DBSCAN —— 包含基准测试和业务分析的交互式对比 | | 📊 分箱与直方图 | 🚧 即将推出 | 数据分布、分箱策略、偏度检测 | | 🔥 故障检测 | 🚧 即将推出 | 从阈值告警到基于 ML 的异常检测 | | 📈 回归分析 | 🚧 即将推出 | 从线性到多项式回归及业务解读 | | ⚡ 峰值与异常 | 🚧 即将推出 | 用于检测指标中异常模式的统计方法 | | 📋 日志驱动开发 | 🚧 即将推出 | 作为可观测性基础的结构化日志 | ## 功能 - **🌗 深色 / 浅色模式** —— 通过 localStorage 在所有页面间持久保存 - **📊 交互式可视化** —— 所有图表均在客户端通过 canvas 渲染 - **💼 面向业务的分析** —— 用通俗易懂的业务语言解释基准测试结果 - **🔴 异常高亮显示** —— DBSCAN 噪声点以红色显示并带有发光效果 - **📈 扩展性基准测试** —— 测试 S 到 XXXL 数据集大小，在实践中观察 O(n²) 与 O(n·k) 的区别 - **📝 可折叠代码** —— 按需提供算法源代码 (JS + Python) - **🏗️ 零构建步骤** —— 纯 HTML/CSS/JS，可部署在任何地方 ## 架构 ``` ├── index.html # Landing page — topic grid ├── clustering.html # KMeans vs DBSCAN showdown ├── bins.html # Placeholder ├── failure-detection.html # Placeholder ├── regression.html # Placeholder ├── spikes.html # Placeholder ├── log-driven.html # Placeholder ├── shared/ │ ├── style.css # Shared styles (Azure dashboard aesthetic) │ └── nav.js # Navigation bar (self-injecting) └── README.md ``` ## 技术栈 - **HTML5 Canvas** 用于所有可视化 - **Tailwind CSS** + **DaisyUI** 通过 CDN 引入 - **PrismJS** 用于语法高亮 - **GitHub Pages** 用于托管 - **100% 客户端** —— 所有计算均在浏览器中运行 ## 本地运行 只需在浏览器中打开 `index.html`。无需服务器，无需 npm，无需构建。 ``` # 或使用任意静态服务器： python3 -m http.server 8000 ``` ## 许可证 MIT

标签：Apex, API集成, Canvas, CMS安全, DBSCAN, DNS解析, GitHub Pages, HTML5, JavaScript, K-Means, Vanilla JS, 交互式学习, 可观测性, 后端开发, 回归分析, 开源项目, 异常检测, 故障检测, 教育项目, 数据可视化, 数据工程基础, 数据科学, 暗黑模式, 机器学习, 直方图, 算法基准测试, 统计学习, 聚类分析, 资源验证, 零构建, 静态网站