Skip to content

Instantly share code, notes, and snippets.

@poezn
Created August 12, 2014 16:11
Show Gist options
  • Save poezn/822b9b19c4a934a6b038 to your computer and use it in GitHub Desktop.
Save poezn/822b9b19c4a934a6b038 to your computer and use it in GitHub Desktop.
Color interpolations
{"description":"Color interpolations","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/24mmz7c.png"}
var numSteps = 15;
var width = 500;
var step = Math.ceil(width/numSteps);
var colors = ['#ffbb00', '#0074c1'];
//var colors = ['#FF0000', '#00FF00'];
var dom = [0, numSteps-1];
var colorScale1 = d3.scale.linear().domain(dom).range(colors).interpolate(d3.interpolateRgb);
var colorScale2 = d3.scale.linear().domain(dom).range(colors).interpolate(d3.interpolateHsl);
var colorScale3 = d3.scale.linear().domain(dom).range(colors).interpolate(d3.interpolateHcl);
var colorScale4 = d3.scale.linear().domain(dom).range(colors).interpolate(d3.interpolateLab);
g.selectAll('rect.rgb')
.data(d3.range(numSteps))
.enter().append('rect')
.attr({
width: step,
height: 50,
transform: function(d, i) {
return 'translate(' + [50 + i*step, 50] + ')'
},
fill: function(d, i) {
return colorScale1(d);
},
class: 'rgb'
});
g.selectAll('rect.lab')
.data(d3.range(numSteps))
.enter().append('rect')
.attr({
width: step,
height: 50,
transform: function(d, i) {
return 'translate(' + [50 + i*step, 150] + ')'
},
fill: function(d, i) {
return colorScale4(d);
},
class: 'lab'
});
g.selectAll('rect.hsl')
.data(d3.range(numSteps))
.enter().append('rect')
.attr({
width: step,
height: 50,
transform: function(d, i) {
return 'translate(' + [50 + i*step, 250] + ')'
},
fill: function(d, i) {
return colorScale2(d);
},
class: 'hsl'
});
g.selectAll('rect.hcl')
.data(d3.range(numSteps))
.enter().append('rect')
.attr({
width: step,
height: 50,
transform: function(d, i) {
return 'translate(' + [50 + i*step, 350] + ')'
},
fill: function(d, i) {
return colorScale3(d);
},
class: 'hcl'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment