4.0 Color Scales - Sequential

<!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>

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.interpolateInferno)
    .domain([0, width])

var sequentialButtons = d3.select(".sequentialButtons")
    .selectAll("button")
    .data(interpolators)
    .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>

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

https://d3js.org/d3-scale-chromatic.v0.3.min.js