quilt block (random color)

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.jsdelivr.net/gh/riccardoscalco/textures/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>

//function to create grid's data
  function gridData() {
    var data = new Array();
    var xpos = 1; //starting xpos and ypos at 1
    var ypos = 1;
    var width = 25;
    var height = 25;
    
    //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,
//           fill: randomColor
        })
        //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");

//    grid.call(t);
//	//**create a textures array**
//   var textures = [
//     textures.lines(),
//     textures.lines().heavier()];
		
    //**create a function that selects a random index from texture array**  
  // Returns a random integer between min (included) and max (excluded)
  // Using Math.round() will give you a non-uniform distribution!
//   function getRandomInt(min, max) {
//     min = Math.ceil(min);
//     max = Math.floor(max);
//     return Math.floor(Math.random() * (max - min)) + min;
//   }
//   var randomTexture = function() {
//     var idx = getRandomInt(0, 2);
//     console.log(idx);
//     var t = textures[idx];
//     return t;
//   }
    
//   var color = d3.scale.category20();

// thanks to https://bl.ocks.org/jdarling/06019d16cb5fd6795edf
  var randomColor = (function(){
    var golden_ratio_conjugate = 0.618033988749895;
    var h = Math.random();
    
    var hslToRgb = function (h, s, l){
    var r, g, b;
    if(s == 0){ r = g = b = l;} // achromatic
    else{
      function hue2rgb(p, q, t){
        if(t < 0) t += 1;
        if(t > 1) t -= 1;
        if(t < 1/6) return p + (q - p) * 6 * t;
        if(t < 1/2) return q;
        if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
      }
      var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      var p = 2 * l - q;
      r = hue2rgb(p, q, h + 1/3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1/3);
    }
    return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
    };
    return function(){
      h += golden_ratio_conjugate;
      h %= 1;
      return hslToRgb(h, 0.6, 0.60);
    };
  })();
    
  var row = grid.selectAll(".row")
    .data(gridData)
    .enter()
    .append("g")
    .attr("class", "row")
//   	.style("fill", function(d,i){return color(i);});
  
  var column = row.selectAll(".square")
    .data(function(d) { return d; })
    .enter()
    .append("rect")
//   t = randomTexture();
//   column.call(t);
//   column.append("rect")
//   .style("fill", t.url());
    .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", randomTexture().url());
//     .style("fill", function(d,i){return color(i);});
    .style("fill", randomColor);
  
  
//   column.call(t)
//   column.append("rect")
//     .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", t.url())
  
  </script>
</body>

Updated missing url https://cdn.rawgit.com/riccardoscalco/textures/master/textures.min.js to https://cdn.jsdelivr.net/gh/riccardoscalco/textures/textures.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3fc/10.1.0/d3fc.bundle.min.js

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js

https://cdn.rawgit.com/riccardoscalco/textures/master/textures.min.js

https://d3js.org/d3.v4.min.js