Visualizer

Watch code run one step at a time, with the line it’s on and one sentence about what just happened.

• Watch: press Play, or step with Next and Back.
• Predict: some steps stop and ask what happens next. “Just show me” always skips the question.
• Try your own: change the input and watch it again.
• Show as text: read each step as a table instead.
• Do it yourself: on some, you make each move. A wrong move says why and costs nothing.
• Your own code: paste a Python function on Visualize Python, or press Visualize under any code editor in the lessons. Write a query on Visualize SQL, or press Show the steps under any SQL editor.

New to this? Start with Binary search, then Two pointers. Each card links the roadmap topic and, where there is one, the lesson.

DSA

• Binary searchDo it yourselfCheck the middle of a sorted list and throw away the half that can’t hold the target.Lesson: My binary search says 0 isn’t in [4, 5, 6, 7, 0, 1, 2] · Roadmap: Binary search on an index and on the answer
• A turned listSearch a sorted list that was turned: find the half that’s sorted, and keep the half that can hold the target.Lesson: My binary search says 0 isn’t in [4, 5, 6, 7, 0, 1, 2] · Roadmap: Binary search on an index and on the answer
• Two pointersWalk in from both ends of a sorted list to find a pair that adds up to a target.Lesson: Two Sum · Roadmap: Two pointers
• Most waterTwo walls walk in from the ends: work out the water between them, then rule out the shorter one.Lesson: My tank finder says 40, but two walls hold 49 · Roadmap: Two pointers
• Hash map lookupRemember what you’ve seen in a dict, so each partner is found in one step.Lesson: Two Sum · Roadmap: Hashing and hash maps
• Sliding windowSlide a window along a list, adding one number and dropping one at each step.Lesson: My no-repeat finder says 2, but “vdf” has 3 · Roadmap: Sliding window
• No repeatsGrow a window one character at a time, and drop from the left when a character comes twice.Lesson: My no-repeat finder says 2, but “vdf” has 3 · Roadmap: Sliding window
• Selection sortFind the smallest of the rest and swap it into place, counting every comparison.Lesson: My sort is right, but 50,000 scores take half a minute · Roadmap: Basic sorting
• Insertion sortDo it yourselfMove each new number left until it fits, one swap at a time.Lesson: My sort is right, but 50,000 scores take half a minute · Roadmap: Basic sorting
• Merge sortSplit in half, sort each half with a call, and merge: the call tree, with each list it sorted.Lesson: My sort is right, but 50,000 scores take half a minute · Roadmap: Basic sorting, Recursion
• Breadth-first searchDo it yourselfFind the fewest steps through a maze by taking cells from a queue, nearest first.Lesson coming soon · Roadmap: Graphs: BFS, DFS, topological sort, union-find, Dijkstra, cycles, Stacks and queues
• Counting the workCount the pair checks two loops make, then the looks a set makes, on the same ids.Lesson: My code passed every test, then timed out on the big one · Roadmap: Big-O for time and space
• Reversing a listWatch inserts at the front move every character, then two pointers swap the ends instead.Lesson: I reversed the list, but the caller’s list didn’t change · Roadmap: Arrays and strings
• Anagram checkCount letters by reading both words again and again, then keep one dict of counts instead.Lesson: My anagram check says aab and abb match · Roadmap: Hashing and hash maps
• Call treesEvery call a recursive function makes, under the call that made it: how many in all, and how many wait at once.Lesson: My power function crashes when n is 5,000 · Roadmap: Recursion
• Bracket checkPush each opening bracket and pop it when its closing one comes, with the stack’s top at the end, then at the front.Lesson: My bracket check says ([)] is fine · Roadmap: Stacks and queues
• Rate limiterA queue of the requests in the last window: the oldest leave from the front, with a deque, then with a list’s pop(0).Lesson: My rate limiter let 200 requests through in one second · Roadmap: Stacks and queues

SQL

• Your own queryWrite any SELECT and watch it run clause by clause, with the table after each step.Roadmap: Logical query processing order, GROUP BY and HAVING, Joins: inner, left, right, full, self and cross
• Rows checked against keysWatch new rows go into a table with a primary key, foreign keys and UNIQUE, one rule at a time.Lesson: My report shows reviews of a product we don’t sell · Roadmap: Tables, rows and keys
• The warehouse listWatch WHERE, ORDER BY and LIMIT pick the oldest orders, and see what LIMIT keeps with no ORDER BY.Lesson: Order 109 disappeared from the warehouse’s list · Roadmap: SELECT, WHERE, ORDER BY and LIMIT, Logical query processing order
• The second-highest priceWatch DISTINCT keep one row per price, so OFFSET 1 skips the top price and not just one copy of it.Lesson: Our “second-highest price” is the highest price · Roadmap: DISTINCT, Logical query processing order
• The sales tileWatch count, sum and avg fold one day’s orders into one row, even when no rows are left.Lesson: The sales tile says two customers ordered, but it was only Hugo · Roadmap: Aggregates, Logical query processing order
• The loyalty couponWatch WHERE drop rows, GROUP BY make groups, and HAVING drop whole groups.Lesson: Grace shopped on one day and got the loyalty coupon · Roadmap: GROUP BY and HAVING, Logical query processing order
• The reminder listWatch one NULL in a NOT IN list make every comparison unknown, so no customer gets the reminder.Lesson: A guest checked out, and nobody got a reminder · Roadmap: NULL and three-valued logic, Simple subqueries
• The payments reportWatch an inner JOIN drop an order with no payment, LEFT JOIN keep it, and GROUP BY fold a split payment.Lesson: Dana never paid, and finance never noticed · Roadmap: Joins: inner, left, right, full, self and cross, GROUP BY and HAVING
• The double-order checkWatch a self join pair each order with itself and every pair both ways, then keep each pair once and check both orders.Lesson: Grace cancelled, and we still asked if she’d ordered twice · Roadmap: Joins: inner, left, right, full, self and cross
• The bottle offerWatch two subqueries list who bought a backpack and who bought a water bottle. Then IN keeps each customer once, and NOT IN drops the rest.Lesson: Elif bought two backpacks and got the bottle offer twice · Roadmap: Simple subqueries
• The duplicate cleanupWatch GROUP BY gather the payments that match in every column but the id, keep the first of each, and DELETE remove the rest.Lesson: We deleted Ben’s duplicate payment, and the real one went too · Roadmap: INSERT, UPDATE and DELETE
• The welcome listWatch a query run in the order the database runs it: WHERE drops cancelled orders, then HAVING tests each customer’s first order.Lesson: Dana first ordered in August and got September’s welcome email · Roadmap: Logical query processing order
• The pay listWatch WITH name the staff past probation once, then the company average and each department read the same rows.Lesson: A team of one made the above-average pay list · Roadmap: CTEs
• The growing ordersWatch a correlated subquery run once for each order, and pick the same customer’s order just before it.Lesson: Bigger than the order before, or just typed in late? · Roadmap: Correlated subqueries
• The window shoppersWatch EXISTS stop at the first match, and NOT EXISTS ignore a guest’s NULL that empties NOT IN.Lesson: Grace got the window-shopper email twice · Roadmap: EXISTS vs IN vs JOIN, and the NOT IN + NULL trap
• Window functionsWatch a query run in the order the database runs it, numbering each customer’s orders.Lesson: Each customer's latest order · Roadmap: Window functions: ranking, LAG, LEAD, running totals, frames

Python

• Your own codePaste any function and watch it run: each line, what changed, the calls in progress and the answer.Roadmap: How Python runs your code, Decisions and loops: if, for and while, Your first functions: def and return
• SlicesWatch a slice count its start and stop from the front or the back, then take its places one step at a time, backwards too.Lesson: My shop’s total says 0.30000000000000004 · Roadmap: Numbers, strings, slicing and f-strings
• Sets and lookupsWatch numbers go into a set’s table of slots, then one get looked up in a slot or two. A list would compare it with every item.Lesson: My import got 100 times slower when the data grew 10 times · Roadmap: list, tuple, dict and set, and what each operation costs
• A line on Python’s stackWatch one line become bytecode, then run: each value goes on a stack, and each operator takes the top two and puts one back.Lesson: Python says my formula has too many nested parentheses · Roadmap: How Python runs your code
• Names and objectsWatch names point at lists and dicts: two names on one list, and a copy that is only new on the outside.Lesson: I changed my copy, and the original changed too · Roadmap: Names, objects and references, Mutable and immutable objects
• Scope boxesWatch Python look for a name box by box: local, enclosing, global, built-in. And see a finished call’s box stay for a closure.Lesson: Python says my counter has no value · Roadmap: Scope and the LEGB rule, Closures
• ComprehensionsWatch a for loop skip a reading after each one it removes, then a comprehension build a new list, one part at a time.Lesson: I removed the bad readings, but one is still there · Roadmap: Comprehensions
• ExceptionsWatch an error go up through the calls in progress, past a call with no try, until an except that matches catches it.Lesson: My server ignored the port I set · Roadmap: Exceptions
• Files and pathsFollow a path one part at a time from the folder you ran the program from. See why the same path finds a file from one folder and not from another.Lesson: My script can’t find its file when I run it from another folder · Roadmap: Files and pathlib
• GeneratorsWatch a pipeline of generators read a log one line at a time, with almost nothing in memory.Lesson: Count errors in a 10 GB log · Roadmap: Iterators and generators

In the lessons

Some pictures live next to the lesson that needs them:

• System design: a system growing from one server, and traffic moving through your own design, with a part you make fail.
• AI engineering: a question going through a RAG pipeline.
• Frameworks: the queries one Django page sends.
• Scenarios: request times before and after a slow deploy.