Visualizing Data Structures and Algorithms

This was my attempt at visualizing data structures and algorithms using React TS + vite.

Data Structures

Inspired by Beau’s playlist, the data structures and their functionalities that I implemented (until now) were stack, heap, set, queue, priority queue, trie and linked list. Keeping things simple, I approached each data structure in the following manner:

• I started by creating an array of the operations to be performed on the data structure in a file titled dsOperations.tsx as shown in Fig 2.
• Then I created a custom hook implementing all the operations of the data structure
• Finally, I implemented the visualization/animation in the UI performed the selected operation by passing the user input to the corresponding data structure’s hook. All the animations were implemented using CSS. The layout of the UI is shown below in Fig 1.

Fig 1 — UI layout

Fig 2 — dsOperations.tsx

Note — I’ll update this article as I update the project.

Github Repo

GitHub - NatsuDrag9/ds-algo: This is a visual implementation of data structures.