Built with blockbuilder.org
forked from annabsmylie's block: quilt block
license: mit |
Built with blockbuilder.org
forked from annabsmylie's block: quilt block
<!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"); | |
var row = grid.selectAll(".row") | |
.data(gridData) | |
.enter().append("g") | |
.attr("class", "row"); | |
//call texture | |
// grid.call(t); | |
//----------------------------- | |
// From Curran, http://bl.ocks.org/curran/0ad2eef56811e04f3aa6 | |
// Textures need to be generated multiple times, | |
// once for each color they are paired with. | |
textureGenerators = [ | |
function(){ | |
return textures.circles().thicker(); | |
}, | |
function(){ | |
return textures.circles().size(5); | |
}, | |
function(){ | |
return textures.paths().d("squares").size(8); | |
} | |
], | |
// Create a scale that encapsulates texture mappings. | |
textureScale = d3.scale.ordinal() | |
.domain(["X", "Y", "Z"]) | |
.range(textureGenerators), | |
// Create a scale that encapsulates colors. | |
// Colors from http://colorbrewer2.org/ | |
colorScale = d3.scale.ordinal() | |
.domain(["A", "B", "C"]) | |
.range(["#1b9e77", "#d95f02", "#7570b3"]), | |
// Create a nested ordinal scale for color and texture. | |
colorTextureScale = d3.scale.ordinal() | |
// The first level is for color. | |
.domain(colorScale.domain()) | |
.range(colorScale.range().map(function(color){ | |
// The second level is for texture. | |
return d3.scale.ordinal() | |
.domain(textureScale.domain()) | |
.range(textureScale.range().map(function(generateTexture){ | |
// Generate a new texture for each (color, texture) pair. | |
return colorizeTexture(generateTexture(), color); | |
})) | |
})); | |
// Makes the given texture appear as the given color. | |
function colorizeTexture(texture, color){ | |
// Use stroke, present on all textures. | |
var texture = texture.stroke(color); | |
// Use fill, present only on some textures (e.g. "circles", not "lines"). | |
if(texture.fill){ | |
texture.fill(color); | |
} | |
return texture; | |
} | |
// Initialize defs for each (texture, color) pair. | |
colorTextureScale.range().forEach(function(scale){ | |
// scale.range().forEach(grid.call, grid); | |
scale.range().forEach(row.call, row); | |
}); | |
// Initialize the data grid. | |
var data = []; | |
for(var i = 0; i < 50; i++){ | |
for(var j = 0; j < 50; j++){ | |
data.push({ | |
i: i, | |
j: j, | |
// "a" corresponds to color. | |
a: i < 50 / 3 ? "A" : i < (50 * 2 / 3) ? "B" : "C", | |
// "b" corresponds to texture. | |
b: j < 50 / 3 ? "X" : j < (50 * 2 / 3) ? "Y" : "Z" | |
}); | |
} | |
} | |
//----------------------------- | |
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", "#ffffff") | |
// .style("fill", t.url()); | |
//----------------------------- | |
// From Curran, http://bl.ocks.org/curran/0ad2eef56811e04f3aa6 | |
// Use the color scale for the stroke | |
// .style("stroke", function(d){ return colorScale(d.a); }) | |
// Use the nested texture & color scale to define the texture | |
.style("fill", function(d){ | |
return colorTextureScale(d.a)(d.b).url(); | |
}); | |
</script> | |
</body> |