Skip to content

Instantly share code, notes, and snippets.

@mforando

mforando/.block

Last active September 18, 2017 20:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mforando/2d924d3299089d87bb833937f9465848 to your computer and use it in GitHub Desktop.
Save mforando/2d924d3299089d87bb833937f9465848 to your computer and use it in GitHub Desktop.
Download ZIP
Visualizing SQL Joins
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var width = 600,
height = 600;
var records = ['A','B','C','D','E','F','G','H']
var matched = ['A','B','E','H']
var tabWidth = 150;
var tabHeight = 200;
var tabOffsetX = (width-tabWidth*2)/3
var tabOffsetY = 50
var svg = d3.selectAll('body').append('svg')
.attr('width', width)
.attr('height', height);
var data = [];
var numRows = 8;
var numCols = 6;
for (var k = 0; k < numRows; k += 1) {
data.push(d3.range(numCols));
}
var sql1 = svg.append('g')
.attr('class','SQL1')
.attr('transform','translate('+tabOffsetX+','+tabOffsetY+')')
.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', function(d, i) {
return 'translate(0, ' + tabHeight/numRows * i + ')';
})
;
sql1.selectAll('rect')
.data(function(d) { return d; })
.enter()
.append('rect')
.attr('fill',function(d){
if (d==0){return 'black';}
else {return 'gray';}
;})
.attr('x', function(d, i) { return tabWidth/numCols * i; })
.attr('width', tabWidth/numCols)
.attr('height', tabHeight/numRows)
.attr('stroke','white')
;
sql1.append('text')
.text(function(d,i){return records[i];})
.style("fill","white")
.attr("transform","translate("+ (tabWidth/numCols/2)+','+ (tabHeight/numCols/2)+')')
.attr("text-anchor","middle")
;
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment