fresh block by wboykinm

index.html

<!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>
    var width = 960,
        height = 600;

    var fill = d3.scaleLinear()
      .domain([0, 100])
      .range(["white", "darkblue"]);

    var x1 = d3.scaleLinear()
      .domain([0, 100])
      .range([0,width/2.5]);
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

    var legendAxis = d3.axisBottom()
      .ticks(5)
      .scale(x1)
      .tickSize(22)
      .tickFormat(d3.format(".0f%"));

    var legend = svg.append('g')
      .attr("transform", "translate(" + width * .5 + "," + (height * .85) + ")")
      .attr('class','key');
	
    legend.selectAll("rect")
      .data(pair(x1.ticks(20)))
      .enter().append("rect")
        .attr("height", 20)
        .attr("x", function(d) { return x1(d[0]); })
        .attr("width", function(d) { return x1(d[1]) - x1(d[0]); })
        .style("fill", function(d) { return fill(d[0]); });
  </script>
</body>