Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@NelsonMinar

NelsonMinar/index.html

Created November 16, 2012 00:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NelsonMinar/4082681 to your computer and use it in GitHub Desktop.
Save NelsonMinar/4082681 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstration of red/blue interpolation options
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment