kmeans_visualizer_presentation

1.

КУРСОВАЯ РАБОТА
Визуализация
алгоритмов ML
K-Means Visualizer
Интерактивный сайт, который показывает
работу алгоритма K-Means шаг за шагом:
точки, центроиды, назначение кластеров,
движение центров и снижение SSE.
Репозиторий: umedmukhitdinov/K-Means
Тема: машинное обучение через визуальное
объяснение

2.

01
Идея проекта
Сайт превращает формальный алгоритм в понятную интерактивную лабораторию
Главная задача
Показать, как K-Means постепенно разделяет
точки на группы и почему центроиды приходят
к устойчивому положению.
пользователь выбирает K и число точек
алгоритм можно запускать автоматически или
вручную
интерфейс показывает фазы, центроиды и SSE
Итог: студент видит не только результат
кластеризации, но и процесс его получения.
K-Means Visualizer • React + Vite + Tailwind CSS
Визуализация алгоритмов ML

3.

02
Как работает K-Means
Алгоритм повторяет две фазы: назначение точек и обновление центроидов
1 Инициализация
выбираются
начальные центры
E Назначение
каждая точка идёт к
ближайшему центру
Цель: минимизировать сумму квадратов расстояний
до центроидов
K-Means Visualizer • React + Vite + Tailwind CSS
M Обновление
центр становится
средним своих точек
✓ Сходимость
движение центров
почти исчезает
J = Σₖ Σₓ∈Sₖ ‖x − μₖ‖²
Визуализация алгоритмов ML

4.

03
Что умеет приложение
Функции подобраны так, чтобы объяснять алгоритм через действие
Generate
Points
K
Start /
Pause
Step
SSE
новые данные
число кластеров
автозапуск
ручной шаг
ошибка по итерациям
Учебный
сценарий
Сначала пользователь генерирует точки, затем выбирает
параметры и смотрит, как меняются назначения, центроиды
и функция потерь. Через Step можно остановиться на
каждом моменте.
K-Means Visualizer • React + Vite + Tailwind CSS
Почему это удобно
Формулы не остаются отдельно от интерфейса:
каждый математический шаг сразу связан с
визуальным изменением на графике.
Визуализация алгоритмов ML

5.

04
Интерфейс сайта
Одна страница собирает управление, визуализацию, карточку шага и график ошибки
Панель управления
K, число точек, скорость, режим
расстояний
Основная визуализация
точки, центроиды, цвета кластеров,
движение
Карточка шага
поясняет текущую фазу алгоритма
График SSE
показывает снижение функции потерь
K-Means Visualizer • React + Vite + Tailwind CSS
Визуализация алгоритмов ML

6.

05
Математика внутри визуализации
Каждый элемент интерфейса связан с конкретной формулой
Основные формулы
SSE уменьшается по итерациям
1. Расстояние до центроида
1000
d(x, μ) = √((x₁ − μ₁)² + (x₂ − μ₂)²)
900
800
700
600
2. Обновление центроида
μₖ = (1 / |Sₖ|) · Σ xᵢ
500
400
300
200
100
3. Функция потерь SSE
0
1
2
3
4
5
6
J = Σₖ Σₓ∈Sₖ ‖x − μₖ‖²
Смысл графика: если SSE почти перестала
снижаться, центроиды стабилизировались.
K-Means Visualizer • React + Vite + Tailwind CSS
Визуализация алгоритмов ML

7.

06
Архитектура проекта
Логика алгоритма отделена от интерфейса, поэтому код легче читать и развивать
App.jsx
components/
hooks/useKMeans.js
корневая сборка страницы
панель, canvas, график,
теория
состояние, фазы и управление
шагами
utils/kmeans.js
математика: assign, update,
SSE
Ключевая мысль
K-Means Visualizer • React + Vite + Tailwind CSS
React отвечает за интерфейс, custom hook хранит состояние алгоритма, а отдельные функции в utils
выполняют чистые математические операции.
Визуализация алгоритмов ML

8.

07
Технологический стек
Проект собран как современное одностраничное веб-приложение
React
компонентная структура интерфейса
Vite
быстрый dev-сервер и сборка
Tailwind CSS
адаптивная стилизация
Framer Motion
анимации точек и переходов
D3
вспомогательные визуализации
Запуск: npm install → npm run dev
K-Means Visualizer • React + Vite + Tailwind CSS
Визуализация алгоритмов ML

9.

08
Учебная ценность и ограничения
Проект хорошо объясняет базовый K-Means, но его можно усилить исследовательскими
функциями
Сильные стороны
Ограничения K-Means
динамика алгоритма видна глазами
результат зависит от инициализации
есть ручной режим Step для объяснения
алгоритм чувствителен к выбросам
SSE связывает картинку с функцией потерь
лучше работает на компактных кластерах
теория встроена прямо в интерфейс
K нужно выбирать заранее
Для курсовой это плюс: ограничения можно отдельно показать как направление развития проекта.
K-Means Visualizer • React + Vite + Tailwind CSS
Визуализация алгоритмов ML

10.

09
Что можно улучшить дальше
Развитие проекта можно направить в сторону сравнения, экспериментов и работы с реальными
данными
CSV
K++
Metrics
Compare
Export
загрузка своих
датасетов
выбор способа
инициализации
Silhouette, inertia,
elbow method
сравнение нескольких
запусков
сохранение результата
и графиков
Главная идея развития: сделать не просто демонстрацию K-Means, а полноценную учебную лабораторию
для экспериментов с кластеризацией.
K-Means Visualizer • React + Vite + Tailwind CSS
Визуализация алгоритмов ML

11.

Вывод
K-Means Visualizer показывает машинное обучение не как набор формул, а как
понятный процесс: данные → назначение → обновление центров → сходимость.
Проект подходит для защиты курсовой, потому что объединяет алгоритм,
интерфейс, визуализацию, интерактивность и объяснение математической идеи.
K-Means Visualizer • React + Vite + Tailwind CSS
Спасибо за
внимание
Визуализация алгоритмов ML