chroma d3 tests IV

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

forked from fogonwater's block: chroma d3 tests III

<!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('#FFFDE3')},
      {'label':'Pleistocene', 'col': chroma('#FFFDE3')},
      {'label':'Tertiary', 'col':    chroma('#FFDC91')},
      {'label':'Cretaceous', 'col':  chroma('#EFED86')},
      {'label':'Jurassic', 'col':    chroma('#B4DDC0')},
      {'label':'Triassic', 'col':    chroma('#78CDD1')},
      {'label':'Permian', 'col':     chroma('#00C0F3')},
      {'label':'Carboniferous','col':chroma('#717EBD')},
      {'label':'Devonian', 'col':    chroma('#B39ABC')},
      {'label':'Silurian', 'col':    chroma('#B37AB4')},
      {'label':'Ordovician', 'col':  chroma('#D792B3')},
      {'label':'Cambrian', 'col':    chroma('#B96858')},
      {'label':'Proterozoic', 'col': chroma('#DAD5DB')}
    ]
  
    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