4.0 Color Scales - Sequential by pstuffa

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.v4.min.js"></script>
<script src="//d3js.org/d3-scale-chromatic.v0.3.min.js"></script>

<script>
//JS to go here
var interpolators = [
    // These are from d3-scale.
    "Viridis",
    "Inferno",
    "Magma",
    "Plasma",
    "Warm",
    "Cool",
    "Rainbow",
    "CubehelixDefault",
    // These are from d3-scale-chromatic
    "Blues",
    "Greens",
    "Greys",
    "Oranges",
    "Purples",
    "Reds",
    "BuGn",
    "BuPu",
    "GnBu",
    "OrRd",
    "PuBuGn",
    "PuBu",
    "PuRd",
    "RdPu",
    "YlGnBu",
    "YlGn",
    "YlOrBr",
    "YlOrRd"
  ];

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