color scale tests - 2D

_.md

[ Launch: color scale tests ] 9344752 by smee

config.json

{"description":"color scale tests - 2D","endpoint":"","display":"svg","public":true,"require":[{"name":"D3","url":"https://raw.github.com/mbostock/d3/master/d3.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/w70u9as.gif","inline-console":true}

inlet.js

var interpolators = {
  "HSL": d3.interpolateHsl,
  "HCL": d3.interpolateHcl,
  "Lab": d3.interpolateLab,
  "RGB": d3.interpolateRgb
};

var width = 960;
    height = 500;

var y = d3.scale.ordinal()
    .domain(d3.keys(interpolators))
    .rangeRoundBands([0, height], 0.1);

var values = d3.range(30);

var color = d3.scale.linear()
    .domain([0, values.length - 1])
    .range(["hsl(112,100%,70%)", "hsl(0,100%,78%)"]);

var brightrange = d3.scale.linear()
    .domain([d3.max(values),0])
    .range([0,3]);  

function colorWithAge(value,shift) {
     if (shift >= 0) {
       return d3.hsl(color(value)).darker(brightrange(shift));
     }else {
       return d3.hsl(color(value)).brighter(brightrange(-shift));
     }             
} 
var valuesWithAge = values.map(function(d){return d3.range(20).map(function(i){return [d,i]})});

var x = d3.scale.ordinal()
    .domain(values)
    .rangeRoundBands([14, width - 14]);



var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.selectAll("g")
    .data(d3.entries(interpolators))
  .enter().append("g")
    .attr("transform", function(d) { return "translate(0," + y(d.key) + ")"; });

g.each(function(d) {
  color.interpolate(d.value);

  var columns=d3.select(this)               
               .selectAll("g")
                .data(valuesWithAge)
                .enter()
                .append("g")
                   .attr("transform", function(d) { return "translate(" + x(d[0][0]) + ",0)"; });
                   
  
  columns.selectAll("rect")    
  .data(function(d){return d;})       
  .enter().append("rect")
  .attr("y", function(d){ return d[1]*5;})
            .attr("width", x.rangeBand())
            .attr("height", "15")
            .style("fill", function(d){ return colorWithAge(d[0],d[1]); });
});

g.append("text")
    .attr("x", 28)
    .attr("y", y.rangeBand() / 2)
    .attr("dy", ".35em")
   // .attr("fill","#FFFFFF")
    .text(function(d) { return d.key; });