color mixing - lighten/darken

forked from flaneuse's block: color mixing

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.7/chroma.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    text {
      font-size: 18px;
      fill: white;
      text-anchor: middle;
      alignment-baseline: central;
    }
    
    .hex {
      font-size: 7px;
      fill: black;
      font-family: sans-serif;
    }
  </style>
</head>

<body>
  <script>
    let rect_size = 30;    
    
    orderedColors = ["#00b8a0", "#ff602c","#00a650", "#9d02d7", "#3d6de0","#ffc01c",
      "#804a1e", "#ce496c","#80bc5e", "#6d38dc", "#9e7e70",
                     "#1f93c0","#ff8f00",  "#ce018a","#009400",
                      "#9e977e", "#4f5dbc","#ce617a","#80aa0e", 
                     "#805c6e",  "#1f8170",    "#9e378e",  "#4f4b6c",                            "#809200",  
                         "#ff003c", "9ba4ae"];

// Result of color mixing

let colorTones = function(colors, vals) {
  let arr = [];

for(let k =0; k < colors.length; k++){
    let counter = 0;
      for(let i = vals.length -1 ; i >= 0; i--) {
    arr.push({'row': k, 'col': counter,'fill': chroma(colors[k]).darken(vals[i])})
    counter++;
  }

arr.push({'row': k, 'col': counter,'fill': chroma(colors[k])})
		counter++;
  
    for(let j = 0; j < vals.length; j++) {
    arr.push({'row': k, 'col': counter,'fill': chroma(colors[k]).brighten(vals[j])})
       counter++;
  }
}
  return(arr)
}

light_dark = colorTones(orderedColors, d3.range(0.25,2.75, 0.25));

// light_dark = colorTones(orderedColors, d3.ticks(0.25,2.75, 2));
    
//     console.log(light_dark)

// Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

// lighter/darker results
svg.selectAll('.ordered-rect').data(light_dark)
      .enter().append("rect")
      .attr("y", d => d.row*rect_size)
      .attr("x", (d) => d.col*rect_size)
      .attr("width", rect_size)
      .attr("height", rect_size)
      .style("fill", d => d.fill);

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.7/chroma.min.js