public
Last active

Demonstration of red/blue interpolation options

  • Download Gist
index.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
<!DOCTYPE html>
<html> <head>
<script src="http://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 http://enjalot.com/tributary/3650755/
 
var w = 390;
// Colors from http://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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.