palettes [UNLISTED]

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // 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)

var inter = d3.interpolate('#fcd745','#e3322d');
    
    var palettes = [
      ['#0ba64e','#9ddf57','#e5e54c','#d4b31f','#faaf0f','#ff840a','#e4280f'],
      ['#c9e1f5', '#a8cde9', '#74acd9', '#2e71ad', '#163e81'],
      [inter(0), inter(0.20), inter(0.55), inter(0.80), inter(1), d3.rgb(inter(1)).darker()],
['#66c2a5','#fc8d62','#8da0cb','#e78ac3','#a6d854','#ffd92f','#e5c494'],      ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#efef00','#b15928', '#bc80bd', '#ccebc5'],
                    ];
    
    var p = svg.selectAll('g.palette')
      .data(palettes)
      .enter()
    .append('g')
    .classed('palette', true)
      .attr("transform", (d,i) => `translate(0,${61*i})`)
    .selectAll('g')
    .data(d => d)
    .enter()
      .append("g")
      .attr("transform", (d,i) => `translate(${61*i},0)`)
    ;
    
    p.append('rect')
    .attr('fill', d => d)
    .attr('height', 60)
    .attr('width', 60)

p.append('text')
      .attr("transform", ('translate(5,35)'))
    .text(d => d);

</script>
</body>

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