/*
 * This javascript file creates a grid on a canvas
 *
 * Author: Avan Suinesiaputra
 */

var nrow = 8,
    ncol = 16,
    width = 50,
    height = 50;
    
// the pixval here contains index numbers
var pixval = d3.range(0, nrow*ncol);

// create squares
d3.select("svg")       // select the first <svg> element in the document
  .selectAll(".cell")  // select all elements with class = "cell" under <svg>
  .data(pixval)        // attach pixelval data, which creates (nrow*ncol) elements
  .enter()             // get "enter" method selections when creating the element
  .append("g")         // that element of class cell is the grouping <g> element of svg
  .attr("class", "cell")  // the class = "cell" is assigned
  .attr("transform",      // move the grouping <g> at top-left corner of each cell
        function (d) {
            return "translate(" + ((d % ncol)*width) + "," + (Math.floor(d / ncol)*height) + ")"
        })
  .append("rect")           // then draw the rectangle
  .attr("width", width)     // with the correct width
  .attr("height", height);  // and height