officeofjane/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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");

var column = row.selectAll(".cell")
    .data(function(d) { return d; })
    .enter()
    .append("rect")
    .attr("class", "cell")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .attr("width", function(d) { return d.width; })
    .attr("height", function(d) { return d.height; })
    .style("fill", "white")
    .style("stroke", "grey");

// 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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");

	var column = row.selectAll(".cell")
	.data(function(d) { return d; })
	.enter()
	.append("rect")
	.attr("class", "cell")
	.attr("x", function(d) { return d.x; })
	.attr("y", function(d) { return d.y; })
	.attr("width", function(d) { return d.width; })
	.attr("height", function(d) { return d.height; })
	.style("fill", "white")
	.style("stroke", "grey");

	// 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>