Fabio Crameri’s Colormaps by fil

index.html

<!DOCTYPE html>
<html>
<body>
<style>
body {
  font: 12px sans-serif;
}
div {
  max-width: 950px;
}
</style>
<div class="container"></div>
<div class="sequentialButtons">Sequential Color Scales: </div>

<script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="colormaps.js"></script>

<script>
  

var width = 960,
    height = 500;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")

var colorScale = d3.scaleSequential(d3.interpolateBerlin)
    .domain([0, width])

var bars = svg.selectAll(".bars")
    .data(d3.range(width), function(d) { return d; })
  .enter().append("rect")
    .attr("class", "bars")
    .attr("x", function(d, i) { return i; })
    .attr("y", 0)
    .attr("height", height)
    .attr("width", 1)
    .style("fill", function(d, i ) { return colorScale(d); })

var sequentialButtons = d3.select(".sequentialButtons")
    .selectAll("button")
    .data(Object.keys(colormaps))
    .enter().append("button")
    .text(function(d) { return d; })
    .on("click", function(buttonValue) {

      var colorScale = d3.scaleSequential(d3["interpolate" + buttonValue])
        .domain([0, width]);

      svg.selectAll(".bars")
        .transition()
        .style("fill", function(d) { return colorScale(d); });

    });


</script>