Square grid

Square grid that fills the svg, based on specified number of rows and columns.

Adapted from Chuck Grimmett's block, Let's Make a Grid with D3.js.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      font-family:"avenir next", Arial, sans-serif;
      font-size: 12px;
      color: #696969;
      margin: 0;
    }
  </style>
</head>

<body>
<div id="grid"></div>
  
<script>
var margin = {top:10, right:10, bottom:10, left:10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var gridData = gridData(width, height, 13, 8);
// console.log(gridData);
  
var svg = d3.select("#grid")
		.append("svg")
		.attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var grid = svg.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var row = grid.selectAll(".row")
    .data(gridData)
    .enter()
    .append("g")
    .attr("class", "row");

// function that generates a nested array for square grid
function gridData(w, h, ncol, nrow) {
  var data = [];
  var xpos = 1;  // starting xpos and ypos at 1 so the stroke will show
  var ypos = 1;

// calculate width and height of the cell based on width and height of the canvas
  var cellSize = calcCellSize(w, h, ncol, nrow);

// iterate for rows
  for (var row = 0; row < nrow; row++) {
    data.push([]);
    
    // iterate for cells/columns inside each row
    for (var col = 0; col < ncol; col++) {
      data[row].push({
        x: xpos,
        y: ypos,
        width: cellSize,
        height: cellSize
      });
      
      // increment x position (moving over by 50)
      xpos += cellSize;
    }
    
    // reset x position after a row is complete
    xpos = 1;
    
    // increment y position (moving down by 50)
    ypos += cellSize;
  }
  return data;

function calcCellSize() {
    // leave tiny space in margins
    var gridWidth  = w - 2;
    var gridHeight = h - 2;
    var cellSize;

// calculate size of cells in columns across
    var colWidth = Math.floor(gridWidth / ncol);
    // calculate size of cells in rows down
    var rowWidth = Math.floor(gridHeight / nrow);

// take the smaller of the calculated cell sizes
    if (colWidth <= rowWidth) {
      cellSize = colWidth;
    } else {
      cellSize = rowWidth;
    }
    return cellSize;
  }
}
</script>
</body>

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