annabsmylie/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from annabsmylie's block: quilt block

  
## index.html
<!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>
	<!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>