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.
Last active
September 8, 2017 10:04
-
-
Save officeofjane/c436fdcc3b44c957910ebfa827b98902 to your computer and use it in GitHub Desktop.
Square grid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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