D3 Examples - color mixing

xxxxxxxxxx
 
<!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>
​
    