Demonstration of red/blue interpolation options by NelsonMinar

index.html

<!DOCTYPE html>
<html> <head>
<script src="//d3js.org/d3.v2.js"></script>
<style type="text/css">
svg text { font: 12px sans-serif; fill: white; text-anchor: middle; opacity: 0.7;}
h2 { font-family: Helvetica; font-size: 16px; padding: 8px 0px 3px 0px; margin: 0 0 0 0; }
</style>
</head>

<body>

<script>

// Code originally derived from //enjalot.com/tributary/3650755/

var w = 390;
// Colors from //elections.nytimes.com/2012/results/president
var nytimes = ["#b43030", "#405695" ];
var ugly = ["#ff0000", "#0000ff" ];

var data1 = d3.range(w/2);

function addBars(interpolator, label, colors) {
  var svg = d3.select("body")
    .append("div")
    .append("svg:svg")
      .attr("width", w).attr("height", 40);
  var rects = svg.append("svg:g")
      .selectAll("rect")
      .data(data1);
  svg.append("text")
    .text(label)
    .attr("transform", "translate(" + w/2 + ",36)");

  var colorScale = d3.scale.linear()
      .domain([d3.min(data1), d3.max(data1)])
      //.interpolate(d3.interpolateHsl)
      //.interpolate(d3.interpolateLab)
      .interpolate(interpolator)
      .range(colors);


  rects.enter()
    .append("rect")
    .attr({
      width: 2,
      height: 40,
      y: 0,
      x: function(d,i) {
        return i * 2;
      },
      fill: function(d,i) {
        return colorScale(d);
      }
    })
};

d3.select("body").append("h2").text("Party logo colors");
addBars(d3.interpolateRgb, "RGB", nytimes);
addBars(d3.interpolateHsl, "HSL", nytimes);
addBars(d3.interpolateLab, "LAB", nytimes);
addBars(d3.interpolateHcl, "HCL", nytimes);

d3.select("body").append("h2").text("#ff0000 to #0000ff");
addBars(d3.interpolateRgb, "RGB", ugly);
addBars(d3.interpolateHsl, "HSL", ugly);
addBars(d3.interpolateLab, "LAB", ugly);
addBars(d3.interpolateHcl, "HCL", ugly);



</script>
</body> </html>