An open API service indexing awesome lists of open source software.

https://github.com/yvng-jie/ds-visualized

๐Ÿ“š Interactive data structures tutorial with visual animations and live code playground.
https://github.com/yvng-jie/ds-visualized

data-structures dsa javascript tutorial visualization

Last synced: about 1 month ago
JSON representation

๐Ÿ“š Interactive data structures tutorial with visual animations and live code playground.

Awesome Lists containing this project

README

          


Logo

JS Data Structures Visualized


Interactive Tutorial ยท Animated Visualizations ยท Live Code Playground


๐ŸŽจ Visual animations โ€ข ๐ŸŽฎ Interactive playground โ€ข ๐Ÿ“– Zero to interview ready



Stars


License


Deploy


Issues


PRs Welcome


๐ŸŒ Live Demo
ย |ย 
๐Ÿ“š Contents
ย |ย 
๐Ÿ› ๏ธ Local Dev


---

## ๐Ÿ“ธ ๆผ”็คบ


Queue Visualization


Website Home



Queue Visualization


Graph git


---

## ๐Ÿ“– About

An interactive tutorial website for learning data structures in JavaScript. Every chapter includes:

| Module | Description |
| -------------------- | ------------------------------------------------------------- |
| ๐Ÿ“– **Concept** | Real-life analogies, use cases โ€” build intuition in 5 minutes |
| ๐Ÿ’ป **Code** | Complete implementation with teaching-style comments |
| โฑ **Complexity** | Big O time & space for every operation |
| ๐ŸŽจ **Visualization** | Interactive animations with speed control |
| ๐Ÿงช **Interview Qs** | LeetCode-style problems with runnable solutions |

๐ŸŒ **English** / ๐Ÿ‡จ๐Ÿ‡ณ **็ฎ€ไฝ“ไธญๆ–‡** โ€” Switch languages from the nav bar.

---

## ๐Ÿ“š Data Structures

| # | Structure | Difficulty | One-liner |
| --- | --------------------------------------------------- | ---------- | ---------------------------- |
| 1 | [๐Ÿ“ฆ Stack](docs/stack.md) | โญ | Last in, first out |
| 2 | [๐Ÿ“‹ Queue](docs/queue.md) | โญ | First in, first out |
| 3 | [๐Ÿ”ข Priority Queue](docs/priority-queue.md) | โญโญ | VIPs go first |
| 4 | [๐Ÿ”„ Deque](docs/deque.md) | โญโญ | Insert/remove from both ends |
| 5 | [๐Ÿ“– Dictionary](docs/dictionary.md) | โญ | Key-value storage |
| 6 | [๐Ÿงฉ Set](docs/set.md) | โญโญ | Unique elements + set ops |
| 7 | [๐Ÿ”— Linked List](docs/linked-list.md) | โญโญ | Nodes + pointers |
| 8 | [๐Ÿ”— Doubly Linked List](docs/doubly-linked-list.md) | โญโญโญ | Forward and backward |
| 9 | [๐Ÿ”‘ Hash Table](docs/hash-table.md) | โญโญโญ | O(1) lookups |
| 10 | [๐ŸŒณ BST](docs/binary-search-tree.md) | โญโญโญ | Sorted tree, binary search |
| 11 | [โ›ฐ๏ธ Heap](docs/heap.md) | โญโญโญ | Priority queue done right |
| 12 | [๐ŸŒฒ Trie](docs/trie.md) | โญโญโญ | Fast string prefix search |
| 13 | [๐Ÿ•ธ๏ธ Graph](docs/graph.md) | โญโญโญโญ | BFS/DFS traversals |

---

## ๐Ÿ› ๏ธ Local Development

```bash
git clone https://github.com/yvng-jie/ds-visualized.git
cd ds-visualized
npm install
npm run docs:dev # Start dev server
npm run docs:build # Build static files
npm run docs:preview # Preview built site
```

---

## ๐Ÿค Contributing

Contributions welcome! Here's how:

- **Submit an Issue** โ€” Bug reports, feature suggestions
- **Submit a PR** โ€” Fix errors, improve translations, add visualizers
- **Translate** โ€” Help expand the English or Chinese tutorials
- **Share** โ€” Star the repo, share with friends!

---

## ๐Ÿ“„ License

[MIT](LICENSE) ยฉ 2026 Jie Yang