legend

<!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");

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

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

https://d3js.org/topojson.v1.min.js