Skip to content

A website with animations for data structures and algorithms, helping students and developers to understand and interact with concepts like hash tables, sorting algorithms, trees, and linked lists.

Notifications You must be signed in to change notification settings

developersbm/dsa-visualizer

 
 

Repository files navigation

DSA Visualizer

Documentation

Showcase

dsa.mov

Built With

  • Svelte
  • JavaScript
  • HTML
  • CSS
  • TailwindCSS

Frontend (Svelte Visualization)

Hash Tables

  • Separate Chaining: Visualizes how collisions are resolved using linked lists.
  • Linear Hashing: Demonstrates the process of resolving collisions by probing sequentially.
  • Quadratic Hashing: Shows collision resolution using quadratic probing.
  • Double Hashing: Illustrates how a secondary hash function can be used for collision resolution.

Sorting Algorithms

  • Bubble Sort: Repeatedly steps through the input list element by element, comparing the current element with the one after it, swapping their values if needed.
  • Selection Sort: Visualizes the process of selecting the minimum element and swapping it with the current position.
  • Insertion Sort: Demonstrates how elements are inserted into their correct position in the sorted portion of the array.
  • Bucket Sort: Shows how elements are distributed into buckets and then sorted.
  • Radix Sort: Illustrates sorting by digit position, using counting sort as a subroutine.

Trees

  • Tree Traversals: Includes visualizations for:
    • Pre-order Traversal: Visit root, left subtree, right subtree.
    • In-order Traversal: Visit left subtree, root, right subtree.
    • Post-order Traversal: Visit left subtree, right subtree, root.
    • Level Order Traversal: Visit nodes level by level.

Linked Lists

  • Singly Linked List: Allows visualizing operations such as:
    • Insert at Front: Add a node to the beginning of the list.
    • Insert at End: Add a node to the end of the list.
    • Insert at Index: Add a node at a specified position.

Code Structure

  • Components: Modular components for different visualizations and controls.
  • Svelte Features: Utilizes Svelte’s reactive features for real-time updates and animations.

Usage

The DSA Visualizer helps students understand data structures and algorithms by providing interactive visualizations. These visual aids make it easier to grasp complex concepts, see the effects of different operations, and enhance learning through engaging animations.

Collaborators

(back to top)

About

A website with animations for data structures and algorithms, helping students and developers to understand and interact with concepts like hash tables, sorting algorithms, trees, and linked lists.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Svelte 78.2%
  • TypeScript 16.5%
  • CSS 4.5%
  • Other 0.8%