v5 centered rectangular heatmap

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg id="heatmap" width="500" height="400"></svg>
  <script>
  var margin = {left: 10, right: 10, top: 10, bottom: 10}
  var width = 500
  var height = 400
  // Initiatialise SVG
  var svg = d3.select("#heatmap")
  var correlations = [
    {correlation: 0.01, voterX: 'a', voterY: 'b'},
    {correlation: 0.02, voterX: 'a', voterY: 'c'},
    {correlation: 0.3, voterX: 'a', voterY: 'd'},
    {correlation: 0.04, voterX: 'a', voterY: 'e'},
    {correlation: 0.05, voterX: 'b', voterY: 'c'},
    {correlation: 0.06, voterX: 'b', voterY: 'd'},
    {correlation: 0.07, voterX: 'b', voterY: 'e'},
    {correlation: 0.08, voterX: 'b', voterY: 'b'},
    {correlation: 0.09, voterX: 'c', voterY: 'd'},
    {correlation: 0.10, voterX: 'c', voterY: 'e'},
    {correlation: 0.11, voterX: 'd', voterY: 'e'},
    {correlation: 0.02, voterX: 'c', voterY: 'b'},
    {correlation: 0.5, voterX: 'a', voterY: 'b'},
  ]
   var voters = ['a', 'b', 'c', 'd','e']
  // Grab min and max of correlations
  let min = d3.min(correlations.map(d => d.correlation).filter(d => d < 1)),
      max = d3.max(correlations.map(d => d.correlation).filter(d => d < 1));
  
  // Position the main chart canvas
  let heat = svg.append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  // Redefine width and height with margins in mind
  let w = width - margin.left - margin.right,
      h = height - margin.top - margin.bottom;
  
  // Build X scales and axis:
  var x = d3.scaleBand()
    .range([ 0, w ])
    .domain(voters)
    .padding(0.05)
    .align(0.5); 
  heat.append("g")
    .attr("transform", "translate(0,0)")
    .call(d3.axisTop(x))
  
  // Build Y scales and axis:
  var y = d3.scaleBand()
    .range([ h, 0 ])
    .domain(voters)
    .padding(0.05)
    .align(0.5);
  heat.append("g")
    .call(d3.axisLeft(y))
    .attr("transform", "translate(0" + ", 0)");
  
  // Build rect size scale
  var xRectSize = d3.scaleLinear()
    .range([x.bandwidth()/5, x.bandwidth()-2])
    .domain([min, max]);
  
  var yRectSize = d3.scaleLinear()
    .range([y.bandwidth()/5, y.bandwidth()-2])
    .domain([min, max]);
  
  // Build color scale
  var myColor = d3.scaleLinear()
    .range(["#d95f02", "white", "#15b097"])
    .domain([min, 0, max]);
  
  heat.selectAll()
        .data(correlations, d => d.voterX+':'+d.voterY)
        .enter()
        .append("rect")
        //.attr("x", d => x(d.voterX))
        .attr("y", d => y(d.voterY) + ((yRectSize(+d.correlation) + y.bandwidth()) / 2) - yRectSize(+d.correlation))
  			.attr("x", d => x(d.voterX) + ((xRectSize(+d.correlation) + x.bandwidth()) / 2) - xRectSize(+d.correlation))
        .attr("width", d => xRectSize(+d.correlation))
        .attr("height", d => yRectSize(+d.correlation))
        .style("fill", d => {if (d.correlation == 1) {return "white";}
                             else return myColor(d.correlation)});

</script>
</body>

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