Visualizing SQL Joins

<!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>

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));
	}

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>

https://d3js.org/d3.v4.min.js