legend by wboykinm

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
  position: relative;
  background-color:rgba(0,0,0,0);
}
.key {
  font: 10px sans-serif;
  position: absolute;
  top: 0;
  left: 0;
}
.caption {
  font-weight: bold;
}
.key path {
  display: none;
}
.key line {
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 500,
    height = 100,
    borderRadiusX = 18,
    borderRadiusY = (18);
var color = d3.scaleLinear()
    .domain([0, 0.5, 1])
    .range(["#ffffcc", "#41b6c4", "#081d58"])
    .interpolate(d3.interpolateHcl);
var x = d3.scaleLinear()
    .domain([0, 1])
    .range([0, 400]);
var xAxis = d3.axisBottom()
    .scale(x)
    .tickSize(53)
    .tickFormat(d3.format("+.0f"));
var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);
var context = canvas.node().getContext("2d");

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "key")
  .append("g")
    //.attr("transform", "translate(10," + (height - 10) + ")");
svg.selectAll("rect")
    .data(pair(x.ticks(9)))
  .enter().append("rect")
    .attr("height", 10)
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })
    .style("fill", function(d) { return color(d[0]); })
		.attr({ry : borderRadiusX, rx : borderRadiusY });

function pair(array) {
  return array.slice(1).map(function(b, i) {
    return [array[i], b];
  });
}
</script>