Skip to content

Instantly share code, notes, and snippets.

@annabsmylie annabsmylie/.block

Last active Sep 29, 2016
Embed
What would you like to do?
quilt block (random texture)
license: mit
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.