mforando/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .vennCircle {
      stroke: black;
      stroke-width:1;
      fill:gray;
      fill-opacity:.4;
    }
    #middleCircle {
      clip-path: url(#svgPath);
      fill-opacity:0;
    }
    body {margin:100;}
  </style>
</head>

<body>
  <svg id="sqlSVG" width="800" height="500">
      <defs>
        <clipPath id="svgPath"><circle r=100 cx = 150 cy = 150 class="vennCircle"></circle></clipPath>
    </defs>
    <circle r=100 cx = 150 cy = 150 class="vennCircle" id="middleCircle"></circle>
    <circle r=100 cx = 150 cy = 150 class="vennCircle"></circle>
		<circle r=100 cx = 250 cy = 150 class="vennCircle"></circle>

  </svg>
  <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('#sqlSVG');

	var data = [];

	var numRows = 7;
	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(310, ' + 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>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	.vennCircle {
	stroke: black;
	stroke-width:1;
	fill:gray;
	fill-opacity:.4;
	}
	#middleCircle {
	clip-path: url(#svgPath);
	fill-opacity:0;
	}
	body {margin:100;}
	</style>
	</head>

	<body>
	<svg id="sqlSVG" width="800" height="500">
	<defs>
	<clipPath id="svgPath"><circle r=100 cx = 150 cy = 150 class="vennCircle"></circle></clipPath>
	</defs>
	<circle r=100 cx = 150 cy = 150 class="vennCircle" id="middleCircle"></circle>
	<circle r=100 cx = 150 cy = 150 class="vennCircle"></circle>
	<circle r=100 cx = 250 cy = 150 class="vennCircle"></circle>

	</svg>
	<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('#sqlSVG');

	var data = [];

	var numRows = 7;
	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(310, ' + 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>