SQL Query Execution Plan Visualizer with Plain-English Explanations

Every database runs queries through an execution plan — a tree of operators like sequential scans, index scans, hash joins, sorts and aggregates — but EXPLAIN output reads like machine code to most students. Learners can write SQL for years without ever understanding what the engine actually does with it, which makes query optimization feel like guesswork. This project closes that gap: a web app where you paste any SELECT query and immediately see its execution plan as a visual operator tree, with each node annotated by estimated rows and cost, plus a plain-English walkthrough of every step in the order the engine runs them. A hand-written SQL parser (tokenizer plus recursive-descent grammar) handles the common SELECT subset — joins, filters, grouping, sorting, limits — over a realistic e-commerce schema, and an index-aware planner picks scan strategies the way a real optimizer reasons. It turns an invisible internals topic into something you can click, read and explain.

1. Paste a SELECT query into the editor (or pick one of the four guided samples) and press Visualize plan.
2. The tokenizer splits the query into keywords, identifiers, strings, numbers and operators; the recursive-descent parser builds an abstract syntax tree for the SELECT statement.
3. The planner walks the AST bottom-up: one scan node per table — Index Scan when a WHERE equality hits a known index, otherwise Seq Scan with the residual filter noted — then folds each JOIN into a Hash Join (equi-join) or Nested Loop node.
4. Single-table WHERE predicates are pushed into their scans; GROUP BY and aggregates become a HashAggregate node; ORDER BY and LIMIT become Sort and Limit nodes.
5. Every node receives estimated output rows (selectivity heuristics over the schema's row counts) and a startup/total cost from the demo's openly documented cost model.
6. The tree renders with connector lines while the explainer panel narrates each step in plain English in execution order — click any node for its full operator details.

Tech stack:

• HTML5 + CSS3 (dark IDE-style UI)
• Vanilla JavaScript (ES6, zero dependencies)
• Hand-written recursive-descent SQL parser
• Heuristic cost-based plan estimation
• Tree layout with CSS connectors + auto-fit scaling
• Single-file app — runs offline in any modern browser
• Git

• [Hand-written SQL parser] A real tokenizer plus recursive-descent parser for the common SELECT subset — FROM/JOIN/WHERE/GROUP BY/ORDER BY/LIMIT, aliases, aggregate functions and expressions — with no parser-generator dependency, and every grammar rule documented for the viva.
• [Visual plan tree] The parsed query becomes an operator tree (Seq Scan, Index Scan, Hash Join, Sort, HashAggregate, Limit) drawn with connector lines; every node shows estimated rows and cost, and the tree auto-fits the viewport.
• [Plain-English explainer] Each plan node gets a step-by-step explanation in ordinary language, ordered the way the engine actually executes (leaves first) — so "Hash Join" becomes "build a hash table from the inner rows, then probe it".
• [Index-aware scan choice] The planner inspects WHERE clauses against the schema's indexes and picks Index Scan over Seq Scan when an equality matches a known index — the same reasoning a real optimizer applies.
• [Heuristic cost model] Row estimates use selectivity heuristics (indexed equality ≈ 2%, range ≈ 15%) and each operator carries a startup/total cost — every figure clearly labeled an estimate, never a measurement.
• [Click-to-inspect nodes] Selecting any node opens its operator details — join conditions, sort keys, group keys, index used — alongside its plain-English meaning.
• [Sample schema + queries] A realistic 4-table e-commerce schema (customers, orders, products, order_items) with row counts and indexes, plus four guided sample queries from simple filter to three-table aggregate.
• [Syntax-highlighted editor] A SQL editor with keyword/string/number highlighting, clear parse-error messages for unsupported syntax, and one-click visualization.

• Working single-file web demo (the plan visualizer app)
• Documented parser + planner JavaScript source with grammar notes
• Sample e-commerce schema definition with indexes and row counts
• Four guided walkthrough queries (filter, join, aggregate, indexed lookup)
• Project report PDF (parsing theory, planner design, cost model, methodology)
• PPT presentation for final review
• Viva Q&A preparation document (parsing, query planning, join algorithms, cost estimation)