svtkrp / showtree

2020. Визуализация алгоритмов для деревьев (произвольного дерева, двоичной кучи, красно-черного дерева, би-дерева; WebGL, threeJS, 3d-force-graph; React, Material-UI).

Show Me Tree!

Визуализация деревьев и алгоритмов для них (по шагам с описанием каждого шага для конкретных узлов) + теория об этом. В данный момент можно посмотреть на произвольное дерево, двоичную кучу (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.
• Генерация случайного значения ключа для вставки.
• Визуализация вставки нового ключа по шагам (в некоторых случаях работает некорректно).
• Визуализация поиска узла по шагам.