Skip to content

Instantly share code, notes, and snippets.

@officeofjane
Last active September 8, 2017 10:04
Show Gist options
  • Save officeofjane/c436fdcc3b44c957910ebfa827b98902 to your computer and use it in GitHub Desktop.
Save officeofjane/c436fdcc3b44c957910ebfa827b98902 to your computer and use it in GitHub Desktop.
Square grid
license: mit

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");
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment