chroma d3 tests III

Mini tool for mucking about with a shaded relief palette through code.

<!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;font-family: monospace}
    .swatch {
       color: #444;
       float: left;
       font-family: sans-serif;
       font-size: 0.8em;
       margin: 1px;
       padding: 4px;
       width: 105px;
       height: 70px;
    }
    textarea {margin-top: 6px;}
  </style>
</head>

<body>
  <div id="viz"></div>
  <div style="clear:left;margin-top:20px;">&nbsp;</div>
  
  
  <script>
    const data = [
      {'label':'Quaternary', 'col': chroma('#c7c5a7').saturate(2).brighten(2)},
      {'label':'Pleistocene', 'col': chroma('#c7c5a7').saturate(2).brighten(2)},
      {'label':'Tertiary', 'col': chroma('orange').saturate(1).brighten(.8)},
      {'label':'Cretaceous', 'col': chroma('#556b2f').saturate(1).brighten(1.5)},
      {'label':'Jurassic', 'col': chroma('green').saturate(2).brighten(1.5)},
      {'label':'Triassic', 'col': chroma('#2b867d').saturate(1).brighten(0.5)},
      {'label':'Permian', 'col': chroma('#659bb7').saturate(1).brighten(.7)},
      {'label':'Carboniferous', 'col': chroma('#5d678b').saturate(0.5).brighten(1)},
      {'label':'Devonian', 'col': chroma('#714e6c').saturate(1).brighten(1.5)},
      {'label':'Silurian', 'col': chroma('#6f424d').saturate(1).brighten(1)},
      {'label':'Ordovician', 'col': chroma('#b6768d').saturate(1).brighten(.5)},
      {'label':'Cambrian', 'col': chroma('maroon').saturate(0).brighten(1)},
      {'label':'Proterozoic', 'col': chroma('#381714')}
    ]
  
    d3.select("#viz").selectAll("div")
        .data(data)
      .enter().append("div")
        .style("background", function(d) {return d.col})
    	.text(function(d){ return d.label; })
    	.attr("class", "swatch")
    
    //[ageperiod='Tertiary'] {polygon-fill: #444;}
    const report = data.map(function(d, i){
      return "[ageperiod='" + d.label + "'] {polygon-fill: " + d.col.hex() + ";}<br/>"
    })
    
    //d3.select("#out")
  	//	.text(JSON.stringify(report, null, 4));
    report.forEach(function(d) {
      document.write(d)}
    )

</script>
</body>

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

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