COMPSCI590V: Data Visualization And Exploration - Educational Attainment in the United States: 2015 - Education Heatmap by age and gender

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:10;right:10;bottom:0;left:0; }
    
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    
  </style>
</head>

<body onLoad="toggleBetween()">
  <FORM>
	<INPUT type="button" value="Toggle" name="button" onClick="toggleBetween()">
	</FORM> 
    
    
 <script>
   var female=true;
    
    var x = "level";
    var y = "age";
    var side = "number";
    var w_plot = 700;
    var h_plot = 250;
    
    var margin = { left: 150, top: 5, right: 50, bottom: 200 };
    
    var H = h_plot + margin.top + margin.bottom;
    var W = w_plot + margin.left + margin.right;
    
    var svg = d3.select("body").append("svg")
      .attr("width", W)
      .attr("height", H);
    
    var plot_area = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    
    var xScale = d3.scale.ordinal().rangeRoundPoints([0, w_plot]);
    var yScale = d3.scale.ordinal().rangeRoundPoints([0, h_plot]);
    var sizeScale = d3.scale.sqrt().domain([0, 6000]).range([1, 20]);
    
    
    // Axes
    var xAxisGroup = plot_area.append("g")
        .attr("transform", "translate(0," + (h_plot+20) + ")")
        .attr("class", "x axis");

var yAxisGroup = plot_area.append("g")
    		.attr("transform", "translate("+ (-5) +",0)")
        .attr("class", "y axis");

var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
    var yAxis = d3.svg.axis().scale(yScale).orient("left");
    
    
    function render(data, color){

xScale.domain(data.map( function (d){ return d[x]; }));
        yScale.domain(data.map( function (d){ return d[y]; }));
      
      
        xAxisGroup
          .call(xAxis)
          .selectAll("text")
    				.style("text-anchor", "start")
    				.attr("transform", "rotate(90),translate(4,-20)");
        yAxisGroup.call(yAxis);

// Bind data
        var squares = plot_area.selectAll("rect").data(data);
        
        // Enter
        squares.enter().append("rect")
     			.attr("opacity", 0.5);

// Update
        squares
        	.attr("fill", color)
          .attr("x", function (d){ return xScale(d[x]); })
          .attr("y", function (d){ return yScale(d[y]); })
          .attr("width", function(d){return sizeScale(d[side]); })
        	.attr("height", function(d){return sizeScale(d[side]); });

// Exit
        squares.exit().remove();
      }

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js