Визуализация деревьев и алгоритмов для них (по шагам с описанием каждого шага для конкретных узлов) + теория об этом. В данный момент можно посмотреть на произвольное дерево, двоичную кучу (min binary heap, min-bin-heap), красно-черное дерево (red-black tree, RB-tree) и би-дерево (B-tree).
Для построения деревьев и визуализации алгоритмов используются JavaScript-библиотеки 3d-force-graph (использующая ThreeJS/WebGL) и ThreeJS (для узлов деревьев). Для главной страницы и области управления деревом используются JavaScript-фреймворки React и Material-UI.
Зайти на сайт SHOWTREE.MY.TO.
Скачать данный репозиторий:
$ git clone https://github.com/svtkrp/ShowTree.git
Находясь в корневой директории репозитория, выполнить:
$ npm install
$ npm run-script build
Затем открыть в браузере public/index.html.
- Сайт https://showtree.my.to/ и главная страница.
- Нормальное отображение на экранах, разных по ширине (PC/планшет/смартфон).
- Возможность скрыть/отобразить область управления деревом.
- Кастомная тема для главной страницы и области управления деревом.
Произвольное дерево:
- Визуализация дерева по умолчанию.
- Визуализация дерева, записанного с помощью специального формата JSON.
- Глубина узла + отображение пути, который использовался для рассчета.
- Высота узла + отображение пути, который использовался для рассчета.
- Краткая теория.
Двоичная куча с корнем - минимальным узлом:
- Визуализация дерева по умолчанию.
- Визуализация дерева, записанного с помощью специального формата JSON.
- Генерация случайного значения узла для вставки.
- Визуализация вставки нового узла по шагам + текстовое описание каждого шага для конкретных узлов.
- Визуализация удаления минимального узла (корня) по шагам + текстовое описание каждого шага для конкретных узлов.
- Теория.
Красно-черное дерево:
- Визуализация дерева по умолчанию.
- Визуализация дерева, записанного с помощью специального формата JSON.
- Генерация случайного значения узла для вставки.
- Визуализация вставки нового узла по шагам + текстовое описание каждого шага для конкретных узлов.
- Визуализация поиска узла по шагам + текстовое описание каждого шага для конкретных узлов.
- Визуализация удаления узла.
- Теория про вставку и поиск (картинки и часть текста взяты с Wikipedia).
Би-дерево:
- Визуализация дерева по умолчанию.
- Визуализация дерева, записанного с помощью специального формата JSON.
- Генерация случайного значения ключа для вставки.
- Визуализация вставки нового ключа по шагам (в некоторых случаях работает некорректно).
- Визуализация поиска узла по шагам.