Built with blockbuilder.org
Last active
September 29, 2016 04:32
-
-
Save annabsmylie/0ad5c50200d5ef47a0129b99b1db004c to your computer and use it in GitHub Desktop.
quilt block
This file contains 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 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 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment