color scale test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
    var range = d3.range(-1, 1, 0.05);
    var padding = 2;
    var normalisedPadding = (padding * (range.length - 1) / range.length);
    var width = (svg.attr('width') / range.length) - normalisedPadding;
    var height = svg.attr('height') / 2;

var colorScaleThreshold = d3.scale.threshold()
        .domain([-0.5, -0.15, 0, 0.15, 0.5])
//        .domain([-0.5, -0.25, 0, 0.25, 0.5]) // Use this for equal buckets
        .range(["#e03d46", "#f4a098", "#f9cac6", '#d5e3f2', '#a2c1e1', '#579dd5'])
   
    var colorScaleLinear = d3.scale.linear()
        .domain([-0.5, -0.15, 0, 0.15, 0.5])
//        .domain([-0.5, -0.25, 0, 0.25, 0.5]) // Use this for equal buckets
        .range(["#e03d46", "#f4a098", "#f9cac6", '#d5e3f2', '#a2c1e1', '#579dd5'])
   
    svg.selectAll('rect.threshold')
      .data(range)
      .enter()
      .append('rect')
    	.classed('threshold', true)
    	.attr('width', width)
      .attr('height', height)
    	.attr('x', (d, i) => i * (width + padding))
      .attr('y', 0)
    	.attr('fill', (d) => colorScaleThreshold(d));
    
    svg.selectAll('rect.linear')
      .data(range)
      .enter()
      .append('rect')
    	.classed('linear', true)
    	.attr('width', width)
      .attr('height', height)
    	.attr('x', (d, i) => i * (width + padding))
      .attr('y', height)
      .attr('fill', (d) => colorScaleLinear(d));

</script>
</body>

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