Is Learning DSA Boring? Let's Use DSA View View 👀👀 (Two Sum, Binary Search, and Bubble Sort)

Hoi hoi! I’m @nyaomaru, a frontend engineer who dislikes crowded places, so I'm planning to take a quiet vacation in September. 🏝️ Have you used DSA View View already? 👀👀 I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View 👀👀) Features a timeline to step backward mid-loop nyaomaru nyaomaru nyaomaru Follow Jul 15 I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View 👀👀) #showdev #typescript #dsa #react 58 reactions 22 comments 7 min read DSA View View allows you to understand DSA by visualizing how your implementation actually runs. But just introducing the tool is not enough. Can it actually help us understand DSA? In this article, we'll walk through three classic problems: Two Sum Binary Search Bubble Sort We'll first understand the algorithm, and then see what is actually happening with DSA View View. Let's learn together! 😸 🗺️ Two Sum Let's start with a very famous problem. Given an array of numbers and a target value, find the indices of two numbers whose sum equals the target. For example, nums = [2, 7, 11, 15]; target = 9; The answer is [0, 1]; Because 2 + 7 = 9 Simple! So, how should we find them? 🤔 Brute Force The easiest approach is probably checking every possible pair. function twoSum(nums: number[], target: number): number[] { for (let i = 0; i < nums.length; i++) { for (let j = i + 1; j < nums.length; j++) { if (nums[i] + nums[j] === target) { return [i, j]; } } } return []; } This works. But if the array becomes large, we may need to compare a lot of pairs, right? The time complexity is O(n²) Can we avoid checking the same values again and again? Yes. Let's use a Map. function twoSum(nums: number[], target: number): number[] { const seen = new Map(); for (let i = 0; i < nums.length; i++) { const current = nums[i]; const need = target - current; if (seen.has(need)) { return [seen.get(need)!, i]; } seen.set(current, i); } return []; } The important part is this 👇 const need = target - current; Instead of asking Which two numbers should I combine? we ask What number do I need to complete the target? Let's follow the example. At first current = 2 target = 9 need = 9 - 2 = 7 Have we already seen 7? No. So we remember 2. seen = { 2 → 0 } Next current = 7 target = 9 need = 9 - 7 = 2 Have we already seen 2? Yes! 👀👀 seen = { 2 → 0 } So return [0, 1]; Done! Because we only need to walk through the array once, the time complexity becomes. Time: O(n) Space: O(n) 👀 Let's View View It The implementation is quite small. But when I was first learning this pattern, this part still felt a little magical. if (seen.has(need)) Where did need come from? What is inside seen at this moment? Why does checking the previous values solve the problem? This is exactly where visualization helps. dsa-view-view.vercel.app With DSA View View, we can move through the runtime one step at a time and inspect how the values change. 2 ↓ Need 7 ↓ Remember 2 ↓ 7 ↓ Need 2 ↓ Found 2! 🎉 Now the Map is not just some mysterious trick. We can actually follow the idea. Remember what we have already seen, and check whether the value we need is there. Nice! 😸 🔍 Binary Search Next is Binary Search. Suppose we have this sorted array [1, 3, 5, 7, 9, 11, 13] And we want to find 11 Of course, we could start from 1 and check every number. 1 → 3 → 5 → 7 → 9 → 11 That works. But Binary Search does something smarter. Instead of checking from the beginning, it checks the middle. [1, 3, 5, 7, 9, 11, 13] ↑ mid Our middle value is 7. We are looking for 11. 11 > 7 Because the array is sorted, we already know something very useful. Everything on the left side of 7 is also smaller than 11. So, we don't need that half anymore. 👋 [1, 3, 5, 7, 9, 11, 13] └───────┘ search Now we check the middle of the remaining range. [9, 11, 13] ↑ mid And 11 === 11 Found it! 🎉 Here is the implementation. function binarySearch(nums: number[], target: number): number { let left = 0; let right = nums.length - 1; while (left 1 So swap them. [1, 5, 4, 2, 8] Next [1, 5, 4, 2, 8] ↑ ↑ Again 5 > 4 Swap! [1, 4, 5, 2, 8] And continue. [1, 4, 5, 2, 8] ↑ ↑ 5 > 2 Swap! [1, 4, 2, 5, 8] Eventually, larger values move toward the end of the array. They kind of... bubble up. 🫧 That's why it is called Bubble Sort. Here is a simple implementation: function bubbleSort(nums: number[]): number[] { for (let i = 0; i < nums.length - 1; i++) { for (let j = 0; j < nums.length - i - 1; j++) { if (nums[j] > nums[j + 1]) { [nums[j], nums[j + 1]] = [nums[j + 1], nums[j]]; } } } return nums; } We repeatedly compare nums[j]; And nums[j + 1]; and swap them when necessary. After one full pass, the largest remaining value reaches its correct position near the end. So on the next pass, we don't need to check that position again. That's why the inner loop contains. nums.length - i - 1; Complexity Bubble Sort isn't very fast for large arrays. Its time complexity is Time: O(n²) Space: O(1) So I probably won't suddenly replace production sorting with Bubble Sort tomorrow. 😸 But as a learning example, I really like it. Why? Because you can see the algorithm working. 👀 Let's View View It This is probably the most visually satisfying one of the three. dsa-view-view.vercel.app Instead of only reading [nums[j], nums[j + 1]] = [nums[j + 1], nums[j]]; we can follow the values moving through the array. [5, 1, 4, 2, 8] ↓ swap [1, 5, 4, 2, 8] ↓ swap [1, 4, 5, 2, 8] ↓ swap [1, 4, 2, 5, 8] Then another pass begins. The code contains nested loops, indexes, comparisons, and swaps. But visually, the basic rule is extremely simple: Compare neighbors. If the left one is bigger, swap them. Repeat. Repeat. Repeat. Sorted! 🎉 🧠 What Did We Actually Learn? These three problems look quite different. But each one introduces a useful way of thinking. Two Sum Remember information from previous steps. Have I already seen what I need? Binary Search Use what we already know to remove impossible candidates. Can I safely discard half of the search space? Bubble Sort Break a larger problem into many small comparisons. Are these two values in the correct order? This is one of the things I find interesting about learning DSA. At first, the implementation can look like a collection of indexes, loops, conditions, and mysterious variables. But behind the code, there is usually a much simpler idea. And sometimes I don't fully understand that idea just by staring at the code. I want to view it. 👀👀 🎯 Conclusion In this article, we looked at three classic algorithms: Two Sum with a Map Binary Search Bubble Sort And more importantly, we looked at how the data changes while they run. I think this is where visualization can be especially useful. Reading the final implementation tells us what the code is. Stepping through it helps us understand why it works. That's exactly why I built DSA View View. dsa-view-view.vercel.app You can write or load a TypeScript implementation, run it with your own inputs, and move backward and forward through the runtime. If you are learning DSA too, try taking a problem you already solved and viewing it step by step. You may notice something you didn't notice when only reading the code. 👀 And if there is a DSA problem you want me to cover next, please let me know in the comments! I still have many algorithms to learn myself. 😸 Let's train our DSA muscles together! 💪 If you like DSA View View, please give it a star ⭐ nyaomaru / dsa-view-view DSA View View allows you to understand DSA to see the data flow. 👀👀 Of course, it's free. DSA View View DSA View View turns TypeScript algorithm functions into step-by-step visual stories. 👀👀 Write code, run it with structured inputs, and see the arrays, matrices trees, lists, stacks, pointers, and return values move as the function executes. It is built for those moments when reading the code is not enough and you want to view why the answer changes. Why Try It? 🧠 Step through real TypeScript Paste or edit a function, validate it, then run the exact code in the browser. 🧩 Views that match the data Arrays become bars, matrices become grids, trees become node graphs, linked lists become chains, and two-pointer area problems get their own visual view. 🌳 DSA-friendly inputs out of the box TreeNode, ListNode, MinHeap, MaxHeap, PriorityQueue, nested arrays matrices, strings, numbers, and class-style inputs are supported without ceremony. 🔎 39 built-in examples Search by name, browse… View on GitHub And my DSA View View has launched at TinyLaunch! 🚀 Please take a loot 👇 tinylaunch.com See you in the next article!