chroma d3 tests II

Mini tool for mucking about with a shaded relief palette through code. Textarea is a report; not an input.

forked from fogonwater's block: chroma d3 tests

<!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.4/chroma.min.js"></script>
  <style>
    body { margin:10px;}
    .swatch {
       color: #444;
       float: left;
       font-family: sans-serif;
       font-size: 0.8em;
       margin: 1px;
       padding: 4px;
       width: 75px;
       height: 70px;
    }
    textarea {margin-bottom: 6px;}
  </style>
</head>

<body>
  <textarea id="out" rows="2" cols="90"></textarea>
  <div id="viz"></div>
  
  <script>
    const num_cols = 7,
          data = d3.range(0,num_cols),
          color = chroma
    				.scale([
              chroma('#b893a9').saturate(2).brighten(1.5),
              chroma('#a86a89').saturate(1.5).brighten(),
              chroma('#6584b7').saturate(1).brighten(.5),
              chroma('#66578b').saturate(1.2).brighten(),
              chroma('#534483').saturate(1).brighten(.5),
              chroma('#7f8082'),
              chroma('#66686a')
            ])
    				//.mode('lch')
    				.colors(num_cols)
  
    d3.select("#viz").selectAll("div")
        .data(data)
      .enter().append("div")
        .style("background", function(d) {return color[d]})
    	.text(function(d){ return color[d]; })
    	.attr("class", "swatch")
    
    const report = data.map(function(d, i){
      return color[d]
    })
    
    d3.select("#out")
  		.text(JSON.stringify(report));

</script>
</body>

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

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