DSA Visualized

Doing DSA daily and actually keeping track of it this time. One problem a day, C++ solution, and instead of just a solved LeetCode problem I'm also generating a little animation of the logic so I (and hopefully other people) can actually see what the algorithm is doing instead of just reading code.

Live site (once GitHub Pages is on): https://<username>.github.io/DSA-Visualized/

How it's organized

By topic, not by difficulty or platform, since that's how I actually revise before interviews.

DSA-Visualized/
├── index.html              ← home page, pick a topic
├── assets/
│   ├── manifest.json       ← list of topics + problems, edit this when adding a problem
│   ├── site.css / site.js  ← home page + topic listing pages
│
├── engine/
│   ├── animation-engine.js ← only file that touches anime.js
│   └── engine.css          ← styling for problem pages
│
├── Arrays/
│   ├── index.html          ← lists problems in this topic
│   ├── Two Sum/
│   │   ├── solution.cpp
│   │   ├── steps.json
│   │   ├── index.html
│   │   └── README.md
│   └── Binary Search/
│       └── (same files)
│
└── Strings/ Linked Lists/ Stacks/ Queues/ Hash Maps/ Sliding Window/ ...
    (rest of the topics, empty for now)

Why the JSON steps thing

I didn't want to write custom animation code every single day. So the C++ solution has two versions of the same function: solve() which is the normal one, and solveAndTrace() which does the exact same thing but also prints out what it did, step by step, as JSON. Stuff like:

{ "action": "compare", "indices": [2, 5] }
{ "action": "swap", "indices": [2, 5] }

animation-engine.js reads that list and animates it with anime.js. It doesn't know what binary search or two sum even are, it just knows how to animate a "compare" or a "swap". So sorting problems, sliding window, two pointers — they can all reuse the same handlers instead of me writing a new animation from zero every day.

Adding a problem

1. pick the topic folder (make one if it doesn't exist yet)
2. copy Arrays/Two Sum/ as a starting point, rename it
3. write the real solution + the traced version in solution.cpp
4. compile it and run it, save the printed JSON as steps.json g++ -O2 -o solution solution.cpp && ./solution > steps.json
5. paste the same steps into the DATA object at the top of index.html (kept it inline instead of fetching steps.json so the page still works opened straight from the file system, not just from GitHub Pages)
6. fill in README.md
7. add the problem to assets/manifest.json — it won't show up on the site otherwise
8. if a step type doesn't exist yet in animation-engine.js, add one _handle_<action> method for it

Roadmap

Arrays → Strings → Linked Lists → Stacks/Queues → Hash Maps → Binary Search → Sliding Window → Two Pointers → Prefix Sum → Sorting → Recursion → Backtracking → Trees → BST → Heaps → Graphs → Tries → DP → Greedy → Bit Manipulation → Segment Trees → Fenwick Tree → Union Find → Geometry

Running it locally

Because the pages fetch() manifest.json, opening index.html straight from the file system won't load the topic grid (browsers block local fetches). Run a tiny server from the repo root instead:

python3 -m http.server 8000

then open http://localhost:8000. Individual problem pages (like Two Sum) don't fetch anything, so those work fine even double-clicked directly.