Интерактивная пошаговая визуализация алгоритма кластеризации HDBSCAN (Hierarchical Density-Based Spatial Clustering of Applications with Noise).
Открывается прямо в браузере — никакого сервера, зависимостей или сборки не требуется.
Открыть: index.html (двойной клик или File → Open в браузере)
| # | Этап | Что показывает |
|---|---|---|
| 0 | Датасет | Исходные точки (3 кластера + 6 выбросов), seed=42 |
| 1 | Матрица расстояний | NxN Евклидова матрица D с тепловой картой и hover-подсветкой |
| 2 | Core Distance | Расстояние до k-го соседа; визуализация радиусов и bar-chart |
| 3 | MRD | Mutual Reachability Distance; 3 кейса плотности; матрица с overlay |
| 4 | MST | Алгоритм Прима с пошаговой анимацией; переключение Евклид ↔ MRD |
| 5 | Дендрограмма | Иерархия слияний; hover-подсветка ветвей на scatter |
| 6 | Condensed Tree | λ-дерево с min_cluster_size; связь с шумом |
| 7 | Устойчивость | S(C) = |C| · (λ_death − λ_birth); жадный выбор кластеров |
| 8 | Финальные кластеры | Результат HDBSCAN vs истинные метки; сравнение параметров |
- Глобальные параметры —
min_samplesиmin_cluster_sizeприменяются ко всем этапам одновременно - Кнопка «Пересчитать» — мгновенный полный пересчёт при изменении параметров
- Цепочка «Вход → Выход → Ключевая мысль» — над каждым этапом объясняется его роль в пайплайне
- MST анимация (Этап 4) — play / pause / step / speed; сравнение MST на Евклидовой метрике и на MRD
- Insight strip (Этап 3) — 3 иллюстративных кейса: почему оператор
max()в MRD необходим - Двунаправленный hover — hover на точке подсвечивает строку/столбец матрицы и наоборот
- Sensitivity sliders (Этап 8) — интерактивный пересчёт финальных кластеров в реальном времени
Просто откройте index.html в любом современном браузере.
Работает по протоколу file:// — никакого локального сервера не нужно.
Проверено: Chrome 120+, Firefox 121+, Edge 120+, Safari 17+.
interactive_hdbscan/
└── index.html ← всё в одном файле (HTML + CSS + JS, ~2 200 строк)
Никаких внешних зависимостей — только нативный JavaScript и SVG.
| Компонент | Реализация |
|---|---|
| Датасет | Seeded LCG RNG (seed=42) + Box-Muller для гауссиан |
| Distance Matrix | O(N²) Евклидово расстояние |
| Core Distance | k-NN по отсортированной строке матрицы D |
| MRD | max(cd_i, cd_j, d_ij) |
| MST | Алгоритм Прима O(N²) |
| Дендрограмма | Union-Find (path compression) |
| Condensed Tree | Рекурсивный обход с мемоизацией subtreeLeaves |
| Выбор кластеров | Жадный снизу вверх по S(C) |
| Colormap | 5-stop Viridis (ручная реализация) |
| Рендеринг | SVG через document.createElementNS |
| Параметр | Диапазон | Смысл |
|---|---|---|
min_samples |
1–8 | k для вычисления Core Distance |
min_cluster_size |
2–8 | Минимальный размер кластера в Condensed Tree |
- Зачем
max()в формуле MRD: шумовые точки становятся «дорогими» для прохождения - Связь MST ↔ Single-Linkage: MST, отсортированный по весу, эквивалентен Single-Linkage иерархической кластеризации
- Смысл λ = 1/d: переход от расстояния к плотности, «площадь» кластера в λ-пространстве = стабильность
- Почему HDBSCAN устойчив к шуму: точки не «принуждаются» в кластеры — они получают метку −1
MIT