{"id":18972172,"url":"https://github.com/productmap/algo-visualization","last_synced_at":"2026-05-03T05:35:25.894Z","repository":{"id":222020619,"uuid":"737281721","full_name":"productmap/algo-visualization","owner":"productmap","description":"Визуализация алгоритмов","archived":false,"fork":false,"pushed_at":"2024-03-08T09:27:55.000Z","size":4109,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-01T08:19:31.900Z","etag":null,"topics":["algorithms","cypress","jest","typescript"],"latest_commit_sha":null,"homepage":"http://algorithms.productmap.ru/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/productmap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-12-30T13:15:23.000Z","updated_at":"2024-03-08T09:29:12.000Z","dependencies_parsed_at":"2024-03-07T22:41:25.859Z","dependency_job_id":null,"html_url":"https://github.com/productmap/algo-visualization","commit_stats":null,"previous_names":["productmap/algo-visualization"],"tags_count":0,"template":false,"template_full_name":"yandex-praktikum/algososh","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/productmap%2Falgo-visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/productmap%2Falgo-visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/productmap%2Falgo-visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/productmap%2Falgo-visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/productmap","download_url":"https://codeload.github.com/productmap/algo-visualization/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239970708,"owners_count":19727014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algorithms","cypress","jest","typescript"],"created_at":"2024-11-08T15:07:17.529Z","updated_at":"2026-04-07T09:30:18.097Z","avatar_url":"https://github.com/productmap.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Проектная работа. МБОУ АЛГОСОШ им. Фибоначчи\n\nВ проектной работе мы предлагаем вам написать визуализатор алгоритмов, которые вы будете изучать в течение месяца. Эта проектная работа заточена на анимацию и поэтапное отображение работы алгоритма, что позволит вам детальнее понять каждый шаг его работы.\n\nМы подготовили [дизайн проекта.](https://www.figma.com/file/RIkypcTQN5d37g7RRTFid0/Algososh_external_link?node-id=0%3A1) Там вы сможете найти необходимые цвета, размеры и примерную раскадровку визуализации, но сначала изучите описание работы.\n\nВ репозитории есть заготовка проекта на React. Если его запустить, то вы увидите разводящую страницу и отдельные страницы для визуализации алгоритмов, так что беспокоиться о роутинге не надо. В папке ui вы найдёте готовые компоненты, которые пригодятся вам в работе. Вам предстоит сосредоточиться на алгоритмах и анимациях. \n\nВ качестве примера вы можете подглядеть работу подобных сервисов по визуализации, например, [visualgo.net](https://visualgo.net/en), или полностью самостоятельно разобраться в задаче. Дерзайте!\n\n## Строка\n\nНа этом экране вам предстоит развернуть строку. Алгоритм для этого выберите сами.\n\n**Компоненты**\n\nПеред тем как приступить к визуализации, на страницу надо добавить основные компоненты:\n\n- инпут для ввода исходного текста для разворота;\n- кнопку «Развернуть».\n\n![Начальное состояние страницы](README_static/Untitled.png)\n\nНачальное состояние страницы\n\nВведите текст в инпут и нажмите развернуть. \n\n**Визуализация**\n\nСначала на экране должно появиться слово, буквы которого записаны в синие кружки. Используйте компонент Circle.\n\n![Строка в исходном виде](README_static/Untitled%201.png)\n\nСтрока в исходном виде\n\nДвух кандидатов на сортировку подсветите цветом `#D252E1`. Уже отсортированные элементы выделите `#7FE051`. \n\nНа скриншоте показана строка, в которой поменяли местами крайние символы:\n\n![Промежуточный этап разворота строки](README_static/Untitled%202.png)\n\nПромежуточный этап разворота строки\n\nПовторяйте выделение, пока полностью не развернёте строку.\n\nНе забудьте добавить на кнопку лоадер, чтобы избежать прерывания запущенной анимации.\n\nАнимация должна выполняться плавно. Для установки интервала можно использовать значение 1000 мс.\n\n## Последовательность Фибоначчи\n\nНа этом экране вам предстоит сгенерировать `n` чисел последовательности Фибоначчи. \n**Компоненты**\n\nПеред тем как приступить к визуализации, на страницу надо добавить основные компоненты:\n\n- инпут для ввода целого числа `n`;\n- кнопку «Рассчитать», по клику на неё на экране должна отобразиться последовательность Фибоначчи до числа `n`.\n\n![Начальное состояние страницы](README_static/Untitled%203.png)\n\nНачальное состояние страницы\n\nНапример, вы ввели 4, тогда на экране должен появиться ряд 1, 1, 2, 3, 5. Не забудьте ограничить ввод, в инпут можно вводить только положительные целые числа. И так как последовательность бесконечна, следует добавить максимальную границу ввода 1 ≤ `n`≤ 19.\n\n**Визуализация**\n\nЭлементы должны отображаться постепенно. Сначала появляется один, потом второй, третий и так до `n`. Пока ряд появился не полностью, добавьте лоадер на кнопку, чтобы избежать повторных кликов.\n\n![Сгенерированная последовательность](README_static/Untitled%204.png)\n\nСгенерированная последовательность\n\nАнимация должна выполняться плавно. Для установки интервала можно использовать значение 500 мс.\n\n---\n\n## Сортировка массива\n\nНа этом экране вам предстоит визуализировать алгоритмы сортировки выбором и пузырьком\n\n**Компоненты**\n\nПеред тем как приступить к визуализации, на страницу надо добавить основные компоненты:\n\n- RadioInput для выбора способа сортировки (выбором и пузырьком). По умолчанию стоит значение «Выбор».\n- Кнопка «По убыванию», по клику на неё элементы массива должны отсортироваться по убыванию, алгоритм сортировки выбираем тот, который указан в RadioInput.\n- Кнопка «По возрастанию», по клику на неё элементы массива должны отсортироваться по возрастанию, алгоритм сортировки выбираем тот, который указан в RadioInput.\n- Кнопка «Новый массив», по клику на неё функция `randomArr` должна генерировать новый массив.\n\nПомимо компонентов управления, на странице должны отображаться элементы массива.\n\n![Начальное состояние страницы](README_static/Untitled%205.png)\n\nНачальное состояние страницы\n\nЧтобы задать массив случайных чисел, необходимо написать функцию `randomArr`. При написании учтите, что:\n\n- массив должен состоять из целых чисел $[0; 100]$,\n- минимальное количество элементов массива `minLen = 3`, максимальное `maxLen = 17`.\n\nТеперь сгенерированный массив необходимо отобразить на странице. Максимальное значение элемента массива равно 100, это же значение является процентным соотношением высоты столбца. В качестве максимальной высоты считайте 340px.\n\n```tsx\n// сгенерированный массив\nconst arr = [25, 50, 100];\n// высоты элементов массива\n// `${(340 * arr[i]) / 100}px`\n['85px', '170px', '340px']\n```\n\n**Визуализация**\n\nКогда вы нажмёте «По убыванию» или «По возрастанию», должен запуститься процесс сортировки в зависимости от выбранного способа: выбором или пузырьком.\n\nДля анимации сортировки добавим два цвета:\n\n- `#D252E1` — элементы, которые сортируем;\n- `#7FE051` — отсортированные элементы массива.\n\nПриведём пример сортировки выбором по возрастанию для массива `[2, 34, 17, 100, 50]`. Чтобы отсортировать элементы выбором, сначала надо найти минимальный элемент, поставить первым элементом в массив и так далее:\n\n1. Два сравниваемых числа — 34 и 2 — нужно выделять цветом `#D252E1`.\n2. Так как 2 меньше 34, с 34 удаляем выделение цветом, 2 остаётся выделен `#D252E1`;\n3. Ищем, есть ли в массиве элемент меньше двойки. Претендентов на минимальный элемент по очереди выделяем цветом `#D252E1`. \n4. Так как 2 — минимальный элемент, меняем его местами с элементом 34 и выделяем цветом `#7FE051`.\n5. Смещаемся на один индекс и продолжаем сортировку.\n\nНе забудьте про ограничения. Добавляйте лоадер на активную кнопку и дизейблите все остальные контролы, пока идёт анимация сортировки.\n\nСортировка массива должна выполняться плавно. Для установки интервала можно использовать значение 1000 мс.\n\n---\n\n## Стек\n\nНа этом экране вам предстоит визуализировать удаление и добавление элементов в структуру данных стек\n\n**Компоненты**\n\nПеред тем как приступить к визуализации работы со стеком, на страницу надо добавить основные компоненты:\n\n- Инпут для ввода значений, которые будут добавляться в стек. Вы можете использовать дженерик, чтобы задать обобщённый тип значений.\n- Кнопкa «Добавить», по клику на неё должен вызываться метод стека `push(item)`.\n- Кнопкa «Удалить», по клику на неё должен вызываться метод стека `pop()`.\n- Кнопка «Очистить», чтобы по клику на неё сразу удалить все элементы из стека.\n\nБольше на странице ничего не должно быть, так как наш стек ещё пуст.\n\n![Начальное состояние страницы](README_static/Untitled%206.png)\n\nНачальное состояние страницы\n\n**Визуализация добавления** \n\nЕсли ввести в инпут значение и нажать «Добавить», в стеке должен появиться первый элемент, который необходимо отрисовать на странице.\n\nДля отображения элементов стека используйте компонент Circle. Внутри должно быть записано введённое значение, сверху компонента — указатель на вершину стека `top`, а снизу — номер индекса элемента (для первого элемента — `0` и так далее).\n\nИнпут необходимо очистить после добавления элемента в стек. \n\nПри добавлении ещё одного элемента справа от предыдущего должен появиться Circle с новым значением и индексом 1. И теперь уже над ним должна оказаться подпись `top`. В момент добавления на долю секунды подсветите новый элемент цветом `#D252E1`.\n\nЕсли в инпуте нет числа, по клику на кнопку «Добавить» метод `push(item)` не вызывается.\n\n**Визуализация удаления**\n\nЕсли нажать «Удалить», из стека должен извлекаться только верхний элемент. Удаляемый элемент выделяется цветом, надпись `top` перемещается на его левого соседа. \n\nЕсли в стеке всего один элемент, то после нажатия «Удалить» на странице не отображаются никакие элементы стека. \n\nПо клику на кнопку «Очистить» из стека удаляются все элементы сразу.\n\nНе забудьте про ограничения. Например, при нажатии на кнопку отображайте на ней лоадер, а остальные контролы дизейблите. Ограничьте ввод значения до четырёх символов, иначе значение будет странно смотреться в компоненте Circle.\n\nВсе анимации на странице должны выполняться плавно. Для установки интервала можно использовать значение 500 мс.\n\n---\n\n## Очередь\n\nНа этом экране вам предстоит визуализировать удаление и добавление элементов в структуру данных «очередь».\n\n**Компоненты**\n\nПеред тем как приступить к визуализации работы с очередью, на страницу надо добавить основные компоненты:\n\n- инпут для ввода значений, которые будут добавляться в очередь;\n- кнопкa «Добавить», по клику на неё должен вызываться метод очереди `enqueue(item)`;\n- кнопкa «Удалить», по клику на неё должен вызываться метод очереди `dequeue()`;\n- кнопка «Очистить», чтобы по клику на неё сразу удалить все элементы из очереди;\n- отобразите пустые элементы очереди c помощью компонента Circle;\n- добавьте кнопку «Очистить», чтобы по клику на неё сразу удалить все элементы из очереди.\n\n![Начальное состояние страницы](README_static/Untitled%207.png)\n\nНачальное состояние страницы\n\n**Визуализация**\n\nЕсли ввести в инпут значение 2 и нажать «Добавить», элемент должен отобразиться под индексом 0. Также добавьте на элемент указатели `head` и `tail`. Инпут при этом очищается.\n\n![Очередь с одним элементом](README_static/Untitled%208.png)\n\nОчередь с одним элементом\n\nПри добавлении элементов в очередь позиция tail должна смещаться, на долю секунды выделяйте новый элемент цветом `#D252E1`.\n\n![Очередь из трёх элементов в момент добавления](README_static/Untitled%209.png)\n\nОчередь из трёх элементов в момент добавления\n\nПотом уберите выделение и очистите инпут.\n\nТеперь если нажать «Удалить», из очереди должен извлечься элемент под индексом 0 (на долю секунды подсветите элемент `#D252E1`), a `head` будет перемещён на элемент с индексом 1.\n\n![Очередь после `dequeue();`](README_static/Untitled%2010.png)\n\nОчередь после `dequeue();`\n\nВсе анимации на странице должны выполняться плавно. Для установки интервала можно использовать значение 500 мс.\n\nНе забудьте про ограничения. Например, при нажатии на кнопку отображайте на ней лоадер, а остальные контролы дизейблите. Ограничьте ввод значения до четырёх символов, иначе значение будет странно смотреться в компоненте Сircle.\n\n---\n\n## Связный список\n\nНа этом экране необходимо реализовать удаление и добавлениеэлементов в связный список. \n\n**Компоненты**\n\nПеред тем как приступить к визуализации работы с очередью, на страницу надо добавить основные компоненты.\n\nДля добавления элемента:\n\n- инпут с плейсхолдером «Введите значение» для ввода значения `value`, которое будете добавлять в список;\n- кнопка «Добавить в head», по клику на которую значение из инпута должно стать новой головой списка, инпут при этом очищаем;\n- кнопка «Добавить в tail», по клику на которую значение из инпута должно стать новым хвостом списка, инпут при этом очищаем.\n\nДля удаления элемента:\n\n- кнопка «Удалить из head», по клику на которую удаляется первый элемент из списка;\n- кнопка «Удалить из tail», по клику на которую удаляется последний элемент из списка.\n\nДля удаления или добавления по индексу:\n\n- инпут с плейсхолдером «Введите индекс» для ввода индекса `ind` элемента связного списка;\n- кнопка «Добавить по индексу», по клику на которую значение из инпута `value` должно занять в списке место под номером `ind`, инпут с `value` при этом очищаем;\n- кнопка «Удалить по индексу», по клику на которую удаляется `ind`-элемент из списка.\n\nКроме элементов управления, на странице должен отображаться небольшой связный список, например `0 → 34 → 8 → 1`.\n\n![Начальное состояние страницы](README_static/Untitled%2011.png)\n\nНачальное состояние страницы\n\n### Визуализация\n\n**При добавлении в head** элемент должен появиться над первым элементом вместо надписи head.\n\n![Добавление в head](README_static/Untitled%2012.png)\n\nДобавление в head\n\nЗатем он занимает первое место в списке и на долю секунды выделяется зелёным цветом. Теперь над новым элементом написано head, и он указывает на предыдущий head-элемент.\n\n![Отображение нового элемента в head](README_static/Untitled%2013.png)\n\nОтображение нового элемента в head\n\n**При добавлении в tail** элемент должен появиться в хвосте над элементом с надписью tail. Затем он занимает последнее место в списке и на долю секунды выделяется зелёным цветом. Теперь под новым элементом написано tail.\n\n**При добавлении элемента по индексу** должны быть заполнены два поля: «Введите значение» и «Введите индекс». Помните, что вся анимация выполняется поэтапно: \n\n- По клику на «Добавить по индексу» новый элемент должен отобразиться над первым элементом.\n- Пока ищем нужный индекс, поочерёдно подсвечиваем элементы. Добавляемый элемент перепрыгивает по списку до искомого индекса.\n- Когда индекс найден, отображаем новый элемент над ним и добавляем.\n\nВ этом примере число 10 должно занимать индекс 2.\n\n![Добавление по индексу. Поиск индекса](README_static/Untitled%2014.png)\n\nДобавление по индексу. Поиск индекса\n\nПосле успешного добавления 10 стоит под порядковым номером 2 и указывает на 34. Новый добавленный элемент выделите цветом. Через долю секунды уберите все цветовые выделения и лоадер на кнопке — вставка завершена.\n\n![Добавление по индексу. Новый элемент в списке](README_static/Untitled%2015.png)\n\nДобавление по индексу. Новый элемент в списке\n\n**При удалении элемента по индексу** сначала необходимо выделять цветом элементы, пока не достигнем нужного индекса. Затем очистить значение в элементе и снизу отобразить маленький кружок с удаляемым значением.\n\nНапример, вы ввели индекс 2 и нажали «Удалить по индексу». Сначала цветом выделяется элемент с индексом 0, потом с индексом 1, и когда мы дошли до нужного индекса, то удаляем элемент из связного списка:\n\n![Удаление элемента под индексом 2](README_static/Untitled%2016.png)\n\nУдаление элемента под индексом 2\n\n**При удалении элемента из tail** кружок замещает надпись tail.\n\n![Удаление элемента из tail](README_static/Untitled%2017.png)\n\nУдаление элемента из tail\n\nОбратите внимание, что при добавлении новый элемент следует отображать над элементами списка, а при удалении — под ними.\n\nВсе анимации на странице должны выполняться плавно. Для установки интервала можно использовать значение 500 мс.\n\nНе забудьте про ограничения. Добавляйте лоадер на активную кнопку и дизейблите все остальные контролы. Ограничьте ввод значения до четырёх символов, иначе значение будет странно смотреться в компоненте Circle.\n\n## Отправка работы на проверку\n\nКогда будете готовы показать код-ревьюеру финальный результат, отправьте ссылку на пул-реквест, открытый из ветки `month-12/step-1`, в `main` через интерфейс Практикума. Отправить ссылку можно в отдельном уроке, который доступен [по ссылке](https://praktikum.yandex.ru/trainer/web-plus/lesson/a2bd2943-6f29-43df-a749-c4cb88f6301b/). В этом уроке находится интерфейс финальной сдачи проектной работы.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproductmap%2Falgo-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fproductmap%2Falgo-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fproductmap%2Falgo-visualization/lists"}