Skip to content

yavanikab/SQL-Vizualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Y-SQLVIZ — Interactive SQL Visualizer

Y-SQLVIZ Logo

An interactive, visual learning tool for understanding SQL concepts through live diagrams and interactive examples. Perfect for beginners and those looking to deepen their SQL knowledge.

💎 Features

  • Interactive Visualizations: Understand complex SQL concepts through animated diagrams
  • Live Query Examples: See SQL queries execute in real-time with visual results
  • Custom Data Input: Provide your own data and SQL queries to visualize
  • Beginner-Friendly: Designed to make SQL concepts intuitive and easy to understand
  • Accessible Design: Semantic HTML and screen reader support for inclusive learning
  • Modern UI: Clean, responsive design that works on all devices

🚀 Prerequisites

  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • JavaScript enabled
  • No installation or setup required — just visit and start learning!

📚 Current Visualizations

1. SQL Joins

Visualize all types of SQL joins with interactive examples:

  • INNER JOIN
  • LEFT JOIN
  • RIGHT JOIN
  • FULL OUTER JOIN
  • And more...

See how joins combine data from multiple tables with step-by-step visual walkthroughs.

2. SQL Execution Order

Understand the order in which SQL clauses are executed:

  • SELECT, FROM, WHERE, GROUP BY, HAVING, ORDER BY
  • Interactive timeline showing clause execution sequence
  • Learn why certain operations happen before others

🔜 Coming Next

  • Window Functions – Learn ROW_NUMBER(), RANK(), SUM() PARTITION BY, LAG(), and more
  • CTEs & Subqueries – Master common table expressions and nested queries
  • Additional advanced SQL topics

🌐 Browser Support

  • ✅ Chrome/Chromium (latest)
  • ✅ Firefox (latest)
  • ✅ Safari (latest)
  • ✅ Edge (latest)

Requires JavaScript enabled and modern ES6+ support.

💡 How It Works

Each visualization provides:

  1. Interactive Tables – Input your own data with the ability to add/remove rows
  2. Custom SQL Input – Write and execute your own SQL queries against your data
  3. Visual Diagrams – SVG-based connector diagrams showing data flow and relationships
  4. Result Grid – Real-time query results as you modify inputs and queries
  5. Step-by-Step Guides – Explanations of what's happening at each step
  6. Accessible Interface – Full keyboard navigation and screen reader support

📄 License & Usage

This repo is for viewing and feedback only. Not open source.

See the full license and terms for permitted and prohibited uses.

🎓 Learn More

💬 Feedback & Support

We'd love to hear your thoughts! While this isn't an open-source project accepting code contributions, we welcome feedback and suggestions:

  • 📝 Open an Issue to report bugs or suggest features
  • 💭 Start a Discussion for general feedback and ideas
  • 📧 Share your learning experience and how Y-SQLVIZ helped you understand SQL better

Your feedback helps us improve the learning experience for everyone.

👤 Author

Yavanika Balaga — Created Y-SQLVIZ to make SQL learning interactive and intuitive.

Version: 1.3 Last Updated: March 2026


Have questions or something unclear? Don't hesitate to reach out via Issues or Discussions.

About

Interactive SQL visualizer for learning joins, execution order, and query concepts through live diagrams.

Topics

Resources

Stars

Watchers

Forks

Contributors

Languages