SQL Joins Visualization¶
Interactive tool for sql joins visualization
Every pure database developer could confirm that SQL language can be compared if not to the mother tongue but at least to any other foreign language you know. I.e. it's not a programming language. It's a more verbal, human-like tongue.
Jokes aside, this is just an expression of respect to the simple but very powerful language that allows you to "speak" to the different databases.
Being so widely used it's assumed by default today that every developer who ever wrote any piece of backend code must know SQL language.
One of the fundamental things in SQL is join operation between two datasets.
Google search shows two main approaches for SQL joins visualization.
These are Venn Diagrams and basic table representation.
The Venn Diagram is dominant while later one is used much more rarely.
It also could be noted that there is long term discussion going on whether Venn Diagrams are useful for joins representation or not. Here is a detailed post about this "problem".
I've also found a few nice implementations of joins visualization. This one is for the Venn Diagrams approach. And this one is for basic tables.
All the above gave me an idea - why just don't combine Venn Diagrams and table representations together? So, here it is. My variant of SQL Joins Visualization :)
Implemented visualization apart from main drop-down selector for Join Type includes interactive Venn Diagram component and data controls. It's a set of checkboxes which allow to add NULLs to the seed data, introduce 1:many relation between joined tables and display additional columns in tables for more "verbal" examples.
Any join type is mapped to a separate URL which also preserves state for all enabled data controls. When you share such an URL, on opening it will load details for that join type and enable corresponding data controls.
For example, this is link to a basic Inner Join. And this is Full Join with NULLs in data and 1:many relation.
Any feedback is more than welcome. Enjoy!