Недавно я запустил минималистичное онлайн-приложение для рисования okso.app. Я хотел, чтобы это было место, где люди могли бы быстро, ситуативно, на салфетках объяснять любую концепцию, как будто вы сидите с другом и пытаетесь объяснить ему/ей что-то во время обеда. Не спрашивайте меня, зачем это нужно, я просто экспериментировал.
Кстати, именно поэтому приложение называется «Ok! So…», потому что часто это первые слова после того, как вы берете ручку и лист бумаги (или доску) и начинаете рисовать. Хотя я не видел исследования и статистики вступительных фраз, так что могу ошибаться, вот 😀.
Итак, первой концепцией, которую я попытался объяснить с помощью скетчей, были Структуры данных. Без лишних слов, вот интерактивная ✍🏻 витрина скетчей структур данных, с которой вы можете поиграть.
На всякий случай здесь представлена версия GIF для YouTube:
Конечно, здесь рассмотрены не все структуры данных. И конечно, это не исчерпывающий материал, а скорее шпаргалка, которая создаст визуальные подсказки и ассоциации для следующих структур данных:
- Связанный список
- Двусвязный список
- Очередь
- Стек
- Хэш-таблица (с разрешением коллизий хэша)
- Дерево (включая двоичное дерево поиска)
- Куча (включая среднюю кучу и максимальную кучу)
- Тройка
- Граф
Каждое поле на эскизе кликабельно, поэтому вы можете углубиться в интересующую вас структуру данных. Например, Heap → Max Heap, или Heap → Min Heap, или Heap → Array Representation.
Эскизы разбиты на так называемые Страницы, чтобы облегчить их восприятие, чтобы пользователи не отвлекались на одну концепцию за раз, видели взаимосвязь между концепциями и, таким образом, надеялись, что они не будут перегружены просмотром большого количества информации одновременно на одном рисунке/странице.
На каждой странице есть ссылка на примеры исходного кода, реализующие структуру данных на JavaScript.
Вот некоторые примеры рисунков.
Двусвязный список
Дерево
Хэш-таблица
Тройка
Граф
Полный список вы можете найти в разделе ✍🏻 Data Structure Sketches showcase.
Я надеюсь, что вы найдете эту витрину полезной, и надеюсь, что она станет хорошим визуальным дополнением к вашим знаниям о структурах данных.