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>
    // Manual reordering, removing specific colors
    mixedColors = ["#804a1e","#9e7e70", "#9e977e", "#805c6e", "#ce617a", "#ce496c",  "#ce018a", "#9e378e", "#9d02d7", "#6d38dc", "#4f4b6c", "#4f5dbc", "#3d6de0", "#1f93c0", "#00b8a0", "#1f8170", "#00a650", "#009400", "#80bc5e", "#80a450", "#80aa0e", "#809200", "#ffc01c", "#ffa80e", "#ff8f00",   "#ff602c", "#ff481e", "#ff003c"];
    
       uniqueColors = ["#804a1e","#9e7e70", "#9e977e", "#805c6e", "#ce617a", "#ce496c",  "#ce018a", "#9e378e", "#9d02d7", "#6d38dc", "#4f4b6c", "#4f5dbc", "#3d6de0", "#1f93c0", "#00b8a0", "#1f8170", "#00a650", "#009400", "#80bc5e", 
                       // puke green
                       //"#80a450", 
                       "#80aa0e", "#809200", "#ffc01c", 
                       // medium orange-yellow
                       //"#ffa80e", 
                       "#ff8f00",   "#ff602c", 
                       //red-orange, near primary red
                       //"#ff481e", 
                       "#ff003c"];
    
    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"];
    
    var colors = ["#3d6de0",
"#ff003c",
"#9d02d7",
"#00b8a0",
"#009400",
"#ffc01c",
"#ff8f00"].sort();
    
    let color_matrix = [];
    
    for(i in colors) {
      for(j in colors){
          color = chroma.mix(colors[j], colors[i]);
          color_matrix.push({'i': i, 'j': j, 'hue': color.hsv(), 'fill': color.hex()})
      }
    }
    color_matrix = color_matrix.sort((a,b) => a.hue[0] > b.hue[0] ? -1 : 1);
    console.log([... new Set(color_matrix.map(d=>d.fill))]);
    let rect_size = 30;
    
    // Result of color mixing
​
​
let colorTones = function(color, vals) {
  let arr = [];
      for(let i = vals.length -1 ; i >= 0; i--) {
        console.log(i)
    arr.push(chroma(color).darken(vals[i]))
  }
​
  arr.push(color)
  
    for(let j = 0; j < vals.length; j++) {
    arr.push(chroma(color).brighten(vals[j]))
  }
  return(arr)
}
​
​
​
​
light_dark = colorTones("#804a1e", d3.range(0.25,3, 0.25));
    
​
    // 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)
​
    svg.selectAll('rect').data(color_matrix)
      .enter().append("rect")
      .attr("y", d => d.j*rect_size + 200)
      .attr("x", (d,i) => d.i*rect_size + 100)
      .attr("width", rect_size)
      .attr("height", rect_size)
      .style("fill", d => d.fill);
​
    
    
        svg.selectAll('.rect').data(color_matrix)
      .enter().append("rect")
      .attr("y", d => d.j*rect_size + 200)
      .attr("x", (d,i) => d.i*rect_size + 100)
      .attr("width", rect_size)
      .attr("height", rect_size)
      .style("fill", d => d.fill)
        .transition()
        .delay(4000)
        .duration(1000)
      .attr("y", d => 450)
      .attr("x", (d,i) => i*rect_size/2 + 100)
      .attr("width", rect_size/2)
      .attr("height", rect_size);
    
    
    // Mixed results
            svg.selectAll('.mixed-rect').data(mixedColors)
      .enter().append("rect")
      .attr("y", d => 0)
      .attr("x", (d,i) => i*rect_size + 100)
      .attr("width", rect_size)
      .attr("height", rect_size)
      .style("fill", d => d);
    
        // Unique results
            svg.selectAll('.unique-rect').data(uniqueColors)
      .enter().append("rect")
      .attr("y", d => rect_size*1.5)
      .attr("x", (d,i) => i*rect_size + 100)
      .attr("width", rect_size)
      .attr("height", rect_size)
      .style("fill", d => d);
    
          // Ordered results
            svg.selectAll('.ordered-rect').data(orderedColors)
      .enter().append("rect")
      .attr("y", d => rect_size*3)
      .attr("x", (d,i) => i*rect_size + 100)
      .attr("width", rect_size)
      .attr("height", rect_size)
      .style("fill", d => d);
    
    
             // lighter/darker results
            svg.selectAll('.ordered-rect').data(light_dark)
      .enter().append("rect")
      .attr("y", d => rect_size*4.25)
      .attr("x", (d,i) => i*rect_size + 100)
      .attr("width", rect_size)
      .attr("height", rect_size)
      .style("fill", d => d);
    
            // Label w/ idx
            svg.selectAll('text').data(uniqueColors)
      .enter().append("text")
      .attr("y", d => rect_size*1.5 + rect_size/2)
      .attr("x", (d,i) => i*rect_size + rect_size/2 + 100)
      .text((d,i) => i);
    
                // Label w/ hex value
            svg.selectAll('.text').data(uniqueColors)
      .enter().append("text")
            .attr('class', 'hex')
      .attr("y", d => rect_size*1.25)
      .attr("x", (d,i) => i*rect_size + rect_size/2 + 100)
      .text((d,i) => d);
​
  </script>
</body>
​
    