Yvaral I

Trying recreate this piece by Jean Pierre Yvaral that I saw at the Tate Modern, in London. I can't seem to find the specific piece online...

Part I of V

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

var width = window.innerHeight*.98,
        height = window.innerHeight*.98,
        margin = {top: 0, bottom: 0, right: 0, left: 0}

var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var n = 6,
        quadrants = 4,
        rowHeight = height/2/n,
        cellWidth = width/2/n;

// Lay out quandrants
    var quadrants = svg.selectAll(".quadrant")
          .data(d3.range(quadrants).map(Object))
        .enter().append("g")
          .attr("class", "quadrant")
          .attr("transform", function(d, i) { 
            if(i == 0) {
              return "translate(0,0)"
            } else if(i == 1) {
              return "translate(" + width/2 + ",0)"
            } else if(i == 2) {
              return "translate(0," + height/2 + ")"
            } else {
              return "translate(" + width/2 + "," + height/2 + ")"
            }
          })

// within each quadrant, there is a 6 by 6

var rows = quadrants.selectAll(".quadrant-row")
        .data(d3.range(n).map(Object))
      .enter().append("g")
        .attr("class", "quadrant-row")
        .attr("transform", function(d, i) { return "translate(0," + rowHeight*i + ")" })

var cells = rows.selectAll(".cell")
        .data(d3.range(n).map(Object))
      .enter().append("g")
        .attr("class", "cell")
        .attr("transform", function(d, i) { return "translate(" + cellWidth*i + ",0)" })

// Making first triangle
    cells.append("path")
        .attr("d", "M0,0 L " + cellWidth + ",0L" + cellWidth + "," + rowHeight + "Z") 
        .style("fill", "darkgray")

// Making first triangle
    cells.append("path")
        .attr("d", "M0,0 L0," + rowHeight + "L" + cellWidth + "," + rowHeight + "Z") 
        .style("fill", "lightgray")

// Make 2nd triangle

// create clip paths for each 
    cells.append("clipPath")
      .attr("id","rect-clip")
      .append("rect")
      .attr("width", cellWidth/2)
      .attr("height", rowHeight/2)

cells.append("rect")
        .attr("clip-path","url(#rect-clip)")
        .attr("width", cellWidth-2)
        .attr("height", rowHeight-2)
        .style("fill", "#002EA7") // Klein blue

</script>
</body>

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