Explain Complex Concepts With Minimalistic Drawings With Okso.app by@trekhleb
2,833 reads

Explain Complex Concepts With Minimalistic Drawings With Okso.app

August 31st 2022
2 min
by @trekhleb 2,833 reads
tldt arrow
Read on Terminal Reader

Too Long; Didn't Read

Basic data structures explained with minimalistic sketches

Company Mentioned

Mention Thumbnail
featured image - Explain Complex Concepts With Minimalistic Drawings With Okso.app
Oleksii Trekhleb HackerNoon profile picture

@trekhleb

Oleksii Trekhleb

Software Engineer @ UBER. Author of the 100k ⭐️ javascript-algorithms...

About @trekhleb
LEARN MORE ABOUT @TREKHLEB'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

Recently I launched the minimalistic online drawing app okso.app. I wanted it to be a place where people could do fast, ad-hoc, napkin-based-like explanations of any concept as if you are sitting with your friend and trying to explain him/her something during lunch. Don't ask me why it is needed, I was just experimenting.

Btw, that's why the app name is "Ok! So...", because oftentimes these are the opening words after you pick up the pen and the piece of paper (or a whiteboard) and start drawing. I didn't see the study and the statistics of the opening phrases though, so I might be wrong here, here 😀

So, the first concept I tried to explain with sketches was the Data Structures. Without further ado, here is the interactive ✍🏻 Data Structure Sketches showcase that you may play with.

Data Structure Sketches

Data Structure Sketches

Here is a YouTube version of the GIF just in case:

Of course, not all data structures are covered. And of course, this is not comprehensive material, but rather a cheatsheet that would create visual hints and associations for the following data structures:

  • Linked List
  • Doubly Linked List
  • Queue
  • Stack
  • Hash Table (with hash collision resolution)
  • Tree (including the Binary Search Tree)
  • Heap (including Mean Heap and Max Heap)
  • Trie
  • Graph

Each box on the sketch is clickable, so you may dig into the data structure you're interested. For example Heap → Max Heap, or Heap → Min Heap, or Heap → Array Representation.

The sketches are split into so-called Pages just to make it easier to grasp them, so the users stay focused on one concept at a time, they see the relationship between the concept, and thus, hopefully, they are not getting overwhelmed with seeing a lot of information at the same time on one drawing/page.

Each page has a link to the source-code examples that are implementing the data structure on JavaScript.

Here are some examples of the sketches.

Doubly Linked List

image

Tree

image

Hash Table

image

Trie

image

Graph

image

The full list you may find in the ✍🏻 Data Structure Sketches showcase.

I hope you find this showcase useful and I hope it will be a good visual cheatsheet-like complement to your data structure knowledge.


Also Published Here

RELATED STORIES

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa