Skip to main content

​
Get your first visualization running

This guide will walk you through using DS Visualizer to understand data structures through interactive visualizations. You’ll learn how to navigate the platform, perform operations, and toggle between code explanations and examples.
1

Visit DS Visualizer

Open dsvisualizer.isatvik.com in your browser.You’ll see the home page displaying the latest visualizers available. These include data structures like Stack, LinkedList, Queue, Binary Tree, Graph, Heap, and more.
Each visualizer card shows the name and type (Visualizer or Algorithm) to help you find what you need quickly.
2

Choose a visualizer

Let’s start with the Stack visualizer since it’s one of the most fundamental data structures.Click on the Stack card or navigate directly to dsvisualizer.isatvik.com/stack.
Stacks are LIFO (Last In First Out) data structures, similar to a stack of books. The last element you add is the first one you remove.
3

Understand the interface

When you land on the Stack visualizer, you’ll see:
  • Toggle button (top-right corner): Switch between “Code” and “Example” views
  • Code explanation section: Detailed breakdown of stack implementation with syntax highlighting
  • Complexity annotations: Time and space complexity for each operation (O(1), O(n), etc.)
The code section breaks down the implementation into digestible blocks, explaining:
  • The stack data structure (using arrays)
  • Push operation (adding elements)
  • Pop operation (removing elements)
  • Peek operation (viewing the top element)
  • isEmpty check
4

Toggle to the example view

Click the “Example” button in the top-right corner to switch to the practical example view.You’ll now see a bracket matching example that demonstrates a real-world stack application. This shows how stacks are used to validate balanced parentheses in code - a common problem in compilers and text editors.
The example view helps you understand how data structures are used in practical scenarios, not just theoretical concepts.
5

Try the LinkedList visualizer

Now let’s explore a more interactive visualizer. Navigate to dsvisualizer.isatvik.com/linkedlist.The LinkedList visualizer includes:
  • Visual representation of nodes with arrows showing connections
  • Head and tail pointers clearly marked
  • Null node at the end to show list termination
  • Interactive controls to manipulate the list
6

Perform operations

The LinkedList visualizer provides input fields and operation buttons:

​
Input fields

  • Enter the Value: The number you want to add to the list
  • Enter the index: Position for insertion or removal

​
Available operations

Adds a new node at the beginning of the list. The new node becomes the head, and its next pointer references the previous head.Time complexity: O(1) - constant time operation
Adds a new node at the end of the list. The current tail’s next pointer is updated to reference the new node, which becomes the new tail.Time complexity: O(1) - constant time operation when tail reference is maintained
Inserts a node at a specific index. Traverses to index-1, updates pointers to insert the new node while maintaining the chain.Time complexity: O(n) - requires traversal to the specified position
Removes the head node by updating the head pointer to reference the second node.Time complexity: O(1) - constant time operation
Removes the tail node by traversing to the second-to-last node and updating its next pointer to null.Time complexity: O(n) - requires traversal to find the second-to-last node
Removes a node at a specific index by traversing to index-1 and updating pointers to skip the target node.Time complexity: O(n) - requires traversal to the specified position
7

Watch the animations

Try these operations and watch the animations:
  1. Enter value 10 and click “Add First”
    • A node appears with “head” and “tail” labels (since it’s the only node)
  2. Enter value 20 and click “Add Last”
    • Node 10 now shows only “head”
    • Node 20 appears on the right with “tail”
    • An arrow connects them
  3. Enter value 15 and index 1, click “Insert At”
    • Node 15 slides into position between 10 and 20
    • Arrows automatically update to show the new connections
  4. Click “Remove First”
    • Node 10 fades away
    • Node 15 becomes the new head
All animations are powered by Framer Motion, providing smooth transitions that help you visualize how pointers change during operations.
8

Toggle to code view

Click the “Code” button in the top-right corner to see the implementation.You’ll find detailed explanations of:
  • Node class: How individual nodes store values and next pointers
  • addFirst() method: Implementation with complexity analysis
  • addLast() method: Implementation with complexity analysis
  • addAt() method: Index validation and pointer manipulation
  • removeFirst() method: Handling edge cases (empty list, single node)
  • removeLast() method: Traversal to second-to-last node
  • removeAt() method: Index-based removal logic
Each code block includes:
  • Syntax highlighting for easy reading
  • Time complexity notation (O(1), O(n))
  • Space complexity when relevant
  • Explanations of why the complexity is what it is

​
Explore more visualizers

Now that you understand how to use DS Visualizer, explore other data structures and algorithms:

Queue

Learn FIFO (First In First Out) operations with enqueue and dequeue

Binary Tree

Insert nodes and calculate tree height and node distances

Graph

Build graph structures and visualize connections between vertices

Heap

Explore min and max heap properties with heap operations

Tree Traversals

Visualize in-order, pre-order, and post-order traversal animations

Graph Traversals

Watch BFS and DFS algorithms explore graph structures

Hash Map

Understand key-value storage with hash functions

Priority Queue

See how elements are ordered by priority, not insertion time

​
Tips for effective learning

Start with fundamentals

Begin with Stack and LinkedList before moving to complex structures like Binary Trees and Graphs. This builds a strong foundation.

Use both views

Toggle between code explanations and examples. The code view teaches implementation details, while examples show practical applications.

Experiment freely

Try different values and operations. The visualizations update in real-time, making it safe to experiment and learn through exploration.

Focus on complexity

Pay attention to time and space complexity annotations. Understanding performance characteristics is crucial for choosing the right data structure.

Follow the animations

Watch how pointers change, nodes move, and structures reorganize. The animations reveal the mechanics behind each operation.
DS Visualizer is designed for university courses with 100+ students. If you’re using it for a course, encourage students to explore different operations and compare complexity across data structures.

​
Next steps

You now know how to:
  • Navigate the DS Visualizer platform
  • Perform operations on data structures
  • Toggle between code explanations and examples
  • Watch animations that reveal how operations work
  • Read complexity analysis for each method

Explore all visualizers

Visit the home page to browse the complete collection of data structures and algorithms