Color interpolations

_.md

[ Launch: Color interpolations ] 822b9b19c4a934a6b038 by poezn
[ Launch: Color interpolations ] 5037035 by poezn

config.json

{"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"}

inlet.js

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'
	});