Built with blockbuilder.org
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/10.1.0/d3fc.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/riccardoscalco/textures/master/textures.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<div id="grid"></div>
<script>
function gridData() {
var data = new Array();
var xpos = 1; //starting xpos and ypos at 1
var ypos = 1;
var width = 25;
var height = 25;
var click = 0;
//iterate for rows
for (var row = 0; row < 50; row++) {
data.push( new Array() );
//iterate for cells/cols inside rows
for (var column = 0; column < 30; column++) {
data[row].push({
x: xpos,
y: ypos,
width: width,
height: height,
click: click
})
//increment the x position, move it over by 50
xpos += width;
}
//reset the x position after a row is complete
xpos = 1;
//increment the y position for next row, move down 50
ypos += height;
}
return data;
}
var gridData = gridData();
console.log(gridData);
//define texture
var t = textures.circles()
.lighter();
var grid = d3.select("#grid")
.append("svg")
.attr("width", "1050px")
.attr("height", "1500px");
//call texture
t.background("#f4e842");
grid.call(t);
var row = grid.selectAll(".row")
.data(gridData)
.enter().append("g")
.attr("class", "row");
var column = row.selectAll(".square")
.data(function(d) { return d; })
.enter().append("rect")
.attr("class", "square")
.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", "#ffd232")
// .style("stroke", none)
.style("fill", t.url());
// var text = d3.select("body").append("svg")
// .attr("width", 960)
// .attr("height", 500)
// text.append("text")
// .text("Hi, I'm Anna!")
// .attr("y", 200)
// .attr("x", 120)
// .style("font-size", 36)
// .style("font-family", "monospace")
</script>
</body>