Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Demonstration of red/blue interpolation options
<!DOCTYPE html>
<html> <head>
<script src=""></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; }
// Code originally derived from
var w = 390;
// Colors from
var nytimes = ["#b43030", "#405695" ];
var ugly = ["#ff0000", "#0000ff" ];
var data1 = d3.range(w/2);
function addBars(interpolator, label, colors) {
var svg ="body")
.attr("width", w).attr("height", 40);
var rects = svg.append("svg:g")
.attr("transform", "translate(" + w/2 + ",36)");
var colorScale = d3.scale.linear()
.domain([d3.min(data1), d3.max(data1)])
width: 2,
height: 40,
y: 0,
x: function(d,i) {
return i * 2;
fill: function(d,i) {
return colorScale(d);
};"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);"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);
</body> </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.